Stories: add args where possible (#351)

Cambly · Mar 21, 2024 · 0097f95 · 0097f95
1 parent b7f018a
commit 0097f95
Show file tree

Hide file tree

Showing 15 changed files with 130 additions and 13 deletions.
diff --git a/.changeset/brown-dolphins-hug.md b/.changeset/brown-dolphins-hug.md
@@ -0,0 +1,5 @@
+---
+"@cambly/syntax-core": minor
+---
+
+Stories: add args where possible
diff --git a/packages/syntax-core/src/Box/Box.stories.tsx b/packages/syntax-core/src/Box/Box.stories.tsx
@@ -9,6 +9,27 @@ import Divider from "../Divider/Divider";
 export default {
   title: "Components/Box",
   component: Box,
+  args: {
+    as: "div",
+    children: "Box",
+    gap: 0,
+    height: "",
+    width: "",
+    margin: 0,
+    marginTop: 0,
+    marginEnd: 0,
+    marginBottom: 0,
+    marginStart: 0,
+    padding: 0,
+    paddingX: 0,
+    paddingY: 0,
+    maxHeight: "",
+    maxWidth: "",
+    minHeight: "",
+    minWidth: "",
+    role: "",
+    rounding: "none",
+  },
   argTypes: {
     alignItems: {
       options: ["flexStart", "flexEnd", "center", "baseline", "stretch"],
@@ -125,6 +146,9 @@ export default {
     paddingY: {
       control: { type: "number", min: 0, max: 12, step: 1 },
     },
+    position: {
+      options: ["absolute", "fixed", "relative", "static", "sticky"],
+    },
     id: {
       control: "text",
     },

diff --git a/packages/syntax-core/src/Box/Box.tsx b/packages/syntax-core/src/Box/Box.tsx
@@ -92,7 +92,7 @@ type BoxProps = {
   /**
    * The underlying DOM element usually set for accessibility or SEO reasons.
    *
-   * @defaultValue "div"
+   * @defaultValue `div`
    */
   as?: As;
   /**

diff --git a/packages/syntax-core/src/ButtonGroup/Buttongroup.stories.tsx b/packages/syntax-core/src/ButtonGroup/Buttongroup.stories.tsx
@@ -11,6 +11,10 @@ export default {
       url: "https://www.figma.com/file/p7LKna9JMU0JEkcKamzs53/Cambly-Design-System?node-id=1007%3A4097",
     },
   },
+  args: {
+    orientation: "horizontal",
+    size: "md",
+  },
   argTypes: {
     orientation: {
       options: ["horizontal", "vertical"],

diff --git a/packages/syntax-core/src/Card/Card.stories.tsx b/packages/syntax-core/src/Card/Card.stories.tsx
@@ -14,11 +14,19 @@ export default {
       url: "https://www.figma.com/file/p7LKna9JMU0JEkcKamzs53/%F0%9F%93%90-Syntax?node-id=1206-4420&t=yFh7Ijhf6PU7Lin3-0",
     },
   },
+  args: {
+    backgroundColor: "white",
+    "data-testid": "",
+    size: "roomy",
+  },
   argTypes: {
     backgroundColor: {
       control: { type: "select" },
       options: allColors,
     },
+    size: {
+      options: ["compact", "roomy"],
+    },
   },
   tags: ["autodocs"],
 } as Meta<typeof Card>;

diff --git a/packages/syntax-core/src/Checkbox/Checkbox.stories.tsx b/packages/syntax-core/src/Checkbox/Checkbox.stories.tsx
@@ -12,6 +12,14 @@ export default {
       url: "https://www.figma.com/file/p7LKna9JMU0JEkcKamzs53/%F0%9F%93%90-Syntax?node-id=1007-4098&t=XrEtordHSWZfgIGE-0",
     },
   },
+  args: {
+    label: "checkbox label",
+    disabled: false,
+    checked: false,
+    error: false,
+    size: "md",
+    "data-testid": "",
+  },
   argTypes: {
     checked: {
       control: "boolean",
@@ -24,14 +32,13 @@ export default {
       control: "boolean",
     },
     onClick: { action: "clicked" },
+    onChange: { action: "changed" },
     error: { control: "boolean" },
   },
   tags: ["autodocs"],
 } as Meta<typeof Checkbox>;
 
-export const Default: StoryObj<typeof Checkbox> = {
-  args: { label: "checkbox label" },
-};
+export const Default: StoryObj<typeof Checkbox> = {};
 
 const CheckboxInteractive = () => {
   const [isChecked, setIsChecked] = useState(false);

diff --git a/packages/syntax-core/src/Heading/Heading.stories.tsx b/packages/syntax-core/src/Heading/Heading.stories.tsx
@@ -20,6 +20,7 @@ export default {
     underline: false,
     inline: false,
     lineClamp: 0,
+    "data-testid": "",
   },
   argTypes: {
     align: {

diff --git a/packages/syntax-core/src/Modal/Modal.stories.tsx b/packages/syntax-core/src/Modal/Modal.stories.tsx
@@ -15,6 +15,13 @@ export default {
       url: "https://www.figma.com/file/p7LKna9JMU0JEkcKamzs53/%F0%9F%93%90-Syntax?node-id=1197-6345&viewport=45%2C215%2C0.26&t=Otn1UThmrXufnj46-0",
     },
   },
+  args: {
+    header: "One Button Modal Text",
+    accessibilityCloseLabel: "close modal",
+    size: "sm",
+    zIndex: 0,
+    "data-testid": "",
+  },
   argTypes: {
     onDismiss: {
       control: {},
@@ -48,7 +55,6 @@ const ModalTemplate = ({ ...args }): JSX.Element => {
 
 export const Default: StoryObj<typeof Modal> = {
   args: {
-    header: "One Button Modal Text",
     children: (
       <Typography size={200}>
         Confirmation of the action the user is about to take. This description

diff --git a/packages/syntax-core/src/RadioButton/RadioButton.stories.tsx b/packages/syntax-core/src/RadioButton/RadioButton.stories.tsx
@@ -11,6 +11,18 @@ export default {
       url: "https://www.figma.com/file/p7LKna9JMU0JEkcKamzs53/%F0%9F%93%90-Syntax?node-id=1007-4104&t=Vt5ql6LLs6d29szu-0",
     },
   },
+  args: {
+    label: "radioButton label",
+    checked: false,
+    disabled: false,
+    error: false,
+    size: "md",
+    "data-testid": "",
+    name: "name",
+    value: "value",
+    id: "",
+    dangerouslyForceFocusStyles: false,
+  },
   argTypes: {
     checked: {
       control: "boolean",
@@ -28,9 +40,7 @@ export default {
   tags: ["autodocs"],
 } as Meta<typeof RadioButton>;
 
-export const Default: StoryObj<typeof RadioButton> = {
-  args: { label: "radioButton label" },
-};
+export const Default: StoryObj<typeof RadioButton> = {};
 
 const RadioButtonInteractive = () => {
   const [selectedOption, setSelectedOption] = useState("");

diff --git a/packages/syntax-core/src/RichSelect/RichSelectBox.stories.tsx b/packages/syntax-core/src/RichSelect/RichSelectBox.stories.tsx
@@ -16,6 +16,11 @@ export default {
       url: "https://www.figma.com/file/p7LKna9JMU0JEkcKamzs53/%F0%9F%93%90-Syntax?node-id=1007-4102&t=7xGt6S9b6zUUiflR-0",
     },
   },
+  args: {
+    accessibilityLabel: "",
+    size: "md",
+    disabled: false,
+  },
   argTypes: {
     accessibilityLabel: {
       control: "text",

diff --git a/packages/syntax-core/src/SelectList/SelectList.stories.tsx b/packages/syntax-core/src/SelectList/SelectList.stories.tsx
@@ -13,6 +13,17 @@ export default {
       url: "https://www.figma.com/file/p7LKna9JMU0JEkcKamzs53/%F0%9F%93%90-Syntax?node-id=1007-4102&t=7xGt6S9b6zUUiflR-0",
     },
   },
+  args: {
+    size: "md",
+    "data-testid": "",
+    label: "Label",
+    placeholderText: "Placeholder",
+    errorText: "",
+    helperText: "Helper text",
+    disabled: false,
+    id: "",
+    selectedValue: "",
+  },
   argTypes: {
     size: {
       options: ["sm", "md", "lg"],
@@ -43,9 +54,6 @@ const Options = () => (
 export const Default: StoryObj<typeof SelectList> = {
   args: {
     children: <Options />,
-    helperText: "Helper text",
-    label: "Label",
-    placeholderText: "Placeholder",
   },
 };
 

diff --git a/packages/syntax-core/src/TapArea/TapArea.stories.tsx b/packages/syntax-core/src/TapArea/TapArea.stories.tsx
@@ -8,6 +8,14 @@ import Typography from "../Typography/Typography";
 export default {
   title: "Components/TapArea",
   component: TapArea,
+  args: {
+    disabled: false,
+    rounding: "none",
+    tabIndex: 0,
+    fullWidth: true,
+    accessibilityLabel: "",
+    "data-testid": "",
+  },
   argTypes: {
     disabled: {
       control: "boolean",

diff --git a/packages/syntax-core/src/TextArea/TextArea.stories.tsx b/packages/syntax-core/src/TextArea/TextArea.stories.tsx
@@ -11,6 +11,19 @@ export default {
       url: "https://www.figma.com/file/p7LKna9JMU0JEkcKamzs53/%F0%9F%93%90-Syntax?node-id=1007%3A4103",
     },
   },
+  args: {
+    disabled: false,
+    label: "Label",
+    placeholder: "Placeholder",
+    errorText: "",
+    helperText: "",
+    maxLength: 1024,
+    rows: 3,
+    value: "",
+    "data-testid": "",
+    id: "",
+    size: "md",
+  },
   argTypes: {
     disabled: {
       control: "boolean",
@@ -30,7 +43,7 @@ function TextAreaDefault({
   label = "Label",
   placeholder = "Placeholder",
   value: initialValue = "",
-  ...rest
+  ...args
 }) {
   const [value, setValue] = useState("");
   return (
@@ -41,7 +54,7 @@ function TextAreaDefault({
         setValue(event.target.value);
       }}
       value={initialValue || value}
-      {...rest}
+      {...args}
     />
   );
 }

diff --git a/packages/syntax-core/src/TextField/TextField.stories.tsx b/packages/syntax-core/src/TextField/TextField.stories.tsx
@@ -11,6 +11,18 @@ export default {
       url: "https://www.figma.com/file/p7LKna9JMU0JEkcKamzs53/%F0%9F%93%90-Syntax?node-id=1007%3A4103",
     },
   },
+  args: {
+    label: "Label",
+    placeholder: "Placeholder",
+    disabled: false,
+    errorText: "",
+    helperText: "",
+    size: "md",
+    type: "text",
+    "data-testid": "",
+    id: "",
+    value: "",
+  },
   argTypes: {
     autoComplete: {
       options: ["current-password", "new-password", "off", "on", "email"],

diff --git a/packages/syntax-core/src/Tooltip/Tooltip.stories.tsx b/packages/syntax-core/src/Tooltip/Tooltip.stories.tsx
@@ -23,6 +23,12 @@ export default {
       url: "https://www.figma.com/file/p7LKna9JMU0JEkcKamzs53/%F0%9F%93%90-Syntax?node-id=1007-4109&t=1jAyqXTkYBP57oZL-0",
     },
   },
+  args: {
+    accessibilityLabel: "",
+    delay: 0,
+    disabled: false,
+    placement: "top",
+  },
   argTypes: {
     accessibilityLabel: {
       control: { type: "string" },