From 966bee6cc5611af2d17c920656dfbb3cb207141e Mon Sep 17 00:00:00 2001
From: Sarka Chwastkova <chwastkova.s@gmail.com>
Date: Tue, 24 Sep 2024 16:55:30 +0200
Subject: [PATCH 1/8] chore(Stepper): migrate from CSF2 to CSF3

---
 .../src/Stepper/Stepper.stories.tsx           | 182 +++++++-----------
 1 file changed, 72 insertions(+), 110 deletions(-)

diff --git a/packages/orbit-components/src/Stepper/Stepper.stories.tsx b/packages/orbit-components/src/Stepper/Stepper.stories.tsx
index 618b035284..5ef658105d 100644
--- a/packages/orbit-components/src/Stepper/Stepper.stories.tsx
+++ b/packages/orbit-components/src/Stepper/Stepper.stories.tsx
@@ -1,136 +1,98 @@
 import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
+import RenderInRtl from "../utils/rtl/RenderInRtl";
 import StatelessStepper from "./StepperStateless";
 
 import Stepper from ".";
 
-export default {
+const meta: Meta<typeof Stepper> = {
   title: "Stepper",
+  component: Stepper,
 };
 
-export const Default = ({ titleIncrement, titleDecrement }) => {
-  return (
-    <Stepper
-      titleIncrement={titleIncrement}
-      titleDecrement={titleDecrement}
-      onChange={action("onChange")}
-    />
-  );
-};
+export default meta;
+
+type Story = StoryObj<typeof Stepper>;
 
-Default.story = {
+export const Default: Story = {
   parameters: {
-    info: "Some description about this type of Stepper in general.",
+    info: "Default settings of Stepper component. Check Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      disable: true,
+    },
   },
 };
 
-Default.args = {
-  titleIncrement: "Add a passenger",
-  titleDecrement: "Remove a passenger",
-};
-
-export const Stateless = ({
-  min,
-  max,
-  value,
-  name,
-  disabled,
-  dataTest,
-  disabledIncrement,
-  disabledDecrement,
-  titleIncrement,
-  titleDecrement,
-  active,
-}) => {
-  return (
-    <StatelessStepper
-      dataTest={dataTest}
-      value={value}
-      active={active}
-      name={name}
-      maxValue={max}
-      minValue={min}
-      disabled={disabled}
-      disabledIncrement={disabledIncrement}
-      disabledDecrement={disabledDecrement}
-      titleIncrement={titleIncrement}
-      titleDecrement={titleDecrement}
-      onFocus={action("onFocus")}
-      onBlur={action("onBlur")}
-      onChange={action("onChange")}
-      onKeyDown={action("onKeyDown")}
-      onIncrement={action("onIncrement")}
-      onDecrement={action("onDecrement")}
-    />
-  );
-};
+export const Playground: Story = {
+  args: {
+    id: "stepper-ID",
+    name: "Passengers number",
+    step: 1,
+    minValue: 0,
+    maxValue: 20,
+    defaultValue: 0,
+    active: false,
+    disabled: false,
+    maxWidth: 120,
+    titleIncrement: "Add a passenger",
+    titleDecrement: "Remove a passenger",
+    onChange: action("onChange"),
+    onFocus: action("onFocus"),
+    onBlur: action("onBlur"),
+  },
 
-Stateless.story = {
   parameters: {
-    info: "Here you can try StatelessStepper component with additional functionality.",
+    info: "Playground of Stepper component. Check Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      exclude: ["onFocus", "onBlur", "onChange"],
+    },
   },
 };
 
-Stateless.args = {
-  min: 1,
-  max: 10,
-  value: "2 adults",
-  name: "name",
-  disabled: false,
-  dataTest: "test",
-  disabledIncrement: false,
-  disabledDecrement: false,
-  titleIncrement: "Add a passenger",
-  titleDecrement: "Remove a passenger",
-  active: false,
-};
+export const Stateless: Story & StoryObj<typeof StatelessStepper> = {
+  render: args => <StatelessStepper {...args} />,
+
+  args: {
+    ...Playground.args,
+    defaultValue: undefined,
+    onChange: undefined,
+    value: 0,
+    disabledIncrement: false,
+    disabledDecrement: false,
+    onKeyDown: action("onKeyDown"),
+    onIncrement: action("onIncrement"),
+    onDecrement: action("onDecrement"),
+  },
 
-export const Playground = ({
-  min,
-  max,
-  step,
-  defaultValue,
-  name,
-  disabled,
-  dataTest,
-  titleIncrement,
-  titleDecrement,
-  active,
-}) => {
-  return (
-    <Stepper
-      defaultValue={defaultValue}
-      step={step}
-      active={active}
-      name={name}
-      maxValue={max}
-      minValue={min}
-      disabled={disabled}
-      dataTest={dataTest}
-      titleIncrement={titleIncrement}
-      titleDecrement={titleDecrement}
-      onChange={action("onChange")}
-      onFocus={action("onFocus")}
-      onBlur={action("onBlur")}
-    />
-  );
-};
-Playground.story = {
   parameters: {
-    info: "Here you can try Stepper component with additional functionality.",
+    info: "Stepper stateless component. Check Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      exclude: [
+        "onFocus",
+        "onBlur",
+        "onChange",
+        "onKeyDown",
+        "onIncrement",
+        "onDecrement",
+        "defaultValue",
+      ],
+    },
   },
 };
 
