From a39deb8f6bf1424400658ab3bce4160489467529 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               | 315 +++++++++---------
 1 file changed, 158 insertions(+), 157 deletions(-)

diff --git a/packages/orbit-components/src/Modal/Modal.stories.tsx b/packages/orbit-components/src/Modal/Modal.stories.tsx
index 0e8ee94ae2..26c146358a 100644
--- a/packages/orbit-components/src/Modal/Modal.stories.tsx
+++ b/packages/orbit-components/src/Modal/Modal.stories.tsx
@@ -14,11 +14,23 @@ 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 ".";
 
@@ -52,6 +64,10 @@ const meta: Meta<ModalPropsAndCustomArgs> = {
     description: "I'm lovely description",
     children:
       "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%"],
+    hasCloseButton: true,
+    disableAnimation: false,
+    labelClose: "Close",
   },
 
   argTypes: {
@@ -75,11 +91,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,156 +106,6 @@ 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 }) => {
-    const { Container, onClose } = useModal();
-    return (
-      <Container>
-        <Modal onClose={onClose} {...args}>
-          <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>
-          )}
-          <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>
-    );
-  },
-
-  args: {
-    title: undefined,
-    description: undefined,
-    illustration: undefined,
-    size: undefined,
-  },
-
-  parameters: {
-    controls: {
-      exclude: [
-        "size",
-        "title",
-        "description",
-        "mobileHeader",
-        "fixedFooter",
-        "showBack",
-        "suppressed",
-        "illustration",
-        "autoFocus",
-        "isMobileFullPage",
-        "preventOverlayClose",
-        "hasCloseButton",
-        "disableAnimation",
-        "labelClose",
-        "lockScrolling",
-      ],
-    },
-  },
-};
-
 export const RemovableSections: Story = {
   render: ({ showSection, children, lockScrolling }) => {
     const { Container, onClose } = useModal();
@@ -273,6 +139,7 @@ export const RemovableSections: Story = {
   parameters: {
     controls: {
       exclude: [
+        "flex",
         "size",
         "title",
         "description",
@@ -473,11 +340,13 @@ export const WithFixedFooter: Story = {
     illustration: undefined,
     title: undefined,
     description: undefined,
+    fixedFooter: true,
   },
 
   parameters: {
     controls: {
       exclude: [
+        "flex",
         "size",
         "title",
         "description",
@@ -499,8 +368,140 @@ export const WithFixedFooter: Story = {
   },
 };
 
-type PlagroundStory = StoryObj<ModalPropsAndCustomArgs & { header: boolean; footer: boolean }>;
-export const Playground: PlagroundStory = {
+export const WithForm: Story = {
+  render: ({ showSection }) => {
+    const { Container, onClose } = useModal();
+
+    return (
+      <Container>
+        <Modal onClose={onClose} fixedFooter autoFocus={false} lockScrolling={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>
+              {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%"]}>
+            <Button iconLeft={<ChevronBackward />} type="secondary">
+              Back
+            </Button>
+            <Button fullWidth>Proceed to Payment (23.98€)</Button>
+          </ModalFooter>
+        </Modal>
+      </Container>
+    );
+  },
+
+  parameters: {
+    info: "An example of a modal with a form. Check Orbit.Kiwi for more detailed design guidelines.",
+    controls: {
+      exclude: [
+        "flex",
+        "size",
+        "title",
+        "description",
+        "mobileHeader",
+        "fixedFooter",
+        "showBack",
+        "suppressed",
+        "illustration",
+        "autoFocus",
+        "isMobileFullPage",
+        "preventOverlayClose",
+        "hasCloseButton",
+        "disableAnimation",
+        "labelClose",
+        "lockScrolling",
+        "children",
+      ],
+    },
+  },
+};
+
+export const WithItinerary: Story = {
+  render: () => {
+    const { Container, onClose } = useModal();
+
+    return (
+      <Container>
+        <Modal onClose={onClose} autoFocus={false} lockScrolling={false}>
+          <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 Itineary component. Check Orbit.Kiwi for more detailed design guidelines.",
+    controls: {
+      disable: true,
+    },
+  },
+};
+
+type PlagroundStoryProps = ModalPropsAndCustomArgs & { header: boolean; footer: boolean };
+export const Playground: StoryObj<PlagroundStoryProps> = {
   render: ({
     header,
     footer,
@@ -564,7 +565,7 @@ export const Playground: PlagroundStory = {
 
   parameters: {
     controls: {
-      exclude: ["autoFocus", "hasCloseButton", "disableAnimation", "labelClose"],
+      exclude: ["autoFocus"],
     },
   },
 };