Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Add story for buttons with icons

Browse Source 
[MAILPOET-2771]
This commit is contained in:
Ján Mikláš
2020-05-04 13:13:35 +02:00
committed by Veljko V
parent 1a6b95b4b9
commit df2e0337b5
2 changed files with 261 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
assets/js/src/common/button/_stories/assets/icon.tsx Normal file
View File

@@ -0,0 +1,7 @@
import React from 'react';
export default (
<svg viewBox="4 4 16 16">
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg>
);

254
assets/js/src/common/button/_stories/button_icons.tsx Normal file
View File

@@ -0,0 +1,254 @@
import React from 'react';
import { action } from '@storybook/addon-actions';
import Button from '../button';
import Heading from '../../typography/heading/heading';
import icon from './assets/icon';
export default {
title: 'Buttons',
component: Button,
};
export const WithIcons = () => (
<>
<Heading level={3}>Small buttons</Heading>
<p>
<Button
onClick={action('only icon small')}
size="small"
variant="light"
iconStart={icon}
/>
<Button
onClick={action('icon start small')}
size="small"
iconStart={icon}
>
Icon start
</Button>
<Button
onClick={action('icon end small')}
size="small"
variant="dark"
iconEnd={icon}
>
Icon end
</Button>
<Button
onClick={action('both icons small')}
size="small"
variant="light"
iconStart={icon}
iconEnd={icon}
>
Both icons
</Button>
<Button
onClick={action('only icon link small')}
size="small"
variant="link"
iconStart={icon}
/>
<Button
onClick={action('icon start link small')}
size="small"
variant="link-dark"
iconStart={icon}
>
Link icon
</Button>
</p>
<br />
<Heading level={3}>Regular buttons</Heading>
<p>
<Button
onClick={action('only icon regular')}
variant="light"
iconStart={icon}
/>
<Button
onClick={action('icon start regular')}
iconStart={icon}
>
Icon start
</Button>
<Button
onClick={action('icon end regular')}
variant="dark"
iconEnd={icon}
>
Icon end
</Button>
<Button
onClick={action('both icons regular')}
variant="light"
iconStart={icon}
iconEnd={icon}
>
Both icons
</Button>
<Button
onClick={action('only icon link regular')}
variant="link"
iconStart={icon}
/>
<Button
onClick={action('icon start link regular')}
variant="link-dark"
iconStart={icon}
>
Link icon
</Button>
</p>
<br />
<Heading level={3}>Large buttons</Heading>
<p>
<Button
onClick={action('only icon large')}
size="large"
variant="light"
iconStart={icon}
/>
<Button
onClick={action('icon start large')}
size="large"
iconStart={icon}
>
Icon start
</Button>
<Button
onClick={action('icon end large')}
size="large"
variant="dark"
iconEnd={icon}
>
Icon end
</Button>
<Button
onClick={action('both icons large')}
size="large"
variant="light"
iconStart={icon}
iconEnd={icon}
>
Both icons
</Button>
<Button
onClick={action('only icon link large')}
size="large"
variant="link"
iconStart={icon}
/>
<Button
onClick={action('icon start link large')}
size="large"
variant="link-dark"
iconStart={icon}
>
Link icon
</Button>
</p>
<br />
<Heading level={3}>Loading buttons</Heading>
<p>
<Button
onClick={action('only icon loading')}
isLoading
variant="light"
iconStart={icon}
/>
<Button
onClick={action('icon start loading')}
isLoading
iconStart={icon}
>
Icon start
</Button>
<Button
onClick={action('icon end loading')}
isLoading
variant="dark"
iconEnd={icon}
>
Icon end
</Button>
<Button
onClick={action('both icons loading')}
isLoading
variant="light"
iconStart={icon}
iconEnd={icon}
>
Both icons
</Button>
<Button
onClick={action('only icon link loading')}
isLoading
variant="link"
iconStart={icon}
/>
<Button
onClick={action('icon start link loading')}
isLoading
variant="link-dark"
iconStart={icon}
>
Link icon
</Button>
</p>
<br />
<Heading level={3}>Full width buttons</Heading>
<p>
<Button
onClick={action('only icon full-width')}
isFullWidth
variant="light"
iconStart={icon}
/>
<Button
onClick={action('icon start full-width')}
isFullWidth
iconStart={icon}
>
Icon start
</Button>
<Button
onClick={action('icon end full-width')}
isFullWidth
variant="dark"
iconEnd={icon}
>
Icon end
</Button>
<Button
onClick={action('both icons full-width')}
isFullWidth
variant="light"
iconStart={icon}
iconEnd={icon}
>
Both icons
</Button>
<Button
onClick={action('only icon link full-width')}
isFullWidth
variant="link"
iconStart={icon}
/>
<Button
onClick={action('icon start link full-width')}
isFullWidth
variant="link-dark"
iconStart={icon}
>
Link icon
</Button>
</p>
<br />
</>
);