2020-01-19 18:04:44 +01:00
|
|
|
import React from 'react';
|
|
|
|
import { action } from '@storybook/addon-actions';
|
|
|
|
import { boolean, text } from '@storybook/addon-knobs';
|
|
|
|
|
2020-04-19 17:12:55 +02:00
|
|
|
import Button from './Button';
|
2020-05-11 22:28:18 +02:00
|
|
|
import Icons from './Icons';
|
|
|
|
|
|
|
|
const { Github, DropdownArrow, Plus } = Icons;
|
2020-01-19 18:04:44 +01:00
|
|
|
|
|
|
|
export default {
|
2020-04-19 17:12:55 +02:00
|
|
|
title: 'Common/Button',
|
2020-01-19 18:04:44 +01: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 11:54:57 +02:00
|
|
|
export const DefaultTypeButton = () => <Button label="login" onClick={action('onClick')}>Log In</Button>;
|
2020-01-19 18:04:44 +01:00
|
|
|
|
|
|
|
export const DisabledButton = () => <Button disabled label="login" onClick={action('onClick')}>Log In</Button>;
|
2020-04-19 17:12:55 +02: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>
|
|
|
|
);
|
2020-04-26 11:31:45 +02:00
|
|
|
|
2020-04-26 15:32:50 +02:00
|
|
|
export const ButtonWithIconBefore = () => (
|
2020-05-11 22:28:18 +02:00
|
|
|
<Button>
|
|
|
|
<Github aria-label="Github logo" />
|
|
|
|
<span>Create</span>
|
|
|
|
</Button>
|
2020-04-26 15:32:50 +02:00
|
|
|
);
|
|
|
|
|
|
|
|
export const ButtonWithIconAfter = () => (
|
2020-05-11 22:28:18 +02:00
|
|
|
<Button>
|
|
|
|
<span>Create</span>
|
|
|
|
<Github aria-label="Github logo" />
|
|
|
|
</Button>
|
2020-04-26 11:31:45 +02:00
|
|
|
);
|
2020-04-27 10:12:34 +02:00
|
|
|
|
|
|
|
export const InlineButtonWithIconAfter = () => (
|
2020-05-11 22:28:18 +02:00
|
|
|
<Button kind={Button.kinds.inline}>
|
|
|
|
<span>File name</span>
|
|
|
|
<DropdownArrow />
|
|
|
|
</Button>
|
2020-04-27 10:12:34 +02:00
|
|
|
);
|
|
|
|
|
|
|
|
export const InlineIconOnlyButton = () => (
|
2020-05-11 22:28:18 +02:00
|
|
|
<Button kind={Button.kinds.inline} aria-label="Add to collection">
|
|
|
|
<Plus />
|
|
|
|
</Button>
|
2020-04-27 10:12:34 +02:00
|
|
|
);
|