web: Changed Text component
This commit is contained in:
Alexey Kostenko
parent
8261ae0d78
commit
2295b6d4ec
@ -1,43 +0,0 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { Text } from 'asc-web-components';
|
||||
import { Container, Row, Col } from 'reactstrap';
|
||||
|
||||
const rowStyle = { marginTop: 8 };
|
||||
|
||||
storiesOf('Components|Text', module)
|
||||
.addParameters({ options: { showAddonPanel: false }})
|
||||
.add('all', () => (
|
||||
<Container>
|
||||
<Row style={rowStyle}>
|
||||
<Text elementType="moduleName">Module name</Text>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Text elementType="mainTitle">Main title</Text>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Text elementType="h1">H1 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</Text>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Text elementType="h2">H2 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</Text>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Text elementType="h3">H3 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</Text>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Text elementType="p">PARAGRAPH - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</Text>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Text elementType="p">Default black text</Text>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Text elementType="p" styleType="grayBackground">Gray text on gray bg</Text>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Text elementType="p" styleType="metaInfo">Meta info text</Text>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Text elementType="p" isDisabled>Disabled</Text>
|
||||
</Row>
|
||||
</Container>
|
||||
));
|
||||
@ -6,16 +6,16 @@
|
||||
import { Text } from 'asc-web-components';
|
||||
```
|
||||
|
||||
#### Description
|
||||
### <Text.Headline>
|
||||
|
||||
Text used in titles and content
|
||||
Wraps the given text in the given HTML header size.
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
<Text elementType='h1' title='Some title'>
|
||||
<Text.Headline tag='h1' title='Some title'>
|
||||
Some text
|
||||
</Text>
|
||||
</Text.Headline>
|
||||
```
|
||||
|
||||
#### Properties
|
||||
@ -23,9 +23,58 @@ Text used in titles and content
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------------ | -------- | :------: | --------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `isDisabled` | `bool` | - | - | false | Marks text as disabled |
|
||||
| `elementType` | `select` | - |`h1`,`h2`,`h3`,`p`,`moduleName`,`mainTitle` | `p` |Sets the text type with its own font size and font weight|
|
||||
| `styleType` | `bool` | - | - | `default` | Style type |
|
||||
| `tag` | `oneOf` | - | `h1`,`h2`,`h3` | `h1` | Sets the text type with its own font size |
|
||||
| `title` | `bool` | - | - | - | Title |
|
||||
| `truncate` | `bool` | - | - | false | Disables word wrapping |
|
||||
| `isInline` | `bool` | - | - | false | Sets the 'display: inline-block' property |
|
||||
|
||||
### <Text.Body>
|
||||
|
||||
Wraps the given text in a <p> or <span> element, for normal content.
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
<Text.Body tag='p' title='Some title'>
|
||||
Some text
|
||||
</Text.Body>
|
||||
```
|
||||
|
||||
#### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------------ | -------- | :------: | --------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `isDisabled` | `bool` | - | - | false | Marks text as disabled |
|
||||
| `tag` | `oneOf` | - | `p`,`span` | `p` | Sets the text type with its own font size |
|
||||
| `title` | `bool` | - | - | - | Title |
|
||||
| `truncate` | `bool` | - | - | false | Disables word wrapping |
|
||||
| `isInline` | `bool` | - | - | false | Sets the 'display: inline-block' property |
|
||||
| `color` | `oneOf` | - | `black`, `gray`, `lightGray` | `black` | Sets the text color |
|
||||
| `isBold` | `bool` | - | - | false | Sets the font weight |
|
||||
| `isItalic` | `bool` | - | - | false | Sets the font style |
|
||||
| `backgroundColor` | `bool` | - | - | false | Sets background color |
|
||||
|
||||
|
||||
### <Text.MainHeadline>
|
||||
|
||||
Wraps the given text in the specified size of the main headline.
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
<Text.MainHeadline headlineName='moduleName' title='Some title'>
|
||||
Some text
|
||||
</Text.MainHeadline>
|
||||
```
|
||||
|
||||
#### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------------ | -------- | :------: | --------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `isDisabled` | `bool` | - | - | false | Marks text as disabled |
|
||||
| `headlineName` | `oneOf` | - |`moduleName`, `mainTitle`| `moduleName` | Sets the text type with its own font size |
|
||||
| `title` | `bool` | - | - | - | Title |
|
||||
| `truncate` | `bool` | - | - | false | Disables word wrapping |
|
||||
| `isInline` | `bool` | - | - | false | Sets the 'display: inline-block' property |
|
||||
|
||||
|
||||
|
||||
@ -1,30 +1,62 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { text, boolean, withKnobs, select, number } from '@storybook/addon-knobs/react';
|
||||
import { text, boolean, withKnobs, 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 elementType = ['h1','h2','h3','p', 'moduleName', 'mainTitle'];
|
||||
const styleType = ['default','grayBackground','metaInfo'];
|
||||
|
||||
const tagHeadline = ['h1','h2','h3'];
|
||||
const tagBody = ['p', 'span'];
|
||||
const color = ['black', 'gray', 'lightGray'];
|
||||
const headlineName = ['moduleName', 'mainTitle']
|
||||
|
||||
storiesOf('Components|Text', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add('text', () => {
|
||||
.add('headline', () => (
|
||||
|
||||
return (
|
||||
<Section>
|
||||
<Text
|
||||
elementType={select('elementType', elementType, 'p')}
|
||||
styleType={select('styleType', styleType, 'default')}
|
||||
<Text.Headline
|
||||
tag={select('tag', tagHeadline, 'h1')}
|
||||
title={text('title', '')}
|
||||
truncate={boolean('truncate', false)}
|
||||
isDisabled={boolean('isDisabled', false)}
|
||||
isInline={boolean('isInline', false)}
|
||||
>
|
||||
{text('Text', 'Sample text Headline')}
|
||||
</Text>
|
||||
</Text.Headline>
|
||||
</Section>
|
||||
)});
|
||||
))
|
||||
.add('body', () => (
|
||||
|
||||
<Section>
|
||||
<Text.Body
|
||||
title={text('title', '')}
|
||||
tag = {select('tag', tagBody, 'p')}
|
||||
truncate={boolean('truncate', false)}
|
||||
isDisabled={boolean('isDisabled', false)}
|
||||
color={select('color', color, 'black')}
|
||||
backgroundColor={boolean('backgroundColor', false)}
|
||||
isBold={boolean('isBold', false)}
|
||||
isItalic={boolean('isItalic', false)}
|
||||
isInline={boolean('isInline', false)}
|
||||
>
|
||||
{text('Text', 'Sample text Headline')}
|
||||
</Text.Body>
|
||||
</Section>
|
||||
))
|
||||
.add('main headline', () => (
|
||||
|
||||
<Section>
|
||||
<Text.MainHeadline
|
||||
headlineName={select('headlineName', headlineName, 'moduleName')}
|
||||
title={text('title', '')}
|
||||
truncate={boolean('truncate', false)}
|
||||
isDisabled={boolean('isDisabled', false)}
|
||||
isInline={boolean('isInline', false)}
|
||||
>
|
||||
{text('Text', 'Sample text Headline')}
|
||||
</Text.MainHeadline>
|
||||
</Section>
|
||||
));
|
||||
@ -1,64 +1 @@
|
||||
import React from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const fontSize = css`
|
||||
${props =>
|
||||
(props.elementType === 'h1' && 23) ||
|
||||
(props.elementType === 'h2' && 19) ||
|
||||
(props.elementType === 'h3' && 15) ||
|
||||
(props.elementType === 'p' && 13) ||
|
||||
(props.elementType === 'moduleName' && 27) ||
|
||||
(props.elementType === 'mainTitle' && 21)
|
||||
}
|
||||
`;
|
||||
|
||||
const fontWeight = css`
|
||||
${props =>
|
||||
(props.elementType === 'h1' && 600) ||
|
||||
(props.elementType === 'h2' && 600) ||
|
||||
(props.elementType === 'h3' && 600) ||
|
||||
(props.elementType === 'p' && 500) ||
|
||||
(props.elementType === 'moduleName' && 700) ||
|
||||
(props.elementType === 'mainTitle' && 700)
|
||||
}
|
||||
`;
|
||||
|
||||
const fontColor = css`
|
||||
${props =>
|
||||
(props.styleType === 'default' && '#333333') ||
|
||||
(props.styleType === 'grayBackground' && '#657077') ||
|
||||
(props.styleType === 'metaInfo' && '#A3A9AE')
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledText = styled.p`
|
||||
font-family: 'Open Sans',sans-serif,Arial;
|
||||
font-size: ${fontSize}px;
|
||||
font-weight: ${fontWeight};
|
||||
color: ${props => props.isDisabled == true ? '#ECEEF1' : fontColor};
|
||||
background-color: ${props => (props.styleType === 'grayBackground' && '#F8F9F9')};
|
||||
text-align: left;
|
||||
max-width: 1000px;
|
||||
${props => (props.truncate === true && 'white-space: nowrap; overflow: hidden; text-overflow: ellipsis;' )}
|
||||
`;
|
||||
|
||||
const Text = props => <StyledText {...props} title={props.title}></StyledText>;
|
||||
|
||||
Text.propTypes = {
|
||||
elementType: PropTypes.string,
|
||||
styleType: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
truncate: PropTypes.bool,
|
||||
isDisabled: PropTypes.bool
|
||||
};
|
||||
|
||||
Text.defaultProps = {
|
||||
elementType: 'p',
|
||||
styleType: 'default',
|
||||
title: '',
|
||||
truncate: false,
|
||||
isDisabled: false
|
||||
};
|
||||
|
||||
export default Text;
|
||||
export * as Text from './sub-text';
|
||||
@ -0,0 +1,66 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
|
||||
export default function createStyledBodyText() {
|
||||
|
||||
const fontColor = css`
|
||||
${props =>
|
||||
(props.color === 'black' && '#333333') ||
|
||||
(props.color === 'gray' && '#657077') ||
|
||||
(props.color === 'lightGray' && '#A3A9AE')
|
||||
}
|
||||
`
|
||||
|
||||
const style = css`
|
||||
font-family: 'Open Sans',sans-serif,Arial;
|
||||
font-size: 13px;
|
||||
font-weight: ${props => props.isBold == true ? 700 : 500};
|
||||
${props => props.isItalic == true && 'font-style: italic'};
|
||||
color: ${props => props.isDisabled == true ? '#ECEEF1' : fontColor};
|
||||
${props => props.backgroundColor == true && 'background-color: #F8F9F9;'}
|
||||
${props => props.isInline == true && 'display: inline-block;'}
|
||||
text-align: left;
|
||||
max-width: 1000px;
|
||||
${props => (props.truncate === true && 'white-space: nowrap; overflow: hidden; text-overflow: ellipsis;' )}
|
||||
|
||||
`
|
||||
|
||||
const StyledP = styled.p`
|
||||
${style}
|
||||
`;
|
||||
|
||||
const StyledSpan = styled.span`
|
||||
${style}
|
||||
`;
|
||||
|
||||
const Text = props =>
|
||||
(props.tag === 'p' && <StyledP {...props} title={props.title}></StyledP>) ||
|
||||
(props.tag === 'span' && <StyledSpan {...props} title={props.title}></StyledSpan>)
|
||||
|
||||
Text.propTypes = {
|
||||
tag: PropTypes.oneOf(['p','span']),
|
||||
title: PropTypes.string,
|
||||
color: PropTypes.string,
|
||||
backgroundColor: PropTypes.bool,
|
||||
truncate: PropTypes.bool,
|
||||
isDisabled: PropTypes.bool,
|
||||
isBold: PropTypes.bool,
|
||||
isInline: PropTypes.bool,
|
||||
isItalic: PropTypes.bool
|
||||
};
|
||||
|
||||
Text.defaultProps = {
|
||||
tag: 'p',
|
||||
title: '',
|
||||
color: 'black',
|
||||
backgroundColor: false,
|
||||
truncate: false,
|
||||
isDisabled: false,
|
||||
isBold: false,
|
||||
isInline: false,
|
||||
isItalic: false,
|
||||
};
|
||||
|
||||
return Text;
|
||||
}
|
||||
@ -0,0 +1,61 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
|
||||
export default function createStyledHeadline() {
|
||||
|
||||
const fontSize = css`
|
||||
${props =>
|
||||
(props.tag === 'h1' && 23) ||
|
||||
(props.tag === 'h2' && 19) ||
|
||||
(props.tag === 'h3' && 15)
|
||||
}
|
||||
`;
|
||||
|
||||
const styles = css`
|
||||
font-family: 'Open Sans',sans-serif,Arial;
|
||||
font-size: ${fontSize}px;
|
||||
font-weight: 600;
|
||||
color: ${props => props.isDisabled == true ? '#ECEEF1' : '#333333'};
|
||||
text-align: left;
|
||||
max-width: 1000px;
|
||||
${props => (props.truncate === true && 'white-space: nowrap; overflow: hidden; text-overflow: ellipsis;' )}
|
||||
${props => props.isInline == true && 'display: inline-block;'}
|
||||
`
|
||||
|
||||
const StyledH1 = styled.h1`
|
||||
${styles}
|
||||
`;
|
||||
|
||||
const StyledH2 = styled.h2`
|
||||
${styles}
|
||||
`;
|
||||
|
||||
const StyledH3 = styled.h3`
|
||||
${styles}
|
||||
`;
|
||||
|
||||
const Text = props =>
|
||||
|
||||
(props.tag === 'h1' && <StyledH1 {...props} title={props.title}></StyledH1>) ||
|
||||
(props.tag === 'h2' && <StyledH2 {...props} title={props.title}></StyledH2>) ||
|
||||
(props.tag === 'h3' && <StyledH3 {...props} title={props.title}></StyledH3>)
|
||||
|
||||
Text.propTypes = {
|
||||
tag: PropTypes.oneOf(['h1','h2','h3']),
|
||||
title: PropTypes.string,
|
||||
truncate: PropTypes.bool,
|
||||
isDisabled: PropTypes.bool,
|
||||
isInline: PropTypes.bool
|
||||
};
|
||||
|
||||
Text.defaultProps = {
|
||||
tag: 'h1',
|
||||
title: '',
|
||||
truncate: false,
|
||||
isDisabled: false,
|
||||
isInline: false
|
||||
};
|
||||
|
||||
return Text;
|
||||
}
|
||||
@ -0,0 +1,43 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
export default function createStyledMainHeadline() {
|
||||
|
||||
const fontSize = css`
|
||||
${props =>
|
||||
(props.headlineName === 'moduleName' && 27) ||
|
||||
(props.headlineName === 'mainTitle' && 21)
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledHeadline = styled.h1`
|
||||
font-family: 'Open Sans',sans-serif,Arial;
|
||||
font-size: ${fontSize}px;
|
||||
font-weight: 700;
|
||||
color: ${props => props.isDisabled == true ? '#ECEEF1' : '#333333'};
|
||||
text-align: left;
|
||||
max-width: 1000px;
|
||||
${props => (props.truncate === true && 'white-space: nowrap; overflow: hidden; text-overflow: ellipsis;' )}
|
||||
${props => props.isInline == true && 'display: inline-block;'}
|
||||
`
|
||||
|
||||
const Text = props => <StyledHeadline {...props} title={props.title}></StyledHeadline>
|
||||
|
||||
Text.propTypes = {
|
||||
headlineName: PropTypes.oneOf(['moduleName', 'mainTitle']),
|
||||
title: PropTypes.string,
|
||||
truncate: PropTypes.bool,
|
||||
isDisabled: PropTypes.bool,
|
||||
isInline: PropTypes.bool
|
||||
};
|
||||
|
||||
Text.defaultProps = {
|
||||
headlineName: 'moduleName',
|
||||
title: '',
|
||||
truncate: false,
|
||||
isDisabled: false,
|
||||
isInline: false
|
||||
};
|
||||
|
||||
return Text;
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
import createStyledHeadline from './create-styled-headline';
|
||||
import createStyledBody from './create-styled-body-text';
|
||||
import createStyledMainHeadline from './create-styled-main-headline';
|
||||
|
||||
export const Headline = createStyledHeadline();
|
||||
export const Body = createStyledBody();
|
||||
export const MainHeadline = createStyledMainHeadline();
|
||||
@ -18,5 +18,5 @@ export { default as MainButton } from './components/main-button'
|
||||
export { default as ContextMenuButton } from './components/context-menu-button'
|
||||
export { default as Link } from './components/link'
|
||||
export { default as Checkbox } from './components/checkbox'
|
||||
export { default as Text } from './components/text'
|
||||
export { Text } from './components/text'
|
||||
export { default as ModalDialog } from './components/modal-dialog'
|
||||
Loading…
Reference in New Issue
Block a user