Web: Fix Text component
This commit is contained in:
Alexey Kostenko
parent
db84375601
commit
00a4685256
@ -20,7 +20,7 @@ function ClickSecondaryButton(e, credentials) {
|
||||
storiesOf('Components|MainButton', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add('Main button', () => {
|
||||
.add('main button', () => {
|
||||
|
||||
let isDropdown=boolean('isDropdown', false);
|
||||
|
||||
|
||||
@ -0,0 +1,43 @@
|
||||
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>
|
||||
));
|
||||
31
web/ASC.Web.Components/example/stories/text/base/README.md
Normal file
31
web/ASC.Web.Components/example/stories/text/base/README.md
Normal file
@ -0,0 +1,31 @@
|
||||
# Text
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
import { Text } from 'asc-web-components';
|
||||
```
|
||||
|
||||
#### Description
|
||||
|
||||
Text used in titles and content
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
<Text elementType='h1' title='Some title'>
|
||||
Some text
|
||||
</Text>
|
||||
```
|
||||
|
||||
#### Properties
|
||||
|
||||
| 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 |
|
||||
| `title` | `bool` | - | - | - | Title |
|
||||
| `truncate` | `bool` | - | - | false | Disables word wrapping |
|
||||
|
||||
|
||||
@ -3,16 +3,17 @@ import { storiesOf } from '@storybook/react';
|
||||
import { text, boolean, withKnobs, select, number } 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';
|
||||
import withReadme from 'storybook-readme/with-readme';
|
||||
import Readme from './README.md';
|
||||
|
||||
const elementType = ['h1','h2','h3','p'];
|
||||
const styleType = ['default','grayBackground','metaInfo','disabled'];
|
||||
const elementType = ['h1','h2','h3','p', 'moduleName', 'mainTitle'];
|
||||
const styleType = ['default','grayBackground','metaInfo'];
|
||||
|
||||
|
||||
storiesOf('Components|Text', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('Text', () => {
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add('text', () => {
|
||||
|
||||
return (
|
||||
<Section>
|
||||
@ -21,9 +22,9 @@ storiesOf('Components|Text', module)
|
||||
styleType={select('styleType', styleType, 'default')}
|
||||
title={text('title', '')}
|
||||
truncate={boolean('truncate', false)}
|
||||
text={text('text', 'Example')}
|
||||
isDisabled={boolean('isDisabled', false)}
|
||||
>
|
||||
|
||||
{text('Text', 'Sample text Headline')}
|
||||
</Text>
|
||||
</Section>
|
||||
)});
|
||||
|
||||
@ -7,7 +7,9 @@ const fontSize = css`
|
||||
(props.elementType === 'h1' && 23) ||
|
||||
(props.elementType === 'h2' && 19) ||
|
||||
(props.elementType === 'h3' && 15) ||
|
||||
(props.elementType === 'p' && 13)
|
||||
(props.elementType === 'p' && 13) ||
|
||||
(props.elementType === 'moduleName' && 27) ||
|
||||
(props.elementType === 'mainTitle' && 21)
|
||||
}
|
||||
`;
|
||||
|
||||
@ -16,7 +18,9 @@ const fontWeight = css`
|
||||
(props.elementType === 'h1' && 600) ||
|
||||
(props.elementType === 'h2' && 600) ||
|
||||
(props.elementType === 'h3' && 600) ||
|
||||
(props.elementType === 'p' && 500)
|
||||
(props.elementType === 'p' && 500) ||
|
||||
(props.elementType === 'moduleName' && 700) ||
|
||||
(props.elementType === 'mainTitle' && 700)
|
||||
}
|
||||
`;
|
||||
|
||||
@ -24,8 +28,7 @@ const fontColor = css`
|
||||
${props =>
|
||||
(props.styleType === 'default' && '#333333') ||
|
||||
(props.styleType === 'grayBackground' && '#657077') ||
|
||||
(props.styleType === 'metaInfo' && '#A3A9AE') ||
|
||||
(props.styleType === 'disabled' && '#ECEEF1')
|
||||
(props.styleType === 'metaInfo' && '#A3A9AE')
|
||||
}
|
||||
`;
|
||||
|
||||
@ -33,24 +36,21 @@ const StyledText = styled.p`
|
||||
font-family: 'Open Sans',sans-serif,Arial;
|
||||
font-size: ${fontSize}px;
|
||||
font-weight: ${fontWeight};
|
||||
color: ${fontColor};
|
||||
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}>
|
||||
{props.text}
|
||||
</StyledText>;
|
||||
const Text = props => <StyledText {...props} title={props.title}></StyledText>;
|
||||
|
||||
Text.propTypes = {
|
||||
fontSize: PropTypes.number,
|
||||
elementType: PropTypes.string,
|
||||
styleType: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
truncate: PropTypes.bool,
|
||||
text: PropTypes.string
|
||||
isDisabled: PropTypes.bool
|
||||
};
|
||||
|
||||
Text.defaultProps = {
|
||||
@ -58,7 +58,7 @@ Text.defaultProps = {
|
||||
styleType: 'default',
|
||||
title: '',
|
||||
truncate: false,
|
||||
text: ''
|
||||
isDisabled: false
|
||||
};
|
||||
|
||||
export default Text;
|
||||
Loading…
Reference in New Issue
Block a user