From e2c6341dcc63233bf9babd07ab58b64b6385f9fc Mon Sep 17 00:00:00 2001
From: Sarka Chwastkova <chwastkova.s@gmail.com>
Date: Fri, 9 Aug 2024 13:48:50 +0200
Subject: [PATCH] chore: migrate Primitives from CSF2 to CSF3

---
 .../src/primitives/Primitives.stories.tsx     | 347 +++++++-----------
 1 file changed, 141 insertions(+), 206 deletions(-)

diff --git a/packages/orbit-components/src/primitives/Primitives.stories.tsx b/packages/orbit-components/src/primitives/Primitives.stories.tsx
index 45c76030ac..15ee2c25c8 100644
--- a/packages/orbit-components/src/primitives/Primitives.stories.tsx
+++ b/packages/orbit-components/src/primitives/Primitives.stories.tsx
@@ -1,255 +1,190 @@
 import React from "react";
 import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
 
 import ButtonPrimitiveComponent from "./ButtonPrimitive";
 import * as Icons from "../icons";
+import { NAMES } from "../Illustration/consts.mts";
 import { SPACINGS_AFTER } from "../common/consts";
 import BadgePrimitiveComponent from "./BadgePrimitive";
 import IllustrationPrimitiveComponent, { SIZE_OPTIONS } from "./IllustrationPrimitive";
 
 const getIcon = source => Icons[source];
 
