Merge branch 'main' into fix-tokenHandler

packages/ui/components/TokenHandler/tokenhandler.stories.mdx

@@ -1,17 +1,30 @@
-import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
 
-import { Examples, Example, Note, Title, CustomArgsTable } from "@calcom/storybook/components";
+import { Title, VariantRow, VariantsTable, CustomArgsTable } from "@calcom/storybook/components";
 
 import TokenHandler from "./TokenHandler";
 
 <Meta title="UI/TokenHandler" component={TokenHandler} />
 
-<Title title="TokenHandler" subtitle="Version 0.1" />
+<Title title="TokenHandler" subtitle="Version 2.0 - Last Update: 24 Aug 2023" />
+
+## Definition
+
+The `TokenHandler` component is used to input a multi-digit authentication code.
 
 ## Structure
 
-<TokenHandler
-  digits={[
+The `TokenHandler` component consists of a label and a row of input fields.
+
+<CustomArgsTable of={TokenHandler} />
+
+## TokenHandler Story
+
+<Canvas>
+  <Story
+    name="TokenHandler"
+    args={{
+      digits: [
         {
           value: "1",
           onChange: (e) => {},
@@ -36,8 +49,21 @@ import TokenHandler from "./TokenHandler";
           value: "6",
           onChange: (e) => {},
         },
-  ]}
-  digitClassName="digit-input"
-/>
+      ],
+      digitClassName: "digit-input",
+    }}
+    argTypes={{
+      digits: { control: "array" },
+      digitClassName: { control: "text" },
+    }}>
+    {(args) => (
+      <VariantsTable titles={["Default"]} columnMinWidth={150}>
+        <VariantRow>
+          <TokenHandler {...args} />
+        </VariantRow>
+      </VariantsTable>
+    )}
+  </Story>
+</Canvas>
 
 #all the numbers should be visible while the first one is focused