feat: TET-851 dialog

src/components/Checkbox/Checkbox.styles.ts

@@ -19,6 +19,7 @@ export const defaultConfig = {
   flexDirection: 'column',
   alignItems: 'flex-start',
   gap: '$space-component-gap-xSmall',
+  w: 'max-content',
   minWidth: '$size-3xSmall',
   minHeight: '$size-3xSmall',
   color: '$color-content-primary',

src/components/Dialog/AdditionalElementWrapper.tsx

@@ -0,0 +1,38 @@
+import { FC, isValidElement, PropsWithChildren } from 'react';
+
+import { checkIfChildrenIsCustomComponent } from './utils';
+
+import { tet } from '@/tetrisly';
+
+type AdditionalElementWrapperProps = PropsWithChildren;
+
+export const AdditionalElementWrapper: FC<AdditionalElementWrapperProps> = ({
+  children,
+}) => {
+  const isCustomComponent =
+    isValidElement(children) && checkIfChildrenIsCustomComponent(children);
+
+  return isCustomComponent ? (
+    <tet.div
+      data-testid="dialog-additional-child"
+      backgroundColor="$color-background-neutral-subtle"
+      w="100%"
+      h="100%"
+    >
+      {children}
+    </tet.div>
+  ) : (
+    <>
+      <tet.div
+        data-testid="dialog-additional-child"
+        display="flex"
+        alignItems="center"
+        w="100%"
+        h="100%"
+      >
+        {children}
+      </tet.div>
+      <tet.div maxW="100%" />
+    </>
+  );
+};

src/components/Dialog/AllComponents.tsx

@@ -0,0 +1,10 @@
+import * as components from '../../index';
+
+const allComponents = Array.from(Object.values(components));
+const allComponentsProps = await Promise.all(
+  allComponents.map(
+    (component) => import(`../${component}.props.ts/${component}Props`),
+  ),
+);
+
+export { allComponents, allComponentsProps };

src/components/Dialog/Dialog.props.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+
+import { DialogConfig } from './Dialog.styles';
+import { DialogFooter, DialogIntent, DialogSize } from './types';
+
+import type { Action } from '@/types';
+
+export type DialogProps = {
+  actions?: Action[];
+  children?: ReactNode;
+  content?: string;
+  custom?: DialogConfig;
+  docsPresentation?: boolean;
+  footer?: DialogFooter;
+  onCloseClick?: (e: React.MouseEvent) => void;
+  intent?: DialogIntent;
+  size?: DialogSize;
+  title?: string;
+};

src/components/Dialog/Dialog.stories.tsx

@@ -0,0 +1,211 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Dialog } from './Dialog';
+import { customStyleForDocs } from './Dialog.styles';
+import { Button } from '../Button';
+import { Checkbox } from '../Checkbox';
+import { Dimmer } from '../Dimmer';
+
+import { DialogDocs } from '@/docs-components/DialogDocs';
+import { TetDocs } from '@/docs-components/TetDocs';
+import { tet } from '@/tetrisly';
+
+const meta = {
+  title: 'Dialog',
+  component: Dialog,
+  tags: ['autodocs'],
+  argTypes: {
+    docsPresentation: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    title: 'Title',
+    actions: [
+      {
+        label: 'Primary action',
+        onClick: action('onClick'),
+      },
+      {
+        label: 'Secondary action',
+        onClick: action('onClick'),
+      },
+    ],
+    onCloseClick: action('onCloseClick'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A temporary, focused window that overlays the main content. Often used to prompt user input or present important information that requires interaction, such as confirmation or error messages.',
+      },
+      page: () => (
+        <TetDocs docs="https://docs.tetrisly.com/components/in-progress/dialog">
+          <DialogDocs />
+        </TetDocs>
+      ),
+    },
+  },
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: 'title',
+    content: 'content',
+    onCloseClick: () => {},
+    footer: 'steps',
+    actions: [{ label: 'first action' }, { label: 'second action' }],
+    size: 'small',
+    custom: customStyleForDocs,
+  },
+};
+
+export const Decision: Story = {
+  render: () => (
+    <tet.div
+      padding="40"
+      h="400px"
+      borderRadius={10}
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Dimmer />
+      <Dialog
+        title="Title"
+        content="Everything in Tetrisly contains Auto Layout. Moreover, we’ve redefined all variants and we have created brand-new components."
+        footer="decision"
+        actions={[{ label: 'Cancel' }, { label: 'Accept' }]}
+      />
+    </tet.div>
+  ),
+};
+
+export const Confirmation: Story = {
+  render: () => (
+    <tet.div
+      padding="40"
+      h="400px"
+      borderRadius={10}
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Dimmer />
+      <Dialog
+        title="Title"
+        content="Everything in Tetrisly contains Auto Layout. Moreover, we’ve redefined all variants and we have created brand-new components."
+        footer="confirmation"
+        actions={[{ label: 'Accept' }]}
+        intent="warning"
+      />
+    </tet.div>
+  ),
+};
+
+export const Steps: Story = {
+  render: () => (
+    <tet.div
+      padding="40"
+      h="400px"
+      borderRadius={10}
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Dimmer />
+      <Dialog
+        title="Title"
+        content="Everything in Tetrisly contains Auto Layout. Moreover, we’ve redefined all variants and we have created brand-new components."
+        footer="steps"
+        actions={[{ label: 'Previous step' }, { label: 'Next step' }]}
+      />
+    </tet.div>
+  ),
+};
+
+export const Destructive: Story = {
+  render: () => (
+    <tet.div
+      padding="40"
+      h="400px"
+      borderRadius={10}
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Dimmer />
+      <Dialog
+        title="Title"
+        content="Everything in Tetrisly contains Auto Layout. Moreover, we’ve redefined all variants and we have created brand-new components."
+        footer="decision"
+        actions={[{ label: 'Cancel' }, { label: 'Remove' }]}
+        intent="destructive"
+      />
+    </tet.div>
+  ),
+};
+
+export const NestedComponentInsideFooter: Story = {
+  args: {
+    title: 'title',
+    content: 'content',
+    onCloseClick: () => {},
+    footer: 'decision',
+    actions: [{ label: 'first action' }, { label: 'second action' }],
+    size: 'medium',
+    custom: customStyleForDocs,
+    children: <Checkbox label="Do not show me again" />,
+  },
+};
+
+export const NestedButtonInsideFooter: Story = {
+  args: {
+    title: 'title',
+    content: 'content',
+    onCloseClick: () => {},
+    footer: 'decision',
+    actions: [{ label: 'first action' }, { label: 'second action' }],
+    size: 'medium',
+    custom: customStyleForDocs,
+    children: <Button label="Find out more" />,
+  },
+};
+
+export const AdditionalCustomContent: Story = {
+  args: {
+    title: 'title',
+    content: 'content',
+    onCloseClick: () => {},
+    footer: 'decision',
+    actions: [{ label: 'first action' }, { label: 'second action' }],
+    size: 'medium',
+    custom: customStyleForDocs,
+    children: <div>Additional component</div>,
+  },
+};
+
+export const AdditionalCustomContentWithButton: Story = {
+  args: {
+    title: 'title',
+    content: 'content',
+    onCloseClick: () => {},
+    footer: 'decision',
+    actions: [{ label: 'first action' }, { label: 'second action' }],
+    size: 'medium',
+    custom: customStyleForDocs,
+    children: (
+      <div>
+        Additional component with button
+        <br />
+        <Button label="button" />
+      </div>
+    ),
+  },
+};

