From 372663c7568d589f899c2b84931b0d27eda2cac0 Mon Sep 17 00:00:00 2001
From: Sarka Chwastkova <chwastkova.s@gmail.com>
Date: Tue, 3 Sep 2024 15:29:09 +0200
Subject: [PATCH] chore(Modal): migrate from CSF2 to CSF3 - pt2

---
 .../src/Modal/Modal.stories.tsx               | 658 +++++++++---------
 1 file changed, 323 insertions(+), 335 deletions(-)

diff --git a/packages/orbit-components/src/Modal/Modal.stories.tsx b/packages/orbit-components/src/Modal/Modal.stories.tsx
index 0e8ee94ae2..2d3e493daa 100644
--- a/packages/orbit-components/src/Modal/Modal.stories.tsx
+++ b/packages/orbit-components/src/Modal/Modal.stories.tsx
@@ -14,14 +14,182 @@ import Stack from "../Stack";
 import ButtonLink from "../ButtonLink";
 import RenderInRtl from "../utils/rtl/RenderInRtl";
 import Card from "../Card";
-import CarrierLogo from "../CarrierLogo";
 import CardSection from "../Card/CardSection";
 import Tooltip from "../Tooltip";
-import Tile from "../Tile";
 import Box from "../Box";
+import InputField from "../InputField";
+import InputGroup from "../InputGroup";
+import Select from "../Select";
+import CountryFlag from "../CountryFlag";
+import Radio from "../Radio";
+import Checkbox from "../Checkbox";
+import TextLink from "../TextLink";
+import Itinerary, {
+  ItinerarySegment,
+  ItinerarySegmentDetail,
+  ItinerarySegmentStop,
+  ItineraryStatus,
+} from "../Itinerary";
+import Badge from "../Badge";
 
 import Modal, { ModalHeader, ModalSection, ModalFooter } from ".";
 
