web: components: Text.Body: Add fontSize property
This commit is contained in:
parent
4e2239d4fd
commit
83230999d3
@ -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,
|
||||
|
@ -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 |
|
||||
|
@ -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')}
|
||||
|
Loading…
Reference in New Issue
Block a user