mirror of
https://github.com/elyby/accounts-frontend.git
synced 2025-05-31 14:11:58 +05:30
Configure storybook
This commit is contained in:
@ -96,3 +96,8 @@
|
||||
background: #95a5a6;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
53
packages/app/components/ui/form/Button.story.tsx
Normal file
53
packages/app/components/ui/form/Button.story.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import Button from './Button';
|
||||
|
||||
storiesOf('ui/form', module).add('Button', () => (
|
||||
<>
|
||||
<div>
|
||||
<Button label="Green Button" />{' '}
|
||||
<Button label="Blue Button" color="blue" />{' '}
|
||||
<Button label="DarkBlue Button" color="darkBlue" />{' '}
|
||||
<Button label="Violet Button" color="violet" />{' '}
|
||||
<Button label="LightViolet Button" color="lightViolet" />{' '}
|
||||
<Button label="Orange Button" color="orange" />{' '}
|
||||
<Button label="Red Button" color="red" />{' '}
|
||||
<Button label="Black Button" color="black" />{' '}
|
||||
<Button label="White Button" color="white" />
|
||||
</div>
|
||||
<div>
|
||||
<h2>Disabled buttons</h2>
|
||||
<Button disabled label="Green Button" />{' '}
|
||||
<Button disabled label="Blue Button" color="blue" />{' '}
|
||||
<Button disabled label="DarkBlue Button" color="darkBlue" />{' '}
|
||||
<Button disabled label="Violet Button" color="violet" />{' '}
|
||||
<Button disabled label="LightViolet Button" color="lightViolet" />{' '}
|
||||
<Button disabled label="Orange Button" color="orange" />{' '}
|
||||
<Button disabled label="Red Button" color="red" />{' '}
|
||||
<Button disabled label="Black Button" color="black" />{' '}
|
||||
<Button disabled label="White Button" color="white" />
|
||||
</div>
|
||||
<div>
|
||||
<h2>Button sizes</h2>
|
||||
<Button label="Default button" /> <Button label="Small button" small />{' '}
|
||||
<br />
|
||||
<br />
|
||||
<Button label="Block button" block />
|
||||
<br />
|
||||
<Button label="Small block button" small block />
|
||||
</div>
|
||||
<div>
|
||||
<h2>Loading button</h2>
|
||||
<Button loading label="Green Button" />{' '}
|
||||
<Button loading label="Blue Button" color="blue" />{' '}
|
||||
<Button loading label="DarkBlue Button" color="darkBlue" />{' '}
|
||||
<Button loading label="Violet Button" color="violet" />{' '}
|
||||
<Button loading label="LightViolet Button" color="lightViolet" />{' '}
|
||||
<Button loading label="Orange Button" color="orange" />{' '}
|
||||
<Button loading label="Red Button" color="red" />{' '}
|
||||
<Button loading label="Black Button" color="black" />{' '}
|
||||
<Button loading label="White Button" color="white" />
|
||||
</div>
|
||||
</>
|
||||
));
|
@ -1,10 +1,10 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import buttons from 'app/components/ui/buttons.scss';
|
||||
import { COLOR_GREEN } from 'app/components/ui';
|
||||
import { MessageDescriptor } from 'react-intl';
|
||||
import { Color } from 'app/components/ui';
|
||||
|
||||
import buttons from '../buttons.scss';
|
||||
import FormComponent from './FormComponent';
|
||||
|
||||
export default class Button extends FormComponent<
|
||||
|
Reference in New Issue
Block a user