admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix margin on DeleteModal overlay (#998)

Browse Source 
* Fix margin on DeleteModal overlay

* Update chromatic ci triggers

* Update chromatic ci triggers
This commit is contained in:
Charles Bochet
2023-07-30 13:17:33 -07:00
committed by GitHub
parent be835af48b
commit eafa30a9cf
24 changed files with 388 additions and 335 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
front/src/modules/ui/button/components/__stories__/Button.stories.tsx
View File

@ -50,13 +50,15 @@ export const Sizes: Story = {
size: { control: false },
},
parameters: {
catalog: [
{
name: 'sizes',
values: Object.values(ButtonSize),
props: (size: ButtonSize) => ({ size }),
},
],
catalog: {
dimensions: [
{
name: 'sizes',
values: Object.values(ButtonSize),
props: (size: ButtonSize) => ({ size }),
},
],
},
},
decorators: [CatalogDecorator],
};
@ -68,22 +70,24 @@ export const Variants: Story = {
},
parameters: {
pseudo: { hover: ['.hover'], active: ['.active'], focus: ['.focus'] },
catalog: [
{
name: 'state',
values: ['default', 'disabled', 'hover', 'active', 'focus'],
props: (state: string) => {
if (state === 'disabled') return { disabled: true };
if (state === 'default') return {};
return { className: state };
catalog: {
dimensions: [
{
name: 'state',
values: ['default', 'disabled', 'hover', 'active', 'focus'],
props: (state: string) => {
if (state === 'disabled') return { disabled: true };
if (state === 'default') return {};
return { className: state };
},
},
},
{
name: 'variants',
values: Object.values(ButtonVariant),
props: (variant: ButtonVariant) => ({ variant }),
},
],
{
name: 'variants',
values: Object.values(ButtonVariant),
props: (variant: ButtonVariant) => ({ variant }),
},
],
},
},
decorators: [CatalogDecorator],
};
@ -93,30 +97,34 @@ export const Positions: Story = {
position: { control: false },
},
parameters: {
catalog: [
{
name: 'positions',
values: ['none', ...Object.values(ButtonPosition)],
props: (position: ButtonPosition | 'none') =>
position === 'none' ? {} : { position },
},
],
catalog: {
dimensions: [
{
name: 'positions',
values: ['none', ...Object.values(ButtonPosition)],
props: (position: ButtonPosition | 'none') =>
position === 'none' ? {} : { position },
},
],
},
},
decorators: [CatalogDecorator],
};
export const WithAdornments: Story = {
parameters: {
catalog: [
{
name: 'adornments',
values: ['with icon', 'with soon pill'],
props: (value: string) =>
value === 'with icon'
? { icon: <IconSearch size={14} /> }
: { soon: true },
},
],
catalog: {
dimensions: [
{
name: 'adornments',
values: ['with icon', 'with soon pill'],
props: (value: string) =>
value === 'with icon'
? { icon: <IconSearch size={14} /> }
: { soon: true },
},
],
},
},
decorators: [CatalogDecorator],
};

48
front/src/modules/ui/chip/components/__stories__/Chip.stories.tsx
View File

@ -38,29 +38,31 @@ 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),
props: (variant: ChipVariant) => ({ variant }),
},
{
name: 'sizes',
values: Object.values(ChipSize),
props: (size: ChipSize) => ({ size }),
},
{
name: 'accents',
values: Object.values(ChipAccent),
props: (accent: ChipAccent) => ({ accent }),
},
],
catalog: {
dimensions: [
{
name: 'states',
values: ['default', 'hover', 'active', 'disabled'],
props: (state: string) =>
state === 'default' ? {} : { className: state },
},
{
name: 'variants',
values: Object.values(ChipVariant),
props: (variant: ChipVariant) => ({ variant }),
},
{
name: 'sizes',
values: Object.values(ChipSize),
props: (size: ChipSize) => ({ size }),
},
{
name: 'accents',
values: Object.values(ChipAccent),
props: (accent: ChipAccent) => ({ accent }),
},
],
},
},
decorators: [CatalogDecorator],
};

58
front/src/modules/ui/input/components/__stories__/Checkbox.stories.tsx
View File

