From 548d4b7a92ef859625068e25ac3c66374f35033f Mon Sep 17 00:00:00 2001
From: Dominika Hustinova <domi.hustinova@gmail.com>
Date: Mon, 12 Aug 2024 12:24:41 +0200
Subject: [PATCH] chore(InputField): migrate stories from CSF2 to CSF3

---
 .../src/InputField/InputField.stories.tsx     | 1064 ++++++-----------
 1 file changed, 374 insertions(+), 690 deletions(-)

diff --git a/packages/orbit-components/src/InputField/InputField.stories.tsx b/packages/orbit-components/src/InputField/InputField.stories.tsx
index 58e5259a0d..a44b82911b 100644
--- a/packages/orbit-components/src/InputField/InputField.stories.tsx
+++ b/packages/orbit-components/src/InputField/InputField.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 * as Icons from "../icons";
@@ -10,236 +11,238 @@ import ServiceLogo from "../ServiceLogo";
 import RenderInRtl from "../utils/rtl/RenderInRtl";
 import Tag from "../Tag";
 import { SPACINGS_AFTER } from "../common/consts";
+import type { Name } from "../ServiceLogo/types";
 
 import InputField from ".";
 
 const getIcon = (source: string | null) => source && Icons[source];
 
-export default {
-  title: "InputField",
-};
-
-export const DefaultInput = ({ label, value, placeholder }) => {
-  return (
-    <InputField label={label} value={value} placeholder={placeholder} onChange={action("change")} />
-  );
+type InputFieldPropsAndCustomArgs = React.ComponentProps<typeof InputField> & {
+  serviceLogoName?: Name;
+  grayScale?: boolean;
 };
 
-DefaultInput.story = {
-  name: "Default input",
+const meta: Meta<InputFieldPropsAndCustomArgs> = {
+  title: "InputField",
+  component: InputField,
 
   parameters: {
-    info: "Some description about this type of InputField in general.",
+    controls: {
+      exclude: ["onChange"],
+    },
   },
-};
 
-DefaultInput.args = {
-  label: "Label",
-  value: "",
-  placeholder: "Placeholder",
-};
-
-export const NumberInput = ({ label, value, placeholder, maxValue, minValue }) => {
-  return (
-    <InputField
-      type="number"
-      value={value}
-      label={label}
-      placeholder={placeholder}
-      maxValue={maxValue}
-      minValue={minValue}
-      onChange={action("change")}
-    />
-  );
+  args: {
+    label: "Label",
+    value: "",
+    placeholder: "Placeholder",
+    help: "",
+    error: "",
+    onChange: action("change"),
+    required: false,
+    inlineLabel: false,
+    type: TYPE_OPTIONS.TEXT,
+    disabled: false,
+    readOnly: false,
+    helpClosable: true,
+  },
+
+  argTypes: {
+    type: {
+      options: Object.values(TYPE_OPTIONS),
+      control: {
+        type: "select",
+      },
+    },
+    prefix: {
+      options: Object.keys(Icons),
+      control: {
+        type: "select",
+      },
+    },
+    suffix: {
+      options: Object.keys(Icons),
+      control: {
+        type: "select",
+      },
+    },
+    spaceAfter: {
+      options: Object.values(SPACINGS_AFTER),
+      control: {
+        type: "select",
+      },
+    },
+  },
 };
 
-NumberInput.story = {
-  name: "Number input",
+export default meta;
+type Story = StoryObj<InputFieldPropsAndCustomArgs>;
 
+export const DefaultInput: Story = {
   parameters: {
-    info: "Some description about this type of InputField in general.",
+    controls: {
+      exclude: [
+        "help",
+        "error",
+        "onChange",
+        "required",
+        "inlineLabel",
+        "type",
+        "disabled",
+        "readOnly",
+        "spaceAfter",
+        "prefix",
+        "suffix",
+        "helpClosable",
+      ],
+    },
   },
-};
 
-NumberInput.args = {
-  label: "Number",
-  value: "2",
-  placeholder: "Number",
-  maxValue: 3,
-  minValue: 1,
-};
-
-export const PasswordInput = ({ label, value, placeholder }) => {
-  return (
-    <InputField
-      type="password"
-      label={label}
-      value={value}
-      placeholder={placeholder}
-      onChange={action("change")}
-    />
-  );
+  args: {
+    help: "",
+    error: "",
+    required: false,
+    inlineLabel: false,
+    type: TYPE_OPTIONS.TEXT,
+  },
 };
 
-PasswordInput.story = {
-  name: "Password input",
-
+export const NumberInput: Story = {
   parameters: {
-    info: "Some description about this type of InputField in general.",
+    controls: {
+      exclude: ["onChange", "prefix", "suffix"],
+    },
   },
-};
 
-PasswordInput.args = {
-  label: "Password",
-  value: "p422W0rd",
-  placeholder: "Password",
+  args: {
+    type: TYPE_OPTIONS.NUMBER,
+    label: "Number",
+    value: "2",
+    placeholder: "Number",
+    minValue: 1,
+    maxValue: 3,
+  },
 };
 
-export const PassportOrIdInput = ({ label, placeholder }) => {
-  return (
-    <InputField
-      type="passportid"
-      label={label}
-      placeholder={placeholder}
-      onChange={action("change")}
-    />
-  );
-};
+export const PasswordInput: Story = {
+  parameters: {
+    controls: {
+      exclude: ["onChange", "prefix", "suffix"],
+    },
+  },
 
-PassportOrIdInput.story = {
-  name: "Passport or ID Input",
+  args: {
+    type: TYPE_OPTIONS.PASSWORD,
+    label: "Password",
+    value: "p422W0rd",
+    placeholder: "Password",
+  },
+};
 
+export const PassportOrIdInput: Story = {
   parameters: {
-    info: "Some description about this type of InputField in general.",
+    controls: {
+      exclude: ["onChange", "prefix", "suffix"],
+    },
   },
-};
 
-PassportOrIdInput.args = {
-  label: "Passport or ID number",
-  placeholder: "588539238",
+  args: {
+    type: TYPE_OPTIONS.PASSPORTID,
+    label: "Passport or ID number",
+    placeholder: "588539238",
+  },
 };
 
-export const EmailInput = ({ label, value, placeholder }) => {
-  return (
+export const EmailInput: Story = {
+  render: args => (
     <InputField
-      type="email"
-      label={label}
-      value={value}
-      placeholder={placeholder}
-      onChange={action("change")}
       help={
         <div>
           Did you mean&nbsp;
           <TextLink onClick={action("clicked")}>name@example.com</TextLink>?
         </div>
       }
+      {...args}
     />
-  );
-};
-
-EmailInput.story = {
-  name: "Email input",
+  ),
 
   parameters: {
-    info: "Some description about this type of InputField in general.",
+    controls: {
+      exclude: ["onChange", "prefix", "suffix"],
+    },
   },
-};
 
-EmailInput.args = {
-  label: "Email",
-  value: "name@example.co",
-  placeholder: "Email",
-};
-
-export const WithTextPrefix = ({ label, value, placeholder, prefix }) => {
-  return (
-    <InputField
-      label={label}
-      value={value}
-      placeholder={placeholder}
-      prefix={prefix}
-      onChange={action("change")}
-    />
-  );
+  args: {
+    type: TYPE_OPTIONS.EMAIL,
+    label: "Email",
+    value: "name@example.co",
+    placeholder: "Email",
+  },
 };
 
-WithTextPrefix.story = {
-  name: "With text prefix",
-
+export const WithTextPrefix: Story = {
   parameters: {
-    info: "Some description about this type of InputField in general.",
+    controls: {
+      exclude: ["onChange", "suffix"],
+    },
   },
-};
 
-WithTextPrefix.args = {
-  label: "Label",
-  value: "",
-  placeholder: "Placeholder",
-  prefix: "$",
-};
+  args: {
+    label: "Label",
+    value: "",
+    placeholder: "Placeholder",
+    prefix: "$",
+  },
 
-export const WithTextSuffix = ({ label, value, placeholder, suffix }) => {
-  return (
-    <InputField
-      label={label}
-      value={value}
-      placeholder={placeholder}
-      suffix={<div style={{ paddingRight: "12px" }}>{suffix}</div>}
-      onChange={action("change")}
-    />
-  );
+  argTypes: {
+    prefix: {
+      control: {
+        type: "text",
+      },
+    },
+  },
 };
 
-WithTextSuffix.story = {
-  name: "With text suffix",
+export const WithTextSuffix: Story = {
+  render: ({ suffix, ...args }) => (
+    <InputField suffix={<div style={{ paddingRight: "12px" }}>{suffix}</div>} {...args} />
+  ),
 
   parameters: {
-    info: "Some description about this type of InputField in general.",
+    controls: {
+      exclude: ["onChange", "prefix"],
+    },
   },
-};
 
-WithTextSuffix.args = {
-  label: "Label",
-  value: "",
-  placeholder: "Placeholder",
-  suffix: "Some long text",
-};
+  args: {
+    suffix: "Some long text",
+  },
 
-export const CompactInput = ({ value, label, placeholder, required, error }) => {
-  return (
-    <InputField
-      label={label}
-      inlineLabel
-      error={error}
-      value={value}
-      placeholder={placeholder}
-      required={required}
-      onChange={action("change")}
-    />
-  );
+  argTypes: {
+    suffix: {
+      control: {
+        type: "text",
+      },
+    },
+  },
 };
 
-CompactInput.story = {
-  name: "Compact input",
-
+export const CompactInput: Story = {
   parameters: {
     info: "Compact input with FormLabel as prefix",
+    controls: {
+      exclude: ["onChange", "prefix", "suffix"],
+    },
   },
-};
 
-CompactInput.args = {
-  value: "",
-  label: "Label",
-  placeholder: "Placeholder",
-  required: false,
-  error: "",
+  args: {
+    inlineLabel: true,
+  },
 };
 
-export const CompactInputWithTags = ({ value, label, placeholder, required, error }) => {
-  return (
+export const CompactInputWithTags: Story = {
+  render: args => (
     <InputField
-      label={label}
-      inlineLabel
       tags={
         <>
           <Tag selected onRemove={action("onRemove")}>
@@ -266,594 +269,275 @@ export const CompactInputWithTags = ({ value, label, placeholder, required, erro
           <Tag onRemove={action("onRemove")}>Praha</Tag>
         </>
       }
-      error={error}
-      value={value}
-      placeholder={placeholder}
-      required={required}
-      onChange={action("change")}
+      {...args}
     />
-  );
-};
-
-CompactInputWithTags.story = {
-  name: "Compact input with tags",
+  ),
 
   parameters: {
     info: "Compact input with FormLabel as prefix",
+    controls: {
+      exclude: ["onChange", "prefix", "suffix"],
+    },
   },
-};
-
-CompactInputWithTags.args = {
-  value: "",
-  label: "Label",
-  placeholder: "Placeholder",
-  required: false,
-  error: "",
-};
-
-export const RequiredField = ({ label, value, placeholder, required }) => {
-  return (
-    <InputField
-      label={label}
-      value={value}
-      placeholder={placeholder}
-      required={required}
-      onChange={action("change")}
-    />
-  );
-};
 
-RequiredField.story = {
-  name: "Required field",
-
-  parameters: {
-    info: "Some description about this type of InputField in general.",
+  args: {
+    inlineLabel: true,
   },
 };
 
-RequiredField.args = {
-  label: "Label",
-  value: "",
-  required: true,
-  placeholder: "Placeholder",
-};
-
-export const WithIconPrefix = ({ label, value, placeholder, prefixIcon }) => {
-  const Prefix = getIcon(prefixIcon);
-
-  return (
-    <InputField
-      label={label}
-      value={value}
-      placeholder={placeholder}
-      prefix={Prefix && <Prefix />}
-      onChange={action("change")}
-    />
-  );
-};
-
-WithIconPrefix.story = {
-  name: "With Icon prefix",
-
+export const RequiredField: Story = {
   parameters: {
-    info: "Some description about this type of InputField in general.",
+    controls: {
+      exclude: ["onChange", "prefix", "suffix"],
+    },
   },
-};
-
-WithIconPrefix.args = {
-  label: "Label",
-  value: "",
-  placeholder: "Placeholder",
-  prefixIcon: "Search",
-};
 
-WithIconPrefix.argTypes = {
-  prefixIcon: {
-    options: Object.keys(Icons),
-    control: {
-      type: "select",
-    },
+  args: {
+    required: true,
   },
 };
 
-export const WithButtonLinkSuffix = ({ label, value, placeholder, suffixIcon }) => {
-  const Suffix = getIcon(suffixIcon);
+export const WithIconPrefix: Story = {
+  render: ({ prefix, ...args }) => {
+    const Prefix = getIcon(prefix as string);
 
-  return (
-    <InputField
-      label={label}
-      value={value}
-      placeholder={placeholder}
-      suffix={
-        Suffix && (
-          <ButtonLink type="primary" compact iconLeft={<Suffix />} onClick={action("clicked")} />
-        )
-      }
-      onChange={action("change")}
-    />
-  );
-};
-
-WithButtonLinkSuffix.story = {
-  name: "With ButtonLink suffix",
+    return <InputField prefix={Prefix && <Prefix />} {...args} />;
+  },
 
   parameters: {
-    info: "Some description about this type of InputField in general.",
+    info: "Compact input with FormLabel as prefix",
+    controls: {
+      exclude: ["onChange", "suffix"],
+    },
   },
-};
 
-WithButtonLinkSuffix.args = {
-  label: "Label",
-  value: "",
-  placeholder: "Placeholder",
-  suffixIcon: "Visibility",
-};
-
-WithButtonLinkSuffix.argTypes = {
-  suffixIcon: {
-    options: Object.keys(Icons),
-    control: {
-      type: "select",
-    },
+  args: {
+    prefix: "Search",
   },
 };
 
-export const WithServiceLogoSuffix = ({ label, value, placeholder, name, grayScale }) => {
-  return (
-    <InputField
-      label={label}
-      value={value}
-      placeholder={placeholder}
-      suffix={<ServiceLogo name={name} grayScale={grayScale} />}
-      onChange={action("change")}
-    />
-  );
-};
+export const WithButtonLinkSuffix: Story = {
+  render: ({ suffix, ...args }) => {
+    const Suffix = getIcon(suffix as string);
 
-WithServiceLogoSuffix.story = {
-  name: "With ServiceLogo prefix",
+    return (
+      <InputField
+        suffix={
+          Suffix && (
+            <ButtonLink type="primary" compact iconLeft={<Suffix />} onClick={action("clicked")} />
+          )
+        }
+        {...args}
+      />
+    );
+  },
 
   parameters: {
-    info: "Some description about this type of InputField in general.",
+    info: "Compact input with ButtonLink as suffix",
+    controls: {
+      exclude: ["onChange", "prefix"],
+    },
   },
-};
 
-WithServiceLogoSuffix.args = {
-  label: "Label",
-  value: "",
-  placeholder: "Placeholder",
-  name: NAME_OPTIONS.AIRHELP,
-  grayScale: false,
-};
+  args: {
+    label: "Label",
+    value: "",
+    placeholder: "Placeholder",
+    suffix: "Visibility",
+  },
 
-WithServiceLogoSuffix.argTypes = {
-  name: {
-    options: Object.values(NAME_OPTIONS),
-    control: {
-      type: "select",
+  argTypes: {
+    suffix: {
+      options: Object.keys(Icons),
+      control: {
+        type: "select",
+      },
     },
   },
 };
 
-export const WithError = ({
-  type,
-  name,
-  label,
-  inlineLabel,
-  value,
-  placeholder,
-  prefixIcon,
-  suffixIcon,
-  help,
-  error,
-  disabled,
-  maxValue,
-  minValue,
-  required,
-  maxLength,
-  minLength,
-  readOnly,
-  autoComplete,
-  dataTest,
-  spaceAfter,
-  id,
-}) => {
-  const Prefix = getIcon(prefixIcon);
-  const Suffix = getIcon(suffixIcon);
-
-  return (
+export const WithServiceLogoSuffix: Story = {
+  render: ({ serviceLogoName, grayScale, ...args }) => (
     <InputField
-      type={type}
-      name={name}
-      label={label}
-      inlineLabel={inlineLabel}
-      value={value}
-      dataTest={dataTest}
-      placeholder={placeholder}
-      required={required}
-      prefix={Prefix && <Prefix />}
-      suffix={
-        Suffix && (
-          <ButtonLink
-            iconLeft={<Suffix />}
-            compact
-            size="normal"
-            onClick={action("clicked")}
-            disabled={disabled}
-          />
-        )
-      }
-      help={help}
-      error={error}
-      disabled={disabled}
-      maxValue={maxValue}
-      minValue={minValue}
-      maxLength={maxLength}
-      minLength={minLength}
-      readOnly={readOnly}
-      autoComplete={autoComplete}
-      onChange={action("change")}
-      onFocus={action("focus")}
-      onBlur={action("blur")}
-      spaceAfter={spaceAfter}
-      id={id}
+      suffix={<ServiceLogo name={serviceLogoName as Name} grayScale={grayScale} />}
+      {...args}
     />
-  );
-};
-
-WithError.story = {
-  name: "With error",
+  ),
 
   parameters: {
-    info: "Some description about this type of InputField in general.",
-  },
-};
-
-WithError.args = {
-  type: TYPE_OPTIONS.TEXT,
-  name: "input",
-  label: "",
-  inlineLabel: true,
-  value: "",
-  placeholder: "Placeholder",
-  prefixIcon: "Search",
-  suffixIcon: "Visibility",
-  help: "",
-  error: "Please fill out as you have on your passport",
-  disabled: false,
-  maxValue: NaN,
-  minValue: NaN,
-  required: false,
-  maxLength: NaN,
-  minLength: NaN,
-  readOnly: false,
-  autoComplete: "off",
-  dataTest: "test",
-  spaceAfter: SPACINGS_AFTER.MEDIUM,
-  id: "ID",
-};
-
-WithError.argTypes = {
-  type: {
-    options: Object.values(TYPE_OPTIONS),
-    control: {
-      type: "select",
-    },
-  },
-  prefixIcon: {
-    options: Object.keys(Icons),
-    control: {
-      type: "select",
+    info: "Compact input with ServiceLogo as suffix",
+    controls: {
+      exclude: ["onChange", "prefix", "suffix"],
     },
   },
-  suffixIcon: {
-    options: Object.keys(Icons),
-    control: {
-      type: "select",
-    },
+
+  args: {
+    serviceLogoName: NAME_OPTIONS.AIRHELP,
+    grayScale: false,
   },
-  spaceAfter: {
-    options: Object.values(SPACINGS_AFTER),
-    control: {
-      type: "select",
+
+  argTypes: {
+    serviceLogoName: {
+      options: Object.values(NAME_OPTIONS),
+      control: {
+        type: "select",
+      },
     },
   },
 };
 
-export const WithHelp = ({
-  type,
-  name,
-  label,
-  inlineLabel,
-  value,
-  dataTest,
-  placeholder,
-  prefixIcon,
-  suffixIcon,
-  help,
-  error,
-  disabled,
-  maxValue,
-  minValue,
-  required,
-  maxLength,
-  minLength,
-  readOnly,
-  autoComplete,
-  spaceAfter,
-  id,
-}) => {
-  const Prefix = getIcon(prefixIcon);
-  const Suffix = getIcon(suffixIcon);
-
-  return (
-    <InputField
-      type={type}
-      name={name}
-      label={label}
-      inlineLabel={inlineLabel}
-      value={value}
-      dataTest={dataTest}
-      placeholder={placeholder}
-      required={required}
-      prefix={Prefix && <Prefix />}
-      suffix={
-        Suffix && (
-          <ButtonLink
-            iconLeft={<Suffix />}
-            compact
-            size="normal"
-            onClick={action("clicked")}
-            disabled={disabled}
-          />
-        )
-      }
-      help={help}
-      error={error}
-      disabled={disabled}
-      maxValue={maxValue}
-      minValue={minValue}
-      maxLength={maxLength}
-      minLength={minLength}
-      readOnly={readOnly}
-      autoComplete={autoComplete}
-      onChange={action("change")}
-      onFocus={action("focus")}
-      onBlur={action("blur")}
-      spaceAfter={spaceAfter}
-      id={id}
-    />
-  );
-};
+export const WithError: Story = {
+  render: ({ prefix, suffix, disabled, ...args }) => {
+    const Prefix = getIcon(prefix as string);
+    const Suffix = getIcon(suffix as string);
 
-WithHelp.story = {
-  name: "With help",
-
-  parameters: {
-    info: "Some description about this type of InputField in general.",
+    return (
+      <InputField
+        prefix={Prefix && <Prefix />}
+        suffix={
+          Suffix && (
+            <ButtonLink
+              iconLeft={<Suffix />}
+              compact
+              size="normal"
+              onClick={action("clicked")}
+              disabled={disabled}
+            />
+          )
+        }
+        {...args}
+      />
+    );
   },
-};
 
-WithHelp.args = {
-  type: TYPE_OPTIONS.TEXT,
-  name: "input",
-  label: "Label",
-  inlineLabel: true,
-  value: "",
-  placeholder: "Placeholder",
-  prefixIcon: "Search",
-  suffixIcon: "Visibility",
-  help: "Please fill out as you have on your passport",
-  error: "",
-  disabled: false,
-  maxValue: NaN,
-  minValue: NaN,
-  required: false,
-  maxLength: NaN,
-  minLength: NaN,
-  readOnly: false,
-  autoComplete: "off",
-  dataTest: "test",
-  spaceAfter: SPACINGS_AFTER.MEDIUM,
-  id: "ID",
-};
-
-WithHelp.argTypes = {
-  type: {
-    options: Object.values(TYPE_OPTIONS),
-    control: {
-      type: "select",
-    },
-  },
-  prefixIcon: {
-    options: Object.keys(Icons),
-    control: {
-      type: "select",
-    },
-  },
-  suffixIcon: {
-    options: Object.keys(Icons),
-    control: {
-      type: "select",
-    },
-  },
-  spaceAfter: {
-    options: Object.values(SPACINGS_AFTER),
-    control: {
-      type: "select",
-    },
+  args: {
+    label: "",
+    inlineLabel: true,
+    error: "Please fill out as you have on your passport",
+    prefix: "Search",
+    suffix: "Visibility",
   },
 };
 
-export const Playground = ({
-  type,
-  name,
-  label,
-  inlineLabel,
-  value,
-  dataTest,
-  placeholder,
-  prefixIcon,
-  suffixIcon,
-  help,
-  error,
-  disabled,
-  width,
-  maxValue,
-  minValue,
-  required,
-  maxLength,
-  minLength,
-  readOnly,
-  autoComplete,
-  spaceAfter,
-  id,
-  inputMode,
-  dataAttrs,
-}) => {
-  const Prefix = getIcon(prefixIcon);
-  const Suffix = getIcon(suffixIcon);
-  return (
-    <InputField
-      type={type}
-      width={width}
-      name={name}
-      label={label}
-      inlineLabel={inlineLabel}
-      value={value}
-      dataTest={dataTest}
-      placeholder={placeholder}
-      required={required}
-      prefix={Prefix && <Prefix />}
-      suffix={
-        Suffix && (
-          <ButtonLink
-            type="primary"
-            size="normal"
-            iconLeft={<Suffix />}
-            onClick={action("clicked")}
-            disabled={disabled}
-            compact
-          />
-        )
-      }
-      help={help}
-      error={error}
-      disabled={disabled}
-      maxValue={maxValue}
-      minValue={minValue}
-      maxLength={maxLength}
-      minLength={minLength}
-      readOnly={readOnly}
-      autoComplete={autoComplete}
-      onChange={action("change")}
-      onFocus={action("focus")}
-      onBlur={action("blur")}
-      onMouseUp={action("onMouseUp")}
-      onMouseDown={action("onMouseDown")}
-      onSelect={action("onSelect")}
-      onKeyDown={action("onKeyDown")}
-      spaceAfter={spaceAfter}
-      id={id}
-      inputMode={inputMode}
-      dataAttrs={dataAttrs}
-    />
-  );
-};
+export const WithHelp: Story = {
+  render: ({ prefix, suffix, disabled, ...args }) => {
+    const Prefix = getIcon(prefix as string);
+    const Suffix = getIcon(suffix as string);
 
-Playground.story = {
-  parameters: {
-    info: "Some description about this type of InputField in general.",
+    return (
+      <InputField
+        prefix={Prefix && <Prefix />}
+        suffix={
+          Suffix && (
+            <ButtonLink
+              iconLeft={<Suffix />}
+              compact
+              size="normal"
+              onClick={action("clicked")}
+              disabled={disabled}
+            />
+          )
+        }
+        {...args}
+      />
+    );
   },
-};
 
-Playground.args = {
-  type: TYPE_OPTIONS.TEXT,
-  name: "input",
-  label: "Label",
-  inlineLabel: true,
-  value: "",
-  placeholder: "Placeholder",
-  prefixIcon: "Search",
-  suffixIcon: "Visibility",
-  help: "",
-  error: "",
-  disabled: false,
-  width: "",
-  maxValue: NaN,
-  minValue: NaN,
-  required: false,
-  maxLength: NaN,
-  minLength: NaN,
-  readOnly: false,
-  autoComplete: "off",
-  dataTest: "test",
-  spaceAfter: SPACINGS_AFTER.SMALL,
-  id: "ID",
-  inputMode: INPUTMODE.TEXT,
-  dataAttrs: { "data-recording-ignore": true },
-};
-
-Playground.argTypes = {
-  type: {
-    options: Object.values(TYPE_OPTIONS),
-    control: {
-      type: "select",
-    },
-  },
-  prefixIcon: {
-    options: Object.keys(Icons),
-    control: {
-      type: "select",
-    },
-  },
-  suffixIcon: {
-    options: Object.keys(Icons),
-    control: {
-      type: "select",
-    },
-  },
-  spaceAfter: {
-    options: Object.values(SPACINGS_AFTER),
-    control: {
-      type: "select",
-    },
-  },
-  inputMode: {
-    options: Object.values(INPUTMODE),
-    control: {
-      type: "select",
-    },
+  args: {
+    label: "Label",
+    inlineLabel: true,
+    help: "Please fill out as you have on your passport",
+    prefix: "Search",
+    suffix: "Visibility",
   },
 };
 
-export const Rtl = ({ help, error, inlineLabel, label }) => {
-  return (
-    <RenderInRtl>
+export const Playground: Story = {
+  render: ({ prefix, suffix, disabled, ...args }) => {
+    const Prefix = getIcon(prefix as string);
+    const Suffix = getIcon(suffix as string);
+    return (
       <InputField
-        label={label}
-        inlineLabel={inlineLabel}
-        help={help}
-        error={error}
-        placeholder="Placeholder"
-        prefix="$"
-        suffix={<ButtonLink compact iconLeft={<Icons.Visibility />} />}
+        prefix={Prefix && <Prefix />}
+        suffix={
+          Suffix && (
+            <ButtonLink
+              type="primary"
+              size="normal"
+              iconLeft={<Suffix />}
+              onClick={action("clicked")}
+              disabled={disabled}
+              compact
+            />
+          )
+        }
+        {...args}
       />
-    </RenderInRtl>
-  );
+    );
+  },
+
+  args: {
+    name: "input",
+    inlineLabel: true,
+    width: "",
+    inputMode: INPUTMODE.TEXT,
+    dataAttrs: { "data-recording-ignore": true },
+    onFocus: action("focus"),
+    onBlur: action("blur"),
+    onMouseUp: action("onMouseUp"),
+    onMouseDown: action("onMouseDown"),
+    onSelect: action("onSelect"),
+    onKeyDown: action("onKeyDown"),
+    maxValue: NaN,
+    minValue: NaN,
+    maxLength: NaN,
+    minLength: NaN,
+    prefix: "Search",
+    suffix: "Visibility",
+    autoComplete: "off",
+    id: "ID",
+    spaceAfter: SPACINGS_AFTER.MEDIUM,
+  },
+
+  argTypes: {
+    inputMode: {
+      options: Object.values(INPUTMODE),
+      control: {
+        type: "select",
+      },
+    },
+  },
 };
 
-Rtl.story = {
-  name: "RTL",
+export const Rtl: Story = {
+  render: ({ suffix, ...args }) => {
+    const Suffix = getIcon(suffix as string);
+
+    return (
+      <RenderInRtl>
+        <InputField suffix={<ButtonLink iconLeft={<Suffix />} compact />} {...args} />
+      </RenderInRtl>
+    );
+  },
 
   parameters: {
     info: "This is a preview of this component in RTL setup.",
+    controls: {
+      exclude: ["onChange"],
+    },
+  },
+
+  args: {
+    help: "Please fill out as you have on your passport",
+    prefix: "$",
+    suffix: "Visibility",
   },
-};
 
-Rtl.args = {
-  help: "Please fill out as you have on your passport",
-  error: "",
-  inlineLabel: false,
-  label: "",
+  argTypes: {
+    prefix: {
+      control: {
+        type: "text",
+      },
+    },
+  },
 };