);
+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/Address/StateInput.stories.js b/src/components/Address/StateInput.stories.js
index 98dffd3b7..77cdcf42e 100644
--- a/src/components/Address/StateInput.stories.js
+++ b/src/components/Address/StateInput.stories.js
@@ -10,4 +10,4 @@ export default {
},
};
-export const State = () => ;
+export const State = (args) => ;
diff --git a/src/components/Alert/Alert.stories.js b/src/components/Alert/Alert.stories.js
index ac4be146e..2287b83bd 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,31 +11,34 @@ export default {
},
};
-export const LiveExample = () => (
-
- {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.`
- )}
-
-);
+export const LiveExample = ({ content, ...args }) => {content};
+LiveExample.args = {
+ icon: false,
+ dismissible: false,
+ color: 'info',
+ onToggle: action('onToggle'),
+ 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' },
+ },
+};
-export const Icons = () => (
+export const Icons = (args) => (
- You can also add an icon!
-
+
+ You can also add an icon!
+
+
You can specify an alert color. This one has color="success"
-
+
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
@@ -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.
-
+ Heads up! This alert needs your attention, but it's not super important.
You can use the alert-heading class on a heading to make it stand out!
diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
index 2d8291d7f..ca2a427d8 100644
--- a/src/components/Badge/Badge.stories.tsx
+++ b/src/components/Badge/Badge.stories.tsx
@@ -10,20 +10,22 @@ export default {
},
};
-export const Default = () => (
+export const Default = (args: any) => (
- {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}
);
+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 (
-
-
-
- {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}}
-
-
+
+
+ Default
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+ labore et dolore magna aliqua.
+
+
- return (
-
-
+ {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.
-
-
- ))}
-
Wrap a pair of <Input> and <Label> components in{' '}
@@ -92,7 +91,7 @@ export const FloatingLabels = () => (
Also note that the <Input> must come first so we can utilize a sibling
selector (e.g., ~).
When defaultValue is set, component is 'uncontrolled' and maintains its own state.
@@ -44,7 +54,9 @@ export const DefaultValueUncontrolled = () => (
);
-export const ValueControlled = () => (
+// declaring any arguments is required to enable displaying code in storybook docs
+// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+export const ValueControlled = (args) => (
When value is set, component is 'controlled' and does not maintain its own state.
diff --git a/src/components/InputGroup/InputGroup.stories.js b/src/components/InputGroup/InputGroup.stories.js
index c9f6e851b..195c0f6ec 100644
--- a/src/components/InputGroup/InputGroup.stories.js
+++ b/src/components/InputGroup/InputGroup.stories.js
@@ -12,9 +12,9 @@ export default {
},
};
-export const WithProps = () => (
+export const WithProps = (args) => (