@ -39,36 +39,38 @@ export const Catalog: Story = {
shape: { control: false },
},
parameters: {
catalog: [
{
name: 'state',
values: ['unchecked', 'checked', 'indeterminate'],
props: (state: string) => {
if (state === 'checked') {
return { checked: true };
}
catalog: {
dimensions: [
{
name: 'state',
values: ['unchecked', 'checked', 'indeterminate'],
props: (state: string) => {
if (state === 'checked') {
return { checked: true };
}
if (state === 'indeterminate') {
return { indeterminate: true };
}
if (state === 'indeterminate') {
return { indeterminate: true };
}
},
},
},
{
name: 'shape',
values: Object.values(CheckboxShape),
props: (shape: CheckboxShape) => ({ shape }),
},
{
name: 'variant',
values: Object.values(CheckboxVariant),
props: (variant: CheckboxVariant) => ({ variant }),
},
{
name: 'size',
values: Object.values(CheckboxSize),
props: (size: CheckboxSize) => ({ size }),
},
],
{
name: 'shape',
values: Object.values(CheckboxShape),
props: (shape: CheckboxShape) => ({ shape }),
},
{
name: 'variant',
values: Object.values(CheckboxVariant),
props: (variant: CheckboxVariant) => ({ variant }),
},
{
name: 'size',
values: Object.values(CheckboxSize),
props: (size: CheckboxSize) => ({ size }),
},
],
},
},
decorators: [CatalogDecorator],
};

42
front/src/modules/ui/progress-bar/components/__stories__/ProgressBar.stories.tsx
View File

@ -35,26 +35,28 @@ export const Catalog = {
autoStart: defaultArgTypes,
},
parameters: {
catalog: [
{
name: 'animation',
values: [true, false],
props: (autoStart: string) => ({ autoStart }),
labels: (autoStart: string) => `AutoStart: ${autoStart}`,
},
{
name: 'colors',
values: [undefined, 'blue'],
props: (barColor: string) => ({ barColor }),
labels: (color: string) => `Color: ${color ?? 'default'}`,
},
{
name: 'sizes',
values: [undefined, 10],
props: (barHeight: number) => ({ barHeight }),
labels: (size: number) => `Size: ${size ? size + ' px' : 'default'}`,
},
],
catalog: {
dimensions: [
{
name: 'animation',
values: [true, false],
props: (autoStart: string) => ({ autoStart }),
labels: (autoStart: string) => `AutoStart: ${autoStart}`,
},
{
name: 'colors',
values: [undefined, 'blue'],
props: (barColor: string) => ({ barColor }),
labels: (color: string) => `Color: ${color ?? 'default'}`,
},
{
name: 'sizes',
values: [undefined, 10],
props: (barHeight: number) => ({ barHeight }),
labels: (size: number) => `Size: ${size ? size + ' px' : 'default'}`,
},
],
},
},
decorators: [CatalogDecorator],
};

35
front/src/modules/ui/section/components/Section.tsx Normal file
View File

@ -0,0 +1,35 @@
import { ReactNode } from 'react';
import styled from '@emotion/styled';
type OwnProps = {
children: ReactNode;
alignment?: SectionAlignment;
fullWidth?: boolean;
};
export enum SectionAlignment {
Left = 'left',
Center = 'center',
}
const StyledSection = styled.div<{
alignment: SectionAlignment;
fullWidth: boolean;
}>`
margin-bottom: ${({ theme }) => theme.spacing(4)};
margin-top: ${({ theme }) => theme.spacing(4)};
text-align: ${({ alignment }) => alignment};
width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
`;
export function Section({
children,
alignment = SectionAlignment.Left,
fullWidth = true,
}: OwnProps) {
return (
<StyledSection alignment={alignment} fullWidth={fullWidth}>
{children}
</StyledSection>
);
}

28
front/src/modules/ui/tab/components/__stories__/Tab.stories.tsx
View File