+const modalOutboundSection = (
+  <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>
+);
+
+const modalInboundSection = (
+  <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>
+);
+
 type ModalPropsAndCustomArgs = React.ComponentProps<typeof Modal> &
   React.ComponentProps<typeof ModalHeader> &
   React.ComponentProps<typeof ModalFooter> & {
@@ -36,38 +204,6 @@ const meta: Meta<ModalPropsAndCustomArgs> = {
   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>;
@@ -75,11 +211,11 @@ type Story = StoryObj<ModalPropsAndCustomArgs>;
 export default meta;
 
 function useModal() {
-  const [open, toggle] = React.useReducer((_, next) => next, true);
+  const [open, toggle] = React.useState(true);
   return {
     Container: ({ children }) => (
       <>
-        <div style={{ display: open ? "block" : "none" }}>{children}</div>
+        {open && children}
         <Button onClick={() => toggle(true)}>Open</Button>
       </>
     ),
@@ -90,105 +226,12 @@ function useModal() {
   };
 }
 
-export const Sizes: Story = {
-  render: ({ title, description, children, ...args }) => {
-    const { Container, onClose } = useModal();
-
-    return (
-      <Container>
-        <Modal {...args} onClose={onClose}>
-          <ModalHeader title={title}>{description}</ModalHeader>
-          <ModalSection>
-            <Text>{children}</Text>
-          </ModalSection>
-        </Modal>
-      </Container>
-    );
-  },
-
-  args: {
-    illustration: undefined,
-  },
-
-  parameters: {
-    controls: {
-      exclude: [
-        "fixedFooter",
-
-        "showBack",
-        "showSection",
-        "suppressed",
-        "illustration",
-        "autoFocus",
-        "isMobileFullPage",
-        "preventOverlayClose",
-        "hasCloseButton",
-        "disableAnimation",
-        "labelClose",
-        "lockScrolling",
-      ],
-    },
-  },
-};
-
-export const ShortModal: Story = {
-  render: ({ ...args }) => {
-    const { Container, onClose } = useModal();
-    return (
-      <Container>
-        <Modal onClose={onClose} {...args}>
-          <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>
-    );
-  },
-
-  args: {
-    illustration: undefined,
-    size: undefined,
-    title: undefined,
-    description: undefined,
-  },
-
-  parameters: {
-    controls: {
-      disable: true,
-    },
-  },
-};
-
-export const WithoutSection: Story = {
-  render: ({ showSection, children, ...args }) => {
+export const RemovableSections: Story = {
+  render: ({ showSection, children }) => {
     const { Container, onClose } = useModal();
     return (
       <Container>
-        <Modal onClose={onClose} {...args}>
+        <Modal onClose={onClose}>
           <ModalHeader
             title="Enjoy something to eat while you fly"
             illustration={<Illustration name="Meal" size="small" />}
@@ -199,6 +242,9 @@ export const WithoutSection: Story = {
               <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
@@ -211,23 +257,18 @@ export const WithoutSection: Story = {
   },
 
   args: {
-    title: undefined,
-    description: undefined,
-    illustration: undefined,
-    size: undefined,
+    showSection: false,
+    children:
+      "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
   },
 
   parameters: {
+    info: "An example of a modal with a removable section. Check Orbit.Kiwi for more detailed design guidelines.",
     controls: {
       exclude: [
         "size",
         "title",
-        "description",
         "mobileHeader",
-        "fixedFooter",
-        "showBack",
-        "suppressed",
-        "illustration",
         "autoFocus",
         "isMobileFullPage",
         "preventOverlayClose",
@@ -235,30 +276,25 @@ export const WithoutSection: Story = {
         "disableAnimation",
         "labelClose",
         "lockScrolling",
+        "fixedFooter",
       ],
     },
   },
 };
 
-export const RemovableSections: Story = {
-  render: ({ showSection, children, lockScrolling }) => {
+export const WithFixedFooter: Story = {
+  render: args => {
     const { Container, onClose } = useModal();
     return (
       <Container>
-        <Modal onClose={onClose} lockScrolling={lockScrolling}>
+        <Modal onClose={onClose} {...args}>
           <ModalHeader
             title="Enjoy something to eat while you fly"
-            illustration={<Illustration name="Meal" size="small" />}
+            illustration={<Illustration name="BaggageDrop" 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>
+          <ModalSection suppressed>{modalOutboundSection}</ModalSection>
+          <ModalSection>{modalInboundSection}</ModalSection>
           <ModalFooter flex={["0 0 auto", "1 1 100%"]}>
             <Button iconLeft={<ChevronBackward />} type="secondary">
               Back
@@ -270,17 +306,17 @@ export const RemovableSections: Story = {
     );
   },
 
+  args: {
+    fixedFooter: true,
+  },
+
   parameters: {
+    info: "An example of a modal with a fixed footer. Check Orbit.Kiwi for more detailed design guidelines.",
     controls: {
       exclude: [
         "size",
         "title",
-        "description",
         "mobileHeader",
-        "fixedFooter",
-        "showBack",
-        "suppressed",
-        "illustration",
         "autoFocus",
         "isMobileFullPage",
         "preventOverlayClose",
@@ -293,169 +329,49 @@ export const RemovableSections: Story = {
   },
 };
 
-export const WithFixedFooter: Story = {
-  render: args => {
+export const WithForm: Story = {
+  render: ({ showSection }) => {
     const { Container, onClose } = useModal();
+
     return (
       <Container>
-        <Modal onClose={onClose} {...args}>
-          <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>}>
-                <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>
+        <Modal onClose={onClose} fixedFooter>
+          <ModalHeader title="Refund" description="Reservation number: 123456789" />
           <ModalSection>
             <Stack>
-              <Text uppercase weight="bold">
-                INBOUND
+              <Card title="Cancellation" />
+              <Text size="small" weight="bold">
+                Contact information
               </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>
-                  }
+              <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" />}
                 />
-              </Card>
+                <InputField placeholder="111 222 333" />
+              </InputGroup>
+              {showSection && (
+                <>
+                  <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%"]}>
@@ -470,22 +386,16 @@ export const WithFixedFooter: Story = {
   },
 
   args: {
-    illustration: undefined,
-    title: undefined,
-    description: undefined,
+    showSection: false,
   },
 
   parameters: {
+    info: "An example of a modal with a form. Check Orbit.Kiwi for more detailed design guidelines.",
     controls: {
       exclude: [
         "size",
         "title",
-        "description",
         "mobileHeader",
-        "showSection",
-        "showBack",
-        "suppressed",
-        "illustration",
         "autoFocus",
         "isMobileFullPage",
         "preventOverlayClose",
@@ -493,14 +403,64 @@ export const WithFixedFooter: Story = {
         "disableAnimation",
         "labelClose",
         "lockScrolling",
-        "children",
+        "fixedFooter",
       ],
     },
   },
 };
 
-type PlagroundStory = StoryObj<ModalPropsAndCustomArgs & { header: boolean; footer: boolean }>;
-export const Playground: PlagroundStory = {
+export const WithItinerary: Story = {
+  render: () => {
+    const { Container, onClose } = useModal();
+
+    return (
+      <Container>
+        <Modal onClose={onClose}>
+          <ModalSection>
+            <Itinerary>
+              <ItineraryStatus type="success" label="This part is new">
+                <ItinerarySegment>
+                  <ItinerarySegmentStop
+                    city="Prague"
+                    station="Václav Haivel Airport Prague (PRG)"
+                    time="16:20"
+                    date="Wed, 15.6"
+                  />
+                  <ItinerarySegmentDetail
+                    duration="2h 10m"
+                    summary={
+                      <Badge carriers={[{ code: "FR", name: "Ryanair" }]} border={false}>
+                        Ryanair
+                      </Badge>
+                    }
+                  />
+                  <ItinerarySegmentStop
+                    hidden
+                    city="Frankfurt"
+                    time="18:30"
+                    date="Wed, 15.6"
+                    station="Frankfurt International Airport "
+                  />
+                  <ItinerarySegmentStop city="New York JFK" station="United States" />
+                </ItinerarySegment>
+              </ItineraryStatus>
+            </Itinerary>
+          </ModalSection>
+        </Modal>
+      </Container>
+    );
+  },
+
+  parameters: {
+    info: "An example of a modal with an Itinerary component. Check Orbit.Kiwi for more detailed design guidelines.",
+    controls: {
+      disable: true,
+    },
+  },
+};
+
+type PlaygroundStoryProps = ModalPropsAndCustomArgs & { header: boolean; footer: boolean };
+export const Playground: StoryObj<PlaygroundStoryProps> = {
   render: ({
     header,
     footer,
@@ -508,7 +468,6 @@ export const Playground: PlagroundStory = {
     description,
     illustration,
     suppressed,
-    children,
     flex,
     showBack,
     showSection,
@@ -529,13 +488,9 @@ export const Playground: PlagroundStory = {
               suppressed={suppressed}
             />
           )}
-          <ModalSection suppressed={suppressed}>
-            <Text>{children}</Text>
-          </ModalSection>
+          <ModalSection suppressed={suppressed}>{modalOutboundSection}</ModalSection>
           {showSection && (
-            <ModalSection suppressed={suppressed}>
-              <Text>{children}</Text>
-            </ModalSection>
+            <ModalSection suppressed={suppressed}>{modalInboundSection}</ModalSection>
           )}
           {footer && (
             <ModalFooter flex={flex}>
@@ -558,24 +513,57 @@ export const Playground: PlagroundStory = {
   },
 
   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",
+    flex: ["0 0 auto", "1 1 100%"],
+    hasCloseButton: true,
+    disableAnimation: false,
+    labelClose: "Close",
+    autoFocus: true,
     header: true,
     footer: true,
   },
 
+  argTypes: {
+    size: {
+      options: Object.values(SIZES),
+      control: {
+        type: "select",
+      },
+    },
+    illustration: {
+      options: [undefined, ...NAMES],
+      control: {
+        type: "select",
+      },
+    },
+  },
+
   parameters: {
+    info: "Playground of Modal component. Check Orbit.Kiwi for more detailed design guidelines.",
     controls: {
-      exclude: ["autoFocus", "hasCloseButton", "disableAnimation", "labelClose"],
+      exclude: ["children"],
     },
   },
 };
 
 export const Rtl: Story = {
-  render: ({ lockScrolling }) => {
+  render: () => {
     const { Container, onClose } = useModal();
     return (
       <Container>
         <RenderInRtl>
-          <Modal onClose={onClose} lockScrolling={lockScrolling}>
+          <Modal onClose={onClose}>
             <ModalHeader
               title="The title of the ModalHeader"
               illustration={<Illustration name="Accommodation" size="small" />}