DocSpace-client/web/ASC.Web.Components/example/stories/icons/index.stories.js

55 lines
1.4 KiB
JavaScript
Raw Normal View History

2019-06-05 08:54:09 +00:00
import React from 'react';
import { storiesOf } from '@storybook/react';
import withReadme from 'storybook-readme/with-readme';
import styled from '@emotion/styled';
import { withKnobs, select, color } from '@storybook/addon-knobs/react';
import Readme from './README.md';
import {Icons} from 'asc-web-components';
2019-06-05 08:54:09 +00:00
const IconList = styled.div`
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
`;
const IconItem = styled.div`
padding: 16px;
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
`;
const IconContainer = styled.div`
margin: 16px 0;
`;
const iconNames = Object.keys(Icons);
2019-06-05 08:54:09 +00:00
storiesOf('Components|Icons', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('all icons', () => (
2019-06-05 08:54:09 +00:00
<IconList>
{Object.values(Icons).map((Icon, index) => {
const sizeValue = select('size', ['small', 'medium', 'big', 'scale'], 'big');
const containerWidth =
sizeValue === 'scale'
? {
width: `${select('container width', ['100', '200', '300', '400'], '100')}px`,
}
: {};
return (
<IconItem key={index}>
<IconContainer style={containerWidth}>
<Icon
size={sizeValue}
color={color('color', "dimgray")}
/>
</IconContainer>
<span>{iconNames[index]}</span>
</IconItem>
);
})}
2019-06-05 08:54:09 +00:00
</IconList>
));