-
+
Accordion Item 1
@@ -61,14 +60,11 @@ export const Example = () => {
);
};
+Example.args = { flush: false };
-export const Uncontrolled = () => (
+export const Uncontrolled = (args) => (
-
+
Accordion Item 1
@@ -99,3 +95,7 @@ export const Uncontrolled = () => (
);
+Uncontrolled.args = {
+ flush: false,
+ stayOpen: false,
+};
diff --git a/src/components/Activity/Activity.stories.js b/src/components/Activity/Activity.stories.js
index 42acfef19..2f3e5120d 100644
--- a/src/components/Activity/Activity.stories.js
+++ b/src/components/Activity/Activity.stories.js
@@ -1,28 +1,37 @@
-import { action } from '@storybook/addon-actions';
-import { boolean, select, text } from '@storybook/addon-knobs';
+import { action as sbAction } from '@storybook/addon-actions';
import React from 'react';
import { colors } from '../../tooling/colors';
import Activity from './Activity';
export default {
- title: 'ActivityLog',
+ title: 'ActivityOnly',
component: Activity,
parameters: {
sourceLink: 'Activity/Activity.tsx',
},
};
-export const ActivityOnly = () => (
-
@@ -64,24 +66,38 @@ export const WithId = () => (
);
-export const Controlled = () => (
+export const Controlled = ({ address1, address2, city, state, postal, countryCode, ...args }) => (
-
);
+International.args = {
+ showLabels: InternationalAddressInput.defaultProps.showLabels,
+ onBlur: action('address onBlur'),
+ onChange: action('address onChange'),
+ disabled: undefined,
+ error: {},
+ labels: InternationalAddressInput.defaultProps.labels,
+ hints: InternationalAddressInput.defaultProps.hints,
+};
+International.argTypes = {
+ disabled: {
+ control: 'boolean',
+ },
+};
diff --git a/src/components/Alert/Alert.stories.js b/src/components/Alert/Alert.stories.js
index ac4be146e..8e8b2fc95 100644
--- a/src/components/Alert/Alert.stories.js
+++ b/src/components/Alert/Alert.stories.js
@@ -1,5 +1,4 @@
import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
import React from 'react';
import { colors } from '../../tooling/colors';
import Alert from './Alert';
@@ -12,23 +11,24 @@ export default {
},
};
-export const LiveExample = () => (
-
diff --git a/src/components/BlockPanel/BlockPanel.stories.js b/src/components/BlockPanel/BlockPanel.stories.js
index 734b11bfa..74f9f07ee 100644
--- a/src/components/BlockPanel/BlockPanel.stories.js
+++ b/src/components/BlockPanel/BlockPanel.stories.js
@@ -1,5 +1,4 @@
import { action } from '@storybook/addon-actions';
-import { boolean, select, text } from '@storybook/addon-knobs';
import React from 'react';
import Button from '../Button/Button';
import ButtonGroup from '../Button/ButtonGroup';
@@ -22,26 +21,9 @@ export default {
},
};
-export const LiveExample = () => (
- action('onEdit')}
- color={select('color', [
- '',
- 'primary',
- 'secondary',
- 'info',
- 'success',
- 'warning',
- 'danger',
- 'light',
- 'dark',
- ])}
- expandable={boolean('expandable', true)}
- hideOnToggle={boolean('hideOnToggle', false)}
- open={boolean('open', true)}
- >
- {text('title') ? (
+export const LiveExample = (args) => (
+
+ {args.title ? (
);
+LiveExample.args = {
+ title: 'Some simple content would go here',
+ onEdit: action('onEdit'),
+ color: '',
+ expandable: true,
+ hideOnToggle: false,
+ open: true,
+};
+LiveExample.argTypes = {
+ color: {
+ options: ['', 'primary', 'secondary', 'info', 'success', 'warning', 'danger', 'light', 'dark'],
+ control: { type: 'select' },
+ },
+};
-export const InitiallyClosed = () => (
- action('onEdit')}
- expandable={boolean('expandable', true)}
- open={false}
- >
+export const InitiallyClosed = (args) => (
+
Now you don't.
);
+InitiallyClosed.args = {
+ title: 'Some simple content would go here',
+ onEdit: action('onEdit'),
+ expandable: true,
+};
-export const OnToggle = () => (
-
- Now you don't.
-
-);
+export const OnToggle = (args) => Now you don't. ;
+OnToggle.args = {
+ title: 'Click me you fool',
+ onToggle: action('onToggle'),
+ expandable: true,
+};
-export const ComponentsForTitleAndControls = () => (
+export const ComponentsForTitleAndControls = ({ title }) => (
- {text('title', 'Invoices')}{' '}
+ {title}{' '}
It means nothing.
@@ -105,11 +98,14 @@ export const ComponentsForTitleAndControls = () => (
Hello
);
+ComponentsForTitleAndControls.args = {
+ title: 'Invoices',
+};
-export const DropdownForControls = () => (
+export const DropdownForControls = ({ title }) => (
{text('title', 'Invoices')}}
+ title={{title}}
controls={[
(
entities in a service that somehow match red
);
+DropdownForControls.args = {
+ title: 'Invoices',
+};
-export const StickyBlockPanel = () => (
-
+export const StickyBlockPanel = ({ title }) => (
+
I feel sticky, oh so sticky, I feel sticky, and witty, and wise.
);
+StickyBlockPanel.args = {
+ title: 'I remember open/close',
+};
diff --git a/src/components/Button/Button.stories.js b/src/components/Button/Button.stories.js
index a5c6ffd73..24d9931f5 100644
--- a/src/components/Button/Button.stories.js
+++ b/src/components/Button/Button.stories.js
@@ -1,5 +1,4 @@
import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
import React from 'react';
import { buttonColors } from '../../tooling/colors';
import DropdownItem from '../Dropdown/DropdownItem';
@@ -20,18 +19,26 @@ export default {
},
};
-export const LiveExample = () => (
-
-);
+export const LiveExample = ({ label, ...args }) => ;
+LiveExample.args = {
+ color: 'primary',
+ block: false,
+ disabled: false,
+ outline: false,
+ active: false,
+ size: undefined,
+ label: 'Click Me',
+};
+LiveExample.argTypes = {
+ color: {
+ options: buttonColors,
+ control: { type: 'select' },
+ },
+ size: {
+ options: ['', 'sm', 'lg'],
+ control: { type: 'select' },
+ },
+};
export const Colors = () => (
@@ -130,17 +137,27 @@ export const Sizes = () => (
);
-export const TooltipButtonExample = () => (
-
The header is shown when a title prop is provided
@@ -52,34 +34,45 @@ export const LiveExample = () => (
)}
diff --git a/src/components/Calendar/Calendar.stories.tsx b/src/components/Calendar/Calendar.stories.tsx
index 6bf149585..5435ee693 100644
--- a/src/components/Calendar/Calendar.stories.tsx
+++ b/src/components/Calendar/Calendar.stories.tsx
@@ -1,19 +1,29 @@
import { action } from '@storybook/addon-actions';
-import { select } from '@storybook/addon-knobs';
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
import Calendar from './Calendar';
-export default {
+const meta: Meta = {
title: 'Calendar',
component: Calendar,
parameters: {
sourceLink: 'Calendar/Calendar.tsx',
},
+ argTypes: {
+ weekDayFormat: {
+ options: [undefined, 'dd', 'ddd', 'dddd'],
+ control: {
+ type: 'select',
+ },
+ },
+ },
};
-export const CalendarExample = () => (
- ;
+
+export const CalendarExample: Story = {
+ args: {
+ onSelect: action('onSelect'),
+ weekDayFormat: undefined,
+ },
+};
diff --git a/src/components/Calendar/MonthCalendar.stories.tsx b/src/components/Calendar/MonthCalendar.stories.tsx
index dbb20c3ac..f15561de2 100644
--- a/src/components/Calendar/MonthCalendar.stories.tsx
+++ b/src/components/Calendar/MonthCalendar.stories.tsx
@@ -1,28 +1,52 @@
import { action } from '@storybook/addon-actions';
-import { boolean, select } from '@storybook/addon-knobs';
+import { Meta, StoryObj } from '@storybook/react';
import React, { useState } from 'react';
import MonthCalendar from './MonthCalendar';
-export default {
+const meta: Meta = {
title: 'Calendar',
component: MonthCalendar,
parameters: {
sourceLink: 'Calendar/MonthCalendar.tsx',
},
+ argTypes: {
+ monthFormat: {
+ options: ['M', 'MM', 'MMM', 'MMMM'],
+ control: {
+ type: 'select',
+ },
+ },
+ yearFormat: {
+ options: ['YY', 'YYYY'],
+ control: {
+ type: 'select',
+ },
+ },
+ },
};
-export const MonthCalendarExample = () => {
- const [date, setDate] = useState(new Date());
- return (
- {
- setDate(e);
- action('onSelect')(e);
- }}
- centerYearSelection={boolean('Center Year Selection', false)}
- monthFormat={select('Month Format', ['M', 'MM', 'MMM', 'MMMM'], 'MMM')}
- yearFormat={select('Year Format', ['YY', 'YYYY'], 'YYYY')}
- />
- );
+export default meta;
+type Story = StoryObj;
+
+export const MonthCalendarExample: Story = {
+ args: {
+ centerYearSelection: false,
+ monthFormat: 'MMM',
+ yearFormat: 'YYYY',
+ },
+ render: function Render({ centerYearSelection, monthFormat, yearFormat }) {
+ const [date, setDate] = useState(new Date());
+ return (
+ {
+ setDate(e);
+ action('onSelect')(e);
+ }}
+ centerYearSelection={centerYearSelection}
+ monthFormat={monthFormat}
+ yearFormat={yearFormat}
+ />
+ );
+ },
};
diff --git a/src/components/Callout/Callout.stories.js b/src/components/Callout/Callout.stories.js
index 18567188a..6aa4818b6 100644
--- a/src/components/Callout/Callout.stories.js
+++ b/src/components/Callout/Callout.stories.js
@@ -1,4 +1,3 @@
-import { select, text } from '@storybook/addon-knobs';
import React from 'react';
import { colors } from '../../tooling/colors';
import Callout from './Callout';
@@ -11,26 +10,35 @@ export default {
},
};
-export const LiveExample = () => (
+export const LiveExample = ({ content, ...args }) => (
);
-export const Outline = () => {
- const squareCorners = boolean('square corners', true);
+export const Outline = ({ squareCorners }) => (
+
-
+
);
+LiveExample.args = {
+ color: Callout.defaultProps.color,
+ background: Callout.defaultProps.background,
+ placement: Callout.defaultProps.placement,
+ content: `Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit, sed do eiusmod tempor incididunt ut labore
+ et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut
+ aliquip ex ea commodo consequat.`,
+};
+LiveExample.argTypes = {
+ color: {
+ options: [...colors],
+ control: { type: 'select' },
+ },
+ background: {
+ options: [...colors],
+ control: { type: 'select' },
+ },
+ placement: {
+ options: ['top', 'right', 'bottom', 'left'],
+ control: { type: 'select' },
+ },
+};
diff --git a/src/components/Card/Card.stories.js b/src/components/Card/Card.stories.js
index bb2543d25..13c2ff2e0 100644
--- a/src/components/Card/Card.stories.js
+++ b/src/components/Card/Card.stories.js
@@ -1,4 +1,3 @@
-import { text, boolean } from '@storybook/addon-knobs';
import React from 'react';
import { colors } from '../../tooling/colors';
import Card from './Card';
@@ -15,30 +14,27 @@ export default {
},
};
-export const LiveExample = () => {
- const outline = boolean('outline', false);
- const footer = text('footer', '');
-
- return (
- Hello World
- {text( - 'content', - `Lorem ipsum dolor sit amet, consectetur adipiscing - elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat.` - )} + {content}
-
-
- {text('title', 'Hello World!')}
-
-
- {text(
- 'content',
- `Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore
- et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat.`
- )}
-
- {footer && {footer} }
-
-
- );
+export const LiveExample = ({ outline, footer, inverse, title, content }) => (
+
+
+
+ {title}
+
+ {content}
+ {footer && {footer} }
+
+
+);
+LiveExample.args = {
+ outline: false,
+ footer: '',
+ inverse: false,
+ title: 'Hello World!',
+ content: `Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit, sed do eiusmod tempor incididunt ut labore
+ et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut
+ aliquip ex ea commodo consequat.`,
};
export const Colors = () => (
@@ -55,28 +51,27 @@ export const Colors = () => (
+
+
+ Default
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+ labore et dolore magna aliqua.
+
+
- return (
-
+);
+Outline.args = {
+ squareCorners: true,
};
diff --git a/src/components/Carousel/ImageCarousel.stories.js b/src/components/Carousel/ImageCarousel.stories.js
index 1a29bbdbb..f289180ee 100644
--- a/src/components/Carousel/ImageCarousel.stories.js
+++ b/src/components/Carousel/ImageCarousel.stories.js
@@ -1,4 +1,3 @@
-import { boolean, number } from '@storybook/addon-knobs';
import React from 'react';
import Jumbotron from '../Jumbotron/Jumbotron';
import ImageCarousel from './ImageCarousel';
@@ -40,16 +39,14 @@ export default {
},
};
-export const DefaultProps = () => (
-
-
+ {colors.map((color) => (
+
- Default
+ {color}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
-
- {colors.map((color) => (
-
-
- {color}
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
- incididunt ut labore et dolore magna aliqua.
-
-
- ))}
-
- );
+ ))}
+ {loremIpsum}
- Short text
+ Short text
);
+ShorterThanMaxLines.args = {
+ maxLines: 2,
+};
export const CustomComponents = () => (
diff --git a/src/components/Combobox/Combobox.stories.js b/src/components/Combobox/Combobox.stories.js
index c51e96b5d..140c01c5d 100644
--- a/src/components/Combobox/Combobox.stories.js
+++ b/src/components/Combobox/Combobox.stories.js
@@ -1,4 +1,3 @@
-import { boolean, text, select } from '@storybook/addon-knobs';
import React, { useState } from 'react';
import Icon from '../Icon/Icon';
import Combobox from './Combobox';
@@ -67,159 +66,177 @@ const options = [
{ label: 'Virgin Islands', value: 'VI' },
];
-export default {
+const meta = {
title: 'Combobox',
component: Combobox,
parameters: {
sourceLink: 'Combobox/Combobox.tsx',
},
+ argTypes: {
+ direction: {
+ control: {
+ type: 'select',
+ options: ['', 'down', 'up'],
+ },
+ },
+ },
};
-export const LiveExample = () => {
- const [value, setValue] = useState();
- return (
- <>
-
-
-
-
- );
+export const WithProps = ({ stacked, labelSize, label, value, feedback, hint }) => (
+
+
+
+
+);
+WithProps.args = {
+ stacked: false,
+ labelSize: 'md',
+ label: 'Key',
+ value: 'Some simple content would go here',
+ feedback: undefined,
+ hint: '',
+};
+WithProps.argTypes = {
+ labelSize: {
+ options: ['sm', 'md', 'lg'],
+ control: { type: 'select' },
+ },
};
export const WithHTMLValue = () => (
diff --git a/src/components/Dropdown/Dropdown.stories.js b/src/components/Dropdown/Dropdown.stories.js
index 4c10bf43e..d9aa96a93 100644
--- a/src/components/Dropdown/Dropdown.stories.js
+++ b/src/components/Dropdown/Dropdown.stories.js
@@ -1,5 +1,4 @@
import { action } from '@storybook/addon-actions';
-import { boolean, select, text } from '@storybook/addon-knobs';
import React from 'react';
import { colors } from '../../tooling/colors';
import Dropdown from './Dropdown';
@@ -8,56 +7,77 @@ import DropdownMenu from './DropdownMenu';
import DropdownToggle from './DropdownToggle';
import UncontrolledDropdown from './UncontrolledDropdown';
-export default {
+const meta = {
title: 'Dropdown',
component: Dropdown,
parameters: {
sourceLink: 'Dropdown/Dropdown.tsx',
},
+ argTypes: {
+ direction: {
+ options: ['', 'down', 'up', 'left', 'right'],
+ control: { type: 'select' },
+ },
+ color: {
+ options: colors,
+ control: { type: 'select' },
+ },
+ size: {
+ options: ['', 'sm', 'lg'],
+ control: { type: 'select' },
+ },
+ },
};
+export default meta;
-export const Uncontrolled = () => (
-
-
- {text('text', 'Click Me')}
-
-
- Action
- Another Action
- Header
- Disabled Action
-
-
-);
+export const Uncontrolled = {
+ args: {
+ direction: '',
+ color: 'primary',
+ disabled: false,
+ outline: false,
+ size: undefined,
+ text: 'Click Me',
+ },
+ render: ({ direction, color, disabled, outline, size, text }) => (
+
+
+ {text}
+
+
+ Action
+ Another Action
+ Header
+ Disabled Action
+
+
+ ),
+};
-export const Controlled = () => (
-
-
- {text('text', 'Click Me')}
-
-
- Action
- Another Action
- Header
- Disabled Action
-
-
-);
+export const Controlled = {
+ args: {
+ direction: '',
+ isOpen: false,
+ toggle: action('toggle'),
+ color: 'primary',
+ disabled: false,
+ outline: false,
+ size: undefined,
+ text: 'Click Me',
+ },
+ render: ({ direction, isOpen, toggle, color, disabled, outline, size, text }) => (
+
+
+ {text}
+
+
+ Action
+ Another Action
+ Header
+ Disabled Action
+
+
+ ),
+};
diff --git a/src/components/ExpandableSection/ExpandableSection.stories.js b/src/components/ExpandableSection/ExpandableSection.stories.js
index 1d776d841..b1ce04be5 100644
--- a/src/components/ExpandableSection/ExpandableSection.stories.js
+++ b/src/components/ExpandableSection/ExpandableSection.stories.js
@@ -1,5 +1,4 @@
import { action } from '@storybook/addon-actions';
-import { boolean, text } from '@storybook/addon-knobs';
import React from 'react';
import Button from '../Button/Button';
import ExpandableSection from './ExpandableSection';
@@ -12,27 +11,29 @@ export default {
},
};
-export const Default = () => (
-
+export const Default = (args) => (
+
);
+Default.args = {
+ title: 'Click to expand me',
+ open: ExpandableSection.defaultProps.open,
+ onToggle: action('onToggle'),
+};
-export const Open = () => (
-
+export const Open = (args) => (
+
);
+Open.args = {
+ title: 'Expanded by default',
+ open: true,
+ onToggle: action('onToggle'),
+};
-export const Header = () => (
+export const Header = (args) => (
@@ -47,9 +48,12 @@ export const Header = () => (
}
- open={boolean('open', true)}
- onToggle={action('onToggle')}
+ {...args}
>
);
+Header.args = {
+ open: true,
+ onToggle: action('onToggle'),
+};
diff --git a/src/components/FeatureBanner/FeatureBanner.stories.tsx b/src/components/FeatureBanner/FeatureBanner.stories.tsx
index ddacc4b6a..ee88154c1 100644
--- a/src/components/FeatureBanner/FeatureBanner.stories.tsx
+++ b/src/components/FeatureBanner/FeatureBanner.stories.tsx
@@ -1,28 +1,42 @@
-import { select, text } from '@storybook/addon-knobs';
+import { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { colors } from '../../tooling/colors';
import Button from '../Button/Button';
import Icon from '../Icon/Icon';
import FeatureBanner from './FeatureBanner';
-export default {
+const meta: Meta = {
title: 'FeatureBanner',
component: FeatureBanner,
parameters: {
sourceLink: 'FeatureBanner/FeatureBanner.tsx',
},
+ argTypes: {
+ color: {
+ options: colors,
+ control: {
+ type: 'select',
+ },
+ },
+ },
};
-export const LiveExample = () => (
-
-
-
-);
+export default meta;
+type Story = StoryObj;
+
+export const LiveExample: Story = {
+ args: {
+ alertText: 'New',
+ color: 'info',
+ title: 'Company-Wide View of Text Messages',
+ subtitle: 'View all text messages sent by your company from this page.',
+ },
+ render: (args) => (
+
+
+
+ ),
+};
diff --git a/src/components/FeedbackButton/FeedbackButton.stories.tsx b/src/components/FeedbackButton/FeedbackButton.stories.tsx
index 8513b303f..fdf5d408a 100644
--- a/src/components/FeedbackButton/FeedbackButton.stories.tsx
+++ b/src/components/FeedbackButton/FeedbackButton.stories.tsx
@@ -1,68 +1,78 @@
import { action } from '@storybook/addon-actions';
-import * as knobs from '@storybook/addon-knobs';
+import { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { buttonColors } from '../../tooling/colors';
import FeedbackButton from './FeedbackButton';
-export default {
+const meta: Meta = {
title: 'FeedbackButton',
component: FeedbackButton,
parameters: {
sourceLink: 'FeedbackButton/FeedbackButton.tsx',
},
+ argTypes: {
+ color: {
+ options: buttonColors,
+ control: {
+ type: 'select',
+ },
+ },
+ size: {
+ options: ['lg', 'md', 'sm'],
+ control: {
+ type: 'inline-radio',
+ },
+ },
+ },
};
-export const Default = () => (
- {
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ backdrop: false,
+ className: '',
+ color: 'default',
+ disabled: false,
+ doSubmit: async () => {
action('doSubmit');
- }}
- feature={knobs.text('feature', 'default')}
- modalTitle={knobs.text('modalTitle', 'Modal Title')}
- outline={knobs.boolean('outline', false)}
- recipient={knobs.text('recipient', 'my_team_name')}
- />
-);
+ },
+ feature: 'default',
+ modalTitle: 'Modal Title',
+ outline: false,
+ recipient: 'my_team_name',
+ },
+ render: (args) => {
+export const AllProps: Story = {
+ args: {
+ backdrop: true,
+ block: true,
+ cancelButtonText: 'Cancel',
+ className: '',
+ color: 'default',
+ commentIncluded: false,
+ commentPlaceholder: 'Please give as much detail as you can. Thanks!',
+ commentRequired: false,
+ commentSubtitle: 'How could we improve the way this works for you?',
+ disabled: false,
+ doSubmit: async () => {
action('doSubmit');
- }}
- feature={knobs.text('feature', 'default')}
- highRatingText={knobs.text('highRatingText', 'Very satisfied')}
- lowRatingText={knobs.text('lowRatingText', 'Not satisfied at all')}
- modalTitle={knobs.text('modalTitle', 'Give Feedback')}
- outline={knobs.boolean('outline', false)}
- pleaseWaitButtonText={knobs.text('pleaseWaitButtonText', 'Please Wait...')}
- ratingIncluded={knobs.boolean('ratingIncluded', false)}
- ratingRequired={knobs.boolean('ratingRequired', false)}
- ratingSubtitle={knobs.text(
- 'ratingSubtitle',
- 'So far, how satisfied are you with this feature?'
- )}
- recipient={knobs.text('recipient', 'recipient@example.com')}
- size={knobs.select('size', ['lg', 'md', 'sm'], 'md')}
- submitButtonText={knobs.text('submitButtonText', 'Send')}
- />
-);
+ },
+ feature: 'default',
+ highRatingText: 'Very satisfied',
+ lowRatingText: 'Not satisfied at all',
+ modalTitle: 'Give Feedback',
+ outline: false,
+ pleaseWaitButtonText: 'Please Wait...',
+ ratingIncluded: false,
+ ratingRequired: false,
+ ratingSubtitle: 'So far, how satisfied are you with this feature?',
+ recipient: 'recipient@example.com',
+ size: 'md',
+ submitButtonText: 'Send',
+ },
+ render: (args) =>
+export const Bound = (args) => (
+
(
);
+Bound.args = {
+ errors: { lastName: 'Last Name is required' },
+ onSubmit: action('submit'),
+};
diff --git a/src/components/Form/FormLabelGroup.stories.js b/src/components/Form/FormLabelGroup.stories.js
index cb8da287e..a8cb3ecba 100644
--- a/src/components/Form/FormLabelGroup.stories.js
+++ b/src/components/Form/FormLabelGroup.stories.js
@@ -1,4 +1,3 @@
-import { boolean, object, text, select } from '@storybook/addon-knobs';
import React from 'react';
import Alert from '../Alert/Alert';
import Input from '../Input/Input';
@@ -14,25 +13,34 @@ export default {
},
};
-export const LiveExample = () => (
+export const LiveExample = (args) => (
diff --git a/src/components/Form/FormRow.stories.js b/src/components/Form/FormRow.stories.js
index bf6db33ff..1105783ea 100644
--- a/src/components/Form/FormRow.stories.js
+++ b/src/components/Form/FormRow.stories.js
@@ -1,5 +1,4 @@
import { action } from '@storybook/addon-actions';
-import { boolean, object, text, select } from '@storybook/addon-knobs';
import React, { useState } from 'react';
import FormChoice from './FormChoice';
import FormRow from './FormRow';
@@ -12,36 +11,49 @@ export default {
},
};
-export const LiveExample = () => (
+export const LiveExample = (args) => (
setFavorite(e.target.value)}
- stacked={boolean('stacked', false)}
type="select"
value={favorite}
+ {...args}
>
Alpha
@@ -58,112 +70,85 @@ export const WithSelect = () => {
);
};
+LiveExample.args = {
+ label: 'Favorite NATO Phonetic',
+ stacked: false,
+};
-export const WithCheckboxes = () => {
+export const WithCheckboxes = ({ label, stacked, inline }) => {
const [favorites, setFavorites] = useState(['Bravo']);
return (
setFavorites(selection)}
type="checkbox"
>
-
+
Alpha
-
+
Bravo
-
+
Charlie
-
+
Delta
);
};
+WithCheckboxes.args = {
+ label: 'Favorite NATO Phonetics',
+ stacked: false,
+ inline: false,
+};
-export const WithRadioButtons = () => {
+export const WithRadioButtons = ({ label, stacked, inline }) => {
const [favorite, setFavorite] = useState('Bravo');
return (
setFavorite(e.target.value)}
- stacked={boolean('stacked', false)}
+ stacked={stacked}
type="radio"
>
-
+
Alpha
-
+
Bravo
Charlie
-
+
Delta
);
};
+WithRadioButtons.args = {
+ label: 'Favorite NATO Phonetic',
+ stacked: false,
+ inline: false,
+};
-export const ControlledValue = () => {
+export const ControlledValue = (args) => {
const [value, setValue] = React.useState('');
- return (
- setValue(e.target.value)}
- stacked={boolean('stacked', false)}
- type={text('type', 'text')}
- value={value}
- />
- );
+ return setValue(e.target.value)} value={value} {...args} />;
+};
+ControlledValue.args = {
+ label: 'Label',
+ stacked: false,
+ type: 'text',
};
diff --git a/src/components/HasManyFields/HasManyFields.stories.js b/src/components/HasManyFields/HasManyFields.stories.js
index c05b673f3..be82d4bcc 100644
--- a/src/components/HasManyFields/HasManyFields.stories.js
+++ b/src/components/HasManyFields/HasManyFields.stories.js
@@ -1,5 +1,4 @@
import { action } from '@storybook/addon-actions';
-import { boolean, number, select, text } from '@storybook/addon-knobs';
import React from 'react';
import AddressInput from '../Address/AddressInput';
import Input from '../Input/Input';
@@ -42,7 +41,7 @@ export default {
},
};
-export const LiveExample = () => (
+export const LiveExample = (args) => (
(
countryCode: 'US',
}}
label="Add an Address"
- disabled={boolean('disabled', false)}
- onAdd={action('hasManyFields onAdd')}
- onRemove={action('hasManyFields onRemove')}
- onUpdate={action('hasManyFields onUpdate')}
- onChange={action('hasManyFields onChange')}
- minimumRows={number('minimumRows', 1)}
- maximumRows={number('maximumRows', 5)}
- reorderable={boolean('reorderable', false)}
+ {...args}
/>
);
+LiveExample.args = {
+ disabled: false,
+ onAdd: action('hasManyFields onAdd'),
+ onRemove: action('hasManyFields onRemove'),
+ onUpdate: action('hasManyFields onUpdate'),
+ onChange: action('hasManyFields onChange'),
+ minimumRows: 1,
+ maximumRows: 5,
+ reorderable: false,
+};
-export const RowWrapper = () => (
-
+export const RowWrapper = (args) => (
+
);
+RowWrapper.args = {
+ onDelete: action('onDelete'),
+ disabled: false,
+ disabledReason: undefined,
+ disabledReasonPlacement: 'top',
+};
+RowWrapper.argTypes = {
+ disabledReasonPlacement: {
+ control: {
+ type: 'select',
+ options: ['top', 'left', 'bottom', 'right'],
+ },
+ },
+};
export const AddItemButton = () => (
Button Label Content
diff --git a/src/components/HelpBubble/HelpBubble.stories.js b/src/components/HelpBubble/HelpBubble.stories.js
index 05ac105ea..8e2af25e7 100644
--- a/src/components/HelpBubble/HelpBubble.stories.js
+++ b/src/components/HelpBubble/HelpBubble.stories.js
@@ -1,4 +1,3 @@
-import { text, select } from '@storybook/addon-knobs';
import React from 'react';
import HelpBubble from './HelpBubble';
@@ -10,16 +9,12 @@ export default {
},
};
-export const LiveExample = () => (
+export const LiveExample = ({ title, placement, content }) => (
);
+LiveExample.args = {
+ title: 'What does this mean?',
+ placement: 'bottom',
+ content: 'Help bubbles are a handy way of explaining things.',
+};
+LiveExample.argTypes = {
+ placement: {
+ control: {
+ type: 'select',
+ options: ['top', 'left', 'bottom', 'right'],
+ },
+ },
+};
diff --git a/src/components/Highlight/Highlight.stories.js b/src/components/Highlight/Highlight.stories.js
index b83842c34..2dc91e10d 100644
--- a/src/components/Highlight/Highlight.stories.js
+++ b/src/components/Highlight/Highlight.stories.js
@@ -1,4 +1,3 @@
-import { text, boolean } from '@storybook/addon-knobs';
import React from 'react';
import Highlight from './Highlight';
@@ -10,22 +9,16 @@ export default {
},
};
-export const LiveExample = () => (
-
- {text('children', 'The quick brown fox jumps over the lazy dog.')}
-
-);
+export const LiveExample = ({ children, ...args }) => {children} ;
+LiveExample.args = {
+ caseSensitive: false,
+ ignoreSpecial: false,
+ pattern: 'dog',
+ children: 'The quick brown fox jumps over the lazy dog.',
+};
-export const DOMNodesAsChildren = () => (
-
+export const DOMNodesAsChildren = (args) => (
+
);
+DOMNodesAsChildren.args = {
+ caseSensitive: false,
+ ignoreSpecial: false,
+ pattern: 'dog',
+};
-export const UseRegexAsPattern = () => (
-
+export const UseRegexAsPattern = (args) => (
+
);
+UseRegexAsPattern.args = {
+ caseSensitive: false,
+ ignoreSpecial: false,
+ escape: false,
+ pattern: '(fox)|(dog)',
+};
diff --git a/src/components/Icon/Icon.stories.js b/src/components/Icon/Icon.stories.js
index 443004682..316b9ee2b 100644
--- a/src/components/Icon/Icon.stories.js
+++ b/src/components/Icon/Icon.stories.js
@@ -1,4 +1,3 @@
-import { text, boolean, select } from '@storybook/addon-knobs';
import React from 'react';
import Button from '../Button/Button';
import Icon from './Icon';
@@ -15,40 +14,69 @@ export default {
};
// React component for font awesome v6
-export const LiveExample = () => (
-
- {text('children', 'Jenny, I got your number')}
+
+ {children}
);
+LiveExample.args = {
+ color: 'success',
+ title: '$86,753.09',
+ icon: 'check',
+ vertical: false,
+ children: 'Jenny, I got your number',
+};
+LiveExample.argTypes = {
+ color: {
+ control: {
+ type: 'select',
+ options: colors,
+ },
+ },
+};
diff --git a/src/components/Input/CreditCardNumber.stories.js b/src/components/Input/CreditCardNumber.stories.js
index 511e78de1..0402b8c50 100644
--- a/src/components/Input/CreditCardNumber.stories.js
+++ b/src/components/Input/CreditCardNumber.stories.js
@@ -1,5 +1,4 @@
import { action } from '@storybook/addon-actions';
-import { array } from '@storybook/addon-knobs';
import React from 'react';
import uncontrollable from 'uncontrollable';
import CreditCardNumber from './CreditCardNumber';
@@ -18,16 +17,8 @@ export default {
},
};
-export const LiveExample = () => (
-
value: {value}
- value: {value}
+
-
- );
+export const CustomOptions = {
+ render: function Render() {
+ const [value, setValue] = useState();
+ const mixedOptions = [
+ {
+ label: '71548561868 Super-duper long word like impossibly long Lane',
+ value: 'address-1',
+ type: 'address',
+ },
+ { label: '439 Sunset Drive', value: 'address-2', disabled: true, type: 'address' },
+ { label: '940 Penguin Ct', value: 'address-3', type: 'address' },
+ { label: 'Ice Bear', value: 'tenant-1', type: 'tenant' },
+ { label: 'Panda', value: 'tenant-2', type: 'tenant' },
+ { label: '77 Snowball Blvd', value: 'address-4', type: 'address' },
+ { label: 'Bob', value: 'tenant-3', type: 'tenant' },
+ ];
+ const renderOption = (option) => (
+
+
+ );
- const renderInputValue = (option) => (
-
- {option.label}
-
- );
+ const renderInputValue = (option) => (
+
+ {option.label}
+
+ );
- return (
- value: {value}
+ return (
value: {value}
+ BOO!
BOO!
BOO!
- action('onRemove', filter)}
- />
+
);
};
+LiveExample.args = {
+ maxWidth: 14,
+ onRemove: action('onRemove'),
+};
diff --git a/src/components/Form/Form.stories.js b/src/components/Form/Form.stories.js
index ac2ebb679..be94a53c4 100644
--- a/src/components/Form/Form.stories.js
+++ b/src/components/Form/Form.stories.js
@@ -1,5 +1,4 @@
import { action } from '@storybook/addon-actions';
-import { object } from '@storybook/addon-knobs';
import React from 'react';
import AddressInput from '../Address/AddressInput';
import CountryInput from '../Address/CountryInput';
@@ -147,12 +146,8 @@ export const FormRows = () => (
);
-export const Bound = () => (
-
-
+
Your content here
);
+LiveExample.args = {
+ label: 'Some Input',
+ labelSize: 'md',
+ feedback: 'You must give a first name',
+ validFeedback: undefined,
+ hint: '',
+ width: {},
+ required: false,
+ inline: false,
+ stacked: false,
+};
+LiveExample.argTypes = {
+ labelSize: {
+ control: {
+ type: 'select',
+ options: ['sm', 'md', 'lg'],
+ },
+ },
+};
export const RadioExample = () => (
-
);
+LiveExample.args = {
+ label: 'First Name',
+ labelSize: 'md',
+ feedback: 'You must give a first name',
+ validFeedback: undefined,
+ hint: '',
+ width: {},
+ required: false,
+ inline: false,
+ onChange: action('onChange'),
+ stacked: false,
+ type: 'text',
+ value: '2',
+};
+LiveExample.argTypes = {
+ labelSize: {
+ control: {
+ type: 'select',
+ options: ['sm', 'md', 'lg'],
+ },
+ },
+ type: {
+ control: {
+ type: 'select',
+ options: ['checkbox', 'number', 'password', 'radio', 'static', 'text'],
+ },
+ },
+};
-export const WithSelect = () => {
+export const WithSelect = (args) => {
const [favorite, setFavorite] = useState('Bravo');
return (
I can be placed in context to provide some contextual help!
-
@@ -30,3 +25,16 @@ export const LiveExample = () => (
The quick brown fox jumps over the lazy dog.
Henlo, I am doge. Gib treatos pls.
@@ -33,15 +26,21 @@ export const DOMNodesAsChildren = () => (
The quick brown fox jumps over the lazy dog.
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
- Hover over icon to view name:
-
- {icons.map((name, i) => ( -
- );
+export const AvailableIcons = ({ size }) => (
+ - {icons.map((name, i) => ( -
+ Hover over icon to view name:
+
+ {icons.map((name, i) => ( +
+);
+AvailableIcons.args = {
+ size: '4x',
+};
+AvailableIcons.argTypes = {
+ size: {
+ control: {
+ type: 'radio',
+ options: ['', 'xs', 'sm', 'lg', '2x', '3x', '4x', '5x'],
+ },
+ },
};
export const InlineText = () => (
diff --git a/src/components/InfoBox/InfoBox.stories.js b/src/components/InfoBox/InfoBox.stories.js
index 54cc6d90c..af7195ced 100644
--- a/src/components/InfoBox/InfoBox.stories.js
+++ b/src/components/InfoBox/InfoBox.stories.js
@@ -1,4 +1,3 @@
-import { boolean, select, text } from '@storybook/addon-knobs';
import React from 'react';
import { colors } from '../../tooling/colors';
import InfoBox from './InfoBox';
@@ -11,18 +10,28 @@ export default {
},
};
-export const LiveExample = () => (
+export const LiveExample = ({ color, title, icon, vertical, children }) => (
+ {icons.map((name, i) => ( +
(Background color added for contrast)
-
-
);
+WithProps.args = {
+ dateFormat: DateInput.defaultProps.dateFormat,
+ showOnFocus: DateInput.defaultProps.showOnFocus,
+ direction: 'down',
+ disabled: DateInput.defaultProps.disabled,
+ readOnly: false,
+ onBlur: action('onBlur'),
+ onChange: action('onChange'),
+ onClose: action('onClose'),
+ positionFixed: false,
+};
-export const WithId = () => (
+export const WithId = (args) => (
-
);
+WithId.args = {
+ dateFormat: DateInput.defaultProps.dateFormat,
+ showOnFocus: DateInput.defaultProps.showOnFocus,
+ disabled: DateInput.defaultProps.disabled,
+ onBlur: action('onBlur'),
+ onChange: action('onChange'),
+};
export const UncontrolledDefaultValue = () => (
@@ -128,11 +128,15 @@ export const DateEnabled = () => (
);
-export const CalendarDefault = () => (
+export const CalendarDefault = (args) => (
-
);
+CalendarDefault.args = {
+ dateFormat: 'D',
+ onSelect: action('onSelect'),
+};
export const CalendarCustomDay = () => (
diff --git a/src/components/Input/MaskedInput.stories.js b/src/components/Input/MaskedInput.stories.js
index 6cba12a0d..d0a4966d0 100644
--- a/src/components/Input/MaskedInput.stories.js
+++ b/src/components/Input/MaskedInput.stories.js
@@ -1,4 +1,3 @@
-import { boolean, text } from '@storybook/addon-knobs';
import React from 'react';
import MaskedInput from './MaskedInput';
@@ -10,13 +9,16 @@ export default {
},
};
-export const PhoneNumber = () => (
+export const PhoneNumber = (args) => (
-
);
+WithProps.args = {
+ centerYearSelection: MonthInput.defaultProps.centerYearSelection,
+ dateFormat: MonthInput.defaultProps.dateFormat,
+ monthFormat: MonthInput.defaultProps.monthFormat,
+ yearFormat: MonthInput.defaultProps.yearFormat,
+ showOnFocus: MonthInput.defaultProps.showOnFocus,
+ disabled: MonthInput.defaultProps.disabled,
+ onBlur: action('onBlur'),
+ onChange: action('onChange'),
+};
export const DefaultValueUncontrolled = () => (
diff --git a/src/components/Input/PatternInput.stories.js b/src/components/Input/PatternInput.stories.js
index ffe27af7b..5110ae9ef 100644
--- a/src/components/Input/PatternInput.stories.js
+++ b/src/components/Input/PatternInput.stories.js
@@ -1,4 +1,3 @@
-import { text, boolean } from '@storybook/addon-knobs';
import React, { useState } from 'react';
import PatternInput from './PatternInput';
@@ -10,15 +9,18 @@ export default {
},
};
-export const LiveExample = () => {
+export const LiveExample = ({ pattern, restrictInput }) => {
const [value, setValue] = useState('');
- const pattern = text('pattern', '^\\d{0,3}(\\.\\d{0,2})?$');
return (
setValue(e.target.value)}
/>
);
};
+LiveExample.args = {
+ pattern: '^\\d{0,3}(\\.\\d{0,2})?$',
+ restrictInput: true,
+};
diff --git a/src/components/Input/TimeInput.stories.js b/src/components/Input/TimeInput.stories.js
index 00e5e7765..fb742fdee 100644
--- a/src/components/Input/TimeInput.stories.js
+++ b/src/components/Input/TimeInput.stories.js
@@ -1,5 +1,4 @@
import { action } from '@storybook/addon-actions';
-import { boolean, number, text } from '@storybook/addon-knobs';
import React from 'react';
import FormRow from '../Form/FormRow';
import TimeInput from './TimeInput';
@@ -12,20 +11,21 @@ export default {
},
};
-export const WithProps = () => (
+export const WithProps = (args) => (
-
);
+WithProps.args = {
+ allowOtherTimes: true,
+ disabled: false,
+ max: undefined,
+ min: undefined,
+ onChange: action('onChange'),
+ placeholder: TimeInput.defaultProps.placeholder,
+ step: TimeInput.defaultProps.step,
+ timeFormat: TimeInput.defaultProps.timeFormat,
+};
export const DefaultValueUncontrolled = () => (
diff --git a/src/components/LabelBadge/LabelBadge.stories.js b/src/components/LabelBadge/LabelBadge.stories.js
index f3d797a65..7dd1c6755 100644
--- a/src/components/LabelBadge/LabelBadge.stories.js
+++ b/src/components/LabelBadge/LabelBadge.stories.js
@@ -1,5 +1,4 @@
import { action } from '@storybook/addon-actions';
-import { boolean, number, text } from '@storybook/addon-knobs';
import React from 'react';
import LabelBadge from './LabelBadge';
@@ -11,14 +10,15 @@ export default {
},
};
-export const LiveExample = () => (
+export const LiveExample = (args) => (
);
};
+Spacing.args = {
+ marginSide: '',
+ marginAmount: 3,
+ paddingSide: '',
+ paddingAmount: 3,
+};
+Spacing.argsTypes = {
+ marginSide: {
+ options: ['', 't', 'b', 'l', 'r', 'x', 'y'],
+ control: { type: 'select' },
+ },
+ marginAmount: {
+ options: [0, 1, 2, 3, 4, 5],
+ control: { type: 'select' },
+ },
+ paddingSide: {
+ options: ['', 't', 'b', 'l', 'r', 'x', 'y'],
+ control: { type: 'select' },
+ },
+ paddingAmount: {
+ options: [0, 1, 2, 3, 4, 5],
+ control: { type: 'select' },
+ },
+};
diff --git a/src/components/List/List.stories.js b/src/components/List/List.stories.js
index 20e594624..f27f6e5a8 100755
--- a/src/components/List/List.stories.js
+++ b/src/components/List/List.stories.js
@@ -1,5 +1,4 @@
import { action } from '@storybook/addon-actions';
-import { boolean, select, text, number } from '@storybook/addon-knobs';
import React, { useState, useEffect } from 'react';
import Label from '../Label/Label';
import List from './List';
@@ -41,18 +40,18 @@ const ItemRow = React.forwardRef(({ item }, ref) => (
));
-export const JustItems = () => (
-
- action('onRemove')}
- />
+
);
+LiveExample.args = {
+ label: 'User',
+ value: 'Mischa Lewis Norelle',
+ removable: true,
+ maxWidth: 20,
+ onRemove: action('onRemove'),
+};
diff --git a/src/components/Layout/Layout.stories.js b/src/components/Layout/Layout.stories.js
index 580a7e19b..025090ae9 100644
--- a/src/components/Layout/Layout.stories.js
+++ b/src/components/Layout/Layout.stories.js
@@ -1,4 +1,3 @@
-import { select } from '@storybook/addon-knobs';
import React from 'react';
import Col from './Col';
import Container from './Container';
@@ -152,17 +151,9 @@ export const Responsive = () => (
);
-export const Spacing = () => {
- const margin = `m${select('margin sides', ['', 't', 'b', 'l', 'r', 'x', 'y'], '')}-${select(
- 'margin amount',
- [0, 1, 2, 3, 4, 5],
- 3
- )}`;
- const padding = `p${select('padding sides', ['', 't', 'b', 'l', 'r', 'x', 'y'], '')}-${select(
- 'padding amount',
- [0, 1, 2, 3, 4, 5],
- 3
- )}`;
+export const Spacing = ({ marginSide, marginAmount, paddingSide, paddingAmount }) => {
+ const margin = `m${marginSide}-${marginAmount}`;
+ const padding = `p${paddingSide}-${paddingAmount}`;
return (
@@ -188,3 +179,27 @@ export const Spacing = () => {
-
+export const JustItems = (args) => (
+
- Add a popover body -
- Add a popover header -
- Control the popover state externally -
- Add a popover body +
- Add a popover header +
- Control the popover state externally +
-
{(item) =>
-
- {(item) => (
-
-
+ {(item) =>
-
+export const SaveScrollPositionBetweenPageLoads = (args) => (
+
-
{(item) =>
- {
- action('onFilter')(val);
+ onFilter(val);
setFilter(val);
}}
- onSelect={action('onSelect')}
+ onSelect={onSelect}
onSort={(sortVal) => {
- action('onSort')(sortVal);
+ onSort(sortVal);
setSort(sortVal);
}}
- select={select('select', ['', 'checkbox', 'radio', 'switch'], 'checkbox')}
sort={sort}
sortOptions={[
{ label: 'First Name', value: 'first' },
{ label: 'Last Name', value: 'last' },
{ label: 'Address', value: 'address' },
]}
- striped={boolean('striped', false)}
- flush={boolean('flush')}
+ {...args}
>
{(item) =>
- {
- action('onFilter')(val);
+ onFilter(val);
setFilter(val);
}}
+ {...args}
>
{(item) =>
- {
- action('onSort')(sortVal);
+ onSort(sortVal);
setSort(sortVal);
}}
sort={sort}
@@ -154,10 +169,15 @@ export const WithSort = () => {
{ label: 'Last Name', value: 'last' },
{ label: 'Address', value: 'address' },
]}
- striped={boolean('striped', false)}
- flush={boolean('flush')}
+ {...args}
>
{(item) =>
-
- )}
-
-
- - {item.first} {item.last} -
-{item.address}
-
- {currency.format(item.fee)}
-
-
-
- {currency.format(item.fee)}
-
-
-
-
- )}
-
-
- - {item.first} {item.last} -
-{item.address}
-
-
- )}
-
-
- - {item.first} {item.last} -
-{item.address}
-
-
- )}
-
-
- - {item.first} {item.last} -
-{item.address}
-
-
- item.id % 2}
+ {...args}
+ >
+ {(item) => (
+
- {item.first} {item.last} -
-{item.address}
+export const WithEverything = { + args: { + className: '', + filterPlaceholder: SortableList.defaultProps.filterPlaceholder, + flush: SortableList.defaultProps.flush, + height: '70vh', + scrollPositionKey: 'sortableList-example', + striped: false, + onSelect: action('onSelect'), + select: 'checkbox', + sortByLabel: SortableList.defaultProps.sortByLabel, + }, + render: (args) => ( +
+
-
+
+ + {item.first} {item.last} +
+{item.address}
+
+ {currency.format(item.fee)}
+
+
+
+ {currency.format(item.fee)}
+
+
- {currency.format(item.fee)}
-
+ )}
+
+ ),
+};
+export const WithExpandableRow = {
+ render: () => (
+
+ {(item) => (
+
-);
-export const WithCustomHeader = () => (
- Hey it's me, your custom header}
- >
- {(item) => (
-
+
-
+
+ {item.first} {item.last} +
+{item.address}
+
- {currency.format(item.fee)}
-
+ )}
+
+ ),
+};
+export const WithSelection = {
+ args: {
+ onSelect: action('onSelect'),
+ },
+ render: (args) => (
+
+ {(item) => (
+
- )}
-
+
-
+
+ {item.first} {item.last} +
+{item.address}
+
-
-
+ {(item) => (
+
+export const LiveExample = (args) => (
+
@@ -46,3 +45,14 @@ export const LiveExample = () => (
);
+LiveExample.args = {
+ size: undefined,
+};
+LiveExample.argTypes = {
+ size: {
+ control: {
+ type: 'select',
+ options: ['', 'sm', 'lg'],
+ },
+ },
+};
diff --git a/src/components/Pagination/Paginator.stories.js b/src/components/Pagination/Paginator.stories.js
index d66e430ff..9fc5f1bbc 100644
--- a/src/components/Pagination/Paginator.stories.js
+++ b/src/components/Pagination/Paginator.stories.js
@@ -1,5 +1,4 @@
import { action } from '@storybook/addon-actions';
-import { number, select, text } from '@storybook/addon-knobs';
import React from 'react';
import Paginator from './Paginator';
@@ -11,13 +10,20 @@ export default {
},
};
-export const PaginatorExample = () => (
- {
- setOpen(!open);
- action('toggle')(e);
- }}
- placement={select('placement', ['top', 'bottom', 'left', 'right'], 'bottom')}
- >
- Title of the Popover
-
- You can do many things
-
-
-
- );
+ return (
+ <>
+ {
+ setOpen(!open);
+ toggle(e);
+ }}
+ {...args}
+ >
+ Title of the Popover
+
+ You can do many things
+
+
+
+ );
+ },
};
-export const CustomizedBody = () => {
- const [open, setOpen] = useState(false);
+export const CustomizedBody = {
+ args: {
+ trigger: 'click',
+ placement: 'bottom',
+ toggle: action('toggle'),
+ },
+ render: function Render({ toggle, ...args }) {
+ const [open, setOpen] = useState(false);
+
+ return (
+
- {item.first} {item.last} -
-{item.address}
+ )} + + ), +}; +export const WithSort = { + render: () => ( +
+
-
+
+ {item.first} {item.last} +
+{item.address}
+
- {currency.format(item.fee)}
-
+ )}
+
+ ),
+};
+export const WithFiltering = {
+ render: () => (
+
+ {(item) => (
+
-);
-export const Areas = () => (
-
- {() => Item area }
-
-);
-export const WithOptionalExpand = () => (
- (item.id % 2 === 0 ? ExpandoTwo() : undefined)}
- onSelect={action('onSelect')}
- select={select('select', ['checkbox', 'radio', 'switch'], 'checkbox')}
- >
- {(item) => (item.id % 2 === 0 ? 'Expand Me' : "I can't be expanded...")}
-
-);
-export const WithControlledSelection = () => {
- const [selection, setSelection] = useState(data.slice(1, 5));
- return (
- <>
-
- {(item) => (
-
+ )}
+
+ ),
+};
+export const Areas = {
+ args: {
+ height: '70vh',
+ onSelect: action('onSelect'),
+ select: 'checkbox',
+ },
+ render: (args) => (
+
+ {() => Item area }
+
+ ),
+};
+export const WithOptionalExpand = {
+ args: {
+ select: 'checkbox',
+ onSelect: action('onSelect'),
+ },
+ render: (args) => (
+ (item.id % 2 === 0 ? ExpandoTwo() : undefined)}
+ {...args}
+ >
+ {(item) => (item.id % 2 === 0 ? 'Expand Me' : "I can't be expanded...")}
+
+ ),
+};
+export const WithControlledSelection = {
+ render: function Render() {
+ const [selection, setSelection] = useState(data.slice(1, 5));
+ return (
+ <>
+
+ {(item) => (
+
-
- {}}>Modal title
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
- labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
- laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
- voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
- non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
-
-
-);
+export const LiveExample = {
+ args: {
+ isOpen: true,
+ backdrop: true,
+ fade: false,
+ fullscreen: null,
+ size: null,
+ },
+ render: (args) => (
+
+ {}}>Modal title
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+ voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+ cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+
+
+
+
+
+
+ ),
+};
-export const Autofocus = () => (
-
- {}}>Modal title
-
- This input should have focus:
-
-
-
-
-
-
-
-
-);
+export const Autofocus = {
+ args: {
+ isOpen: true,
+ backdrop: true,
+ size: null,
+ },
+ render: (args) => (
+
+ {}}>Modal title
+
+ This input should have focus:
+
+
+
+
+
+
+
+
+ ),
+};
diff --git a/src/components/MultiSelectCombobox/MultiSelectCombobox.stories.tsx b/src/components/MultiSelectCombobox/MultiSelectCombobox.stories.tsx
index e2f32dc75..1c8e620a3 100644
--- a/src/components/MultiSelectCombobox/MultiSelectCombobox.stories.tsx
+++ b/src/components/MultiSelectCombobox/MultiSelectCombobox.stories.tsx
@@ -1,6 +1,5 @@
import { action } from '@storybook/addon-actions';
-import { boolean, text } from '@storybook/addon-knobs';
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { states } from '../../tooling/comboboxData';
import DropdownItem from '../Dropdown/DropdownItem';
@@ -14,15 +13,16 @@ import ComboboxSelections from './ComboboxSelections';
import FilteredComboboxItems from './FilteredComboboxItems';
import MultiSelectCombobox from './MultiSelectCombobox';
-type ComboboxStory = ComponentStory;
-
-export default {
+const meta: Meta = {
title: ' Multi-Select Combobox',
component: MultiSelectCombobox,
parameters: {
sourceLink: 'MultiSelectCombobox/MultiSelectCombobox.tsx',
},
-} as ComponentMeta;
+};
+export default meta;
+
+type Story = StoryObj;
const options = [
{ label: 'Foo', value: 'foo', id: 1 },
@@ -37,91 +37,134 @@ const selections = [
{ label: 'Lemur', value: 'lemur', id: 200 },
];
-export const UncontrolledMode: ComboboxStory = () => (
- {
- action('onCreateOption')();
- return { label: newOptionLabel, value: newOptionLabel.toLowerCase() };
- }}
- closeOnSelect={boolean('closeOnSelect', true)}
- />
-);
+export const UncontrolledMode: Story = {
+ args: {
+ onChange: action('onChange'),
+ filterOptions: true,
+ allowCreation: false,
+ closeOnSelect: true,
+ },
+ render: (args) => (
+ {
+ action('onCreateOption')();
+ return { label: newOptionLabel, value: newOptionLabel.toLowerCase() };
+ }}
+ {...args}
+ />
+ ),
+};
-export const LongOptionLabels: ComboboxStory = () => (
-
-
- {selections.map((selection) => (
-
- {selection.label}
-
- ))}
-
-
- {options.map((option) => (
-
- {option.label}
-
- ))}
-
-
-);
+export const ControlledModeSimple: Story = {
+ args: {
+ isOpen: false,
+ onToggle: action('onToggle'),
+ },
+ render: (args) => (
+
+
+ {selections.map((selection) => (
+
+ {selection.label}
+
+ ))}
+
+
+ {options.map((option) => (
+
+ {option.label}
+
+ ))}
+
+
+ ),
+};
-export const ControlledModeWithFilter: ComboboxStory = () => (
+// * Can't convert to CSF3 (https://storybook.js.org/docs/api/csf) because of the
+// composite nature of this story. Would need to refactor subcomponents into
+// separate stories (https://storybook.js.org/docs/writing-stories/stories-for-multiple-components)
+const controlledModeWithFilterArgs = {
+ isOpen: false,
+ onToggle: action('onToggle'),
+ allowCreationMultiSelectCombobox: false,
+ onRemoveAll: action('onRemoveAll'),
+ onRemove: action('onRemoveClick (selection)'),
+ filterValue: '',
+ onFilterChange: action('onFilterChange'),
+ allowCreationFilteredComboboxItems: true,
+ onCreateClick: action('onCreateClick'),
+ onClick: action('onClick (item)'),
+};
+export const ControlledModeWithFilter = ({
+ isOpen,
+ onToggle,
+ allowCreationMultiSelectCombobox,
+ onRemoveAll,
+ onRemove,
+ filterValue,
+ onFilterChange,
+ allowCreationFilteredComboboxItems,
+ onCreateClick,
+ onClick,
+}: typeof controlledModeWithFilterArgs) => (
-
+
{selections.map((selection) => (
-
+
{selection.label}
))}
{options.map((option) => (
-
+
{option.label}
))}
);
+ControlledModeWithFilter.args = controlledModeWithFilterArgs;
const MyCustomItem: ItemComponent = ({ children, onClick }: ComboboxItemProps) => (
@@ -130,10 +173,12 @@ const MyCustomItem: ItemComponent = ({ children, onClick }: ComboboxItemProps) =
);
-export const CustomItemRendering: ComboboxStory = () => (
-
+
);
};
+WithChildren.args = {
+ deleted: false,
+ edited: false,
+ editing: false,
+ from: 'Aaron Panchal',
+ text: 'Everybody wants to rule the world.',
+ onCancel: action('onCancel'),
+ onChange: action('onChange'),
+ onDelete: action('onDelete'),
+ onEdit: action('onEdit'),
+ onSave: action('onSave'),
+ onUndelete: action('onUndelete'),
+ rows: Note.defaultProps.rows,
+ saving: undefined,
+};
-export const EditableNoteExample = () => {
- const withNote = boolean('with note', true);
+export const EditableNoteExample = ({ withNote, ...args }) => {
const note = withNote ? noteToEdit : { text: '' };
- return (
-
+
Add an attachment:
-
);
};
+EditableNoteWithChildren.args = {
+ withNote: true,
+ saving: false,
+ onCancel: action('onCancel'),
+ onChange: action('onChange'),
+ onSave: action('onSave'),
+};
const mentionableUsers = [
{
@@ -136,34 +141,37 @@ const mentionableUsers = [
},
];
-export const NoteWithMentions = () => {
+export const NoteWithMentions = ({ deleted, edited, editing, from, text, title, ...args }) => {
const noteWithMentions = {
date: new Date(),
- deleted: boolean('deleted', false),
- edited: boolean('edited', false),
- editing: boolean('editing', false),
- from: text('from', 'Tom Brady'),
- text: text('text', 'Hi @Satoshi.Nakamoto Who are you??? I lost all my crypto.'),
- title: text('title', ''),
+ deleted,
+ edited,
+ editing,
+ from,
+ text,
+ title,
};
- return (
-
{notes.map((note) => (
-
);
};
+WithChildren.args = {
+ deleted: false,
+ edited: false,
+ editing: false,
+ saving: false,
+ onCancel: action('onCancel'),
+ onChange: action('onChange'),
+ onDelete: action('onDelete'),
+ onEdit: action('onEdit'),
+ onSave: action('onSave'),
+ onUndelete: action('onUndelete'),
+};
diff --git a/src/components/Offcanvas/Offcanvas.stories.js b/src/components/Offcanvas/Offcanvas.stories.js
index 371e82079..e1135a935 100644
--- a/src/components/Offcanvas/Offcanvas.stories.js
+++ b/src/components/Offcanvas/Offcanvas.stories.js
@@ -1,4 +1,3 @@
-import { boolean, select } from '@storybook/addon-knobs';
import React, { useState } from 'react';
import { Offcanvas, OffcanvasBody, OffcanvasHeader, Button } from 'reactstrap';
@@ -11,7 +10,7 @@ export default {
},
};
-export const Example = () => {
+export const Example = (args) => {
const [open, setOpen] = useState();
const toggle = () => setOpen(!open);
@@ -25,14 +24,7 @@ export const Example = () => {
>
Open
-
+
Offcanvas
This is the Offcanvas body.
@@ -41,3 +33,17 @@ export const Example = () => {
);
};
+Example.args = {
+ backdrop: true,
+ fade: true,
+ scrollable: false,
+ direction: 'start',
+};
+Example.argTypes = {
+ direction: {
+ control: {
+ type: 'select',
+ options: ['top', 'start', 'end', 'bottom'],
+ },
+ },
+};
diff --git a/src/components/Pagination/Pagination.stories.js b/src/components/Pagination/Pagination.stories.js
index 4b8abfe33..739e8aa05 100644
--- a/src/components/Pagination/Pagination.stories.js
+++ b/src/components/Pagination/Pagination.stories.js
@@ -1,4 +1,3 @@
-import { select } from '@storybook/addon-knobs';
import React from 'react';
import Pagination from './Pagination';
import PaginationItem from './PaginationItem';
@@ -12,8 +11,8 @@ export default {
},
};
-export const LiveExample = () => (
-
+
-
+
+ + {item.first} {item.last} +
+{item.address}
+
+ {currency.format(item.fee)}
+
+
+
+ {currency.format(item.fee)}
+
+
- {currency.format(item.fee)}
-
+ )}
+
+ ),
+};
+export const WithCustomHeader = {
+ args: {
+ onSelect: action('onSelect'),
+ },
+ render: (args) => (
+ Hey it's me, your custom header}
+ {...args}
+ >
+ {(item) => (
+
- )}
-
+
-
+
+ + {item.first} {item.last} +
+{item.address}
+
+ {currency.format(item.fee)}
+
+
+
+ {currency.format(item.fee)}
+
+
- {item.first} {item.last} -
- )} -+ {item.first} {item.last} +
+ )} +Current selection:
-
- {JSON.stringify(
- selection.map((item) => `${item.first} ${item.last}`),
- null,
- ' '
- )}
-
-
-
- );
+ Current selection:
+
+ {JSON.stringify(
+ selection.map((item) => `${item.first} ${item.last}`),
+ null,
+ ' '
+ )}
+
+
+
+ );
+ },
};
diff --git a/src/components/Modal/Modal.stories.js b/src/components/Modal/Modal.stories.js
index 9a4c17fd2..589e1d022 100644
--- a/src/components/Modal/Modal.stories.js
+++ b/src/components/Modal/Modal.stories.js
@@ -1,4 +1,3 @@
-import { boolean, select } from '@storybook/addon-knobs';
import React from 'react';
import Button from '../Button/Button';
import ButtonToolbar from '../Button/ButtonToolbar';
@@ -8,55 +7,75 @@ import ModalBody from './ModalBody';
import ModalFooter from './ModalFooter';
import ModalHeader from './ModalHeader';
-export default {
+const meta = {
title: 'Modal',
component: Modal,
parameters: {
sourceLink: 'Modal/Modal.js',
},
+ argTypes: {
+ fullscreen: {
+ control: {
+ type: 'select',
+ options: [null, true, 'sm', 'md', 'lg', 'xl', 'xxl'],
+ },
+ },
+ size: {
+ control: {
+ type: 'radio',
+ options: [null, 'sm', 'lg', 'xl'],
+ },
+ },
+ },
};
+export default meta;
-export const LiveExample = () => (
-
-
-
- );
+export const Tabs = ({ activeTab, onClick, fill, justified }) => (
+
+
+
+);
+Tabs.args = {
+ activeTab: 1,
+ fill: undefined,
+ justified: undefined,
+ onClick: action('onClick'),
};
-export const Pills = () => {
- const activeTab = number('activeTab', 1);
- return (
-
-
-
- );
+export const Pills = ({ activeTab, onClick, fill, justified, vertical }) => (
+
+
+
+);
+Pills.args = {
+ activeTab: 1,
+ fill: undefined,
+ justified: undefined,
+ vertical: false,
+ onClick: action('onClick'),
};
-export const Default = () => {
- const activeTab = number('activeTab', 1);
- return (
-
-
-
- );
+export const Default = ({ activeTab, onClick, fill, justified, vertical }) => (
+
+
+
+);
+Default.args = {
+ activeTab: 1,
+ vertical: false,
+ fill: undefined,
+ justified: undefined,
+ onClick: action('onClick'),
};
diff --git a/src/components/Nav/Navbar.stories.js b/src/components/Nav/Navbar.stories.js
index c2ef4ef85..d2df9e1f5 100644
--- a/src/components/Nav/Navbar.stories.js
+++ b/src/components/Nav/Navbar.stories.js
@@ -1,4 +1,3 @@
-import { boolean, select } from '@storybook/addon-knobs';
import React, { useState } from 'react';
import { bgColors } from '../../tooling/colors';
import Collapse from '../Collapse/Collapse';
@@ -21,19 +20,12 @@ export default {
},
};
-export const LiveExample = () => {
+export const LiveExample = (args) => {
const [isOpen, setIsOpen] = useState(false);
- const fixed = select('fixed', ['', 'top', 'bottom'], undefined);
return (
-
+
react-gears
setIsOpen(!isOpen)} />
@@ -44,7 +36,7 @@ export const LiveExample = () => {
GitHub
-
+
Options
@@ -61,3 +53,23 @@ export const LiveExample = () => {
);
};
+LiveExample.args = {
+ fixed: undefined,
+ light: false,
+ dark: true,
+ color: 'primary',
+};
+LiveExample.argTypes = {
+ fixed: {
+ control: {
+ type: 'select',
+ options: ['', 'top', 'bottom'],
+ },
+ },
+ color: {
+ control: {
+ type: 'select',
+ options: bgColors,
+ },
+ },
+};
diff --git a/src/components/Note/Note.stories.js b/src/components/Note/Note.stories.js
index a3bd1af98..d0d570a8f 100644
--- a/src/components/Note/Note.stories.js
+++ b/src/components/Note/Note.stories.js
@@ -1,5 +1,4 @@
import { action } from '@storybook/addon-actions';
-import { boolean, number, text } from '@storybook/addon-knobs';
import React, { useState } from 'react';
import EditableNote from './EditableNote';
import EditableNoteMentions from './EditableNoteMentions';
@@ -20,98 +19,104 @@ export default {
},
};
-export const LiveExample = () => {
+export const LiveExample = ({ deleted, edited, editing, from, text, title, ...args }) => {
const note = {
date: new Date(),
- deleted: boolean('deleted', false),
- edited: boolean('edited', false),
- editing: boolean('editing', false),
- from: text('from', 'Gary Thomas'),
- text: text('text', 'Goodbye Cruel World'),
- title: text('title', ''),
+ deleted,
+ edited,
+ editing,
+ from,
+ text,
+ title,
};
- return (
-
-
-);
+export const Words = {
+ render: () => (
+
+
+ ),
+};
-export const Widths = () => (
-
- 100:
-);
+export const Widths = {
+ render: () => (
+ Min width:
- 100:
+ 100:
+ ),
+};
-export const Sizes = () => (
- Min width:
+ 100:
- xs:
-
-);
+export const Sizes = {
+ args: {
+ type: 'glow',
+ },
+ render: (args) => (
+
+ xs:
+
+ ),
+};
-export const Colors = () =>
- colors.map((color) => (
- <>
- {color}:
- - Click HERE to launch it! -
--
-
+ Click HERE to launch it! +
+-
+
+ {
+ setOpen(!open);
+ toggle(e);
+ }}
+ {...args}
+ >
+
+
+
+
+ );
+ },
+};
- return (
+export const UncontrolledExample = {
+ render: () => (
+ I can be placed in context to provide some contextual{' '} + help! +
+
+
+
+
+
+ *the button does not do anything
+ You can do whatever you want in the body
+
- {
- setOpen(!open);
- action('toggle')(e);
- }}
- placement={select('placement', ['top', 'bottom', 'left', 'right'], 'bottom')}
- >
+
+
+ Popover Title
-
-
+
- );
+ ),
};
-
-export const UncontrolledExample = () => (
- - I can be placed in context to provide some contextual{' '} - help! -
-
-
+ Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem
+ lacinia quam venenatis vestibulum.
-
-
- *the button does not do anything
- You can do whatever you want in the body
-
-
-
- Popover Title
-
- Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
- quam venenatis vestibulum.
-
-
-
-);
diff --git a/src/components/Progress/Progress.stories.js b/src/components/Progress/Progress.stories.js
index dc9d5cf0b..a3ca37e99 100644
--- a/src/components/Progress/Progress.stories.js
+++ b/src/components/Progress/Progress.stories.js
@@ -1,4 +1,3 @@
-import { boolean, number, select } from '@storybook/addon-knobs';
import React from 'react';
import Progress from './Progress';
@@ -10,15 +9,25 @@ export default {
},
};
-export const LiveExample = () => (
-