Skip to content

Commit

Permalink
refactor: add args to all stories to enable "show code"
Browse files Browse the repository at this point in the history
  • Loading branch information
mdalpozzo committed Jun 7, 2024
1 parent 5632f73 commit 647eacc
Show file tree
Hide file tree
Showing 39 changed files with 236 additions and 137 deletions.
4 changes: 4 additions & 0 deletions .storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,8 @@ module.exports = {
name: '@storybook/react-webpack5',
options: {},
},

typescript: {
reactDocgen: false,
},
};
4 changes: 2 additions & 2 deletions src/components/Activity/ActivityLog.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ WithProps.args = {
flush: false,
};

export const AddingCustomComponents = () => (
<ActivityLog>
export const AddingCustomComponents = (args) => (
<ActivityLog {...args}>
<Activity date={new Date()} action="Edited" by="Jane Doe" />
<Activity date={new Date()} action="Published" by="Martha (Leasing)" />
<Activity date={new Date()} action="Created" by="services">
Expand Down
3 changes: 2 additions & 1 deletion src/components/Address/AddressInput.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ Default.args = {
hints: {},
};

export const WithId = () => (
export const WithId = (args) => (
<div>
<Label for="myid_address1">Click This Label to Focus First Input:</Label>
<AddressInput
Expand All @@ -62,6 +62,7 @@ export const WithId = () => (
countryCode: 'US',
}}
id="myid"
{...args}
/>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/Address/CountryInput.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,4 @@ export default {
},
};

export const Country = () => <CountryInput onChange={action('onChange')} />;
export const Country = (args) => <CountryInput onChange={action('onChange')} {...args} />;
2 changes: 1 addition & 1 deletion src/components/Address/StateInput.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,4 @@ export default {
},
};

export const State = () => <StateInput onChange={action('onChange')} />;
export const State = (args) => <StateInput onChange={action('onChange')} {...args} />;
20 changes: 11 additions & 9 deletions src/components/Alert/Alert.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,15 @@ LiveExample.argTypes = {
},
};

