From faa5233862ad4147b7ef7f1f489efcb071abfd45 Mon Sep 17 00:00:00 2001
From: Sarka Chwastkova <chwastkova.s@gmail.com>
Date: Wed, 21 Aug 2024 16:09:37 +0200
Subject: [PATCH] chore(Modal): migrate from CSF2 to CSF3

---
 .../src/Modal/Modal.stories.tsx               | 1021 ++++++++---------
 1 file changed, 508 insertions(+), 513 deletions(-)

diff --git a/packages/orbit-components/src/Modal/Modal.stories.tsx b/packages/orbit-components/src/Modal/Modal.stories.tsx
index 713afc8035..0e8ee94ae2 100644
--- a/packages/orbit-components/src/Modal/Modal.stories.tsx
+++ b/packages/orbit-components/src/Modal/Modal.stories.tsx
@@ -1,6 +1,8 @@
 import * as React from "react";
 import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
 
+import type { Name } from "../Illustration/types";
 import Button from "../Button";
 import { SIZES } from "./consts";
 import Illustration from "../Illustration";
@@ -14,23 +16,64 @@ import RenderInRtl from "../utils/rtl/RenderInRtl";
 import Card from "../Card";
 import CarrierLogo from "../CarrierLogo";
 import CardSection from "../Card/CardSection";
-import InputField from "../InputField";
-import Select from "../Select";
-import CountryFlag from "../CountryFlag";
-import InputGroup from "../InputGroup";
-import TextLink from "../TextLink";
-import Checkbox from "../Checkbox";
-import Radio from "../Radio";
 import Tooltip from "../Tooltip";
 import Tile from "../Tile";
 import Box from "../Box";
 
 import Modal, { ModalHeader, ModalSection, ModalFooter } from ".";
 
