Skip to content

Commit

Permalink
docs(button): update Button story and documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@tw15egan
tw15egan committed Jul 27, 2020
1 parent 9b1c4ad commit d72b85f
Showing 1 changed file with 121 additions and 108 deletions.
229 changes: 121 additions & 108 deletions packages/react/src/components/Button/Button-story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
*/

import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
import { settings } from 'carbon-components';
Expand Down Expand Up @@ -123,116 +122,130 @@ const CustomLink = ({ children, href, ...other }) => (
</a>
);

storiesOf('Button', module)
.addParameters({
export default {
title: 'Button',
decorators: [withKnobs],

parameters: {
component: Button,

subcomponents: {
ButtonSkeleton,
},
})
.addDecorator(withKnobs)
.add(
'Default',
() => {
const regularProps = props.regular();
return (
<div
style={{
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
}}>
<Button {...regularProps} className="some-class">
Button
</Button>
&nbsp;
<Button {...regularProps} href="#" className="some-class">
Link
</Button>
&nbsp;
<Button {...regularProps} as="p" href="#" className="some-class">
Element
</Button>
&nbsp;
<Button
{...regularProps}
as={CustomLink}
href="#"
className="some-class">
Custom component
</Button>
</div>
);
},
{
info: {
text: `
Buttons are used to initialize an action, either in the background or
foreground of an experience.
There are several kinds of buttons.
Primary buttons should be used for the principle call to action
on the page.
Secondary buttons should be used for secondary actions on each page.
Danger buttons should be used for a negative action (such as Delete) on the page.
Modify the behavior of the button by changing its event properties.
Field buttons may be use directly next to an input element, to visually align their heights.
Small buttons may be used when there is not enough space for a
regular sized button. This issue is most found in tables. Small button should have three words
or less.
When words are not enough, icons can be used in buttons to better communicate what the button does. Icons are
always paired with text.
`,
},
}
)
.add('Icon-only buttons', () => <Button {...props.iconOnly()} hasIconOnly />)
.add(
'Sets of Buttons',
() => {
const setProps = props.set();
return (
<div className={`${prefix}--btn-set`}>
<Button kind="secondary" {...setProps}>
Secondary button
</Button>
<Button kind="primary" {...setProps}>
Primary button
</Button>
</div>
);
},
};

export const _Default = () => {
const regularProps = props.regular();
return (
<div
style={{
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
}}>
<Button {...regularProps} className="some-class">
Button
</Button>
&nbsp;
<Button {...regularProps} href="#" className="some-class">
Link
</Button>
&nbsp;
<Button {...regularProps} as="p" href="#" className="some-class">
Element
</Button>
&nbsp;
<Button {...regularProps} as={CustomLink} href="#" className="some-class">
Custom component
</Button>
</div>
);
};

_Default.story = {
parameters: {
info: {
text: `
Buttons are used to initialize an action, either in the background or
foreground of an experience.
There are several kinds of buttons.
Primary buttons should be used for the principle call to action
on the page.
Secondary buttons should be used for secondary actions on each page.
Danger buttons should be used for a negative action (such as Delete) on the page.
Modify the behavior of the button by changing its event properties.
Field buttons may be use directly next to an input element, to visually align their heights.
Small buttons may be used when there is not enough space for a
regular sized button. This issue is most found in tables. Small button should have three words
or less.
When words are not enough, icons can be used in buttons to better communicate what the button does. Icons are
always paired with text.
`,
},
{
info: {
text: `
When an action required by the user has more than one option, always use a a negative action button (secondary) paired with a positive action button (primary) in that order. Negative action buttons will be on the left. Positive action buttons should be on the right. When these two types buttons are paired in the correct order, they will automatically space themselves apart.
`,
},
}
)
.add(
'skeleton',
() => (
<div>
<ButtonSkeleton />
&nbsp;
<ButtonSkeleton href="#" />
&nbsp;
<ButtonSkeleton size="small" />
</div>
),
{
info: {
text: `
Placeholder skeleton state to use when content is loading.
`,
},
}
},
};

export const IconOnlyButtons = () => (
<Button {...props.iconOnly()} hasIconOnly />
);

IconOnlyButtons.story = {
name: 'Icon-only buttons',
};

export const SetsOfButtons = () => {
const setProps = props.set();
return (
<div className={`${prefix}--btn-set`}>
<Button kind="secondary" {...setProps}>
Secondary button
</Button>
<Button kind="primary" {...setProps}>
Primary button
</Button>
</div>
);
};

SetsOfButtons.story = {
name: 'Sets of Buttons',

parameters: {
info: {
text: `
When an action required by the user has more than one option, always use a a negative action button (secondary) paired with a positive action button (primary) in that order. Negative action buttons will be on the left. Positive action buttons should be on the right. When these two types buttons are paired in the correct order, they will automatically space themselves apart.
`,
},
},
};

export const Skeleton = () => (
<div>
<ButtonSkeleton />
&nbsp;
<ButtonSkeleton href="#" />
&nbsp;
<ButtonSkeleton size="small" />
</div>
);

Skeleton.story = {
name: 'skeleton',

parameters: {
info: {
text: `
Placeholder skeleton state to use when content is loading.
`,
},
},
};

0 comments on commit d72b85f

Please sign in to comment.