Merge branch 'main' into fix-tokenHandler

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

@@ -1,43 +1,69 @@
-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
+The `TokenHandler` component consists of a label and a row of input fields.
-  digits={[
+
-    {
+<CustomArgsTable of={TokenHandler} />
-      value: "1",
+
-      onChange: (e) => {},
+## TokenHandler Story
-    },
+
-    {
+<Canvas>
-      value: "2",
+  <Story
-      onChange: (e) => {},
+    name="TokenHandler"
-    },
+    args={{
-    {
+      digits: [
-      value: "3",
+        {
-      onChange: (e) => {},
+          value: "1",
-    },
+          onChange: (e) => {},
-    {
+        },
-      value: "4",
+        {
-      onChange: (e) => {},
+          value: "2",
-    },
+          onChange: (e) => {},
-    {
+        },
-      value: "5",
+        {
-      onChange: (e) => {},
+          value: "3",
-    },
+          onChange: (e) => {},
-    {
+        },
-      value: "6",
+        {
-      onChange: (e) => {},
+          value: "4",
-    },
+          onChange: (e) => {},
-  ]}
+        },
-  digitClassName="digit-input"
+        {
-/>
+          value: "5",
+          onChange: (e) => {},
+        },
+        {
+          value: "6",
+          onChange: (e) => {},
+        },
+      ],
+      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