src/components/Dialog/Dialog.styles.ts

@@ -0,0 +1,105 @@
+import { DialogFooter, DialogIntent, DialogSize } from './types';
+
+import { BaseProps } from '@/types';
+
+export type DialogConfig = {
+  usagePositioning?: BaseProps;
+  footer?: {
+    type: Record<DialogFooter, BaseProps>;
+  } & BaseProps;
+  closeIcon?: BaseProps;
+  content?: BaseProps;
+  header?: BaseProps;
+  intentIcon?: Record<Partial<DialogIntent>, BaseProps>;
+  size?: Record<DialogSize, BaseProps>;
+  title?: BaseProps;
+  titleContainer?: BaseProps;
+} & BaseProps;
+
+export const defaultConfig = {
+  display: 'flex',
+  flexDirection: 'column',
+  padding: '$space-component-padding-2xLarge',
+  borderRadius: '$border-radius-xLarge',
+  gap: '$space-component-gap-xLarge',
+  boxShadow: '$elevation-bottom-400',
+  backgroundColor: '$color-interaction-background-modal',
+  position: 'fixed',
+  zIndex: 9998,
+  overflowY: 'hidden',
+  overflowX: 'hidden',
+  left: '50%',
+  top: '50%',
+  transform: ' translate(-50%, -50%)',
+  closeIcon: {
+    color: '$color-action-neutral-normal',
+  },
+  footer: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '$space-component-gap-large',
+    type: {
+      confirmation: {
+        justifyContent: 'end',
+      },
+      steps: {
+        justifyContent: 'space-between',
+      },
+      decision: {
+        justifyContent: 'end',
+      },
+    },
+  },
+  size: {
+    small: {
+      w: '480px',
+    },
+    medium: {
+      w: '720px',
+    },
+    large: {
+      w: '960px',
+    },
+  },
+  content: {
+    text: '$typo-body-medium',
+    color: '$color-content-secondary',
+  },
+  intentIcon: {
+    warning: {
+      color: '$color-content-warning-secondary',
+    },
+    destructive: {
+      color: '$color-content-negative-secondary',
+    },
+    none: {},
+  },
+  header: {
+    display: 'flex',
+    gap: '$space-component-gap-large',
+  },
+  titleContainer: {
+    w: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '$space-component-gap-large',
+  },
+  title: {
+    w: '100%',
+    text: '$typo-header-xLarge',
+  },
+} satisfies DialogConfig;
+
+export const dialogStyles = {
+  defaultConfig,
+};
+
+export const customStyleForDocs: DialogConfig = {
+  position: 'static',
+  zIndex: 0,
+  overflowY: 'visible',
+  overflowX: 'visible',
+  left: '0%',
+  top: '0%',
+  transform: ' translate(0%, 0%)',
+};