@keboola/design 1.0.0

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,678 @@
+import { useReducer } from 'react';
+import type { ComponentProps, FormEventHandler } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { action } from 'storybook/actions';
+
+import { Alert } from '../Alert';
+import { Button } from '../Button';
+import { ButtonGroup } from '../ButtonGroup';
+import { FormGroup } from '../FormGroup';
+import { Label } from '../Label';
+import { Tabs, TabsContent } from '../Tabs';
+
+import { Modal } from './Modal';
+import { ModalContent } from './ModalContent';
+
+const meta = {
+  component: Modal,
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const ModalDefault = (props: ComponentProps<typeof Modal>) => (
+  <Modal {...props}>
+    <Modal.Trigger asChild>
+      <Button>Open Modal</Button>
+    </Modal.Trigger>
+
+    <Modal.Content>
+      <Modal.Icon icon="rocket" color="red" />
+      <Modal.Header title="Default Modal" description="Opens default modal">
+        <Alert variant="info">Additional Header stuff</Alert>
+      </Modal.Header>
+
+      <Modal.Body>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </Modal.Body>
+
+      <Modal.Footer>
+        <ButtonGroup variant="block">
+          <Modal.Close asChild>
+            <Button type="button" variant="secondary">
+              Close
+            </Button>
+          </Modal.Close>
+
+          <Button type="button">Ok</Button>
+        </ButtonGroup>
+      </Modal.Footer>
+    </Modal.Content>
+  </Modal>
+);
+
+/**
+ * Default Modal component in uncontrolled mode __(Recommended)__
+ */
+export const Default: Story = {
+  render: ModalDefault,
+};
+
+const ModalLongContent = (props: ComponentProps<typeof Modal>) => (
+  <Modal {...props}>
+    <Modal.Trigger asChild>
+      <Button>Open Modal</Button>
+    </Modal.Trigger>
+
+    <Modal.Content>
+      <Modal.Icon icon="rocket" color="red" />
+      <Modal.Header title="Default Modal" description="Opens default modal">
+        <Alert variant="info">Addiitonal Header staff</Alert>
+      </Modal.Header>
+
+      <Modal.Body>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fringilla, risus ut
+          imperdiet pellentesque, justo augue placerat dui, eget porta augue justo sed enim. Vivamus
+          dui nulla, interdum vitae dolor vitae, condimentum sagittis odio. Sed sit amet nisi
+          pulvinar, lacinia nibh at, pulvinar velit. Etiam arcu eros, consequat in volutpat nec,
+          scelerisque at risus. Donec nibh ipsum, tristique ut nisi vitae, auctor vulputate erat.
+          Fusce egestas augue eu nisl euismod, non mattis massa lacinia. Nulla facilisi. Mauris
+          gravida tincidunt tristique. Morbi sollicitudin laoreet enim, at rutrum libero volutpat
+          eu. Nunc accumsan viverra dolor, id dapibus tortor sodales sed. In sit amet viverra magna.
+          Suspendisse eget quam vulputate, imperdiet massa ac, volutpat sem. Ut sit amet tortor
+          mollis, imperdiet nisi vel, gravida urna. Mauris quis consectetur turpis. Phasellus vel
+          tortor ornare, finibus velit sed, vestibulum mauris. Suspendisse efficitur nulla enim,
+          eget congue urna iaculis ut. In hac habitasse platea dictumst. Mauris quis finibus sapien,
+          in pretium justo. Etiam gravida orci eget tincidunt ornare. Suspendisse eget malesuada
+          lorem. Fusce pretium orci tempor ante consectetur laoreet. Morbi placerat dignissim massa
+          sed rhoncus. Duis eu leo ac justo egestas faucibus. Quisque risus justo, mattis sed
+          lobortis et, fringilla eu nibh. Donec tempor arcu a est rhoncus, non tempor mauris tempor.
+          Etiam auctor aliquet ipsum, vitae tincidunt mauris aliquam sit amet. In fermentum molestie
+          felis, vel tincidunt mi sodales egestas. Fusce in nibh vitae tortor hendrerit mollis nec
+          et enim. Donec euismod orci eu consectetur volutpat. Vivamus at mauris eget elit aliquet
+          venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+          cubilia curae; Cras lobortis, purus at dignissim viverra, tortor mauris lobortis urna,
+          consequat facilisis dolor lacus imperdiet est. In sit amet viverra est. Vestibulum a diam
+          a purus commodo gravida vitae eleifend dui. Pellentesque vitae eros ut libero sodales
+          vulputate et sed risus. Mauris et sapien efficitur, sollicitudin ipsum quis, volutpat
+          nisl. Mauris pellentesque, ipsum in accumsan laoreet, sem est mollis nibh, in dictum lacus
+          diam lacinia tellus. Quisque sit amet ante vitae odio congue molestie. Lorem ipsum dolor
+          sit amet, consectetur adipiscing elit. Phasellus ut quam ut nisl faucibus feugiat non id
+          urna. Pellentesque rutrum justo at egestas egestas. In elementum purus dapibus, dapibus
+          risus eget, viverra tortor. Pellentesque volutpat cursus faucibus. Vivamus laoreet, tellus
+          id fringilla luctus, elit tellus convallis mauris, non finibus nisl magna a libero.
+          Integer porta euismod pellentesque. Morbi porta accumsan nibh ut molestie. Proin mattis
+          eros sed mauris fringilla ornare. Suspendisse ut rutrum ligula. Sed in laoreet tortor, eu
+          congue elit. Morbi accumsan tincidunt arcu, vitae dapibus orci tincidunt sit amet. Duis
+          efficitur ipsum nec cursus feugiat. Etiam lacinia felis ut ligula suscipit vehicula.
+          Aliquam vitae luctus erat. Pellentesque lacinia ante et odio semper tincidunt. Quisque
+          volutpat sem in nunc faucibus, eget pulvinar nisi molestie. Etiam nec placerat eros. Donec
+          viverra eros porta imperdiet condimentum. Integer neque mauris, convallis in nisi at,
+          vestibulum porta lacus. Pellentesque tristique dictum felis, scelerisque pulvinar sem
+          semper sit amet. Sed sollicitudin maximus purus, sit amet lacinia enim aliquam
+          condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fringilla,
+          risus ut imperdiet pellentesque, justo augue placerat dui, eget porta augue justo sed
+          enim. Vivamus dui nulla, interdum vitae dolor vitae, condimentum sagittis odio. Sed sit
+          amet nisi pulvinar, lacinia nibh at, pulvinar velit. Etiam arcu eros, consequat in
+          volutpat nec, scelerisque at risus. Donec nibh ipsum, tristique ut nisi vitae, auctor
+          vulputate erat. Fusce egestas augue eu nisl euismod, non mattis massa lacinia. Nulla
+          facilisi. Mauris gravida tincidunt tristique. Morbi sollicitudin laoreet enim, at rutrum
+          libero volutpat eu. Nunc accumsan viverra dolor, id dapibus tortor sodales sed. In sit
+          amet viverra magna. Suspendisse eget quam vulputate, imperdiet massa ac, volutpat sem. Ut
+          sit amet tortor mollis, imperdiet nisi vel, gravida urna. Mauris quis consectetur turpis.
+          Phasellus vel tortor ornare, finibus velit sed, vestibulum mauris. Suspendisse efficitur
+          nulla enim, eget congue urna iaculis ut. In hac habitasse platea dictumst. Mauris quis
+          finibus sapien, in pretium justo. Etiam gravida orci eget tincidunt ornare. Suspendisse
+          eget malesuada lorem. Fusce pretium orci tempor ante consectetur laoreet. Morbi placerat
+          dignissim massa sed rhoncus. Duis eu leo ac justo egestas faucibus. Quisque risus justo,
+          mattis sed lobortis et, fringilla eu nibh. Donec tempor arcu a est rhoncus, non tempor
+          mauris tempor. Etiam auctor aliquet ipsum, vitae tincidunt mauris aliquam sit amet. In
+          fermentum molestie felis, vel tincidunt mi sodales egestas. Fusce in nibh vitae tortor
+          hendrerit mollis nec et enim. Donec euismod orci eu consectetur volutpat. Vivamus at
+          mauris eget elit aliquet venenatis. Vestibulum ante ipsum primis in faucibus orci luctus
+          et ultrices posuere cubilia curae; Cras lobortis, purus at dignissim viverra, tortor
+          mauris lobortis urna, consequat facilisis dolor lacus imperdiet est. In sit amet viverra
+          est. Vestibulum a diam a purus commodo gravida vitae eleifend dui. Pellentesque vitae eros
+          ut libero sodales vulputate et sed risus. Mauris et sapien efficitur, sollicitudin ipsum
+          quis, volutpat nisl. Mauris pellentesque, ipsum in accumsan laoreet, sem est mollis nibh,
+          in dictum lacus diam lacinia tellus. Quisque sit amet ante vitae odio congue molestie.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut quam ut nisl
+          faucibus feugiat non id urna. Pellentesque rutrum justo at egestas egestas. In elementum
+          purus dapibus, dapibus risus eget, viverra tortor. Pellentesque volutpat cursus faucibus.
+          Vivamus laoreet, tellus id fringilla luctus, elit tellus convallis mauris, non finibus
+          nisl magna a libero. Integer porta euismod pellentesque. Morbi porta accumsan nibh ut
+          molestie. Proin mattis eros sed mauris fringilla ornare. Suspendisse ut rutrum ligula. Sed
+          in laoreet tortor, eu congue elit. Morbi accumsan tincidunt arcu, vitae dapibus orci
+          tincidunt sit amet. Duis efficitur ipsum nec cursus feugiat. Etiam lacinia felis ut ligula
+          suscipit vehicula. Aliquam vitae luctus erat. Pellentesque lacinia ante et odio semper
+          tincidunt. Quisque volutpat sem in nunc faucibus, eget pulvinar nisi molestie. Etiam nec
+          placerat eros. Donec viverra eros porta imperdiet condimentum. Integer neque mauris,
+          convallis in nisi at, vestibulum porta lacus. Pellentesque tristique dictum felis,
+          scelerisque pulvinar sem semper sit amet. Sed sollicitudin maximus purus, sit amet lacinia
+          enim aliquam condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+          fringilla, risus ut imperdiet pellentesque, justo augue placerat dui, eget porta augue
+          justo sed enim. Vivamus dui nulla, interdum vitae dolor vitae, condimentum sagittis odio.
+          Sed sit amet nisi pulvinar, lacinia nibh at, pulvinar velit. Etiam arcu eros, consequat in
+          volutpat nec, scelerisque at risus. Donec nibh ipsum, tristique ut nisi vitae, auctor
+          vulputate erat. Fusce egestas augue eu nisl euismod, non mattis massa lacinia. Nulla
+          facilisi. Mauris gravida tincidunt tristique. Morbi sollicitudin laoreet enim, at rutrum
+          libero volutpat eu. Nunc accumsan viverra dolor, id dapibus tortor sodales sed. In sit
+          amet viverra magna. Suspendisse eget quam vulputate, imperdiet massa ac, volutpat sem. Ut
+          sit amet tortor mollis, imperdiet nisi vel, gravida urna. Mauris quis consectetur turpis.
+          Phasellus vel tortor ornare, finibus velit sed, vestibulum mauris. Suspendisse efficitur
+          nulla enim, eget congue urna iaculis ut. In hac habitasse platea dictumst. Mauris quis
+          finibus sapien, in pretium justo. Etiam gravida orci eget tincidunt ornare. Suspendisse
+          eget malesuada lorem. Fusce pretium orci tempor ante consectetur laoreet. Morbi placerat
+          dignissim massa sed rhoncus. Duis eu leo ac justo egestas faucibus. Quisque risus justo,
+          mattis sed lobortis et, fringilla eu nibh. Donec tempor arcu a est rhoncus, non tempor
+          mauris tempor. Etiam auctor aliquet ipsum, vitae tincidunt mauris aliquam sit amet. In
+          fermentum molestie felis, vel tincidunt mi sodales egestas. Fusce in nibh vitae tortor
+          hendrerit mollis nec et enim. Donec euismod orci eu consectetur volutpat. Vivamus at
+          mauris eget elit aliquet venenatis. Vestibulum ante ipsum primis in faucibus orci luctus
+          et ultrices posuere cubilia curae; Cras lobortis, purus at dignissim viverra, tortor
+          mauris lobortis urna, consequat facilisis dolor lacus imperdiet est. In sit amet viverra
+          est. Vestibulum a diam a purus commodo gravida vitae eleifend dui. Pellentesque vitae eros
+          ut libero sodales vulputate et sed risus. Mauris et sapien efficitur, sollicitudin ipsum
+          quis, volutpat nisl. Mauris pellentesque, ipsum in accumsan laoreet, sem est mollis nibh,
+          in dictum lacus diam lacinia tellus. Quisque sit amet ante vitae odio congue molestie.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut quam ut nisl
+          faucibus feugiat non id urna. Pellentesque rutrum justo at egestas egestas. In elementum
+          purus dapibus, dapibus risus eget, viverra tortor. Pellentesque volutpat cursus faucibus.
+          Vivamus laoreet, tellus id fringilla luctus, elit tellus convallis mauris, non finibus
+          nisl magna a libero. Integer porta euismod pellentesque. Morbi porta accumsan nibh ut
+          molestie. Proin mattis eros sed mauris fringilla ornare. Suspendisse ut rutrum ligula. Sed
+          in laoreet tortor, eu congue elit. Morbi accumsan tincidunt arcu, vitae dapibus orci
+          tincidunt sit amet. Duis efficitur ipsum nec cursus feugiat. Etiam lacinia felis ut ligula
+          suscipit vehicula. Aliquam vitae luctus erat. Pellentesque lacinia ante et odio semper
+          tincidunt. Quisque volutpat sem in nunc faucibus, eget pulvinar nisi molestie. Etiam nec
+          placerat eros. Donec viverra eros porta imperdiet condimentum. Integer neque mauris,
+          convallis in nisi at, vestibulum porta lacus. Pellentesque tristique dictum felis,
+          scelerisque pulvinar sem semper sit amet. Sed sollicitudin maximus purus, sit amet lacinia
+          enim aliquam condimentum.
+        </p>
+      </Modal.Body>
+
+      <Modal.Footer>
+        <ButtonGroup variant="block">
+          <Modal.Close asChild>
+            <Button type="button" variant="secondary">
+              Close
+            </Button>
+          </Modal.Close>
+
+          <Button type="button">Ok</Button>
+        </ButtonGroup>
+      </Modal.Footer>
+    </Modal.Content>
+  </Modal>
+);
+
+export const LongContent: Story = {
+  render: ModalLongContent,
+};
+
+const FORM_NAME = 'user-form';
+
+const ModalRemoteFormSubmission = (props: ComponentProps<typeof Modal>) => {
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    const formValues = Object.fromEntries(formData.entries());
+    action('onSubmit')(formValues);
+  };
+
+  return (
+    <Modal {...props}>
+      <Modal.Trigger asChild>
+        <Button>Create User</Button>
+      </Modal.Trigger>
+
+      <Modal.Content>
+        <Modal.Icon icon="rocket" color="red" />
+
+        <Modal.Header title="Crate User" description="Opens modal with remote form submission" />
+
+        <Modal.Body className="tw-flex tw-flex-col tw-gap-4">
+          <form onSubmit={handleSubmit} id={FORM_NAME}>
+            <FormGroup>
+              <Label htmlFor="name">Name</Label>
+              <FormGroup.TextInput name="name" id="name" variant="secondary" />
+            </FormGroup>
+          </form>
+        </Modal.Body>
+
+        <Modal.Footer>
+          <ButtonGroup variant="block">
+            <Modal.Close asChild>
+              <Button type="button" variant="secondary">
+                Close
+              </Button>
+            </Modal.Close>
+
+            <Button form={FORM_NAME} type="submit">
+              Save changes
+            </Button>
+          </ButtonGroup>
+        </Modal.Footer>
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+/**
+ * Modal with remote form submission
+ * It is not recommended to wrap Modal.Body and Modal.Footer in a single form tag as it can break the styling, use remote a form submission.
+ */
+export const RemoteFormSubmission: Story = {
+  render: ModalRemoteFormSubmission,
+};
+
+const ModalReusableOwnContentComponent = () => (
+  <>
+    <Modal.Header title="Reusable Modal With Own Content Component" />
+    <Modal.Body>Here defined reusable layout</Modal.Body>
+  </>
+);
+
+const ModalReusableWithOwnContentComponent = (props: Record<string, unknown>) => (
+  <Modal {...props}>
+    <Modal.Trigger asChild>
+      <Button>Open Modal</Button>
+    </Modal.Trigger>
+
+    <Modal.Content>
+      <ModalReusableOwnContentComponent />
+    </Modal.Content>
+  </Modal>
+);
+
+export const ReusableModalWithOwnContentComponent: Story = {
+  render: ModalReusableWithOwnContentComponent,
+};
+
+const ModalReusableTriggerAsChild = (props: ComponentProps<typeof Modal>) => (
+  <Modal>
+    <Modal.Trigger asChild>{props.children}</Modal.Trigger>
+    <ModalContent>
+      <Modal.Header title="Reusable Modal With Trigger as Child" />
+      <Modal.Body>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </Modal.Body>
+    </ModalContent>
+  </Modal>
+);
+
+export const ReusableModalWithTriggerAsChild: Story = {
+  render: (props) => (
+    <ModalReusableTriggerAsChild {...props}>
+      <Button>Open Modal</Button>
+    </ModalReusableTriggerAsChild>
+  ),
+};
+
+type StepProps = {
+  id: string;
+  onSubmit: FormEventHandler<HTMLFormElement>;
+  defaultValues?: Record<string, string> | null;
+};
+
+// Steps are exclusive, we can safely use the same id for each step
+const WIZARD_FORM_NAME = 'WIZARD_FORM_NAME';
+const FIRST_NAME_FIELD_NAME = 'firstName';
+const USERNAME_FIELD_NAME = 'username';
+const FIRST_STEP = 1;
+const LAST_STEP = 3;
+
+const Step1 = ({ id, onSubmit, defaultValues }: StepProps) => (
+  <form id={id} onSubmit={onSubmit}>
+    <FormGroup>
+      <Label htmlFor={FIRST_NAME_FIELD_NAME}>Fist Name</Label>
+      <FormGroup.TextInput
+        name={FIRST_NAME_FIELD_NAME}
+        defaultValue={defaultValues?.[FIRST_NAME_FIELD_NAME]}
+        placeholder="Enter your first name"
+      />
+    </FormGroup>
+  </form>
+);
+
+const Step2 = ({ id, onSubmit, defaultValues }: StepProps) => (
+  <form id={id} onSubmit={onSubmit}>
+    <FormGroup>
+      <Label htmlFor={USERNAME_FIELD_NAME}>Username</Label>
+      <FormGroup.TextInput
+        name={USERNAME_FIELD_NAME}
+        defaultValue={defaultValues?.[USERNAME_FIELD_NAME]}
+        placeholder="Enter your username"
+      />
+    </FormGroup>
+  </form>
+);
+
+type StepperState = {
+  step: number;
+  values: Record<number, Record<string, string>>;
+};
+
+type Action =
+  | {
+      type: 'NEXT';
+      values: Record<string, string>;
+    }
+  | {
+      type: 'PREVIOUS';
+    };
+
+const reducer = (state: StepperState, action: Action) => {
+  switch (action.type) {
+    case 'NEXT': {
+      const currStep = state.step;
+      return {
+        ...state,
+        step: Math.min(currStep + 1, LAST_STEP),
+        values: {
+          ...state.values,
+          [currStep]: action.values,
+        },
+      };
+    }
+    case 'PREVIOUS': {
+      return {
+        ...state,
+        step: Math.max(state.step - 1, FIRST_STEP),
+      };
+    }
+    default:
+      return state;
+  }
+};
+
+const ModalMultiStepContent = () => {
+  const [state, dispatch] = useReducer(reducer, {
+    step: 1,
+    values: {},
+  });
+  const isLastStep = state.step === LAST_STEP;
+  const isFirstStep = state.step === FIRST_STEP;
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    const formValues = Object.fromEntries(formData.entries()) as Record<string, string>;
+    dispatch({ type: 'NEXT', values: formValues });
+  };
+
+  const handlePreviousClick = () => {
+    dispatch({ type: 'PREVIOUS' });
+  };
+
+  const handleSubmitClick = () => {
+    action('onSubmit')(state.values);
+  };
+
+  return (
+    <>
+      <Modal.Icon icon="rocket" color="blue" />
+      <Modal.Header title="Wizard Form" description="Opens modal with multi-step form" />
+
+      <Modal.Body>
+        {state.step === 1 && (
+          <Step1
+            id={WIZARD_FORM_NAME}
+            onSubmit={handleSubmit}
+            defaultValues={state.values?.[state.step]}
+          />
+        )}
+        {state.step === 2 && (
+          <Step2
+            id={WIZARD_FORM_NAME}
+            onSubmit={handleSubmit}
+            defaultValues={state.values?.[state.step]}
+          />
+        )}
+
+        {state.step === 3 && (
+          <>
+            <h3>Wizard is Done</h3>
+            <pre>{JSON.stringify(state.values, null, 4)}</pre>
+          </>
+        )}
+      </Modal.Body>
+
+      <Modal.Footer>
+        <ButtonGroup variant="block">
+          <Button type="button" onClick={handlePreviousClick} disabled={isFirstStep}>
+            Previous
+          </Button>
+
+          {isLastStep ? (
+            <Button type="button" onClick={handleSubmitClick}>
+              Submit
+            </Button>
+          ) : (
+            <Button form={WIZARD_FORM_NAME} type="submit">
+              Next
+            </Button>
+          )}
+        </ButtonGroup>
+      </Modal.Footer>
+    </>
+  );
+};
+
+/**
+ * Example of a multi-step (wizard form) inside modal.
+ * 1. State should be manged in a component inside Modal.Content, which is re-mounted on each open. No need to for state reset.
+ * 2. If state reset is needed, you can use `<Modal.Content onEscapeKeyDown={} onPointerDownOutside={}/>` callbacks.
+ */
+export const WizardFormInsideModal: Story = {
+  render: (props) => (
+    <Modal {...props}>
+      <Modal.Trigger asChild>
+        <Button>Open modal</Button>
+      </Modal.Trigger>
+
+      <Modal.Content>
+        <ModalMultiStepContent />
+      </Modal.Content>
+    </Modal>
+  ),
+};
+
+const ModalMediumSize = (props: ComponentProps<typeof Modal>) => (
+  <Modal {...props}>
+    <Modal.Trigger asChild>
+      <Button>Open Modal</Button>
+    </Modal.Trigger>
+    <Modal.Content>
+      <Modal.Header title="Medium Modal" description="This is a medium-sized modal (default)" />
+      <Modal.Body>
+        <p>This modal uses the default medium size (max-width: 672px / 42rem).</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </Modal.Body>
+      <Modal.Footer>
+        <ButtonGroup variant="block">
+          <Modal.Close asChild>
+            <Button type="button" variant="secondary">
+              Close
+            </Button>
+          </Modal.Close>
+          <Button type="button">Ok</Button>
+        </ButtonGroup>
+      </Modal.Footer>
+    </Modal.Content>
+  </Modal>
+);
+
+/**
+ * Modal with medium size (default)
+ */
+export const MediumSize: Story = {
+  render: ModalMediumSize,
+};
+
+const ModalLargeSize = (props: ComponentProps<typeof Modal>) => (
+  <Modal {...props}>
+    <Modal.Trigger asChild>
+      <Button>Open Modal</Button>
+    </Modal.Trigger>
+    <Modal.Content size="large">
+      <Modal.Header title="Large Modal" description="This is a large-sized modal" />
+      <Modal.Body>
+        <p>This modal uses the large size (max-width: 896px / 56rem).</p>
+        <p>
+          Large modals are useful for content that needs more horizontal space, such as wide forms,
+          tables, or detailed information displays.
+        </p>
+        <p>Some contents...</p>
+      </Modal.Body>
+      <Modal.Footer>
+        <ButtonGroup variant="block">
+          <Modal.Close asChild>
+            <Button type="button" variant="secondary">
+              Close
+            </Button>
+          </Modal.Close>
+          <Button type="button">Ok</Button>
+        </ButtonGroup>
+      </Modal.Footer>
+    </Modal.Content>
+  </Modal>
+);
+
+/**
+ * Modal with large size
+ */
+export const LargeSize: Story = {
+  render: ModalLargeSize,
+};
+
+const ModalWithImageIcon = (props: ComponentProps<typeof Modal>) => (
+  <Modal {...props}>
+    <Modal.Trigger asChild>
+      <Button>Open Modal</Button>
+    </Modal.Trigger>
+    <Modal.Content>
+      <Modal.Icon
+        iconUrl="https://ui.keboola-assets.com/developer-portal/icons/keboola.ex-db-snowflake/64/1576250365598.png"
+        iconAlt="Snowflake extractor"
+      />
+      <Modal.Header
+        title="Modal with Image Icon"
+        description="This modal uses an image URL instead of a FontAwesome icon"
+      />
+      <Modal.Body>
+        <p>The icon displays a custom image from a URL with a white background and shadow.</p>
+        <p>You can optionally provide an iconAlt prop for accessibility.</p>
+      </Modal.Body>
+      <Modal.Footer>
+        <ButtonGroup variant="block">
+          <Modal.Close asChild>
+            <Button type="button" variant="secondary">
+              Close
+            </Button>
+          </Modal.Close>
+          <Button type="button">Ok</Button>
+        </ButtonGroup>
+      </Modal.Footer>
+    </Modal.Content>
+  </Modal>
+);
+
+/**
+ * Modal with an image icon (iconUrl) instead of a FontAwesome icon.
+ * By default, the image icon has a white background with shadow.
+ */
+export const WithImageIcon: Story = {
+  render: ModalWithImageIcon,
+};
+
+const ModalWithImageIconError = (props: ComponentProps<typeof Modal>) => (
+  <Modal {...props}>
+    <Modal.Trigger asChild>
+      <Button>Open Modal</Button>
+    </Modal.Trigger>
+    <Modal.Content>
+      <Modal.Icon iconUrl="xxx" />
+      <Modal.Header
+        title="Modal with Failed Image"
+        description="The icon is hidden because the image failed to load"
+      />
+      <Modal.Body>
+        <p>When the image URL is invalid or fails to load, the icon is automatically hidden.</p>
+      </Modal.Body>
+      <Modal.Footer>
+        <ButtonGroup variant="block">
+          <Modal.Close asChild>
+            <Button type="button" variant="secondary">
+              Close
+            </Button>
+          </Modal.Close>
+          <Button type="button">Ok</Button>
+        </ButtonGroup>
+      </Modal.Footer>
+    </Modal.Content>
+  </Modal>
+);
+
+/**
+ * Modal with an image icon that fails to load.
+ * The icon is hidden when the image cannot be loaded.
+ */
+export const WithImageIconError: Story = {
+  render: ModalWithImageIconError,
+};
+
+const ModalWithTabs = (props: ComponentProps<typeof Modal>) => (
+  <Modal {...props}>
+    <Modal.Trigger asChild>
+      <Button>Open Modal</Button>
+    </Modal.Trigger>
+    <Modal.Content>
+      <Modal.Header
+        title="Modal With Tabs"
+        description="Header border collapses automatically because Tabs render their own bottom border."
+      />
+      <Modal.Body>
+        <Tabs
+          triggers={[
+            { value: 'first', title: 'First Tab' },
+            { value: 'second', title: 'Second Tab' },
+          ]}
+        >
+          <TabsContent value="first">
+            <p>Content of the first tab.</p>
+          </TabsContent>
+          <TabsContent value="second">
+            <p>Content of the second tab.</p>
+          </TabsContent>
+        </Tabs>
+      </Modal.Body>
+      <Modal.Footer>
+        <ButtonGroup variant="block">
+          <Modal.Close asChild>
+            <Button type="button" variant="secondary">
+              Close
+            </Button>
+          </Modal.Close>
+          <Button type="button">Ok</Button>
+        </ButtonGroup>
+      </Modal.Footer>
+    </Modal.Content>
+  </Modal>
+);
+
+/**
+ * Modal with Tabs inside the body — Modal.Header automatically drops its bottom border
+ * and padding so the Tabs' own bottom border is the single visual separator.
+ */
+export const WithTabs: Story = {
+  render: ModalWithTabs,
+};