p5.js-web-editor/client/common/Button.stories.jsx

71 lines
1.6 KiB
React
Raw Normal View History

2020-01-19 17:04:44 +00:00
import React from 'react';
import { action } from '@storybook/addon-actions';
import { boolean, text } from '@storybook/addon-knobs';
2020-04-19 15:12:55 +00:00
import Button from './Button';
2020-05-26 20:17:24 +00:00
import { GithubIcon, DropdownArrowIcon, PlusIcon } from './icons';
2020-01-19 17:04:44 +00:00
export default {
2020-04-19 15:12:55 +00:00
title: 'Common/Button',
2020-01-19 17:04:44 +00:00
component: Button
};
export const AllFeatures = () => (
<Button
disabled={boolean('disabled', false)}
type="submit"
label={text('label', 'submit')}
>
{text('children', 'this is the button')}
</Button>
);
export const SubmitButton = () => (
<Button type="submit" label="submit">This is a submit button</Button>
);
2020-05-03 09:54:57 +00:00
export const DefaultTypeButton = () => <Button label="login" onClick={action('onClick')}>Log In</Button>;
2020-01-19 17:04:44 +00:00
export const DisabledButton = () => <Button disabled label="login" onClick={action('onClick')}>Log In</Button>;
2020-04-19 15:12:55 +00:00
export const AnchorButton = () => (
<Button href="http://p5js.org" label="submit">Actually an anchor</Button>
);
export const ReactRouterLink = () => (
<Button to="./somewhere" label="submit">Actually a Link</Button>
);
export const ButtonWithIconBefore = () => (
<Button
iconBefore={<GithubIcon aria-label="Github logo" />}
>
Create
2020-05-11 20:28:18 +00:00
</Button>
);
export const ButtonWithIconAfter = () => (
<Button
iconAfter={<GithubIcon aria-label="Github logo" />}
>
Create
2020-05-11 20:28:18 +00:00
</Button>
);
export const InlineButtonWithIconAfter = () => (
<Button
iconAfter={<DropdownArrowIcon />}
kind={Button.kinds.inline}
>
File name
2020-05-11 20:28:18 +00:00
</Button>
);
export const InlineIconOnlyButton = () => (
<Button
aria-label="Add to collection"
iconBefore={<PlusIcon />}
kind={Button.kinds.inline}
/>
);