-export default {
+type MixedPropsAndArgs = React.ComponentProps<typeof BadgePrimitiveComponent> &
+  React.ComponentProps<typeof IllustrationPrimitiveComponent> &
+  React.ComponentProps<typeof ButtonPrimitiveComponent>;
+
+const meta: Meta<MixedPropsAndArgs> = {
   title: "Primitives",
 };
 
-export const BadgePrimitive = ({ icon, className }) => {
-  const Icon = getIcon(icon);
+export default meta;
 
-  return (
-    <BadgePrimitiveComponent className={className} icon={Icon && <Icon />}>
-      BadgePrimitive
-    </BadgePrimitiveComponent>
-  );
-};
+type Story = StoryObj<MixedPropsAndArgs>;
 
-BadgePrimitive.story = {
-  name: "BadgePrimitive",
+export const BadgePrimitive: Story = {
+  render: ({ icon, className }) => {
+    const Icon = getIcon(icon);
+
+    return (
+      <BadgePrimitiveComponent className={className} icon={Icon && <Icon />}>
+        BadgePrimitive
+      </BadgePrimitiveComponent>
+    );
+  },
 
   parameters: {
-    info: "This is a preview of this component in RTL setup.",
+    info: "This is a preview of BadgePrimitive component. Check Orbit.Kiwi for more detailed design guidelines.",
   },
-};
 
-BadgePrimitive.args = {
-  icon: "Airplane",
-  className: "bg-gradient-to-r from-[#fd1d1d] to-[#ffae28] text-white-normal",
-};
+  args: {
+    icon: "Airplane",
+    className: "bg-gradient-to-r from-[#fd1d1d] to-[#ffae28] text-white-normal",
+  },
 
-BadgePrimitive.argTypes = {
-  icon: {
-    options: Object.keys(Icons),
-    control: {
-      type: "select",
+  argTypes: {
+    icon: {
+      options: Object.keys(Icons),
+      control: {
+        type: "select",
+      },
     },
   },
 };
 
-export const IllustrationPrimitive = ({ size, dataTest, spaceAfter }) => {
-  return (
-    <IllustrationPrimitiveComponent
-      size={size}
-      name="Accommodation"
-      dataTest={dataTest}
-      spaceAfter={spaceAfter}
-    />
-  );
-};
-
-IllustrationPrimitive.story = {
-  name: "IllustrationPrimitive",
+export const IllustrationPrimitive: Story = {
+  render: args => <IllustrationPrimitiveComponent {...args} />,
 
   parameters: {
     info: "Explore our new set of illustrations for Kiwi.com.",
   },
-};
 
-IllustrationPrimitive.args = {
-  size: SIZE_OPTIONS.MEDIUM,
-  dataTest: "test",
-  spaceAfter: SPACINGS_AFTER.SMALL,
-};
+  args: {
+    size: SIZE_OPTIONS.MEDIUM,
+    spaceAfter: SPACINGS_AFTER.SMALL,
+    name: "Accommodation",
+  },
 
-IllustrationPrimitive.argTypes = {
-  size: {
-    options: Object.values(SIZE_OPTIONS),
-    control: {
-      type: "select",
+  argTypes: {
+    name: {
+      options: NAMES,
+      control: {
+        type: "select",
+      },
     },
-  },
-  spaceAfter: {
-    options: Object.values(SPACINGS_AFTER),
-    control: {
-      type: "select",
+    size: {
+      options: Object.values(SIZE_OPTIONS),
+      control: {
+        type: "select",
+      },
+    },
+    spaceAfter: {
+      options: Object.values(SPACINGS_AFTER),
+      control: {
+        type: "select",
+      },
     },
   },
 };
 
-export const ButtonPrimitive = ({
-  asComponent,
-  ariaControls,
-  ariaExpanded,
-  background,
-  backgroundHover,
-  backgroundActive,
-  backgroundFocus,
-  boxShadow,
-  boxShadowHover,
-  boxShadowActive,
-  boxShadowFocus,
-  children,
-  circled,
-  dataTest,
-  disabled,
-  external,
-  fontSize,
-  fontWeight,
-  foreground,
-  foregroundHover,
-  foregroundActive,
-  foregroundFocus,
-  fullWidth,
-  height,
-  href,
-  iconLeft,
-  iconRight,
-  icons,
-  loading,
-  padding,
-  role,
-  spaceAfter,
-  submit,
-  title,
-  tabIndex,
-  width,
-  contentAlign,
-  contentWidth,
-}) => {
-  const IconLeft = getIcon(iconLeft);
-  const IconRight = getIcon(iconRight);
-
-  return (
-    <ButtonPrimitiveComponent
-      asComponent={asComponent}
-      contentAlign={contentAlign}
-      contentWidth={contentWidth}
-      ariaControls={ariaControls}
-      ariaExpanded={ariaExpanded}
-      background={background}
-      backgroundHover={backgroundHover}
-      backgroundActive={backgroundActive}
-      backgroundFocus={backgroundFocus}
-      boxShadow={boxShadow}
-      boxShadowHover={boxShadowHover}
-      boxShadowActive={boxShadowActive}
-      boxShadowFocus={boxShadowFocus}
-      circled={circled}
-      dataTest={dataTest}
-      disabled={disabled}
-      external={external}
-      fontSize={fontSize}
-      fontWeight={fontWeight}
-      foreground={foreground}
-      foregroundHover={foregroundHover}
-      foregroundFocus={foregroundFocus}
-      foregroundActive={foregroundActive}
-      fullWidth={fullWidth}
-      height={height}
-      href={href}
-      iconLeft={IconLeft && <IconLeft />}
-      iconRight={IconRight && <IconRight />}
-      icons={icons}
-      loading={loading}
-      onClick={action("onClick")}
-      padding={padding}
-      role={role}
-      spaceAfter={spaceAfter}
-      submit={submit}
-      title={title}
-      tabIndex={tabIndex}
-      width={width}
-    >
-      {children}
-    </ButtonPrimitiveComponent>
-  );
-};
+export const ButtonPrimitive: Story = {
+  render: ({ children, ...args }) => {
+    const { iconLeft, iconRight } = args;
+    const IconLeft = getIcon(iconLeft);
+    const IconRight = getIcon(iconRight);
+
+    return (
+      <ButtonPrimitiveComponent
+        {...args}
+        iconLeft={IconLeft && <IconLeft />}
+        iconRight={IconRight && <IconRight />}
+      >
+        {children}
+      </ButtonPrimitiveComponent>
+    );
+  },
 
-ButtonPrimitive.story = {
-  name: "ButtonPrimitive",
-};
+  parameters: {
+    info: "This is a preview of ButtonPrimitive component. Check Orbit.Kiwi for more detailed design guidelines.",
+    controls: {
+      exclude: ["onClick"],
+    },
+  },
 
-ButtonPrimitive.args = {
-  asComponent: "button",
-  ariaControls: "",
-  ariaExpanded: false,
-  background: "#d63737",
-  backgroundHover: "#da0a0a",
-  backgroundActive: "#da0a0a",
-  backgroundFocus: "#da0a0a",
-  boxShadow: "0 8px 8px -6px rgba(0,0,0,.25)",
-  boxShadowHover: "0 8px 8px -6px rgba(0,0,0,.25)",
-  boxShadowActive: "0 8px 8px -6px rgba(0,0,0,.25)",
-  boxShadowFocus: "0 8px 8px -6px rgba(0,0,0,.25)",
-  children: "ButtonPrimitive",
-  circled: false,
-  dataTest: "test",
-  disabled: false,
-  external: false,
-  fontSize: "14px",
-  fontWeight: "bold",
-  foreground: "#faf333",
-  foregroundHover: "#faf333",
-  foregroundActive: "#faf333",
-  foregroundFocus: "#faf333",
-  fullWidth: false,
-  height: "46px",
-  href: "",
-  iconLeft: "",
-  iconRight: "ChevronForward",
-  icons: {
-    width: "16px",
-    height: "16px",
-    leftMargin: "2px",
-    rightMargin: "2px",
+  args: {
+    asComponent: "button",
+    ariaControls: "",
+    ariaExpanded: false,
+    background: "#d63737",
+    backgroundHover: "#da0a0a",
+    backgroundActive: "#da0a0a",
+    backgroundFocus: "#da0a0a",
+    boxShadow: "0 8px 8px -6px rgba(0,0,0,.25)",
+    boxShadowHover: "0 8px 8px -6px rgba(0,0,0,.25)",
+    boxShadowActive: "0 8px 8px -6px rgba(0,0,0,.25)",
+    boxShadowFocus: "0 8px 8px -6px rgba(0,0,0,.25)",
+    children: "ButtonPrimitive",
+    circled: false,
+    disabled: false,
+    external: false,
+    fontSize: "14px",
+    fontWeight: "bold",
     foreground: "#faf333",
     foregroundHover: "#faf333",
     foregroundActive: "#faf333",
+    foregroundFocus: "#faf333",
+    fullWidth: false,
+    height: "46px",
+    href: "",
+    iconLeft: "",
+    iconRight: "ChevronForward",
+    icons: {
+      width: "16px",
+      height: "16px",
+      leftMargin: "2px",
+      rightMargin: "2px",
+      foreground: "#faf333",
+      foregroundHover: "#faf333",
+      foregroundActive: "#faf333",
+    },
+    loading: false,
+    padding: "0 10px 0 10px",
+    role: "",
+    spaceAfter: SPACINGS_AFTER.SMALL,
+    submit: false,
+    title: "",
+    tabIndex: 0,
+    width: "",
+    contentAlign: "center",
+    contentWidth: "100%",
+    onClick: action("onClick"),
   },
-  loading: false,
-  padding: "0 10px 0 10px",
-  role: "",
-  spaceAfter: SPACINGS_AFTER.SMALL,
-  submit: false,
-  title: "",
-  tabIndex: 0,
-  width: "",
-  contentAlign: "center",
-  contentWidth: "100%",
-};
 
-ButtonPrimitive.argTypes = {
-  spaceAfter: {
-    options: Object.values(SPACINGS_AFTER),
-    control: {
-      type: "select",
+  argTypes: {
+    spaceAfter: {
+      options: Object.values(SPACINGS_AFTER),
+      control: {
+        type: "select",
+      },
     },
-  },
-  contentAlign: {
-    options: ["start", "center", "end", "space-between"],
-    control: {
-      type: "select",
+    contentAlign: {
+      options: ["start", "center", "end", "space-between"],
+      control: {
+        type: "select",
+      },
     },
-  },
-  iconLeft: {
-    options: Object.keys(Icons),
-    control: {
-      type: "select",
+    iconLeft: {
+      options: Object.keys(Icons),
+      control: {
+        type: "select",
+      },
     },
-  },
-  iconRight: {
-    options: Object.keys(Icons),
-    control: {
-      type: "select",
+    iconRight: {
+      options: Object.keys(Icons),
+      control: {
+        type: "select",
+      },
     },
   },
 };