mirror of
https://github.com/twentyhq/twenty.git
synced 2024-12-25 04:55:30 +03:00
Inbox task 2 (#991)
* Add ability to properly cast a string, number, null to an integer * Adding Tab UI component * Only trigger chromatic when asked
This commit is contained in:
parent
fc7380e0b8
commit
28765fe7c3
1
.github/workflows/ci-chromatic.yaml
vendored
1
.github/workflows/ci-chromatic.yaml
vendored
@ -7,6 +7,7 @@ on:
|
||||
pull_request_target:
|
||||
jobs:
|
||||
chromatic-deployment:
|
||||
if: ${{ github.event.label.name == 'run-chromatic' || github.event_name == 'push' }}
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
REACT_APP_API_URL: http://127.0.0.1:3000/graphql
|
||||
|
@ -39,6 +39,12 @@ export const Catalog: Story = {
|
||||
parameters: {
|
||||
pseudo: { hover: ['.hover'], active: ['.active'] },
|
||||
catalog: [
|
||||
{
|
||||
name: 'states',
|
||||
values: ['default', 'hover', 'active', 'disabled'],
|
||||
props: (state: string) =>
|
||||
state === 'default' ? {} : { className: state },
|
||||
},
|
||||
{
|
||||
name: 'variants',
|
||||
values: Object.values(ChipVariant),
|
||||
@ -54,12 +60,6 @@ export const Catalog: Story = {
|
||||
values: Object.values(ChipAccent),
|
||||
props: (accent: ChipAccent) => ({ accent }),
|
||||
},
|
||||
{
|
||||
name: 'states',
|
||||
values: ['default', 'hover', 'active', 'disabled'],
|
||||
props: (state: string) =>
|
||||
state === 'default' ? {} : { className: state },
|
||||
},
|
||||
],
|
||||
},
|
||||
decorators: [CatalogDecorator],
|
||||
|
37
front/src/modules/ui/tab/components/Tab.tsx
Normal file
37
front/src/modules/ui/tab/components/Tab.tsx
Normal file
@ -0,0 +1,37 @@
|
||||
import * as React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
type OwnProps = {
|
||||
title: string;
|
||||
active?: boolean;
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
};
|
||||
|
||||
const StyledTab = styled.div<{ active?: boolean }>`
|
||||
align-items: center;
|
||||
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
|
||||
border-color: ${({ theme, active }) =>
|
||||
active ? theme.border.color.inverted : 'transparent'};
|
||||
color: ${({ theme, active }) =>
|
||||
active ? theme.font.color.primary : theme.font.color.secondary};
|
||||
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: ${({ theme }) => theme.spacing(2) + ' ' + theme.spacing(4)};
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
border-color: ${({ theme }) => theme.border.color.inverted};
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
}
|
||||
`;
|
||||
|
||||
export function Tab({ title, active = false, onClick, className }: OwnProps) {
|
||||
return (
|
||||
<StyledTab onClick={onClick} active={active} className={className}>
|
||||
{title}
|
||||
</StyledTab>
|
||||
);
|
||||
}
|
@ -0,0 +1,47 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
|
||||
import { Tab } from '../Tab';
|
||||
|
||||
const meta: Meta<typeof Tab> = {
|
||||
title: 'UI/Tab/Tab',
|
||||
component: Tab,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Tab>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
title: 'Tab title',
|
||||
active: false,
|
||||
},
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export const Catalog: Story = {
|
||||
args: { title: 'Tab title' },
|
||||
argTypes: {
|
||||
active: { control: false },
|
||||
onClick: { control: false },
|
||||
},
|
||||
parameters: {
|
||||
pseudo: { hover: ['.hover'], active: ['.active'] },
|
||||
catalog: [
|
||||
{
|
||||
name: 'states',
|
||||
values: ['default', 'hover', 'active'],
|
||||
props: (state: string) =>
|
||||
state === 'default' ? {} : { className: state },
|
||||
},
|
||||
{
|
||||
name: 'Active',
|
||||
values: ['true', 'false'],
|
||||
props: (active: string) => ({ active: active === 'true' }),
|
||||
},
|
||||
],
|
||||
},
|
||||
decorators: [CatalogDecorator],
|
||||
};
|
Loading…
Reference in New Issue
Block a user