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

web: components: Refactoring Text component

Browse Source
This commit is contained in:
Alexey Kostenko 2019-08-08 17:48:07 +03:00
parent 4d9db01c58
commit c94852d946
16 changed files with 35 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/ASC.Web.Components/src/components/checkbox/index.js
View File

@ -104,6 +104,9 @@ class Checkbox extends React.Component {
render() {
//console.log("Checkbox render");
const colorProps = this.props.isDisabled ? {color: disableColor} : {};
return (
<Label htmlFor={this.props.id} isDisabled={this.props.isDisabled}>
<HiddenInput
@ -118,8 +121,7 @@ class Checkbox extends React.Component {
{this.props.label && (
<Text.Body
as="span"
isDisabled={this.props.isDisabled}
disableColor={disableColor}
{...colorProps}
>
{this.props.label}
</Text.Body>

21
web/ASC.Web.Components/src/components/link/index.js
View File

@ -12,12 +12,19 @@ const opacityCss = css`
(props.isSemitransparent && '0.5')};
`;
const getColor = color => {
switch (color) {
case 'gray':
return '#A3A9AE';
case 'blue':
return '#316DAA';
default:
return '#333333';
}
}
const colorCss = css`
color: ${props =>
(props.color === 'black' && '#333333') ||
(props.color === 'gray' && '#A3A9AE') ||
(props.color === 'blue' && '#316DAA')
};
color: ${props => getColor(props.color)};
`;
const hoveredCss = css`
@ -75,7 +82,7 @@ ${props => (props.isTextOverflow && css`
const Link = props => {
const { isBold, title, fontSize } = props;
const { isBold, title, fontSize, color } = props;
const onClick = (e) => {
!props.href && e.preventDefault();
@ -88,7 +95,7 @@ const Link = props => {
<StyledLink {...props}>
<Text.Body
as="span"
color={colorCss}
color={getColor(color)}
fontSize={fontSize}
onClick={onClick}
isBold={isBold}

7
web/ASC.Web.Components/src/components/radio-button/index.js
View File

@ -91,8 +91,10 @@ class RadioButton extends React.Component {
}
};
render() {
const colorProps = this.props.isDisabled ? {color: disableColor} : {};
return (
<Label
spacing={this.props.spacing}
@ -109,8 +111,7 @@ class RadioButton extends React.Component {
<RadiobuttonIcon {...this.props} />
<Text.Body
as='span'
isDisabled={this.props.isDisabled}
disableColor={disableColor}
{...colorProps}
>
{this.props.label || this.props.value}
</Text.Body>

3
web/ASC.Web.Components/src/components/selected-item/index.js
View File

@ -42,12 +42,13 @@ const StyledCloseButton = styled.div`
const SelectedItem = (props) => {
const {isDisabled, text, onClose } = props;
const colorProps = isDisabled ? {color: "#D0D5DA"} : {};
console.log("SelectedItem render");
return (
<StyledSelectedItem {...props}>
<StyledSelectedTextBox>
<Text.Body as='span' truncate color={isDisabled ? "#cecece" : "#333333"} >
<Text.Body as='span' truncate {...colorProps} >
{text}
</Text.Body>
</StyledSelectedTextBox>

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

@ -9,8 +9,8 @@ const style = css`
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};
${props => props.backgroundColor == true && 'background-color: #F8F9F9;'}
color: ${props => props.color};
${props => props.backgroundColor && 'background-color: ' + props.backgroundColor + ";"}
${props => props.isInline == true && 'display: inline-block;'}
text-align: left;
${props => (props.truncate === true && 'white-space: nowrap; overflow: hidden; text-overflow: ellipsis;' )}
@ -30,10 +30,8 @@ const TextBody = styled.p`
title: PropTypes.string,
color: PropTypes.string,
fontSize: PropTypes.number,
disableColor: PropTypes.string,
backgroundColor: PropTypes.bool,
backgroundColor: PropTypes.string,
truncate: PropTypes.bool,
isDisabled: PropTypes.bool,
isBold: PropTypes.bool,
isInline: PropTypes.bool,
isItalic: PropTypes.bool
@ -43,10 +41,7 @@ const TextBody = styled.p`
title: '',
color: '#333333',
fontSize: 13,
disableColor: '#ECEEF1',
backgroundColor: false,
truncate: false,
isDisabled: false,
isBold: false,
isInline: false,
isItalic: false,

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

@ -16,7 +16,7 @@ export default function createStyledHeader(headlineType) {
line-height: 56px;
font-size: ${fontSize}px;
font-weight: 700;
color: ${props => props.isDisabled == true ? '#ECEEF1' : props.color};
color: ${props => props.color};
text-align: left;
${props => (props.truncate === true && 'white-space: nowrap; overflow: hidden; text-overflow: ellipsis;' )}
${props => props.isInline == true && 'display: inline-block;'}
@ -31,7 +31,6 @@ export default function createStyledHeader(headlineType) {
color: PropTypes.string,
title: PropTypes.string,
truncate: PropTypes.bool,
isDisabled: PropTypes.bool,
isInline: PropTypes.bool
};
@ -39,7 +38,6 @@ export default function createStyledHeader(headlineType) {
color: '#333333',
title: '',
truncate: false,
isDisabled: false,
isInline: false
};

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

@ -16,7 +16,7 @@ export default function createStyledHeadline() {
font-family: 'Open Sans',sans-serif,Arial;
font-size: ${fontSize}px;
font-weight: 600;
color: ${props => props.isDisabled == true ? '#ECEEF1' : props.color};
color: ${props => props.color};
text-align: left;
${props => (props.truncate === true && 'white-space: nowrap; overflow: hidden; text-overflow: ellipsis;')}
${props => props.isInline == true && 'display: inline-block;'}
@ -36,7 +36,6 @@ export default function createStyledHeadline() {
color: PropTypes.string,
title: PropTypes.string,
truncate: PropTypes.bool,
isDisabled: PropTypes.bool,
isInline: PropTypes.bool,
size: PropTypes.oneOf(['big', 'medium', 'small']),
};
@ -45,7 +44,6 @@ export default function createStyledHeadline() {
color: '#333333',
title: '',
truncate: false,
isDisabled: false,
isInline: false,
size: 'big'
};

6
web/ASC.Web.Components/src/components/toggle-button/index.js
View File

@ -56,6 +56,9 @@ class ToggleButton extends Component {
}
render() {
const colorProps = this.props.isDisabled ? {color: "#A3A9AE"} : {};
return (
<ToggleContainer isDisabled={this.props.isDisabled}>
<HiddenInput
@ -69,8 +72,7 @@ class ToggleButton extends Component {
{this.props.label && (
<Text.Body
as="span"
isDisabled={this.props.isDisabled}
disableColor={'#A3A9AE'}
{...colorProps}
>
{this.props.label}
</Text.Body>

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

@ -39,15 +39,13 @@ Component that displays plain text
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | --------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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` | - | | `#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 |
| `backgroundColor` | `string` | - | - | - | Sets background color |

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

@ -20,9 +20,8 @@ storiesOf('Components|Text', module)
as={select('as', textTags , 'p')}
fontSize={number('fontSize', 13)}
truncate={boolean('truncate', false)}
isDisabled={boolean('isDisabled', false)}
color={color('color', '#333333')}
backgroundColor={boolean('backgroundColor', false)}
backgroundColor={color('backgroundColor', '')}
isBold={boolean('isBold', false)}
isItalic={boolean('isItalic', false)}
isInline={boolean('isInline', false)}

1
web/ASC.Web.Storybook/stories/text/content-header/README.md
View File

@ -23,7 +23,6 @@ Wraps the given text in the specified size of the content header.
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | --------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `color` | `string` | - | - | '#333333' | Specifies the contentHeader color |
| `isDisabled` | `bool` | - | - | false | Marks text as disabled |
| `title` | `bool` | - | - | - | Title |
| `truncate` | `bool` | - | - | false | Disables word wrapping |
| `isInline` | `bool` | - | - | false | Sets the 'display: inline-block' property |

1
web/ASC.Web.Storybook/stories/text/content-header/index.stories.js
View File

@ -17,7 +17,6 @@ storiesOf('Components|Text', module)
color={color('color', '#333333')}
title={text('title', '')}
truncate={boolean('truncate', false)}
isDisabled={boolean('isDisabled', false)}
isInline={boolean('isInline', false)}
>
{text('Text', 'Sample text Headline')}

1
web/ASC.Web.Storybook/stories/text/headline/README.md
View File

@ -39,7 +39,6 @@ A component that renders headline
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | --------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `color` | `string` | - | - | '#333333' | Specifies the headline color |
| `isDisabled` | `bool` | - | - | false | Marks text as disabled |
| `as ` | `string` | - | - | `h1` | Sets the tag through which to render the component |
| `title` | `bool` | - | - | - | Title |
| `truncate` | `bool` | - | - | false | Disables word wrapping |

1
web/ASC.Web.Storybook/stories/text/headline/index.stories.js
View File

@ -21,7 +21,6 @@ storiesOf('Components|Text', module)
as={select ('as', textTags, 'h2')}
title={text('title', '')}
truncate={boolean('truncate', false)}
isDisabled={boolean('isDisabled', false)}
isInline={boolean('isInline', false)}
size={select('size', size, 'big')}
>

1
web/ASC.Web.Storybook/stories/text/menu-header/README.md
View File

@ -23,7 +23,6 @@ Wraps the given text in the specified size of the menu header.
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | --------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `color` | `string` | - | - | '#333333' | Specifies the menuHeader color |
| `isDisabled` | `bool` | - | - | false | Marks text as disabled |
| `title` | `bool` | - | - | - | Title |
| `truncate` | `bool` | - | - | false | Disables word wrapping |
| `isInline` | `bool` | - | - | false | Sets the 'display: inline-block' property |

1
web/ASC.Web.Storybook/stories/text/menu-header/index.stories.js
View File

@ -16,7 +16,6 @@ storiesOf('Components|Text', module)
color={color('color', '#333333')}
title={text('title', '')}
truncate={boolean('truncate', false)}
isDisabled={boolean('isDisabled', false)}
isInline={boolean('isInline', false)}
>
{text('Text', 'Sample text Headline')}