-export default {
+type ModalPropsAndCustomArgs = React.ComponentProps<typeof Modal> &
+  React.ComponentProps<typeof ModalHeader> &
+  React.ComponentProps<typeof ModalFooter> & {
+    showSection: boolean;
+    showBack: boolean;
+  };
+
+const meta: Meta<ModalPropsAndCustomArgs> = {
   title: "Modal",
+  component: Modal,
+
+  parameters: {
+    info: "Check Orbit.Kiwi for more detailed design guidelines.",
+  },
+
+  args: {
+    lockScrolling: false,
+    preventOverlayClose: false,
+    isMobileFullPage: false,
+    suppressed: false,
+    showBack: false,
+    illustration: NAMES[0],
+    showSection: false,
+    fixedFooter: false,
+    mobileHeader: false,
+    size: SIZES.NORMAL,
+    title: "Orbit design system",
+    description: "I'm lovely description",
+    children:
+      "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+  },
+
+  argTypes: {
+    size: {
+      options: Object.values(SIZES),
+      control: {
+        type: "select",
+      },
+    },
+    illustration: {
+      options: NAMES,
+      control: {
+        type: "select",
+      },
+    },
+  },
 };
 
+type Story = StoryObj<ModalPropsAndCustomArgs>;
+
+export default meta;
+
 function useModal() {
   const [open, toggle] = React.useReducer((_, next) => next, true);
   return {
@@ -47,339 +90,63 @@ function useModal() {
   };
 }
 
-export const Sizes = ({ size, title, description, mobileHeader, content }) => {
-  const { Container, onClose } = useModal();
-
-  // const onClose = action("onClose");
-  return (
-    <Container>
-      <Modal size={size} onClose={onClose} mobileHeader={mobileHeader}>
-        <ModalHeader title={title}>{description}</ModalHeader>
-        <ModalSection>
-          <Text>{content}</Text>
-        </ModalSection>
-        <ModalSection>
-          <Text>{content}</Text>
-        </ModalSection>
-        <ModalSection>
-          <Text>{content}</Text>
-        </ModalSection>
-        <ModalSection>
-          <Text>{content}</Text>
-        </ModalSection>
-      </Modal>
-    </Container>
-  );
-};
-
-Sizes.story = {
-  parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
-  },
-};
-
-Sizes.args = {
-  size: SIZES.NORMAL,
-  title: "Orbit design system",
-  description: "I'm lovely description",
-  mobileHeader: true,
-  content:
-    "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
-};
-
-Sizes.argTypes = {
-  size: {
-    options: Object.values(SIZES),
-    control: {
-      type: "select",
-    },
-  },
-};
-
-export const ShortModal = () => {
-  const { Container, onClose } = useModal();
-  return (
-    <Container>
-      <Modal onClose={onClose} fixedFooter>
-        <ModalSection>
-          <Stack>
-            <Text uppercase weight="bold">
-              OUTBOUND
-            </Text>
-            <Tile
-              expandable
-              title={
-                <Stack direction="row" align="center" justify="between" spacing="200">
-                  <CarrierLogo carriers={[{ code: "FR", name: "Ryanair" }]} size="large" />
-                  <Stack spacing="100">
-                    <Text size="small" type="secondary">
-                      Sat, Mar 31 Trip length: 1h55m
-                    </Text>
-                    <Stack direction="row" spacing="100" align="center">
-                      <Text weight="bold">London LHR</Text>
-                      <FlightDirect size="small" />
-                      <Text weight="bold">Prague PRG</Text>
-                    </Stack>
-                  </Stack>
-                </Stack>
-              }
-            >
-              Hidden Content
-            </Tile>
-          </Stack>
-        </ModalSection>
-      </Modal>
-    </Container>
-  );
-};
-
-ShortModal.story = {
-  parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
-  },
-};
+export const Sizes: Story = {
+  render: ({ title, description, children, ...args }) => {
+    const { Container, onClose } = useModal();
 
-export const WithoutSection = ({ showMore }) => {
-  const { Container, onClose } = useModal();
-  return (
-    <Container>
-      <Modal onClose={onClose} fixedFooter>
-        <ModalHeader
-          title="Enjoy something to eat while you fly"
-          illustration={<Illustration name="Meal" size="small" />}
-          description="Select a flight below to see the menu (where available)"
-        />
-        {showMore && (
+    return (
+      <Container>
+        <Modal {...args} onClose={onClose}>
+          <ModalHeader title={title}>{description}</ModalHeader>
           <ModalSection>
-            <Text>Lorem ipsum dolor sit amet</Text>
+            <Text>{children}</Text>
           </ModalSection>
-        )}
-        <ModalFooter flex={["0 0 auto", "1 1 100%"]}>
-          <Button iconLeft={<ChevronBackward />} type="secondary">
-            Back
-          </Button>
-          <Button fullWidth>Proceed to Payment (23.98€)</Button>
-        </ModalFooter>
-      </Modal>
-    </Container>
-  );
-};
-
-WithoutSection.story = {
-  name: "Without section",
-
-  parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+        </Modal>
+      </Container>
+    );
   },
-};
-
-WithoutSection.args = {
-  showMore: false,
-};
-
-export const RemovableSections = ({ showMore }) => {
-  const { Container, onClose } = useModal();
-  return (
-    <Container>
-      <Modal onClose={onClose} fixedFooter>
-        <ModalHeader
-          title="Enjoy something to eat while you fly"
-          illustration={<Illustration name="Meal" size="small" />}
-          description="Select a flight below to see the menu (where available)"
-        />
-        {showMore && (
-          <ModalSection>
-            <Text>Lorem ipsum dolor sit amet</Text>
-          </ModalSection>
-        )}
-        <ModalSection suppressed>
-          <Text>Lorem ipsum dolor sit amet</Text>
-        </ModalSection>
-        <ModalFooter flex={["0 0 auto", "1 1 100%"]}>
-          <Button iconLeft={<ChevronBackward />} type="secondary">
-            Back
-          </Button>
-          <Button fullWidth>Proceed to Payment (23.98€)</Button>
-        </ModalFooter>
-      </Modal>
-    </Container>
-  );
-};
-
-RemovableSections.story = {
-  name: "Removable sections",
 
-  parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+  args: {
+    illustration: undefined,
   },
-};
-
-RemovableSections.args = {
-  showMore: false,
-};
 
-export const WithForm = ({ showMore }) => {
-  const { Container, onClose } = useModal();
-  return (
-    <Container>
-      <Modal onClose={onClose} fixedFooter autoFocus={false}>
-        <ModalHeader title="Refund" description="Reservation number: 123456789" />
-        <ModalSection>
-          <Stack>
-            <Card title="Cancellation" />
-            <Text size="small" weight="bold">
-              Contact information
-            </Text>
-            <InputField label="E-mail" autoFocus placeholder="Your email" />
-            <InputGroup
-              flex={["0 0 120px", "1 1 100%"]}
-              onChange={action("onChange")}
-              label="Mobile phone"
-            >
-              <Select
-                options={[
-                  { value: 1, label: "+420" },
-                  { value: 2, label: "+421" },
-                ]}
-                value={1}
-                prefix={<CountryFlag code="cz" />}
-              />
-              <InputField placeholder="111 222 333" />
-            </InputGroup>
-            {showMore && (
-              <>
-                <Text weight="bold" size="small">
-                  Options
-                </Text>
-                <Radio label="Option one" checked />
-                <Radio label="Option two" />
-                <Text size="small" type="secondary" spaceAfter="large">
-                  These are the most favorite. <TextLink href="#">Show more</TextLink>
-                </Text>
-                <Checkbox label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at mauris laoreet, eleifend nunc eu, venenatis sem. Etiam ullamcorper euismod suscipit. In a tortor ac velit elementum ultrices. Sed accumsan suscipit pulvinar." />
-              </>
-            )}
-          </Stack>
-        </ModalSection>
-        <ModalFooter flex={["0 0 auto", "1 1 100%"]}>
-          <Button iconLeft={<ChevronBackward />} type="secondary">
-            Back
-          </Button>
-          <Button fullWidth>Proceed to Payment (23.98€)</Button>
-        </ModalFooter>
-      </Modal>
-    </Container>
-  );
-};
-
-WithForm.story = {
   parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+    controls: {
+      exclude: [
+        "fixedFooter",
+
+        "showBack",
+        "showSection",
+        "suppressed",
+        "illustration",
+        "autoFocus",
+        "isMobileFullPage",
+        "preventOverlayClose",
+        "hasCloseButton",
+        "disableAnimation",
+        "labelClose",
+        "lockScrolling",
+      ],
+    },
   },
 };
 
-WithForm.args = {
-  showMore: false,
-};
-
-export const WithFixedFooter = () => {
-  const { Container, onClose } = useModal();
-  return (
-    <Container>
-      <Modal onClose={onClose} fixedFooter>
-        <ModalHeader
-          title="Enjoy something to eat while you fly"
-          illustration={<Illustration name="BaggageDrop" size="small" />}
-          description="Select a flight below to see the menu (where available)"
-        />
-        <ModalSection suppressed>
-          <Stack>
-            <Tooltip content={<div>Lorem ipsum dolor sit amet</div>}>
+export const ShortModal: Story = {
+  render: ({ ...args }) => {
+    const { Container, onClose } = useModal();
+    return (
+      <Container>
+        <Modal onClose={onClose} {...args}>
+          <ModalSection>
+            <Stack>
               <Text uppercase weight="bold">
                 OUTBOUND
               </Text>
-            </Tooltip>
-            <Card>
-              <CardSection
-                expandable
-                noSeparator
-                title={
-                  <Stack direction="row" align="center" justify="between" spacing="200">
-                    <Stack spacing="100">
-                      <Text size="small" type="secondary">
-                        Sat, Mar 31 Trip length: 1h55m
-                      </Text>
-                      <Stack direction="row" spacing="100" align="center">
-                        <Text weight="bold">London LHR</Text>
-                        <FlightDirect size="small" />
-                        <Text weight="bold">Prague PRG</Text>
-                      </Stack>
-                    </Stack>
-                  </Stack>
-                }
-                actions={
-                  <Button type="secondary" size="small">
-                    Edit
-                  </Button>
-                }
-              />
-              <CardSection
+              <Tile
                 expandable
-                noSeparator
-                title={
-                  <Stack direction="row" align="center" justify="between" spacing="200">
-                    <Stack spacing="100">
-                      <Text size="small" type="secondary">
-                        Sat, Mar 31 Trip length: 1h55m
-                      </Text>
-                      <Stack direction="row" spacing="100" align="center">
-                        <Text weight="bold">London LHR</Text>
-                        <FlightDirect size="small" />
-                        <Text weight="bold">Prague PRG</Text>
-                      </Stack>
-                    </Stack>
-                  </Stack>
-                }
-                actions={
-                  <Button type="secondary" size="small">
-                    Edit
-                  </Button>
-                }
-              />
-              <CardSection
-                expandable
-                title={
-                  <Stack direction="row" align="center" justify="between" spacing="200">
-                    <Stack spacing="100">
-                      <Text size="small" type="secondary">
-                        Sat, Mar 31 Trip length: 1h55m
-                      </Text>
-                      <Stack direction="row" spacing="100" align="center">
-                        <Text weight="bold">London LHR</Text>
-                        <FlightDirect size="small" />
-                        <Text weight="bold">Prague PRG</Text>
-                      </Stack>
-                    </Stack>
-                  </Stack>
-                }
-                actions={
-                  <Button type="secondary" size="small">
-                    Edit
-                  </Button>
-                }
-              />
-            </Card>
-          </Stack>
-        </ModalSection>
-        <ModalSection>
-          <Stack>
-            <Text uppercase weight="bold">
-              INBOUND
-            </Text>
-            <Card>
-              <CardSection
                 title={
                   <Stack direction="row" align="center" justify="between" spacing="200">
+                    <CarrierLogo carriers={[{ code: "FR", name: "Ryanair" }]} size="large" />
                     <Stack spacing="100">
                       <Text size="small" type="secondary">
                         Sat, Mar 31 Trip length: 1h55m
@@ -392,228 +159,456 @@ export const WithFixedFooter = () => {
                     </Stack>
                   </Stack>
                 }
-                actions={
-                  <Button type="secondary" size="small">
-                    Edit
-                  </Button>
-                }
-                expandable
-              />
-              <CardSection
-                expandable
-                title={
-                  <Stack direction="row" align="center" justify="between" spacing="200">
-                    <Stack spacing="100">
-                      <Text size="small" type="secondary">
-                        Sat, Mar 31 Trip length: 1h55m
-                      </Text>
-                      <Stack direction="row" spacing="100" align="center">
-                        <Text weight="bold">London LHR</Text>
-                        <FlightDirect size="small" />
-                        <Text weight="bold">Prague PRG</Text>
-                      </Stack>
-                    </Stack>
-                  </Stack>
-                }
-                actions={
-                  <Button type="secondary" size="small">
-                    Edit
-                  </Button>
-                }
-              />
-              <CardSection
-                expandable
-                title={
-                  <Stack direction="row" align="center" justify="between" spacing="200">
-                    <Stack spacing="100">
-                      <Text size="small" type="secondary">
-                        Sat, Mar 31 Trip length: 1h55m
-                      </Text>
-                      <Stack direction="row" spacing="100" align="center">
-                        <Text weight="bold">London LHR</Text>
-                        <FlightDirect size="small" />
-                        <Text weight="bold">Prague PRG</Text>
-                      </Stack>
-                    </Stack>
-                  </Stack>
-                }
-                actions={
-                  <Button type="secondary" size="small">
-                    Edit
-                  </Button>
-                }
-              />
-            </Card>
-          </Stack>
-        </ModalSection>
-        <ModalFooter flex={["0 0 auto", "1 1 100%"]}>
-          <Button iconLeft={<ChevronBackward />} type="secondary">
-            Back
-          </Button>
-          <Button fullWidth>Proceed to Payment (23.98€)</Button>
-        </ModalFooter>
-      </Modal>
-    </Container>
-  );
-};
+              >
+                Hidden Content
+              </Tile>
+            </Stack>
+          </ModalSection>
+        </Modal>
+      </Container>
+    );
+  },
 
-WithFixedFooter.story = {
-  name: "With fixedFooter",
+  args: {
+    illustration: undefined,
+    size: undefined,
+    title: undefined,
+    description: undefined,
+  },
 
   parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+    controls: {
+      disable: true,
+    },
   },
 };
 
-export const FullPreview = ({
-  header,
-  footer,
-  size,
-  title,
-  description,
-  illustration,
-  fixed,
-  suppressed,
-  content,
-  flex,
-  dataTest,
-  isMobileFullPage,
-  mobileHeader,
-  showBack,
-  preventOverlayClose,
-}) => {
-  const { Container, onClose } = useModal();
-
-  return (
-    <Container>
-      <Modal
-        onClose={onClose}
-        mobileHeader={mobileHeader}
-        size={size}
-        fixedFooter={fixed}
-        dataTest={dataTest}
-        isMobileFullPage={isMobileFullPage}
-        preventOverlayClose={preventOverlayClose}
-      >
-        {header && (
+export const WithoutSection: Story = {
+  render: ({ showSection, children, ...args }) => {
+    const { Container, onClose } = useModal();
+    return (
+      <Container>
+        <Modal onClose={onClose} {...args}>
           <ModalHeader
-            title={title}
-            illustration={illustration && <Illustration name={illustration} size="small" />}
-            description={description}
-            suppressed={suppressed}
+            title="Enjoy something to eat while you fly"
+            illustration={<Illustration name="Meal" size="small" />}
+            description="Select a flight below to see the menu (where available)"
           />
-        )}
-        <ModalSection suppressed={suppressed}>
-          <Text>{content}</Text>
-        </ModalSection>
-        <ModalSection suppressed={suppressed}>
-          <Text>{content}</Text>
-        </ModalSection>
-        <ModalSection suppressed={suppressed}>
-          <Text>{content}</Text>
-        </ModalSection>
-        {footer && (
-          <ModalFooter flex={flex}>
-            {showBack && (
-              <Stack direction="row">
-                <Button type="secondary" iconLeft={<ChevronBackward />}>
-                  Back
-                </Button>
-                <ButtonLink type="secondary">Button</ButtonLink>
-              </Stack>
-            )}
-            <Box justify="end" display="flex">
-              <Button>Continue to Payment</Button>
-            </Box>
+          {showSection && (
+            <ModalSection>
+              <Text>{children}</Text>
+            </ModalSection>
+          )}
+          <ModalFooter flex={["0 0 auto", "1 1 100%"]}>
+            <Button iconLeft={<ChevronBackward />} type="secondary">
+              Back
+            </Button>
+            <Button fullWidth>Proceed to Payment (23.98€)</Button>
           </ModalFooter>
-        )}
-      </Modal>
-    </Container>
-  );
-};
+        </Modal>
+      </Container>
+    );
+  },
 
-FullPreview.story = {
-  name: "Full preview",
+  args: {
+    title: undefined,
+    description: undefined,
+    illustration: undefined,
+    size: undefined,
+  },
 
   parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+    controls: {
+      exclude: [
+        "size",
+        "title",
+        "description",
+        "mobileHeader",
+        "fixedFooter",
+        "showBack",
+        "suppressed",
+        "illustration",
+        "autoFocus",
+        "isMobileFullPage",
+        "preventOverlayClose",
+        "hasCloseButton",
+        "disableAnimation",
+        "labelClose",
+        "lockScrolling",
+      ],
+    },
   },
 };
 
-FullPreview.args = {
-  header: true,
-  footer: true,
-  size: SIZES.NORMAL,
-  title: "Orbit design system",
-  description: "Lorem ispum dolor sit amet",
-  illustration: NAMES[0],
-  fixed: false,
-  suppressed: false,
-  content:
-    "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
-  flex: ["0 0 auto", "1 1 100%"],
-  dataTest: "test",
-  isMobileFullPage: false,
-  mobileHeader: true,
-  showBack: true,
-  preventOverlayClose: false,
-};
-
-FullPreview.argTypes = {
-  size: {
-    options: Object.values(SIZES),
-    control: {
-      type: "select",
-    },
+export const RemovableSections: Story = {
+  render: ({ showSection, children, lockScrolling }) => {
+    const { Container, onClose } = useModal();
+    return (
+      <Container>
+        <Modal onClose={onClose} lockScrolling={lockScrolling}>
+          <ModalHeader
+            title="Enjoy something to eat while you fly"
+            illustration={<Illustration name="Meal" size="small" />}
+            description="Select a flight below to see the menu (where available)"
+          />
+          {showSection && (
+            <ModalSection>
+              <Text>{children}</Text>
+            </ModalSection>
+          )}
+          <ModalSection suppressed>
+            <Text>Lorem ipsum dolor sit amet</Text>
+          </ModalSection>
+          <ModalFooter flex={["0 0 auto", "1 1 100%"]}>
+            <Button iconLeft={<ChevronBackward />} type="secondary">
+              Back
+            </Button>
+            <Button fullWidth>Proceed to Payment (23.98€)</Button>
+          </ModalFooter>
+        </Modal>
+      </Container>
+    );
   },
-  illustration: {
-    options: NAMES,
-    control: {
-      type: "select",
+
+  parameters: {
+    controls: {
+      exclude: [
+        "size",
+        "title",
+        "description",
+        "mobileHeader",
+        "fixedFooter",
+        "showBack",
+        "suppressed",
+        "illustration",
+        "autoFocus",
+        "isMobileFullPage",
+        "preventOverlayClose",
+        "hasCloseButton",
+        "disableAnimation",
+        "labelClose",
+        "lockScrolling",
+      ],
     },
   },
 };
 
-export const Rtl = () => {
-  const { Container, onClose } = useModal();
-  return (
-    <Container>
-      <RenderInRtl>
-        <Modal onClose={onClose} fixedFooter>
+export const WithFixedFooter: Story = {
+  render: args => {
+    const { Container, onClose } = useModal();
+    return (
+      <Container>
+        <Modal onClose={onClose} {...args}>
           <ModalHeader
-            title="The title of the ModalHeader"
-            illustration={<Illustration name="Accommodation" size="small" />}
-            description="The description of the ModalHeader"
-            suppressed
+            title="Enjoy something to eat while you fly"
+            illustration={<Illustration name="BaggageDrop" size="small" />}
+            description="Select a flight below to see the menu (where available)"
           />
-          <ModalSection>
-            <Text>
-              You can try all possible configurations of this component. However, check Orbit.Kiwi
-              for more detailed design guidelines.
-            </Text>
-          </ModalSection>
           <ModalSection suppressed>
-            <Text>
-              You can try all possible configurations of this component. However, check Orbit.Kiwi
-              for more detailed design guidelines.
-            </Text>
+            <Stack>
+              <Tooltip content={<div>Lorem ipsum dolor sit amet</div>}>
+                <Text uppercase weight="bold">
+                  OUTBOUND
+                </Text>
+              </Tooltip>
+              <Card>
+                <CardSection
+                  expandable
+                  noSeparator
+                  title={
+                    <Stack direction="row" align="center" justify="between" spacing="200">
+                      <Stack spacing="100">
+                        <Text size="small" type="secondary">
+                          Sat, Mar 31 Trip length: 1h55m
+                        </Text>
+                        <Stack direction="row" spacing="100" align="center">
+                          <Text weight="bold">London LHR</Text>
+                          <FlightDirect size="small" />
+                          <Text weight="bold">Prague PRG</Text>
+                        </Stack>
+                      </Stack>
+                    </Stack>
+                  }
+                  actions={
+                    <Button type="secondary" size="small">
+                      Edit
+                    </Button>
+                  }
+                />
+                <CardSection
+                  expandable
+                  noSeparator
+                  title={
+                    <Stack direction="row" align="center" justify="between" spacing="200">
+                      <Stack spacing="100">
+                        <Text size="small" type="secondary">
+                          Sat, Mar 31 Trip length: 1h55m
+                        </Text>
+                        <Stack direction="row" spacing="100" align="center">
+                          <Text weight="bold">London LHR</Text>
+                          <FlightDirect size="small" />
+                          <Text weight="bold">Prague PRG</Text>
+                        </Stack>
+                      </Stack>
+                    </Stack>
+                  }
+                  actions={
+                    <Button type="secondary" size="small">
+                      Edit
+                    </Button>
+                  }
+                />
+                <CardSection
+                  expandable
+                  title={
+                    <Stack direction="row" align="center" justify="between" spacing="200">
+                      <Stack spacing="100">
+                        <Text size="small" type="secondary">
+                          Sat, Mar 31 Trip length: 1h55m
+                        </Text>
+                        <Stack direction="row" spacing="100" align="center">
+                          <Text weight="bold">London LHR</Text>
+                          <FlightDirect size="small" />
+                          <Text weight="bold">Prague PRG</Text>
+                        </Stack>
+                      </Stack>
+                    </Stack>
+                  }
+                  actions={
+                    <Button type="secondary" size="small">
+                      Edit
+                    </Button>
+                  }
+                />
+              </Card>
+            </Stack>
+          </ModalSection>
+          <ModalSection>
+            <Stack>
+              <Text uppercase weight="bold">
+                INBOUND
+              </Text>
+              <Card>
+                <CardSection
+                  title={
+                    <Stack direction="row" align="center" justify="between" spacing="200">
+                      <Stack spacing="100">
+                        <Text size="small" type="secondary">
+                          Sat, Mar 31 Trip length: 1h55m
+                        </Text>
+                        <Stack direction="row" spacing="100" align="center">
+                          <Text weight="bold">London LHR</Text>
+                          <FlightDirect size="small" />
+                          <Text weight="bold">Prague PRG</Text>
+                        </Stack>
+                      </Stack>
+                    </Stack>
+                  }
+                  actions={
+                    <Button type="secondary" size="small">
+                      Edit
+                    </Button>
+                  }
+                  expandable
+                />
+                <CardSection
+                  expandable
+                  title={
+                    <Stack direction="row" align="center" justify="between" spacing="200">
+                      <Stack spacing="100">
+                        <Text size="small" type="secondary">
+                          Sat, Mar 31 Trip length: 1h55m
+                        </Text>
+                        <Stack direction="row" spacing="100" align="center">
+                          <Text weight="bold">London LHR</Text>
+                          <FlightDirect size="small" />
+                          <Text weight="bold">Prague PRG</Text>
+                        </Stack>
+                      </Stack>
+                    </Stack>
+                  }
+                  actions={
+                    <Button type="secondary" size="small">
+                      Edit
+                    </Button>
+                  }
+                />
+                <CardSection
+                  expandable
+                  title={
+                    <Stack direction="row" align="center" justify="between" spacing="200">
+                      <Stack spacing="100">
+                        <Text size="small" type="secondary">
+                          Sat, Mar 31 Trip length: 1h55m
+                        </Text>
+                        <Stack direction="row" spacing="100" align="center">
+                          <Text weight="bold">London LHR</Text>
+                          <FlightDirect size="small" />
+                          <Text weight="bold">Prague PRG</Text>
+                        </Stack>
+                      </Stack>
+                    </Stack>
+                  }
+                  actions={
+                    <Button type="secondary" size="small">
+                      Edit
+                    </Button>
+                  }
+                />
+              </Card>
+            </Stack>
           </ModalSection>
           <ModalFooter flex={["0 0 auto", "1 1 100%"]}>
-            <Button type="secondary" iconLeft={<ChevronBackward />}>
+            <Button iconLeft={<ChevronBackward />} type="secondary">
               Back
             </Button>
-            <Button fullWidth>Continue to Payment</Button>
+            <Button fullWidth>Proceed to Payment (23.98€)</Button>
           </ModalFooter>
         </Modal>
-      </RenderInRtl>
-    </Container>
-  );
+      </Container>
+    );
+  },
+
+  args: {
+    illustration: undefined,
+    title: undefined,
+    description: undefined,
+  },
+
+  parameters: {
+    controls: {
+      exclude: [
+        "size",
+        "title",
+        "description",
+        "mobileHeader",
+        "showSection",
+        "showBack",
+        "suppressed",
+        "illustration",
+        "autoFocus",
+        "isMobileFullPage",
+        "preventOverlayClose",
+        "hasCloseButton",
+        "disableAnimation",
+        "labelClose",
+        "lockScrolling",
+        "children",
+      ],
+    },
+  },
 };
 
-Rtl.story = {
-  name: "RTL",
+type PlagroundStory = StoryObj<ModalPropsAndCustomArgs & { header: boolean; footer: boolean }>;
+export const Playground: PlagroundStory = {
+  render: ({
+    header,
+    footer,
+    title,
+    description,
+    illustration,
+    suppressed,
+    children,
+    flex,
+    showBack,
+    showSection,
+    ...args
+  }) => {
+    const { Container, onClose } = useModal();
+
+    return (
+      <Container>
+        <Modal onClose={onClose} {...args}>
+          {header && (
+            <ModalHeader
+              title={title}
+              illustration={
+                illustration && <Illustration name={illustration as Name} size="small" />
+              }
+              description={description}
+              suppressed={suppressed}
+            />
+          )}
+          <ModalSection suppressed={suppressed}>
+            <Text>{children}</Text>
+          </ModalSection>
+          {showSection && (
+            <ModalSection suppressed={suppressed}>
+              <Text>{children}</Text>
+            </ModalSection>
+          )}
+          {footer && (
+            <ModalFooter flex={flex}>
+              {showBack && (
+                <Stack direction="row">
+                  <Button type="secondary" iconLeft={<ChevronBackward />}>
+                    Back
+                  </Button>
+                  <ButtonLink type="secondary">Button</ButtonLink>
+                </Stack>
+              )}
+              <Box justify="end" display="flex">
+                <Button>Continue to Payment</Button>
+              </Box>
+            </ModalFooter>
+          )}
+        </Modal>
+      </Container>
+    );
+  },
+
+  args: {
+    header: true,
+    footer: true,
+  },
+
+  parameters: {
+    controls: {
+      exclude: ["autoFocus", "hasCloseButton", "disableAnimation", "labelClose"],
+    },
+  },
+};
+
+export const Rtl: Story = {
+  render: ({ lockScrolling }) => {
+    const { Container, onClose } = useModal();
+    return (
+      <Container>
+        <RenderInRtl>
+          <Modal onClose={onClose} lockScrolling={lockScrolling}>
+            <ModalHeader
+              title="The title of the ModalHeader"
+              illustration={<Illustration name="Accommodation" size="small" />}
+              description="The description of the ModalHeader"
+            />
+            <ModalSection>
+              <Text>
+                You can try all possible configurations of this component. However, check Orbit.Kiwi
+                for more detailed design guidelines.
+              </Text>
+            </ModalSection>
+            <ModalSection>
+              <Text>
+                You can try all possible configurations of this component. However, check Orbit.Kiwi
+                for more detailed design guidelines.
+              </Text>
+            </ModalSection>
+            <ModalFooter flex={["0 0 auto", "1 1 100%"]}>
+              <Button type="secondary" iconLeft={<ChevronBackward />}>
+                Back
+              </Button>
+              <Button fullWidth>Continue to Payment</Button>
+            </ModalFooter>
+          </Modal>
+        </RenderInRtl>
+      </Container>
+    );
+  },
 
   parameters: {
     info: "This is a preview of this component in RTL setup.",
+    controls: {
+      disable: true,
+    },
   },
 };