IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: сomponents: Fixed Text and SelectedItem story

Browse Source
This commit is contained in:
Alexey Kostenko 2019-08-08 14:40:33 +03:00
parent 760e211cf5
commit f2de070f3e
6 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/ASC.Web.Storybook/stories/selected-item/all/index.stories.js
View File

@ -4,6 +4,10 @@ import { SelectedItem } from 'asc-web-components';
import Section from '../../../.storybook/decorators/section';
import styled from '@emotion/styled';
function onClose(e) {
console.log("onClose", e);
}
const StyledContainer = styled.div`
padding:0;
display: grid;
@ -32,18 +36,22 @@ storiesOf('Components|SelectedItem', module)
<SelectedItem
text='Selected item'
isInline={true}
onClose={onClose}
/>
<SelectedItem
text='Selected item'
isInline={true}
onClose={onClose}
/>
<SelectedItem
text='Selected item'
isInline={true}
onClose={onClose}
/>
<SelectedItem
text='Selected item'
isInline={true}
onClose={onClose}
/>
</StyledContainerInline>
@ -51,18 +59,22 @@ storiesOf('Components|SelectedItem', module)
<SelectedItem
text='Selected item'
isInline={false}
onClose={onClose}
/>
<SelectedItem
text='Selected item'
isInline={false}
onClose={onClose}
/>
<SelectedItem
text='Selected item'
isInline={false}
onClose={onClose}
/>
<SelectedItem
text='Selected item'
isInline={false}
onClose={onClose}
/>
</StyledContainer>
</Section>

2
web/ASC.Web.Storybook/stories/selected-item/base/index.stories.js
View File

@ -20,7 +20,7 @@ storiesOf('Components|SelectedItem', module)
<SelectedItem
text={text('text', 'Selected item')}
isInline={boolean('isInline', true)}
onClick={onClose}
onClose={onClose}
isDisabled={boolean('isDisabled', false)}
/>
</Section>

4
web/ASC.Web.Storybook/stories/text/body/README.md
View File

@ -19,7 +19,7 @@ Component that displays plain text
```
##### If you need to override styles
##### If you need to override styles add forwardedAs instead of as
```js
@ -29,7 +29,7 @@ Component that displays plain text
}
`;
<StyledText forwardedAs='p' title='Some title'>
<StyledText forwardedAs='span' title='Some title'>
Some text
</StyledText>

6
web/ASC.Web.Storybook/stories/text/body/index.stories.js
View File

@ -1,11 +1,13 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { text, boolean, withKnobs, color, number } from '@storybook/addon-knobs/react';
import { text, boolean, withKnobs, color, number, select } from '@storybook/addon-knobs/react';
import { Text } from 'asc-web-components';
import Section from '../../../.storybook/decorators/section';
import withReadme from 'storybook-readme/with-readme';
import Readme from './README.md';
const textTags = ['p', 'span', 'div'];
storiesOf('Components|Text', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
@ -15,7 +17,7 @@ storiesOf('Components|Text', module)
<div style={{ width: "100%" }}>
<Text.Body
title={text('title', '')}
as={text('as', 'p')}
as={select('as', textTags , 'p')}
fontSize={number('fontSize', 13)}
truncate={boolean('truncate', false)}
isDisabled={boolean('isDisabled', false)}

6
web/ASC.Web.Storybook/stories/text/headline/README.md
View File

@ -18,17 +18,17 @@ A component that renders headline
</Text.Headline>
```
##### If you need to override styles
##### If you need to override styles add forwardedAs instead of as
```js
const StyledText = styled(Text.Headline)`
const StyledHeadline = styled(Text.Headline)`
&:hover{
border-bottom: 1px dotted;
}
`;
<StyledHeadline forwardedAs='h1' title='Some title'>
<StyledHeadline forwardedAs='h4' title='Some title'>
Some text
</StyledHeadline>

3
web/ASC.Web.Storybook/stories/text/headline/index.stories.js
View File

@ -7,6 +7,7 @@ import withReadme from 'storybook-readme/with-readme';
import Readme from './README.md';
const size = ['big', 'medium', 'small'];
const textTags = ['h1', 'h2', 'h3', 'h4', 'h5'];
storiesOf('Components|Text', module)
.addDecorator(withKnobs)
@ -17,7 +18,7 @@ storiesOf('Components|Text', module)
<div style={{ width: "100%" }}>
<Text.Headline
color={color('color', '#333333')}
as={text ('as', 'h2')}
as={select ('as', textTags, 'h2')}
title={text('title', '')}
truncate={boolean('truncate', false)}
isDisabled={boolean('isDisabled', false)}