chore: migrate CallOutBanner story from CSF2 to CSF3

kiwicom · Jul 29, 2024 · 1b88292 · 1b88292
1 parent a9a95db
commit 1b88292
Showing 1 changed file with 96 additions and 99 deletions.
diff --git a/packages/orbit-components/src/CallOutBanner/CallOutBanner.stories.tsx b/packages/orbit-components/src/CallOutBanner/CallOutBanner.stories.tsx
@@ -1,65 +1,52 @@
 import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
 import * as Icons from "../icons";
 import Illustration from "../Illustration";
 import { NAMES } from "../Illustration/consts.mts";
+import type { Name } from "../Illustration/types";
 import Button from "../Button";
 import List from "../List";
 import ListItem from "../List/ListItem";
 
 import CallOutBanner from ".";
 
-export default {
-  title: "CallOutBanner",
+type CallOutBannerPropsAndCustomArgs = React.ComponentProps<typeof CallOutBanner> & {
+  illustrationName: Name;
 };
 
-export const Default = ({ title, description }) => {
-  return (
-    <CallOutBanner
-      title={title}
-      description={description}
-      illustration={<Illustration size="small" name="Accommodation" />}
-      actions={
-        <Button
-          type="secondary"
-          size="small"
-          onClick={action("onClick")}
-          iconRight={<Icons.NewWindow />}
-        >
-          Find a Room
-        </Button>
-      }
-    >
-      <List type="secondary">
-        <ListItem icon={<Icons.Check color="success" />}>Up to 50% off.</ListItem>
-        <ListItem icon={<Icons.Check color="success" />}>
-          From 3-star budget to 5-star luxury.
-        </ListItem>
-      </List>
-    </CallOutBanner>
-  );
-};
+const meta: Meta<CallOutBannerPropsAndCustomArgs> = {
+  title: "CallOutBanner",
+  component: CallOutBanner,
 
-Default.story = {
-  parameters: {
-    info: "This is the default configuration of this component.",
+  args: {
+    title: "Rooms in Warsaw",
+    description:
+      "Select your hotel, hostel, apartment, or B&B from more than a million properties worldwide.",
+    illustrationName: "Accommodation",
   },
-};
 
-Default.args = {
-  title: "Rooms in Warsaw",
-  description:
-    "Select your hotel, hostel, apartment, or B&B from more than a million properties worldwide.",
+  argTypes: {
+    illustrationName: {
+      options: NAMES,
+      control: {
+        type: "select",
+      },
+    },
+  },
 };
 
-export const Actionable = ({ title, description }) => {
-  return (
+export default meta;
+type Story = StoryObj<CallOutBannerPropsAndCustomArgs>;
+
+export const Default: Story = {
+  render: ({ illustrationName, ...args }) => (
     <CallOutBanner
-      title={title}
-      description={description}
-      onClick={action("onClick")}
-      illustration={<Illustration size="small" name="Accommodation" />}
+      {...args}
+      illustration={
+        illustrationName ? <Illustration size="small" name={illustrationName} /> : undefined
+      }
       actions={
         <Button
           type="secondary"
@@ -78,73 +65,83 @@ export const Actionable = ({ title, description }) => {
         </ListItem>
       </List>
     </CallOutBanner>
-  );
-};
+  ),
 
-Actionable.story = {
   parameters: {
     info: "This is the default configuration of this component.",
   },
 };
 
-Actionable.args = {
-  title: "Rooms in Warsaw",
-  description:
-    "Select your hotel, hostel, apartment, or B&B from more than a million properties worldwide.",
-};
-
-export const Playground = ({ title, description, onClick, actions, dataTest, illustration }) => {
-  return (
-    <CallOutBanner
-      title={title}
-      description={description}
-      dataTest={dataTest}
-      onClick={onClick ? action("onClick") : undefined}
-      illustration={illustration ? <Illustration size="small" name={illustration} /> : undefined}
-      actions={
-        actions ? (
-          <Button
-            type="secondary"
-            size="small"
-            onClick={action("onClick")}
-            iconRight={<Icons.NewWindow />}
-          >
-            Find a Room
-          </Button>
-        ) : null
-      }
-    >
-      <List type="secondary">
-        <ListItem icon={<Icons.Check color="success" />}>Up to 50% off.</ListItem>
-        <ListItem icon={<Icons.Check color="success" />}>
-          From 3-star budget to 5-star luxury.
-        </ListItem>
-      </List>
-    </CallOutBanner>
-  );
-};
+export const Actionable: Story = {
+  render: ({ illustrationName, actions, ...args }) => {
+    return (
+      <CallOutBanner
+        {...args}
+        onClick={action("onClick")}
+        illustration={
+          illustrationName ? <Illustration size="small" name={illustrationName} /> : undefined
+        }
+        actions={
+          actions ? (
+            <Button
+              type="secondary"
+              size="small"
+              onClick={action("onClick")}
+              iconRight={<Icons.NewWindow />}
+            >
+              Find a Room
+            </Button>
+          ) : null
+        }
+      >
+        <List type="secondary">
+          <ListItem icon={<Icons.Check color="success" />}>Up to 50% off.</ListItem>
+          <ListItem icon={<Icons.Check color="success" />}>
+            From 3-star budget to 5-star luxury.
+          </ListItem>
+        </List>
+      </CallOutBanner>
+    );
+  },
 
-Playground.story = {
-  parameters: {
-    info: "This is the default configuration of this component.",
+  args: {
+    actions: true,
   },
 };
 
-Playground.args = {
-  title: "Rooms in Warsaw",
-  description:
-    "Select your hotel, hostel, apartment, or B&B from more than a million properties worldwide.",
-  onClick: false,
-  actions: false,
-  dataTest: "test",
-  illustration: "Accommodation",
-};
+export const Playground: Story = {
+  render: ({ onClick, actions, illustrationName, ...args }) => {
+    return (
+      <CallOutBanner
+        {...args}
+        onClick={onClick ? action("onClick") : undefined}
+        illustration={
+          illustrationName ? <Illustration size="small" name={illustrationName} /> : undefined
+        }
+        actions={
+          actions ? (
+            <Button
+              type="secondary"
+              size="small"
+              onClick={action("onClick")}
+              iconRight={<Icons.NewWindow />}
+            >
+              Find a Room
+            </Button>
+          ) : null
+        }
+      >
+        <List type="secondary">
+          <ListItem icon={<Icons.Check color="success" />}>Up to 50% off.</ListItem>
+          <ListItem icon={<Icons.Check color="success" />}>
+            From 3-star budget to 5-star luxury.
+          </ListItem>
+        </List>
+      </CallOutBanner>
+    );
+  },
 
-Playground.argTypes = {
-  illustration: {
-    options: NAMES,
-    control: {
-      type: "select",
-    },
+  args: {
+    actions: false,
   },
 };