export const Icons = () => (
export const Icons = (args) => (
<div>
<Alert icon>You can also add an icon!</Alert>
<Alert icon color="success">
<Alert icon {...args}>
You can also add an icon!
</Alert>
<Alert icon color="success" {...args}>
You can specify an alert color. This one has <code>color=&quot;success&quot;</code>
</Alert>
<Alert icon color="danger">
<Alert icon color="danger" {...args}>
Humblebrag prism twee, gochujang seitan whatever asymmetrical ramps enamel pin austin salvia
swag helvetica. Chartreuse food truck tofu raclette, 3 wolf moon poke chia paleo skateboard.
Pickled tote bag echo park raclette. Irony fashion axe sartorial, cornhole jean shorts
Expand All @@ -45,23 +47,23 @@ export const Icons = () => (
pour-over, helvetica chia brooklyn swag pug scenester kogi pitchfork leggings yuccie. Ethical
put a bird on it portland vape YOLO.
</Alert>
<Alert icon color="info">
<Alert icon color="info" {...args}>
<strong>Heads up!</strong> This alert needs your attention, but it&apos;s not super important.
</Alert>
</div>
);

export const Dismissible = () => (
export const Dismissible = (args) => (
<div>
<Alert dismissible icon color="success">
<Alert dismissible icon color="success" {...args}>
Alerts can also be dismissed. Simply add the <code>dismissible</code> prop.
</Alert>
</div>
);

export const Extras = () => (
export const Extras = (args) => (
<div>
<Alert icon color="info">
<Alert icon color="info" {...args}>
<h4 className="alert-heading">Well done!</h4>
<p>
You can use the <code>alert-heading</code> class on a heading to make it stand out!
Expand Down
10 changes: 6 additions & 4 deletions src/components/Badge/Badge.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,22 @@ export default {
},
};

export const Default = () => (
export const Default = (args: any) => (
<div>
{colors.map((color) => (
<div>
<Badge color={color}>{color}</Badge>
<Badge color={color} {...args}>
{color}
</Badge>
</div>
))}
</div>
);

export const Pills = () => (
export const Pills = (args: any) => (
<div className="d-flex gap-3">
{colors.map((color) => (
<Badge pill color={color}>
<Badge pill color={color} {...args}>
{color}
</Badge>
))}
Expand Down
4 changes: 2 additions & 2 deletions src/components/Breadcrumb/Breadcrumb.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ export default {
},
};

export const LiveExample = () => (
export const LiveExample = (args) => (
<div>
<Breadcrumb>
<Breadcrumb {...args}>
<BreadcrumbItem>
<a href="/">Home</a>
</BreadcrumbItem>
Expand Down
28 changes: 16 additions & 12 deletions src/components/Button/Button.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,9 @@ LiveExample.argTypes = {
},
};

export const Colors = () => (
export const Colors = (args) => (
<ButtonToolbar>
<Button>Default</Button>
<Button {...args}>Default</Button>
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="success">Success</Button>
Expand All @@ -55,9 +55,11 @@ export const Colors = () => (
</ButtonToolbar>
);

export const Disabled = () => (
export const Disabled = (args) => (
<ButtonToolbar>
<Button disabled>Default</Button>
<Button disabled {...args}>
Default
</Button>
<Button disabled color="primary">
Primary
</Button>
Expand Down Expand Up @@ -88,9 +90,11 @@ export const Disabled = () => (
</ButtonToolbar>
);

export const Outline = () => (
export const Outline = (args) => (
<ButtonToolbar>
<Button outline>Default</Button>
<Button outline {...args}>
Default
</Button>
<Button outline color="primary">
Primary
</Button>
Expand Down Expand Up @@ -121,9 +125,9 @@ export const Outline = () => (
</ButtonToolbar>
);

export const Sizes = () => (
export const Sizes = (args) => (
<div>
<Button color="primary" size="lg">
<Button color="primary" size="lg" {...args}>
Large button
</Button>
&nbsp;
Expand Down Expand Up @@ -159,10 +163,10 @@ TooltipButtonExample.argTypes = {
},
};

export const ButtonGroupExample = () => (
export const ButtonGroupExample = (args) => (
<div>
<div className="mb-1">
<Button size="lg" block>
<Button size="lg" block {...args}>
Block level button
</Button>
</div>
Expand Down Expand Up @@ -214,8 +218,8 @@ export const ButtonGroupExample = () => (
</div>
);

export const ConfirmationButtonExample = () => (
<ConfirmationButton confirmation="You sure?" onClick={action('onClick')}>
export const ConfirmationButtonExample = (args) => (
<ConfirmationButton confirmation="You sure?" onClick={action('onClick')} {...args}>
Do the thing!
</ConfirmationButton>
);
2 changes: 1 addition & 1 deletion src/components/Calendar/MonthCalendar.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import React, { useState } from 'react';
import MonthCalendar from './MonthCalendar';

const meta: Meta<typeof MonthCalendar> = {
title: 'Calendar',
title: 'MonthCalendar',
component: MonthCalendar,
parameters: {
sourceLink: 'Calendar/MonthCalendar.tsx',
Expand Down
2 changes: 1 addition & 1 deletion src/components/Carousel/Carousel.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,4 +30,4 @@ export default {
},
};

export const Uncontrolled = () => <UncontrolledCarousel items={items} />;
export const Uncontrolled = (args) => <UncontrolledCarousel items={items} {...args} />;
16 changes: 11 additions & 5 deletions src/components/Checkbox/CheckboxGroup.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,18 +24,18 @@ export default {
},
};

export const LiveExample = () => {
export const LiveExample = (args) => {
const [selected, setSelected] = useState([]);

const handleChange = (values) => {
setSelected(values);
action('onChange')(values);
};

return <CheckboxGroup options={options} onChange={handleChange} selected={selected} />;
return <CheckboxGroup options={options} onChange={handleChange} selected={selected} {...args} />;
};

export const SomeDisabled = () => {
export const SomeDisabled = (args) => {
const [selected, setSelected] = useState([]);

const handleChange = (values) => {
Expand All @@ -44,11 +44,16 @@ export const SomeDisabled = () => {
};

return (
<CheckboxGroup options={optionsSomeDisabled} onChange={handleChange} selected={selected} />
<CheckboxGroup
options={optionsSomeDisabled}
onChange={handleChange}
selected={selected}
{...args}
/>
);
};

export const Horizontal = () => {
export const Horizontal = (args) => {
const [selected, setSelected] = useState([]);

const handleChange = (values) => {
Expand All @@ -62,6 +67,7 @@ export const Horizontal = () => {
options={options}
onChange={handleChange}
selected={selected}
{...args}
/>
);
};
27 changes: 18 additions & 9 deletions src/components/CollapsableText/CollapsableText.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,37 +48,46 @@ ShorterThanMaxLines.args = {
maxLines: 2,
};

export const CustomComponents = () => (
export const CustomComponents = (args) => (
<div>
<CollapsableText
moreLabel={<Icon name="circle-plus" className="text-success" />}
lessLabel={<Icon name="circle-minus" className="text-danger" />}
{...args}
>
{loremIpsum}
</CollapsableText>
</div>
);

export const AlignToggleButtonStart = () => (
export const AlignToggleButtonStart = (args) => (
<div>
<CollapsableText alignToggleButton="start">{loremIpsum}</CollapsableText>
<CollapsableText alignToggleButton="start" {...args}>
{loremIpsum}
</CollapsableText>
</div>
);

export const AlignToggleButtonCenter = () => (
export const AlignToggleButtonCenter = (args) => (
<div>
<CollapsableText alignToggleButton="center">{loremIpsum}</CollapsableText>
<CollapsableText alignToggleButton="center" {...args}>
{loremIpsum}
</CollapsableText>
</div>
);

export const AlignToggleButtonEnd = () => (
export const AlignToggleButtonEnd = (args) => (
<div>
<CollapsableText alignToggleButton="end">{loremIpsum}</CollapsableText>
<CollapsableText alignToggleButton="end" {...args}>
{loremIpsum}
</CollapsableText>
</div>
);

export const AlignToggleButtonAuto = () => (
export const AlignToggleButtonAuto = (args) => (
<div>
<CollapsableText alignToggleButton="auto">{loremIpsum}</CollapsableText>
<CollapsableText alignToggleButton="auto" {...args}>
{loremIpsum}
</CollapsableText>
</div>
);
10 changes: 6 additions & 4 deletions src/components/Collapse/Collapse.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,26 @@ export default {
},
};

export const Controlled = () => {
export const Controlled = (args) => {
const [open, setOpen] = useState(false);
return (
<div>
<Button color="primary" onClick={() => setOpen(!open)}>
Toggle Collapse
</Button>
<Collapse isOpen={open}>This content will fade in and out as the button is pressed</Collapse>
<Collapse isOpen={open} {...args}>
This content will fade in and out as the button is pressed
</Collapse>
</div>
);
};

export const Uncontrolled = () => (
export const Uncontrolled = (args) => (
<div>
<Button color="primary" id="toggler" className="mb-3">
Toggle
</Button>
<UncontrolledCollapse toggler="#toggler">
<UncontrolledCollapse toggler="#toggler" {...args}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt magni, voluptas debitis
similique porro a molestias consequuntur earum odio officiis natus, amet hic, iste sed
dignissimos esse fuga! Minus, alias.
Expand Down
3 changes: 2 additions & 1 deletion src/components/Combobox/Combobox.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ export const CreatableOptions = {
};

export const CustomOptions = {
render: function Render() {
render: function Render(args) {
const [value, setValue] = useState();
const mixedOptions = [
{
Expand Down Expand Up @@ -212,6 +212,7 @@ export const CustomOptions = {
renderOption={renderOption}
renderInputValue={renderInputValue}
menuMaxHeight="20rem"
{...args}
/>
);
},
Expand Down
Loading

0 comments on commit 647eacc

Please sign in to comment.