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

web: components: Text.Body: Add fontSize property

Browse Source
This commit is contained in:
Alexey Kostenko 2019-08-07 11:44:28 +03:00
parent 4e2239d4fd
commit 83230999d3
3 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/ASC.Web.Components/src/components/text/sub-text/create-styled-body-text.js
View File

@ -6,7 +6,7 @@ export default function createStyledBodyText() {
const style = css`
font-family: 'Open Sans',sans-serif,Arial;
font-size: 13px;
font-size: ${props => props.fontSize}px;
font-weight: ${props => props.isBold == true ? 700 : 500};
${props => props.isItalic == true && 'font-style: italic'};
color: ${props => props.isDisabled == true ? props.disableColor : props.color};
@ -29,6 +29,7 @@ const TextBody = styled.p`
Text.propTypes = {
title: PropTypes.string,
color: PropTypes.string,
fontSize: PropTypes.number,
disableColor: PropTypes.string,
backgroundColor: PropTypes.bool,
truncate: PropTypes.bool,
@ -41,6 +42,7 @@ const TextBody = styled.p`
Text.defaultProps = {
title: '',
color: '#333333',
fontSize: 13,
disableColor: '#ECEEF1',
backgroundColor: false,
truncate: false,

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

@ -41,12 +41,13 @@ Component that displays plain text
| ------------------ | -------- | :------: | --------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `isDisabled` | `bool` | - | - | false | Marks text as disabled |
| `fontSize` | `number` | - | - | `13` | Sets the font size |
| `as` | `string` | - | - | `p` | Sets the tag through which to render the component |
| `title` | `bool` | - | - | - | Title |
| `truncate` | `bool` | - | - | false | Disables word wrapping |
| `isInline` | `bool` | - | - | false | Sets the 'display: inline-block' property |
| `color` | `string` | - | - | '#333333' | Specifies the text color |
| `disableColor` | `string` | - | | `lightGray` | Sets the text disabled color |
| `color` | `string` | - | - | `#333333` | Specifies the text color |
| `disableColor` | `string` | - | | `#ECEEF1` | Sets the text disabled color |
| `isBold` | `bool` | - | - | false | Sets the font weight |
| `isItalic` | `bool` | - | - | false | Sets the font style |
| `backgroundColor` | `bool` | - | - | false | Sets background color |

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

@ -1,6 +1,6 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { text, boolean, withKnobs, color } from '@storybook/addon-knobs/react';
import { text, boolean, withKnobs, color, 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';
@ -16,6 +16,7 @@ storiesOf('Components|Text', module)
<Text.Body
title={text('title', '')}
as={text('as', 'p')}
fontSize={number('fontSize', 13)}
truncate={boolean('truncate', false)}
isDisabled={boolean('isDisabled', false)}
color={color('color', '#333333')}