Fix margin on DeleteModal overlay (#998)

* Fix margin on DeleteModal overlay * Update chromatic ci triggers * Update chromatic ci triggers
2023-07-30 13:17:33 -07:00
parent be835af48b
commit eafa30a9cf
24 changed files with 388 additions and 335 deletions
--- a/front/src/modules/settings/profile/components/DeleteAccount.tsx
+++ b/front/src/modules/settings/profile/components/DeleteAccount.tsx
@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { useAuth } from '@/auth/hooks/useAuth';
 import { AppPath } from '@/types/AppPath';
 import { ButtonVariant } from '@/ui/button/components/Button';
-import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
+import { H2Title } from '@/ui/title/components/H2Title';
 import { useDeleteUserAccountMutation } from '~/generated/graphql';

 import { DeleteModal, StyledDeleteButton } from './DeleteModal';
@ -29,7 +29,7 @@ export function DeleteAccount() {

  return (
    <>
-      <SubSectionTitle
+      <H2Title
        title="Danger zone"
        description="Delete account and all the associated data"
      />
--- a/front/src/modules/settings/profile/components/DeleteModal.tsx
+++ b/front/src/modules/settings/profile/components/DeleteModal.tsx
@ -7,6 +7,8 @@ import { currentUserState } from '@/auth/states/currentUserState';
 import { Button, ButtonVariant } from '@/ui/button/components/Button';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { Modal } from '@/ui/modal/components/Modal';
+import { Section, SectionAlignment } from '@/ui/section/components/Section';
+import { H1Title, H1TitleFontColor } from '@/ui/title/components/H1Title';
 import { debounce } from '~/utils/debounce';

 interface DeleteModalProps {
@ -18,22 +20,6 @@ interface DeleteModalProps {
  deleteButtonText?: string;
 }

-const StyledTitle = styled.div`
-  font-size: ${({ theme }) => theme.font.size.lg};
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-`;
-
-const StyledSubtitle = styled.div`
-  text-align: center;
-`;
-
-const StyledModal = styled(Modal)`
-  color: ${({ theme }) => theme.font.color.primary};
-  > * + * {
-    margin-top: ${({ theme }) => theme.spacing(8)};
-  }
-`;
-
 const StyledCenteredButton = styled(Button)`
  justify-content: center;
 `;
@ -77,7 +63,7 @@ export function DeleteModal({
  return (
    <AnimatePresence mode="wait">
      <LayoutGroup>
-        <StyledModal
+        <Modal
          isOpen={isOpen}
          onOutsideClick={() => {
            if (isOpen) {
@ -85,15 +71,17 @@ export function DeleteModal({
            }
          }}
        >
-          <StyledTitle>{title}</StyledTitle>
-          <StyledSubtitle>{subtitle}</StyledSubtitle>
-          <TextInput
-            value={email}
-            onChange={handleEmailChange}
-            placeholder={userEmail}
-            fullWidth
-            key={'email-' + userEmail}
-          />
+          <H1Title title={title} fontColor={H1TitleFontColor.Primary} />
+          <Section alignment={SectionAlignment.Center}>{subtitle}</Section>
+          <Section>
+            <TextInput
+              value={email}
+              onChange={handleEmailChange}
+              placeholder={userEmail}
+              fullWidth
+              key={'email-' + userEmail}
+            />
+          </Section>
          <StyledDeleteButton
            onClick={handleConfirmDelete}
            variant={ButtonVariant.Secondary}
@ -110,7 +98,7 @@ export function DeleteModal({
              marginTop: 10,
            }}
          />
-        </StyledModal>
+        </Modal>
      </LayoutGroup>
    </AnimatePresence>
  );
--- a/front/src/modules/settings/profile/components/DeleteWorkspace.tsx
+++ b/front/src/modules/settings/profile/components/DeleteWorkspace.tsx
@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { useAuth } from '@/auth/hooks/useAuth';
 import { AppPath } from '@/types/AppPath';
 import { ButtonVariant } from '@/ui/button/components/Button';
-import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
+import { H2Title } from '@/ui/title/components/H2Title';
 import { useDeleteCurrentWorkspaceMutation } from '~/generated/graphql';

 import { DeleteModal, StyledDeleteButton } from './DeleteModal';
@ -29,10 +29,7 @@ export function DeleteWorkspace() {

  return (
    <>
-      <SubSectionTitle
-        title="Danger zone"
-        description="Delete your whole workspace"
-      />
+      <H2Title title="Danger zone" description="Delete your whole workspace" />
      <StyledDeleteButton
        onClick={() => setIsDeleteWorkSpaceModalOpen(true)}
        variant={ButtonVariant.Secondary}
--- a/front/src/modules/ui/button/components/stories/Button.stories.tsx
+++ b/front/src/modules/ui/button/components/stories/Button.stories.tsx
@ -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],
 };
--- a/front/src/modules/ui/chip/components/stories/Chip.stories.tsx
+++ b/front/src/modules/ui/chip/components/stories/Chip.stories.tsx
@ -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],
 };
--- a/front/src/modules/ui/input/components/stories/Checkbox.stories.tsx
+++ b/front/src/modules/ui/input/components/stories/Checkbox.stories.tsx
@ -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],
 };
--- a/front/src/modules/ui/progress-bar/components/stories/ProgressBar.stories.tsx
+++ b/front/src/modules/ui/progress-bar/components/stories/ProgressBar.stories.tsx
@ -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],
 };
--- a/front/src/modules/ui/section/components/Section.tsx
+++ b/front/src/modules/ui/section/components/Section.tsx
@ -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>
+  );
+}
--- a/front/src/modules/ui/tab/components/stories/Tab.stories.tsx
+++ b/front/src/modules/ui/tab/components/stories/Tab.stories.tsx
@ -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],
 };
--- a/front/src/modules/ui/title/components/H1Title.tsx
+++ b/front/src/modules/ui/title/components/H1Title.tsx
@ -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>;
+}
--- a/front/src/modules/ui/title/components/SubSectionTitle.tsx
+++ b/front/src/modules/ui/title/components/SubSectionTitle.tsx
@ -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>
--- a/front/src/modules/ui/title/components/MainSectionTitle.tsx
+++ b/front/src/modules/ui/title/components/MainSectionTitle.tsx
@ -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>;
-}
--- a/front/src/modules/ui/title/components/stories/H1Title.stories.tsx
+++ b/front/src/modules/ui/title/components/stories/H1Title.stories.tsx
@ -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 }),
+        },
+      ],
+    },
+  },
+};
--- a/front/src/modules/ui/title/components/stories/SubSectionTitle.stories.tsx
+++ b/front/src/modules/ui/title/components/stories/SubSectionTitle.stories.tsx
@ -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],
--- a/front/src/modules/ui/title/components/stories/MainSectionTitle.stories.tsx
+++ b/front/src/modules/ui/title/components/stories/MainSectionTitle.stories.tsx
@ -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],
-};
--- a/front/src/modules/ui/tooltip/stories/Tooltip.stories.tsx
+++ b/front/src/modules/ui/tooltip/stories/Tooltip.stories.tsx
@ -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],
 };