-Playground.args = {
-  min: 1,
-  max: 10,
-  step: 2,
-  defaultValue: 4,
-  name: "name",
-  disabled: false,
-  dataTest: "test",
-  titleIncrement: "Add a passenger",
-  titleDecrement: "Remove a passenger",
-  active: false,
+export const Rtl: Story = {
+  render: () => (
+    <RenderInRtl>
+      <Stepper />
+    </RenderInRtl>
+  ),
+
+  parameters: {
+    info: "This is a preview of Stepper component in RTL setup.",
+    controls: {
+      disable: true,
+    },
+  },
 };

From 9ef9da67d72c8351a0c9081411c87f4046603308 Mon Sep 17 00:00:00 2001
From: Sarka Chwastkova <chwastkova.s@gmail.com>
Date: Tue, 24 Sep 2024 18:24:15 +0200
Subject: [PATCH 2/8] chore(StopoverArrow): migrate from CSF2 to CSF3

---
 .../StopoverArrow/StopoverArrow.stories.tsx   | 63 +++++++------------
 1 file changed, 23 insertions(+), 40 deletions(-)

diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.stories.tsx b/packages/orbit-components/src/StopoverArrow/StopoverArrow.stories.tsx
index 74a699a62d..05dc90c3ee 100644
--- a/packages/orbit-components/src/StopoverArrow/StopoverArrow.stories.tsx
+++ b/packages/orbit-components/src/StopoverArrow/StopoverArrow.stories.tsx
@@ -1,65 +1,48 @@
 import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
 
 import STOPS from "./consts";
 import RenderInRtl from "../utils/rtl/RenderInRtl";
 
 import StopoverArrow from ".";
 
-export default {
+const meta: Meta<typeof StopoverArrow> = {
   title: "StopoverArrow",
-};
-
-export const Playground = ({ stops, dataTest, id }) => {
-  return <StopoverArrow stops={stops} dataTest={dataTest} id={id} />;
-};
+  component: StopoverArrow,
 
-Playground.story = {
-  parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+  args: {
+    stops: STOPS.ZERO,
+    id: "ID",
   },
-};
-
-Playground.args = {
-  stops: STOPS.ZERO,
-  dataTest: "test",
-  id: "ID",
-};
 
-Playground.argTypes = {
-  stops: {
-    options: Object.values(STOPS),
-    control: {
-      type: "select",
+  argTypes: {
+    stops: {
+      options: Object.values(STOPS),
+      control: {
+        type: "select",
+      },
     },
   },
 };
 
-export const InRtl = ({ stops, dataTest }) => {
-  return (
-    <RenderInRtl>
-      <StopoverArrow stops={stops} dataTest={dataTest} />
-    </RenderInRtl>
-  );
-};
+type Story = StoryObj<typeof StopoverArrow>;
 
-InRtl.story = {
-  name: "In RTL",
+export default meta;
 
+export const Playground: Story = {
   parameters: {
     info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
   },
 };
 
-InRtl.args = {
-  stops: STOPS.THREE,
-  dataTest: "test",
-};
+export const Rtl: Story = {
+  render: args => (
+    <RenderInRtl>
+      <StopoverArrow {...args} />
+    </RenderInRtl>
+  ),
 
-InRtl.argTypes = {
-  stops: {
-    options: Object.values(STOPS),
-    control: {
-      type: "select",
-    },
+  parameters: {
+    info: "This is a preview of StopoverArrow component in RTL setup.",
   },
 };

From 2cb236372c28ef8bb2144f25af62e363d8a9a8fa Mon Sep 17 00:00:00 2001
From: Sarka Chwastkova <chwastkova.s@gmail.com>
Date: Tue, 24 Sep 2024 18:24:47 +0200
Subject: [PATCH 3/8] chore(Switch): migrate from CSF2 to CSF3

---
 .../src/Switch/Switch.stories.tsx             | 126 ++++++++----------
 1 file changed, 57 insertions(+), 69 deletions(-)

diff --git a/packages/orbit-components/src/Switch/Switch.stories.tsx b/packages/orbit-components/src/Switch/Switch.stories.tsx
index f395dcf791..7b58425577 100644
--- a/packages/orbit-components/src/Switch/Switch.stories.tsx
+++ b/packages/orbit-components/src/Switch/Switch.stories.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
 import RenderInRtl from "../utils/rtl/RenderInRtl";
@@ -6,102 +7,89 @@ import * as Icons from "../icons";
 
 import Switch from ".";
 
-const getIcon = (source: string | null) => source && Icons[source];
+const getIcon = (source: string) => Icons[source];
 
-export default {
+const meta: Meta<typeof Switch> = {
   title: "Switch",
-};
+  component: Switch,
 
-export const Default = ({ checked }) => {
-  return <Switch onChange={action("onChange")} checked={checked} />;
-};
+  args: {
+    checked: false,
+    onChange: action("onChange"),
+  },
 
-Default.story = {
-  name: "Default Switch",
+  parameters: {
+    info: "Explore Switch component. Check Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      exclude: ["onChange"],
+    },
+  },
 };
 
-Default.args = {
-  checked: true,
-};
+export default meta;
 
-export const CustomIcon = ({ checked, icon }) => {
-  const Icon = getIcon(icon);
-  return <Switch onChange={action("onChange")} checked={checked} icon={Icon && <Icon />} />;
-};
+type Story = StoryObj<typeof Switch>;
 
-CustomIcon.story = {
-  name: "Custom icon",
-  parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+export const Default: Story = {};
+
+export const CustomIcon: Story = {
+  render: ({ icon, ...args }) => {
+    const Icon = typeof icon === "string" && getIcon(icon);
+
+    return <Switch {...args} icon={Icon && <Icon />} />;
   },
-};
 
-CustomIcon.args = {
-  checked: true,
-  icon: "Lock",
-};
+  args: {
+    checked: true,
+    icon: "Lock",
+  },
 
-CustomIcon.argTypes = {
-  icon: {
-    options: Object.keys(Icons),
-    control: {
-      type: "select",
+  argTypes: {
+    icon: {
+      options: [undefined, ...Object.keys(Icons)],
+      control: {
+        type: "select",
+      },
     },
   },
 };
 
-export const Playground = ({ checked, dataTest, icon, disabled }) => {
-  const Icon = getIcon(icon);
-
-  return (
-    <Switch
-      onChange={action("onChange")}
-      checked={checked}
-      disabled={disabled}
-      dataTest={dataTest}
-      icon={Icon && <Icon />}
-    />
-  );
-};
+export const Playground: Story = {
+  render: ({ icon, ...args }) => {
+    const Icon = typeof icon === "string" && getIcon(icon);
 
-Playground.story = {
-  parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+    return <Switch {...args} icon={Icon && <Icon />} />;
   },
-};
 
-Playground.args = {
-  checked: false,
-  dataTest: "",
-  icon: "Lock",
-  disabled: false,
-};
+  args: {
+    ...CustomIcon.args,
+    id: "switch-id",
+    ariaLabelledby: "aria-labelledby",
+    disabled: false,
+    onFocus: action("onFocus"),
+    onBlur: action("onBlur"),
+  },
+
+  argTypes: {
+    ...CustomIcon.argTypes,
+  },
 
-Playground.argTypes = {
-  icon: {
-    options: Object.keys(Icons),
-    control: {
-      type: "select",
+  parameters: {
+    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+    controls: {
+      exclude: ["onChange", "onFocus", "onBlur"],
     },
   },
 };
 
-export const Rtl = ({ checked }) => {
-  return (
+export const Rtl: Story = {
+  render: args => (
     <RenderInRtl>
-      <Switch onChange={action("onChange")} checked={checked} />
+      <Switch {...args} />
     </RenderInRtl>
-  );
-};
-
-Rtl.story = {
-  name: "RTL",
+  ),
 
   parameters: {
     info: "This is a preview of this component in RTL setup.",
   },
 };
-
-Rtl.args = {
-  checked: true,
-};

From ec04cb697e31277924f141a99f8a5d1128e358c2 Mon Sep 17 00:00:00 2001
From: Sarka Chwastkova <chwastkova.s@gmail.com>
Date: Wed, 25 Sep 2024 14:17:29 +0200
Subject: [PATCH 4/8] chore(Table): migrate from CSF2 to CSF3

---
 .../src/Table/Table.stories.tsx               | 448 ++++++------------
 1 file changed, 132 insertions(+), 316 deletions(-)

diff --git a/packages/orbit-components/src/Table/Table.stories.tsx b/packages/orbit-components/src/Table/Table.stories.tsx
index e70e030534..0ac54be1d0 100644
--- a/packages/orbit-components/src/Table/Table.stories.tsx
+++ b/packages/orbit-components/src/Table/Table.stories.tsx
@@ -1,352 +1,168 @@
 import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
 
-import { ALIGN_OPTIONS, ALIGN_V_OPTIONS, WHITE_SPACE } from "./TableCell/consts";
-import { TYPE_OPTIONS } from "./consts";
+import { ALIGN_OPTIONS, WHITE_SPACE } from "./TableCell/consts";
+import { TYPE_OPTIONS, TYPE_AS } from "./consts";
 import RenderInRtl from "../utils/rtl/RenderInRtl";
-import type { VerticalAlign } from "./TableCell/types";
 
 import Table, { TableFooter, TableHead, TableBody, TableRow, TableCell } from ".";
 
-export default {
-  title: "Table",
-};
-
-export const DefaultTable = () => (
-  <Table>
-    <TableHead>
-      <TableRow>
-        <TableCell as="th" scope="col">
-          Number
-        </TableCell>
-        <TableCell as="th" scope="col">
-          Lorem
-        </TableCell>
-        <TableCell as="th" scope="col">
-          ipsum dolo
-        </TableCell>
-        <TableCell as="th" scope="col">
-          sit amet
-        </TableCell>
-      </TableRow>
-    </TableHead>
-    <TableBody>
-      <TableRow>
-        <TableCell as="th" scope="row">
-          1
-        </TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-      </TableRow>
-      <TableRow>
-        <TableCell as="th" scope="row">
-          2
-        </TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-      </TableRow>
-    </TableBody>
-  </Table>
+const tableRow = (
+  <TableRow>
+    {Array.from({ length: 4 }, (_, i) => (
+      <TableCell key={i}>lorem ipsum</TableCell>
+    ))}
+  </TableRow>
 );
 
-DefaultTable.story = {
-  parameters: {
-    info: "This is the default configuration of this component. Visit Orbit.Kiwi for more detailed guidelines.",
-  },
-};
-
-export const CompactTable = () => (
-  <Table compact>
-    <TableHead>
-      <TableRow>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-      </TableRow>
-    </TableHead>
-    <TableBody>
-      <TableRow>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-      </TableRow>
-      <TableRow>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-      </TableRow>
-    </TableBody>
-  </Table>
-);
+type TablePropsAndCustomArgs = React.ComponentProps<typeof Table> &
+  React.ComponentProps<typeof TableCell>;
 
-CompactTable.story = {
-  parameters: {
-    info: "This is the compact configuration of this component. Visit Orbit.Kiwi for more detailed guidelines.",
-  },
+const meta: Meta<TablePropsAndCustomArgs> = {
+  title: "Table",
+  component: Table,
 };
 
-export const SecondaryType = () => (
-  <Table type="secondary">
-    <TableHead>
-      <TableRow>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-      </TableRow>
-    </TableHead>
-    <TableBody>
-      <TableRow>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-      </TableRow>
-      <TableRow>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-      </TableRow>
-    </TableBody>
-  </Table>
-);
-
-SecondaryType.story = {
-  name: "Secondary type",
-
-  parameters: {
-    info: "This is the compact configuration of this component. Visit Orbit.Kiwi for more detailed guidelines.",
-  },
-};
+export default meta;
 
-export const WithoutStripes = () => (
-  <Table type="secondary" striped={false}>
-    <TableHead>
-      <TableRow>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-      </TableRow>
-    </TableHead>
-    <TableBody>
-      <TableRow>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-      </TableRow>
-      <TableRow>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-        <TableCell>Lorem ipsum dolor sit amet</TableCell>
-      </TableRow>
-    </TableBody>
-  </Table>
-);
+type Story = StoryObj<TablePropsAndCustomArgs>;
 
-WithoutStripes.story = {
-  name: "Without stripes",
+export const DefaultTable: Story = {
+  render: () => (
+    <Table>
+      <TableHead>{tableRow}</TableHead>
+      <TableBody>{Array(2).fill(tableRow)}</TableBody>
+    </Table>
+  ),
 
   parameters: {
-    info: "This is the compact configuration of this component. Visit Orbit.Kiwi for more detailed guidelines.",
+    info: "This is the default configuration of this component. Visit Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      disable: true,
+    },
   },
 };
 
-export const Playground = ({
-  compact,
-  striped,
-  children,
-  dataTest,
-  align,
-  verticalAlign,
-  whiteSpace,
-  type,
-}) => {
-  return (
-    <Table striped={striped} type={type} compact={compact} dataTest={dataTest}>
-      <TableHead>
-        <TableRow>
-          <TableCell whiteSpace={whiteSpace} verticalAlign={verticalAlign} align={align}>
-            {children}
-          </TableCell>
-          <TableCell whiteSpace={whiteSpace} verticalAlign={verticalAlign} align={align}>
-            {children}
-          </TableCell>
-          <TableCell whiteSpace={whiteSpace} verticalAlign={verticalAlign} align={align}>
-            {children}
-          </TableCell>
-          <TableCell whiteSpace={whiteSpace} verticalAlign={verticalAlign} align={align}>
-            {children}
-          </TableCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        <TableRow>
-          <TableCell whiteSpace={whiteSpace} verticalAlign={verticalAlign} align={align}>
-            {children}
-          </TableCell>
-          <TableCell whiteSpace={whiteSpace} verticalAlign={verticalAlign} align={align}>
-            {children}
-          </TableCell>
-          <TableCell whiteSpace={whiteSpace} verticalAlign={verticalAlign} align={align}>
-            {children}
-          </TableCell>
-          <TableCell whiteSpace={whiteSpace} verticalAlign={verticalAlign} align={align}>
-            {children}
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell whiteSpace={whiteSpace} verticalAlign={verticalAlign} align={align}>
-            {children}
-          </TableCell>
-          <TableCell whiteSpace={whiteSpace} verticalAlign={verticalAlign} align={align}>
-            {children}
-          </TableCell>
-          <TableCell whiteSpace={whiteSpace} verticalAlign={verticalAlign} align={align}>
-            {children}
-          </TableCell>
-          <TableCell whiteSpace={whiteSpace} verticalAlign={verticalAlign} align={align}>
-            {children}
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell whiteSpace={whiteSpace} verticalAlign={verticalAlign} align={align}>
-            {children}
-          </TableCell>
-          <TableCell whiteSpace={whiteSpace} verticalAlign={verticalAlign} align={align}>
-            {children}
-          </TableCell>
-          <TableCell whiteSpace={whiteSpace} verticalAlign={verticalAlign} align={align}>
-            {children}
-          </TableCell>
-          <TableCell whiteSpace={whiteSpace} verticalAlign={verticalAlign} align={align}>
-            {children}
-          </TableCell>
-        </TableRow>
-      </TableBody>
-      <TableFooter>
-        <TableRow>
-          <TableCell whiteSpace={whiteSpace} verticalAlign={verticalAlign} align={align}>
-            {children}
-          </TableCell>
-          <TableCell whiteSpace={whiteSpace} verticalAlign={verticalAlign} align={align}>
-            {children}
-          </TableCell>
-          <TableCell whiteSpace={whiteSpace} verticalAlign={verticalAlign} align={align}>
-            {children}
-          </TableCell>
-          <TableCell whiteSpace={whiteSpace} verticalAlign={verticalAlign} align={align}>
-            {children}
-          </TableCell>
-        </TableRow>
-      </TableFooter>
-    </Table>
-  );
-};
+export const Playground: Story = {
+  render: ({ id, compact, type, striped, children, ...args }) => {
+    return (
+      <Table id={id} type={type} compact={compact} striped={striped}>
+        <TableHead>
+          <TableRow>
+            {Array.from({ length: 4 }, (_, idx) => (
+              <TableCell key={idx} {...args}>
+                {children}
+              </TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {Array.from({ length: 3 }, (_, i) => (
+            <TableRow key={i}>
+              {Array.from({ length: 4 }, (__, j) => (
+                <TableCell key={j} {...args}>
+                  {children}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            {Array.from({ length: 4 }, (_, idx) => (
+              <TableCell key={idx} {...args}>
+                {children}
+              </TableCell>
+            ))}
+          </TableRow>
+        </TableFooter>
+      </Table>
+    );
+  },
 
-Playground.story = {
   parameters: {
     info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
   },
-};
 
-Playground.args = {
-  compact: false,
-  striped: true,
-  children: "Lorem ipsum dolor sit amet",
-  dataTest: "test",
-  align: ALIGN_OPTIONS.CENTER,
-  verticalAlign: ALIGN_V_OPTIONS.BASELINE as VerticalAlign,
-  whiteSpace: WHITE_SPACE.NOWRAP,
-  type: TYPE_OPTIONS.PRIMARY,
-};
+  args: {
+    id: "table-id",
+    compact: false,
+    type: TYPE_OPTIONS.SECONDARY,
+    striped: true,
+    align: ALIGN_OPTIONS.CENTER,
+    verticalAlign: "middle",
+    whiteSpace: WHITE_SPACE.NOWRAP,
+    children: "Lorem ipsum dolor sit amet",
+    as: TYPE_AS.TD,
+    scope: "col",
+  },
 
-Playground.argTypes = {
-  align: {
-    options: Object.values(ALIGN_OPTIONS),
-    control: {
-      type: "select",
+  argTypes: {
+    // Table category
+    id: { table: { category: "Table" } },
+    compact: { table: { category: "Table" } },
+    striped: { table: { category: "Table" } },
+    type: {
+      options: Object.values(TYPE_OPTIONS),
+      control: {
+        type: "select",
+      },
+      table: { category: "Table" },
     },
-  },
-  verticalAlign: {
-    options: Object.values(ALIGN_V_OPTIONS).filter(val =>
-      ["top", "bottom", "baseline", "middle"].includes(val),
-    ),
-    control: {
-      type: "select",
+    // TableCell category
+    children: { table: { category: "TableCell" } },
+    scope: {
+      options: ["col", "row", "colgroup", "rowgroup"],
+      control: {
+        type: "select",
+      },
+      table: { category: "TableCell" },
     },
-  },
-  whiteSpace: {
-    options: Object.values(WHITE_SPACE),
-    control: {
-      type: "select",
+    align: {
+      options: Object.values(ALIGN_OPTIONS),
+      control: {
+        type: "select",
+      },
+      table: { category: "TableCell" },
     },
-  },
-  type: {
-    options: Object.values(TYPE_OPTIONS),
-    control: {
-      type: "select",
+    verticalAlign: {
+      options: ["top", "bottom", "baseline", "middle"],
+      control: {
+        type: "select",
+      },
+      table: { category: "TableCell" },
+    },
+    whiteSpace: {
+      options: Object.values(WHITE_SPACE),
+      control: {
+        type: "select",
+      },
+      table: { category: "TableCell" },
+    },
+    as: {
+      options: Object.values(TYPE_AS),
+      control: {
+        type: "select",
+      },
+      table: { category: "TableCell" },
     },
   },
 };
 
-export const Rtl = () => (
-  <RenderInRtl>
-    <Table>
-      <TableHead>
-        <TableRow>
-          <TableCell>First column</TableCell>
-          <TableCell>Second column</TableCell>
-          <TableCell>Third column</TableCell>
-          <TableCell>Fourth column</TableCell>
-          <TableCell>Fifth column</TableCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        <TableRow>
-          <TableCell>First column</TableCell>
-          <TableCell>Second column</TableCell>
-          <TableCell>Third column</TableCell>
-          <TableCell>Fourth column</TableCell>
-          <TableCell>Fifth column</TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>First column</TableCell>
-          <TableCell>Second column</TableCell>
-          <TableCell>Third column</TableCell>
-          <TableCell>Fourth column</TableCell>
-          <TableCell>Fifth column</TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>First column</TableCell>
-          <TableCell>Second column</TableCell>
-          <TableCell>Third column</TableCell>
-          <TableCell>Fourth column</TableCell>
-          <TableCell>Fifth column</TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>First column</TableCell>
-          <TableCell>Second column</TableCell>
-          <TableCell>Third column</TableCell>
-          <TableCell>Fourth column</TableCell>
-          <TableCell>Fifth column</TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  </RenderInRtl>
-);
-
-Rtl.story = {
-  name: "RTL",
+export const Rtl: Story = {
+  render: () => (
+    <RenderInRtl>
+      <Table>
+        <TableHead>{tableRow}</TableHead>
+        <TableBody>{Array(2).fill(tableRow)}</TableBody>
+      </Table>
+    </RenderInRtl>
+  ),
 
   parameters: {
     info: "This is a preview of this component in RTL setup.",
+    controls: {
+      disable: true,
+    },
   },
 };

From 692950205949436a2a2c57441670c47286cb314e Mon Sep 17 00:00:00 2001
From: Sarka Chwastkova <chwastkova.s@gmail.com>
Date: Wed, 25 Sep 2024 16:34:29 +0200
Subject: [PATCH 5/8] chore(Tabs): migrate from CSF2 to CSF3

---
 .../src/Tabs/Tabs.stories.tsx                 | 327 +++++++++++-------
 1 file changed, 204 insertions(+), 123 deletions(-)

diff --git a/packages/orbit-components/src/Tabs/Tabs.stories.tsx b/packages/orbit-components/src/Tabs/Tabs.stories.tsx
index 6865f2cb5f..7fd9f98840 100644
--- a/packages/orbit-components/src/Tabs/Tabs.stories.tsx
+++ b/packages/orbit-components/src/Tabs/Tabs.stories.tsx
@@ -1,58 +1,65 @@
 import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
+import Box from "../Box";
 import RenderInRtl from "../utils/rtl/RenderInRtl";
+import { SPACINGS } from "../utils/layout/consts";
 import { TYPE_OPTIONS } from "./components/Tab/consts";
 
 import Tabs, { TabList, TabPanel, Tab, TabPanels } from ".";
 
-export const Default = () => {
-  return (
-    <Tabs onChange={action("onChange")}>
-      <TabList>
-        <Tab>Tab 1</Tab>
-        <Tab type="basic">Tab 2</Tab>
-        <Tab type="medium">Tab 3</Tab>
-        <Tab type="top">Tab 4</Tab>
-      </TabList>
-      <TabPanels>
-        <TabPanel>Tab 1 content</TabPanel>
-        <TabPanel>Tab 2 content</TabPanel>
-        <TabPanel>Tab 3 content</TabPanel>
-        <TabPanel>Tab 4 content</TabPanel>
-      </TabPanels>
-    </Tabs>
-  );
-};
+Box.displayName = "Box";
 
-export const FullWidth = ({ compact, fullWidth }) => {
-  return (
-    <Tabs onChange={action("onChange")}>
-      <TabList fullWidth={fullWidth} compact={compact}>
-        <Tab>Tab 1</Tab>
-        <Tab type="basic">Tab 2</Tab>
-        <Tab type="medium">Tab 3</Tab>
-        <Tab type="top">Tab 4</Tab>
-      </TabList>
-      <TabPanels>
-        <TabPanel>Tab 1 content</TabPanel>
-        <TabPanel>Tab 2 content</TabPanel>
-        <TabPanel>Tab 3 content</TabPanel>
-        <TabPanel>Tab 4 content</TabPanel>
-      </TabPanels>
-    </Tabs>
-  );
-};
+/* In the Playground story, we grouped the args of multiple components.
+These components include props with the same name, so we must create custom
+props to distinguish them. */
+interface CustomProps {
+  marginTabList: string;
+  paddingTabList: string;
+  marginTabPanel: string;
+  paddingTabPanel: string;
+  tabChildrenFirst: string;
+  tabChildrenSecond: string;
+  disabledFirstTab: boolean;
+  disabledSecondTab: boolean;
+  typeFirstTab: TYPE_OPTIONS;
+  typeSecondTab: TYPE_OPTIONS;
+  tabPanelChildrenFirst: string;
+  tabPanelChildrenSecond: string;
+  spacingTabList: SPACINGS;
+}
+
+type TabsPropsAndCustomArgs = React.ComponentProps<typeof Tabs> &
+  React.ComponentProps<typeof Tab> &
+  React.ComponentProps<typeof TabList> &
+  React.ComponentProps<typeof TabPanel> &
+  CustomProps;
+
+const meta: Meta<TabsPropsAndCustomArgs> = {
+  title: "Tabs",
+  component: Tabs,
+
+  args: {
+    onChange: action("onChange"),
+  },
 
-FullWidth.args = {
-  compact: false,
-  fullWidth: true,
+  parameters: {
+    info: "Tabs component stories. Check Orbit.kiwi for more detailed guidelines.",
+    controls: {
+      exclude: ["onChange"],
+    },
+  },
 };
 
-export const Compact = () => {
-  return (
-    <Tabs onChange={action("onChange")}>
-      <TabList compact>
+export default meta;
+
+type Story = StoryObj<TabsPropsAndCustomArgs>;
+
+export const Default: Story = {
+  render: () => (
+    <Tabs>
+      <TabList>
         <Tab>Tab 1</Tab>
         <Tab type="basic">Tab 2</Tab>
         <Tab type="medium">Tab 3</Tab>
@@ -65,94 +72,167 @@ export const Compact = () => {
         <TabPanel>Tab 4 content</TabPanel>
       </TabPanels>
     </Tabs>
-  );
-};
+  ),
 
-export const Controlled = () => {
-  const [selected, setSelected] = React.useState(2);
-
-  return (
-    <Tabs>
-      <TabList>
-        <Tab onClick={() => setSelected(0)} active={selected === 0}>
-          Tab 1
-        </Tab>
-        <Tab type="basic" onClick={() => setSelected(1)} active={selected === 1}>
-          Tab 2
-        </Tab>
-        <Tab type="medium" onClick={() => setSelected(2)} active={selected === 2}>
-          Tab 3
-        </Tab>
-        <Tab type="top" onClick={() => setSelected(3)} active={selected === 3}>
-          Tab 4
-        </Tab>
-      </TabList>
-      <TabPanels>
-        <TabPanel active={selected === 0}>Tab 1 content</TabPanel>
-        <TabPanel active={selected === 1}>Tab 2 content</TabPanel>
-        <TabPanel active={selected === 2}>Tab 3 content</TabPanel>
-        <TabPanel active={selected === 3}>Tab 4 content</TabPanel>
-      </TabPanels>
-    </Tabs>
-  );
+  parameters: {
+    info: "This is the default setup of Tabs component. Check Orbit.kiwi for more detailed guidelines.",
+    controls: {
+      disable: true,
+    },
+  },
 };
 
-Default.story = {
-  name: "Default",
-};
+export const Controlled: Story = {
+  render: () => {
+    const [selected, setSelected] = React.useState(2);
 
-export default {
-  title: "Tabs",
-};
+    return (
+      <Tabs>
+        <TabList>
+          <Tab onClick={() => setSelected(0)} active={selected === 0}>
+            Tab 1
+          </Tab>
+          <Tab type="basic" onClick={() => setSelected(1)} active={selected === 1}>
+            Tab 2
+          </Tab>
+          <Tab type="medium" onClick={() => setSelected(2)} active={selected === 2}>
+            Tab 3
+          </Tab>
+          <Tab type="top" onClick={() => setSelected(3)} active={selected === 3}>
+            Tab 4
+          </Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel active={selected === 0}>Tab 1 content</TabPanel>
+          <TabPanel active={selected === 1}>Tab 2 content</TabPanel>
+          <TabPanel active={selected === 2}>Tab 3 content</TabPanel>
+          <TabPanel active={selected === 3}>Tab 4 content</TabPanel>
+        </TabPanels>
+      </Tabs>
+    );
+  },
 
-export const Playground = ({
-  type,
-  compact,
-  disabled,
-  defaultSelected,
-  firstTabLabel,
-  secondTabLabel,
-  firstTabContent,
-  secondTabContent,
-  fullWidth,
-}) => {
-  return (
-    <Tabs onChange={action("onChange")} defaultSelected={defaultSelected}>
-      <TabList compact={compact} fullWidth={fullWidth}>
-        <Tab disabled={disabled}>{firstTabLabel}</Tab>
-        <Tab type={type}>{secondTabLabel}</Tab>
-      </TabList>
-      <TabPanels>
-        <TabPanel>{firstTabContent}</TabPanel>
-        <TabPanel>{secondTabContent}</TabPanel>
-      </TabPanels>
-    </Tabs>
-  );
+  parameters: {
+    info: "Example of controlled version of Tabs component. Check Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      disable: true,
+    },
+  },
 };
 
-Playground.args = {
-  type: TYPE_OPTIONS.DEFAULT,
-  compact: false,
-  disabled: false,
-  defaultSelected: 0,
-  firstTabLabel: "Tab 1",
-  secondTabLabel: "Tab 2",
-  firstTabContent: "Tab 1",
-  secondTabContent: "Tab 2",
-  fullWidth: false,
-};
+export const Playground: Story = {
+  render: ({
+    spacing,
+    defaultSelected,
+    disabledFirstTab,
+    disabledSecondTab,
+    typeFirstTab,
+    typeSecondTab,
+    marginTabList,
+    paddingTabList,
+    spacingTabList,
+    marginTabPanel,
+    paddingTabPanel,
+    tabChildrenFirst,
+    tabChildrenSecond,
+    tabPanelChildrenFirst,
+    tabPanelChildrenSecond,
+    ...args
+  }) => (
+    <Box background="cloudLight">
+      <Tabs defaultSelected={defaultSelected} spacing={spacing}>
+        <TabList spacing={spacingTabList} margin={marginTabList} padding={paddingTabList} {...args}>
+          <Tab type={typeFirstTab} disabled={disabledFirstTab}>
+            {tabChildrenFirst}
+          </Tab>
+          <Tab type={typeSecondTab} disabled={disabledSecondTab}>
+            {tabChildrenSecond}
+          </Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel margin={marginTabPanel} padding={paddingTabPanel}>
+            {tabPanelChildrenFirst}
+          </TabPanel>
+          <TabPanel margin={marginTabPanel} padding={paddingTabPanel}>
+            {tabPanelChildrenSecond}
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </Box>
+  ),
+
+  args: {
+    spacing: SPACINGS.THREE_HUNDRED,
+    defaultSelected: 1,
+    tabChildrenFirst: "Tab 1",
+    tabChildrenSecond: "Tab 2",
+    disabledFirstTab: false,
+    disabledSecondTab: false,
+    typeFirstTab: TYPE_OPTIONS.DEFAULT,
+    typeSecondTab: TYPE_OPTIONS.MEDIUM,
+    marginTabList: "10px",
+    paddingTabList: "20px",
+    spacingTabList: SPACINGS.NONE,
+    compact: false,
+    fullWidth: false,
+    tabPanelChildrenFirst: "Tab content 1",
+    tabPanelChildrenSecond: "Tab content 2",
+    marginTabPanel: "10px",
+    paddingTabPanel: "20px",
+  },
 
-Playground.argTypes = {
-  type: {
-    options: Object.values(TYPE_OPTIONS),
-    control: {
-      type: "select",
+  argTypes: {
+    // Tabs category
+    spacing: {
+      options: Object.values(SPACINGS),
+      control: { type: "select" },
+      table: { category: "Tabs" },
     },
+    defaultSelected: { control: { type: "number", min: 0, max: 1 }, table: { category: "Tabs" } },
+    // Tab category
+    tabChildrenFirst: { name: "children (first Tab)", table: { category: "Tab" } },
+    tabChildrenSecond: { name: "children (second Tab)", table: { category: "Tab" } },
+    disabledFirstTab: { table: { category: "Tab" } },
+    disabledSecondTab: { table: { category: "Tab" } },
+    typeFirstTab: {
+      options: Object.values(TYPE_OPTIONS),
+      control: {
+        type: "select",
+      },
+      table: { category: "Tab" },
+    },
+    typeSecondTab: {
+      options: Object.values(TYPE_OPTIONS),
+      control: {
+        type: "select",
+      },
+      table: { category: "Tab" },
+    },
+    // TabList category
+    compact: { table: { category: "TabList" } },
+    fullWidth: { table: { category: "TabList" } },
+    marginTabList: { name: "margin", table: { category: "TabList" } },
+    paddingTabList: { name: "padding", table: { category: "TabList" } },
+    spacingTabList: {
+      name: "spacing",
+      options: Object.values(SPACINGS),
+      control: { type: "select" },
+      table: { category: "TabList" },
+    },
+    // TabPanel category
+    marginTabPanel: { name: "margin", table: { category: "TabPanel" } },
+    paddingTabPanel: { name: "padding", table: { category: "TabPanel" } },
+    tabPanelChildrenFirst: { name: "children (first TabPanel)", table: { category: "TabPanel" } },
+    tabPanelChildrenSecond: { name: "children (second TabPanel)", table: { category: "TabPanel" } },
+  },
+
+  parameters: {
+    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
   },
 };
 
-export const RTL = () => {
-  return (
+export const RTL: Story = {
+  render: () => (
     <RenderInRtl>
       <Tabs>
         <TabList>
@@ -169,11 +249,12 @@ export const RTL = () => {
         </TabPanels>
       </Tabs>
     </RenderInRtl>
-  );
-};
+  ),
 
-Playground.story = {
   parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+    info: "This is a preview of Tabs component in RTL setup.",
+    controls: {
+      disable: true,
+    },
   },
 };

From d452c303176c58b35562aa32f972a5d7a4d07c33 Mon Sep 17 00:00:00 2001
From: Sarka Chwastkova <chwastkova.s@gmail.com>
Date: Thu, 26 Sep 2024 15:55:43 +0200
Subject: [PATCH 6/8] chore(Text): migrate from CSF2 to CSF3

---
 .../src/Text/Text.stories.tsx                 | 258 +++++++-----------
 1 file changed, 92 insertions(+), 166 deletions(-)

diff --git a/packages/orbit-components/src/Text/Text.stories.tsx b/packages/orbit-components/src/Text/Text.stories.tsx
index 1fa6251974..c064f7b676 100644
--- a/packages/orbit-components/src/Text/Text.stories.tsx
+++ b/packages/orbit-components/src/Text/Text.stories.tsx
@@ -1,5 +1,7 @@
 import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
 
+import { SPACINGS_AFTER } from "../common/consts";
 import {
   TYPE_OPTIONS,
   SIZE_OPTIONS,
@@ -7,6 +9,7 @@ import {
   ALIGN_OPTIONS,
   ELEMENT_OPTIONS,
 } from "./consts";
+import Box from "../Box";
 import RenderInRtl from "../utils/rtl/RenderInRtl";
 
 import Text from ".";
@@ -14,211 +17,134 @@ import Text from ".";
 const customText =
   "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem.";
 
-export default {
-  title: "Text",
-};
-
-export const PrimaryText = ({ children }) => {
-  return <Text>{children}</Text>;
-};
+Box.displayName = "Box";
 
-PrimaryText.story = {
-  name: "Primary text",
+const meta: Meta<typeof Text> = {
+  title: "Text",
+  component: Text,
 
-  parameters: {
-    info: "The most basic component for rendering text blocks. Visit Orbit.Kiwi for more detailed guidelines.",
+  args: {
+    children: customText,
   },
 };
 
-PrimaryText.args = {
-  children: customText,
-};
+export default meta;
 
-export const SecondaryText = ({ children }) => {
-  return <Text type="secondary">{children}</Text>;
-};
+type Story = StoryObj<typeof Text>;
 
-SecondaryText.story = {
-  name: "Secondary text",
+export const DefaultText: Story = {
+  render: ({ children }) => <Text>{children}</Text>,
 
   parameters: {
     info: "The most basic component for rendering text blocks. Visit Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      exclude: ["type", "size", "weight", "align", "as"],
+    },
   },
 };
 
-SecondaryText.args = {
-  children: customText,
-};
-
-export const StatusText = ({ children }) => {
-  return (
-    <div>
-      <Text type="info">{children}</Text>
-      <Text type="success">{children}</Text>
-      <Text type="warning">{children}</Text>
-      <Text type="critical">{children}</Text>
-    </div>
-  );
-};
-
-StatusText.story = {
-  name: "Status text",
+export const LinkInText: Story = {
+  render: () => (
+    <Text>
+      {customText} <a href="http://kiwi.com">Kiwi.com</a>
+    </Text>
+  ),
 
   parameters: {
-    info: "The most basic component for rendering text blocks. Visit Orbit.Kiwi for more detailed guidelines.",
+    info: "An example of link included in Text component. Check Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      disable: true,
+    },
   },
 };
 
-StatusText.args = {
-  children: customText,
-};
-
-export const LinkInText = () => (
-  <Text>
-    {customText} <a href="http://kiwi.com">Kiwi.com</a>
-  </Text>
-);
-
-LinkInText.story = {
-  name: "Link in text",
+export const Playground: Story = {
+  render: ({ type, children, ...args }) => (
+    <Box padding="300" background={type === TYPE_OPTIONS.WHITE ? "inkLight" : "cloudLight"}>
+      <Text {...args} type={type}>
+        {children}
+      </Text>
+    </Box>
+  ),
 
   parameters: {
-    info: "The most basic component for rendering text blocks. Visit Orbit.Kiwi for more detailed guidelines.",
+    info: "Playground of Text component. Check Orbit.Kiwi for more detailed guidelines.",
   },
-};
-
-export const WhiteText = ({ children }) => {
-  return (
-    <div style={{ backgroundColor: "#46515e", padding: "20px" }}>
-      <Text type="white">{children}</Text>
-    </div>
-  );
-};
-
-WhiteText.story = {
-  name: "White text",
 
-  parameters: {
-    info: "The most basic component for rendering text blocks. Visit Orbit.Kiwi for more detailed guidelines.",
+  args: {
+    type: TYPE_OPTIONS.PRIMARY,
+    as: ELEMENT_OPTIONS.P,
+    size: SIZE_OPTIONS.NORMAL,
+    weight: WEIGHT_OPTIONS.NORMAL,
+    align: ALIGN_OPTIONS.LEFT,
+    margin: "5px",
+    uppercase: false,
+    strikeThrough: false,
+    italic: false,
+    withBackground: false,
+    id: "ID",
+    spaceAfter: "none",
   },
-};
-
-WhiteText.args = {
-  children: customText,
-};
-
-export const Playground = ({
-  type,
-  as,
-  size,
-  weight,
-  align,
-  uppercase,
-  strikeThrough,
-  italic,
-  children,
-  dataTest,
-  id,
-  withBackground,
-}) => {
-  return (
-    <Text
-      id={id}
-      type={type}
-      as={as}
-      withBackground={withBackground}
-      size={size}
-      strikeThrough={strikeThrough}
-      weight={weight}
-      align={align}
-      uppercase={uppercase}
-      italic={italic}
-      dataTest={dataTest}
-    >
-      {children}
-    </Text>
-  );
-};
-
-Playground.story = {
-  parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
-  },
-};
-
-Playground.args = {
-  type: TYPE_OPTIONS.PRIMARY,
-  as: ELEMENT_OPTIONS.P,
-  size: SIZE_OPTIONS.NORMAL,
-  weight: WEIGHT_OPTIONS.NORMAL,
-  align: ALIGN_OPTIONS.LEFT,
-  uppercase: false,
-  strikeThrough: false,
-  italic: false,
-  children: customText,
-  dataTest: "test",
-  id: "ID",
-  withBackground: false,
-};
 
-Playground.argTypes = {
-  type: {
-    options: Object.values(TYPE_OPTIONS),
-    control: {
-      type: "select",
+  argTypes: {
+    type: {
+      options: Object.values(TYPE_OPTIONS),
+      control: {
+        type: "select",
+      },
     },
-  },
-  as: {
-    options: Object.values(ELEMENT_OPTIONS),
-    control: {
-      type: "select",
+    as: {
+      options: Object.values(ELEMENT_OPTIONS),
+      control: {
+        type: "select",
+      },
     },
-  },
-  size: {
-    options: Object.values(SIZE_OPTIONS),
-    control: {
-      type: "select",
+    size: {
+      options: Object.values(SIZE_OPTIONS),
+      control: {
+        type: "select",
+      },
     },
-  },
-  weight: {
-    options: Object.values(WEIGHT_OPTIONS),
-    control: {
-      type: "select",
+    weight: {
+      options: Object.values(WEIGHT_OPTIONS),
+      control: {
+        type: "select",
+      },
     },
-  },
-  align: {
-    options: Object.values(ALIGN_OPTIONS),
-    control: {
-      type: "select",
+    align: {
+      options: Object.values(ALIGN_OPTIONS),
+      control: {
+        type: "select",
+      },
+    },
+    spaceAfter: {
+      options: Object.values(SPACINGS_AFTER),
+      control: {
+        type: "select",
+      },
     },
   },
 };
 
-export const Rtl = ({ align }) => {
-  return (
+export const Rtl: Story = {
+  render: ({ children, ...args }) => (
     <RenderInRtl>
-      <Text align={align}>Lorem ipsum dolor sit amet</Text>
+      <Text {...args}>{children}</Text>
     </RenderInRtl>
-  );
-};
-
-Rtl.story = {
-  name: "RTL",
+  ),
 
   parameters: {
     info: "This is a preview of this component in RTL setup.",
+    controls: {
+      exclude: ["type", "size", "weight", "as"],
+    },
   },
-};
 
-Rtl.args = {
-  align: ALIGN_OPTIONS.START,
-};
+  args: {
+    align: ALIGN_OPTIONS.LEFT,
+  },
 
-Rtl.argTypes = {
-  align: {
-    options: Object.values(ALIGN_OPTIONS),
-    control: {
-      type: "select",
-    },
+  argTypes: {
+    align: { ...Playground.argTypes?.align },
   },
 };

From b4f3f8b7f77831ee5a612c0b5adba8ace09b8857 Mon Sep 17 00:00:00 2001
From: Sarka Chwastkova <chwastkova.s@gmail.com>
Date: Thu, 26 Sep 2024 15:56:08 +0200
Subject: [PATCH 7/8] chore(TextLink): migrate from CSF2 to CSF3

---
 .../src/TextLink/TextLink.stories.tsx         | 360 +++++++-----------
 1 file changed, 135 insertions(+), 225 deletions(-)

diff --git a/packages/orbit-components/src/TextLink/TextLink.stories.tsx b/packages/orbit-components/src/TextLink/TextLink.stories.tsx
index 7d0a9a6e70..0ce68692a9 100644
--- a/packages/orbit-components/src/TextLink/TextLink.stories.tsx
+++ b/packages/orbit-components/src/TextLink/TextLink.stories.tsx
@@ -1,8 +1,8 @@
 import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
 import { TYPE_OPTIONS, SIZE_OPTIONS } from "./consts";
-import { TYPE_OPTIONS as TEXT_TYPES } from "../Text/consts";
 import * as Icons from "../icons";
 import Text from "../Text";
 import Box from "../Box";
@@ -10,283 +10,193 @@ import RenderInRtl from "../utils/rtl/RenderInRtl";
 
 import TextLink from ".";
 
-const validate = (rel: string) => (rel !== undefined && rel !== "" ? rel : undefined);
+const validate = (rel: string) => (rel !== "" ? rel : undefined);
 
-const getIcon = (source: string | null) => source && Icons[source];
+const getIcon = (source: string) => Icons[source];
 
-export default {
-  title: "TextLink",
-};
+Box.displayName = "Box";
 
-export const PrimaryLink = ({ href, external, children }) => {
-  return (
-    <TextLink external={external} onClick={action("clicked")} href={href} type="primary">
-      {children}
-    </TextLink>
-  );
-};
+const meta: Meta<typeof TextLink> = {
+  title: "TextLink",
+  component: TextLink,
 
-PrimaryLink.story = {
-  name: "Primary link",
+  args: {
+    children: "Link text",
+    href: "https://kiwi.com",
+    onClick: action("onClick"),
+  },
 
   parameters: {
-    info: "Text links are used in paragraphs when part of the text needs to be actionable. It inherits the visual style of the parent paragraph. Visit Orbit.Kiwi for more detailed guidelines.",
+    info: "TextLink component. Check Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      exclude: ["onClick", "type", "external", "asComponent", "stopPropagation"],
+    },
   },
 };
 
-PrimaryLink.args = {
-  href: "https://kiwi.com",
-  external: false,
-  children: "Primary link",
-};
+export default meta;
 
-export const SecondaryLink = ({ href, external, children }) => {
-  return (
-    <TextLink external={external} onClick={action("clicked")} href={href} type="secondary">
-      {children}
-    </TextLink>
-  );
-};
+type Story = StoryObj<typeof TextLink>;
 
-SecondaryLink.story = {
-  name: "Secondary link",
+export const Default: Story = {
+  render: ({ children, ...args }) => <TextLink {...args}>{children}</TextLink>,
 
   parameters: {
-    info: "Text links are used in paragraphs when part of the text needs to be actionable. It inherits the visual style of the parent paragraph. Visit Orbit.Kiwi for more detailed guidelines.",
+    info: "Default configuration of TextLink component. Check Orbit.Kiwi for more detailed guidelines.",
   },
 };
 
-SecondaryLink.args = {
-  href: "https://kiwi.com",
-  external: false,
-  children: "Secondary link",
-};
-
-export const LinkWithLeftIcon = ({ href, children, icon }) => {
-  const Icon = getIcon(icon);
-
-  return (
-    <TextLink onClick={action("clicked")} href={href} iconLeft={Icon && <Icon />} standAlone>
-      {children}
-    </TextLink>
-  );
-};
+export const LinkWithLeftIcon: Story = {
+  render: ({ children, iconLeft, ...args }) => {
+    const Icon = typeof iconLeft === "string" && getIcon(iconLeft);
 
-LinkWithLeftIcon.story = {
-  name: "Link with left icon",
-
-  parameters: {
-    info: "Text links are used in paragraphs when part of the text needs to be actionable. It inherits the visual style of the parent paragraph. Visit Orbit.Kiwi for more detailed guidelines.",
+    return (
+      <TextLink {...args} iconLeft={Icon && <Icon />}>
+        {children}
+      </TextLink>
+    );
   },
-};
 
-LinkWithLeftIcon.args = {
-  href: "https://kiwi.com",
-  children: "TextLink with icon",
-  icon: "ChevronBackward",
-};
+  args: {
+    iconLeft: "ChevronBackward",
+  },
 
-LinkWithLeftIcon.argTypes = {
-  icon: {
-    options: Object.keys(Icons),
-    control: {
-      type: "select",
+  argTypes: {
+    iconLeft: {
+      options: [undefined, ...Object.keys(Icons)],
+      control: {
+        type: "select",
+      },
     },
   },
 };
 
-export const LinkWithRightIcon = ({ href, children, icon }) => {
-  const Icon = getIcon(icon);
-
-  return (
-    <TextLink onClick={action("clicked")} href={href} iconRight={Icon && <Icon />}>
-      {children}
-    </TextLink>
-  );
-};
-
-LinkWithRightIcon.story = {
-  name: "Link with right icon",
+export const LinkWithRightIcon: Story = {
+  render: ({ children, iconRight, ...args }) => {
+    const Icon = typeof iconRight === "string" && getIcon(iconRight);
 
-  parameters: {
-    info: "Text links are used in paragraphs when part of the text needs to be actionable. It inherits the visual style of the parent paragraph. Visit Orbit.Kiwi for more detailed guidelines.",
+    return (
+      <TextLink {...args} iconRight={Icon && <Icon />}>
+        {children}
+      </TextLink>
+    );
   },
-};
 
-LinkWithRightIcon.args = {
-  href: "https://kiwi.com",
-  children: "TextLink with icon",
-  icon: "ChevronForward",
-};
+  args: {
+    iconRight: "ChevronForward",
+  },
 
-LinkWithRightIcon.argTypes = {
-  icon: {
-    options: Object.keys(Icons),
-    control: {
-      type: "select",
+  argTypes: {
+    iconRight: {
+      ...LinkWithLeftIcon.argTypes?.iconLeft,
     },
   },
 };
 
-export const Playground = ({
-  href,
-  type,
-  size,
-  external,
-  children,
-  rel,
-  iconRight,
-  iconLeft,
-  dataTest,
-  tabIndex,
-  stopPropagation,
-  standAlone,
-  noUnderline,
-}) => {
-  const IconRight = getIcon(iconRight);
-  const IconLeft = getIcon(iconLeft);
-  return (
-    <Box
-      padding="300"
-      borderRadius="100"
-      background={type === TYPE_OPTIONS.WHITE ? "inkLight" : "cloudNormal"}
-    >
-      <TextLink
-        external={external}
-        onClick={action("clicked")}
-        href={href}
-        type={type}
-        size={size}
-        rel={validate(rel)}
-        iconRight={IconRight && <IconRight />}
-        iconLeft={IconLeft && <IconLeft />}
-        dataTest={dataTest}
-        tabIndex={tabIndex}
-        stopPropagation={stopPropagation}
-        standAlone={standAlone}
-        noUnderline={noUnderline}
-      >
-        {children}
-      </TextLink>
-    </Box>
-  );
-};
-
-Playground.story = {
-  parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+export const TextLinkInText: Story = {
+  render: ({ children, ...args }) => {
+    return (
+      <Text>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dapibus fermentum ipsum.
+        Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede.{" "}
+        <TextLink {...args}>{children}</TextLink>, fermentum vitae, sagittis id, malesuada in, quam.
+        Vivamus luctus egestas leo. Integer imperdiet lectus quis justo. Duis condimentum augue id
+        magna semper rutrum. Quisque porta. Sed elit dui, pellentesque a, faucibus vel, interdum
+        nec, diam.
+      </Text>
+    );
   },
-};
-
-Playground.args = {
-  href: "https://kiwi.com",
-  type: TYPE_OPTIONS.SECONDARY,
-  size: SIZE_OPTIONS.SMALL,
-  external: true,
-  children: "Custom link",
-  rel: "",
-  iconRight: "ChevronForward",
-  iconLeft: "",
-  dataTest: "test",
-  tabIndex: "",
-  stopPropagation: false,
-  standAlone: false,
-  noUnderline: false,
-};
 
-Playground.argTypes = {
-  type: {
-    options: Object.values(TYPE_OPTIONS),
-    control: {
-      type: "select",
+  parameters: {
+    info: "An example of usage of TextLink in Text component. Check Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      exclude: ["onClick", "external", "asComponent", "stopPropagation"],
     },
   },
-  size: {
-    options: Object.values(SIZE_OPTIONS),
-    control: {
-      type: "select",
-    },
+
+  args: {
+    type: TYPE_OPTIONS.SUCCESS,
+    size: SIZE_OPTIONS.NORMAL,
+    standAlone: false,
+    noUnderline: false,
   },
-  iconRight: {
-    options: Object.keys(Icons),
-    control: {
-      type: "select",
+
+  argTypes: {
+    type: {
+      options: Object.values(TYPE_OPTIONS),
+      control: {
+        type: "select",
+      },
     },
-  },
-  iconLeft: {
-    options: Object.keys(Icons),
-    control: {
-      type: "select",
+    size: {
+      options: [undefined, ...Object.values(SIZE_OPTIONS)],
+      control: {
+        type: "select",
+      },
     },
   },
 };
 
-export const TextLinkInText = ({ type }) => {
-  return (
-    <Text type={type}>
-      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dapibus fermentum ipsum. Duis
-      ante orci, molestie vitae vehicula venenatis, tincidunt ac pede.{" "}
-      <TextLink onClick={action("onClick")} type={type}>
-        Etiam dui sem
-      </TextLink>
-      , fermentum vitae, sagittis id, malesuada in, quam. Vivamus luctus egestas leo. Integer
-      imperdiet lectus quis justo. Duis condimentum augue id magna semper rutrum. Quisque porta. Sed
-      elit dui, pellentesque a, faucibus vel, interdum nec, diam.
-    </Text>
-  );
-};
-
-TextLinkInText.story = {
-  name: "TextLink inside paragraph",
-  parameters: {
-    info: "It inherits the visual style of the parent paragraph. Visit Orbit.Kiwi for more detailed guidelines.",
+export const Playground: Story = {
+  render: ({ rel, type, children, iconRight, iconLeft, ...args }) => {
+    const IconRight = typeof iconRight === "string" && getIcon(iconRight);
+    const IconLeft = typeof iconLeft === "string" && getIcon(iconLeft);
+
+    return (
+      <Box padding="300" background={type === TYPE_OPTIONS.WHITE ? "inkLight" : "cloudLight"}>
+        <TextLink
+          {...args}
+          type={type}
+          rel={validate(rel!)}
+          iconRight={IconRight && <IconRight />}
+          iconLeft={IconLeft && <IconLeft />}
+        >
+          {children}
+        </TextLink>
+      </Box>
+    );
   },
-};
-
-TextLinkInText.args = {
-  type: TEXT_TYPES.CRITICAL,
-};
 
-TextLinkInText.argTypes = {
-  type: {
-    options: Object.values(TEXT_TYPES),
-    control: {
-      type: "select",
-    },
+  args: {
+    ...LinkWithLeftIcon.args,
+    ...LinkWithRightIcon.args,
+    ...TextLinkInText.args,
+    external: true,
+    rel: "",
+    tabIndex: "",
+    stopPropagation: false,
+    title: "link title",
+    ariaCurrent: "text-link",
+    id: "link-id",
   },
-};
 
-export const Accessibility = ({ children, title }) => {
-  return (
-    <TextLink title={title} onClick={action("clicked")} type="primary">
-      {children}
-    </TextLink>
-  );
-};
+  argTypes: {
+    ...LinkWithLeftIcon.argTypes,
+    ...LinkWithRightIcon.argTypes,
+    ...TextLinkInText.argTypes,
+  },
 
-Accessibility.story = {
   parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+    info: "Playground of TextLink component. Check Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      exclude: ["onClick", "asComponent"],
+    },
   },
 };
 
-Accessibility.args = {
-  children: "Primary link",
-  title: "Clarify purpose of a link for screen readers",
-};
-
-export const Rtl = () => (
-  <RenderInRtl>
-    <TextLink onClick={action("clicked")} href="#" iconRight={<Icons.ChevronForward />}>
-      Link
-    </TextLink>
-  </RenderInRtl>
-);
-
-Rtl.story = {
-  name: "RTL",
+export const Rtl: Story = {
+  render: args => (
+    <RenderInRtl>
+      <TextLink {...args} iconRight={<Icons.ChevronForward reverseOnRtl />}>
+        Link
+      </TextLink>
+    </RenderInRtl>
+  ),
 
   parameters: {
     info: "This is a preview of this component in RTL setup.",
+    controls: {
+      disable: true,
+    },
   },
 };

From 22ed55cddd44f59c3d4e9b27f2e622f0ca7eff90 Mon Sep 17 00:00:00 2001
From: Sarka Chwastkova <chwastkova.s@gmail.com>
Date: Thu, 26 Sep 2024 15:56:30 +0200
Subject: [PATCH 8/8] chore(Textarea): migrate from CSF2 to CSF3

---
 .../src/Textarea/Textarea.stories.tsx         | 226 +++++++-----------
 1 file changed, 80 insertions(+), 146 deletions(-)

diff --git a/packages/orbit-components/src/Textarea/Textarea.stories.tsx b/packages/orbit-components/src/Textarea/Textarea.stories.tsx
index e5a6def04f..d1b67c6d78 100644
--- a/packages/orbit-components/src/Textarea/Textarea.stories.tsx
+++ b/packages/orbit-components/src/Textarea/Textarea.stories.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
 import { RESIZE_OPTIONS } from "./consts";
@@ -7,185 +8,118 @@ import { SPACINGS_AFTER } from "../common/consts";
 
 import Textarea from ".";
 
-export default {
+const meta: Meta<typeof Textarea> = {
   title: "Textarea",
-};
-
-export const Default = ({ label, value, placeholder }) => {
-  return (
-    <Textarea label={label} placeholder={placeholder} onChange={action("change")} value={value} />
-  );
-};
+  component: Textarea,
 
-Default.story = {
   parameters: {
-    info: "Some description about this type of textarea in general.",
+    info: "Textarea component. Check Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      exclude: ["onChange"],
+    },
   },
-};
-
-Default.args = {
-  label: "Label",
-  value: "",
-  placeholder: "Placeholder",
-};
-
-export const WithLabel = ({ label, value, placeholder }) => {
-  return (
-    <Textarea label={label} placeholder={placeholder} onChange={action("change")} value={value} />
-  );
-};
 
-WithLabel.story = {
-  name: "With label",
-
-  parameters: {
-    info: "Some description about this type of textarea in general.",
+  args: {
+    label: "Label",
+    name: "Textarea",
+    value: "Textarea",
+    placeholder: "Placeholder",
+    onChange: action("onChange"),
   },
 };
 
-WithLabel.args = {
-  label: "Label",
-  value: "",
-  placeholder: "Placeholder",
-};
+type Story = StoryObj<typeof Textarea>;
 
-export const WithHelp = ({ value, placeholder, help }) => {
-  return (
-    <Textarea placeholder={placeholder} help={help} onChange={action("change")} value={value} />
-  );
-};
+export default meta;
 
-WithHelp.story = {
-  name: "With help",
+export const Default: Story = {};
 
-  parameters: {
-    info: "Some description about this type of textarea in general.",
+export const WithHelp: Story = {
+  args: {
+    help: "Everything is fine.",
+    helpClosable: false,
   },
 };
 
-WithHelp.args = {
-  value: "Something",
-  placeholder: "Placeholder",
-  help: "Everything is fine.",
-};
-
-export const WithError = ({ value, placeholder, error }) => {
-  return (
-    <Textarea placeholder={placeholder} error={error} onChange={action("change")} value={value} />
-  );
+export const WithError: Story = {
+  args: {
+    error: "Something went wrong.",
+  },
 };
 
-WithError.story = {
-  name: "With error",
+export const Uncontrolled: Story = {
+  args: {
+    defaultValue: "defaultValue",
+    value: undefined,
+  },
 
   parameters: {
-    info: "Some description about this type of textarea in general.",
+    info: "Uncontrolled version of Textarea component. Check Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      exclude: ["onChange", "value"],
+    },
   },
 };
 
-WithError.args = {
-  value: "Something",
-  placeholder: "Placeholder",
-  error: "Something went wrong.",
-};
-
-export const Playground = ({
-  label,
-  value,
-  fullHeight,
-  placeholder,
-  help,
-  error,
-  rows,
-  required,
-  disabled,
-  readOnly,
-  maxLength,
-  resize,
-  dataTest,
-  spaceAfter,
-}) => {
-  return (
-    <Textarea
-      label={label}
-      value={value}
-      fullHeight={fullHeight}
-      placeholder={placeholder}
-      help={help}
-      error={error}
-      rows={rows}
-      required={required}
-      disabled={disabled}
-      readOnly={readOnly}
-      maxLength={maxLength}
-      resize={resize}
-      onChange={action("change")}
-      onFocus={action("focus")}
-      onBlur={action("blur")}
-      dataTest={dataTest}
-      spaceAfter={spaceAfter}
-    />
-  );
-};
-
-Playground.story = {
+export const Playground: Story = {
   parameters: {
-    info: "Some description about this type of textarea in general.",
+    info: "Playground of Textarea component. Check Orbit.Kiwi for more detailed guidelines. In case you want try uncontrolled variant of the component, feel free to check Uncontrolled story.",
+    controls: {
+      exclude: ["onChange", "onFocus", "onBlur"],
+    },
   },
-};
-
-Playground.args = {
-  label: "Label",
-  value: "",
-  fullHeight: true,
-  placeholder: "Placeholder",
-  help: "",
-  error: "Something went wrong.",
-  disabled: false,
-  readOnly: false,
-  resize: RESIZE_OPTIONS.VERTICAL,
-  maxLength: Infinity,
-  dataTest: "test",
-  rows: 3,
-  required: false,
-  spaceAfter: SPACINGS_AFTER.MEDIUM,
-};
 
-Playground.argTypes = {
-  resize: {
-    options: Object.values(RESIZE_OPTIONS),
-    control: { type: "select" },
+  args: {
+    ...WithHelp.args,
+    ...WithError.args,
+    id: "textarea-id",
+    fullHeight: true,
+    disabled: false,
+    readOnly: false,
+    resize: RESIZE_OPTIONS.VERTICAL,
+    maxLength: Infinity,
+    rows: 3,
+    required: false,
+    spaceAfter: SPACINGS_AFTER.MEDIUM,
+    tabIndex: 0,
+    dataAttrs: {
+      "data-story-example": "Storybook-playground",
+    },
+    onFocus: action("onFocus"),
+    onBlur: action("onBlur"),
   },
-  spaceAfter: {
-    options: Object.values(SPACINGS_AFTER),
-    control: { type: "select" },
+
+  argTypes: {
+    resize: {
+      options: Object.values(RESIZE_OPTIONS),
+      control: { type: "select" },
+    },
+    spaceAfter: {
+      options: Object.values(SPACINGS_AFTER),
+      control: { type: "select" },
+    },
   },
 };
 
-export const Rtl = ({ label, help, error }) => {
-  return (
+export const Rtl: Story = {
+  render: args => (
     <RenderInRtl>
-      <Textarea
-        label={label}
-        help={help}
-        error={error}
-        placeholder="My placeholder"
-        value="Content of the Textarea"
-      />
+      <Textarea {...args} />
     </RenderInRtl>
-  );
-};
-
-Rtl.story = {
-  name: "RTL",
+  ),
 
   parameters: {
     info: "This is a preview of this component in RTL setup.",
+    controls: {
+      exclude: ["onChange", "onFocus", "onBlur"],
+    },
   },
-};
 
-Rtl.args = {
-  label: "Label",
-  help: "",
-  error: "Something went wrong.",
+  args: {
+    ...Playground.args,
+  },
+
+  argTypes: {
+    ...Playground.argTypes,
+  },
 };