From 00a4685256fd26482d420501cc97df7c82528a4f Mon Sep 17 00:00:00 2001 From: Alexey Kostenko Date: Thu, 27 Jun 2019 16:29:39 +0300 Subject: [PATCH] Web: Fix Text component --- .../stories/main-button/base/index.stories.js | 2 +- .../example/stories/text/all/index.stories.js | 43 +++++++++++++++++++ .../example/stories/text/base/README.md | 31 +++++++++++++ .../stories/text/base/index.stories.js | 15 ++++--- .../src/components/text/index.js | 22 +++++----- 5 files changed, 94 insertions(+), 19 deletions(-) create mode 100644 web/ASC.Web.Components/example/stories/text/all/index.stories.js create mode 100644 web/ASC.Web.Components/example/stories/text/base/README.md diff --git a/web/ASC.Web.Components/example/stories/main-button/base/index.stories.js b/web/ASC.Web.Components/example/stories/main-button/base/index.stories.js index d71ef823ec..6d9f505c5c 100644 --- a/web/ASC.Web.Components/example/stories/main-button/base/index.stories.js +++ b/web/ASC.Web.Components/example/stories/main-button/base/index.stories.js @@ -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); diff --git a/web/ASC.Web.Components/example/stories/text/all/index.stories.js b/web/ASC.Web.Components/example/stories/text/all/index.stories.js new file mode 100644 index 0000000000..bbc79da01e --- /dev/null +++ b/web/ASC.Web.Components/example/stories/text/all/index.stories.js @@ -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', () => ( + + + Module name + + + Main title + + + H1 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus + + + H2 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus + + + H3 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus + + + 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 + + + Default black text + + + Gray text on gray bg + + + Meta info text + + + Disabled + + + )); \ No newline at end of file diff --git a/web/ASC.Web.Components/example/stories/text/base/README.md b/web/ASC.Web.Components/example/stories/text/base/README.md new file mode 100644 index 0000000000..30550ceb42 --- /dev/null +++ b/web/ASC.Web.Components/example/stories/text/base/README.md @@ -0,0 +1,31 @@ +# Text + +## Usage + +```js +import { Text } from 'asc-web-components'; +``` + +#### Description + +Text used in titles and content + +#### Usage + +```js + + Some 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 | + + diff --git a/web/ASC.Web.Components/example/stories/text/base/index.stories.js b/web/ASC.Web.Components/example/stories/text/base/index.stories.js index e3a3ad9b24..5c2df72dde 100644 --- a/web/ASC.Web.Components/example/stories/text/base/index.stories.js +++ b/web/ASC.Web.Components/example/stories/text/base/index.stories.js @@ -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 (
@@ -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')}
)}); diff --git a/web/ASC.Web.Components/src/components/text/index.js b/web/ASC.Web.Components/src/components/text/index.js index 0301818b03..61c199c794 100644 --- a/web/ASC.Web.Components/src/components/text/index.js +++ b/web/ASC.Web.Components/src/components/text/index.js @@ -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 => - {props.text} -; +const Text = props => ; 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; \ No newline at end of file