web: сomponents: Fixed Text and SelectedItem story
This commit is contained in:
parent
760e211cf5
commit
f2de070f3e
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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)}
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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)}
|
||||
|
Loading…
Reference in New Issue
Block a user