diff --git a/.changeset/brown-dolphins-hug.md b/.changeset/brown-dolphins-hug.md new file mode 100644 index 00000000..da50e99f --- /dev/null +++ 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 index 730c6623..d1928955 100644 --- 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 index 2a8570c5..ca90f06d 100644 --- 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 index d48c884b..37c1f508 100644 --- 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 index b038f760..72d1f0da 100644 --- 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; diff --git a/packages/syntax-core/src/Checkbox/Checkbox.stories.tsx b/packages/syntax-core/src/Checkbox/Checkbox.stories.tsx index 0ab2538c..22c72f82 100644 --- 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; -export const Default: StoryObj = { - args: { label: "checkbox label" }, -}; +export const Default: StoryObj = {}; 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 index 487a1d08..a9935cd7 100644 --- 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 index 8247b396..873e3583 100644 --- 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 = { args: { - header: "One Button Modal Text", children: ( 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 index ffd0e21c..c5c602ef 100644 --- 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; -export const Default: StoryObj = { - args: { label: "radioButton label" }, -}; +export const Default: StoryObj = {}; 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 index 003fbfb3..4caed36d 100644 --- 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 index 51488682..fddcf043 100644 --- 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 = { args: { children: , - 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 index 394ffc96..2de35192 100644 --- 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 index d5e8857a..c5dcdf02 100644 --- 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 index 13b37fec..83b0a53e 100644 --- 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 index 4bf64af7..770f25b8 100644 --- 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" },