@ -29,19 +29,21 @@ export const Catalog: Story = {
},
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' }),
},
],
catalog: {
dimensions: [
{
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],
};

30
front/src/modules/ui/title/components/H1Title.tsx Normal file
View File

@ -0,0 +1,30 @@
import styled from '@emotion/styled';
type OwnProps = {
title: string;
fontColor?: H1TitleFontColor;
};
export enum H1TitleFontColor {
Primary = 'primary',
Secondary = 'secondary',
Tertiary = 'tertiary',
}
const StyledTitle = styled.h2<{
fontColor: H1TitleFontColor;
}>`
color: ${({ theme, fontColor }) => theme.font.color[fontColor]};
font-size: ${({ theme }) => theme.font.size.lg};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
line-height: ${({ theme }) => theme.text.lineHeight.md};
margin: 0;
margin-bottom: ${({ theme }) => theme.spacing(4)};
`;
export function H1Title({
title,
fontColor = H1TitleFontColor.Tertiary,
}: OwnProps) {
return <StyledTitle fontColor={fontColor}>{title}</StyledTitle>;
}

4
front/src/modules/ui/title/components/SubSectionTitle.tsx → front/src/modules/ui/title/components/H2Title.tsx
View File

@ -23,10 +23,10 @@ const StyledDescription = styled.h3`
font-size: ${({ theme }) => theme.font.size.md};
font-weight: ${({ theme }) => theme.font.weight.regular};
margin: 0;
margin-top: ${({ theme }) => theme.spacing(1)};
margin-top: ${({ theme }) => theme.spacing(3)};
`;
export function SubSectionTitle({ title, description }: Props) {
export function H2Title({ title, description }: Props) {
return (
<StyledContainer>
<StyledTitle>{title}</StyledTitle>

18
front/src/modules/ui/title/components/MainSectionTitle.tsx
View File

@ -1,18 +0,0 @@
import { ReactNode } from 'react';
import styled from '@emotion/styled';
type OwnProps = {
children: ReactNode;
};
const StyledMainSectionTitle = styled.h2`
color: ${({ theme }) => theme.font.color.tertiary};
font-size: ${({ theme }) => theme.font.size.xl};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
line-height: ${({ theme }) => theme.text.lineHeight.lg};
margin: 0;
`;
export function MainSectionTitle({ children }: OwnProps) {
return <StyledMainSectionTitle>{children}</StyledMainSectionTitle>;
}

42
front/src/modules/ui/title/components/__stories__/H1Title.stories.tsx Normal file
View File

@ -0,0 +1,42 @@
import type { Meta, StoryObj } from '@storybook/react';
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { H1Title, H1TitleFontColor } from '../H1Title';
const meta: Meta<typeof H1Title> = {
title: 'UI/Title/H1Title',
component: H1Title,
decorators: [ComponentDecorator],
};
export default meta;
type Story = StoryObj<typeof H1Title>;
const args = {
title: 'Title',
fontColor: H1TitleFontColor.Primary,
};
export const Default: Story = {
args,
decorators: [ComponentDecorator],
};
export const Catalog: Story = {
args,
decorators: [CatalogDecorator],
parameters: {
catalog: {
dimensions: [
{
name: 'FontColor',
values: Object.values(H1TitleFontColor),
props: (fontColor: H1TitleFontColor) => ({ fontColor }),
},
],
},
},
};

12
front/src/modules/ui/title/components/__stories__/SubSectionTitle.stories.tsx → front/src/modules/ui/title/components/__stories__/H2Title.stories.tsx
View File

@ -2,16 +2,16 @@ import type { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { SubSectionTitle } from '../SubSectionTitle';
import { H2Title } from '../H2Title';
const args = {
title: 'Lorem ipsum',
title: 'Sub title',
description: 'Lorem ipsum dolor sit amet',
};
const meta: Meta<typeof SubSectionTitle> = {
title: 'UI/Title/SubSectionTitle',
component: SubSectionTitle,
const meta: Meta<typeof H2Title> = {
title: 'UI/Title/H2Title',
component: H2Title,
decorators: [ComponentDecorator],
args: {
title: args.title,
@ -20,7 +20,7 @@ const meta: Meta<typeof SubSectionTitle> = {
export default meta;
type Story = StoryObj<typeof SubSectionTitle>;
type Story = StoryObj<typeof H2Title>;
export const Default: Story = {
decorators: [ComponentDecorator],

24
front/src/modules/ui/title/components/__stories__/MainSectionTitle.stories.tsx
View File

@ -1,24 +0,0 @@
import type { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { MainSectionTitle } from '../MainSectionTitle';
const meta: Meta<typeof MainSectionTitle> = {
title: 'UI/Title/MainSectionTitle',
component: MainSectionTitle,
decorators: [ComponentDecorator],
};
export default meta;
type Story = StoryObj<typeof MainSectionTitle>;
const args = {
children: 'Lorem ipsum',
};
export const Default: Story = {
args,
decorators: [ComponentDecorator],
};

22
front/src/modules/ui/tooltip/__stories__/Tooltip.stories.tsx
View File

@ -42,16 +42,18 @@ export const Catalog: Story = {
});
},
parameters: {
catalog: [
{
name: 'anchorSelect',
values: Object.values(TooltipPosition),
props: (anchorSelect: TooltipPosition) => ({
anchorSelect: `#${anchorSelect}`,
place: anchorSelect,
}),
},
],
catalog: {
dimensions: [
{
name: 'anchorSelect',
values: Object.values(TooltipPosition),
props: (anchorSelect: TooltipPosition) => ({
anchorSelect: `#${anchorSelect}`,
place: anchorSelect,
}),
},
],
},
},
decorators: [CatalogDecorator],
};