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

Storybook: added isVertical prop to form field components

Browse Source
This commit is contained in:
Andrey Savihin 2019-09-04 12:17:55 +03:00
parent 96fcc9066c
commit a6fee1f5e8
3 changed files with 24 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
web/ASC.Web.Components/src/components/field-container/index.js
View File

@ -1,11 +1,12 @@
import React from 'react' import React from 'react'
import styled from 'styled-components'; import styled, { css } from 'styled-components';
import device from '../device' import device from '../device'
import Label from '../label' import Label from '../label'
const Container = styled.div` const horizontalCss = css`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: start;
margin: 0 0 16px 0; margin: 0 0 16px 0;
.field-label { .field-label {
@ -13,23 +14,12 @@ const Container = styled.div`
margin: 0; margin: 0;
width: 110px; width: 110px;
} }
`
.field-input { const verticalCss = css`
width: 320px;
}
.radio-group {
line-height: 32px;
display: flex; display: flex;
label:not(:first-child) {
margin-left: 33px;
}
}
@media ${device.tablet} {
flex-direction: column; flex-direction: column;
align-items: start; align-items: start;
margin: 0 0 16px 0;
.field-label { .field-label {
line-height: unset; line-height: unset;
@ -37,6 +27,13 @@ const Container = styled.div`
width: auto; width: auto;
flex-grow: 1; flex-grow: 1;
} }
`
const Container = styled.div`
${props => props.vertical ? verticalCss : horizontalCss }
@media ${device.tablet} {
${verticalCss}
} }
`; `;
@ -45,9 +42,9 @@ const Body = styled.div`
`; `;
const FieldContainer = React.memo((props) => { const FieldContainer = React.memo((props) => {
const {isRequired, hasError, labelText, className, children} = props; const {isVertical, className, isRequired, hasError, labelText, children} = props;
return ( return (
<Container className={className}> <Container vertical={isVertical} className={className}>
<Label isRequired={isRequired} error={hasError} text={labelText} className="field-label"/> <Label isRequired={isRequired} error={hasError} text={labelText} className="field-label"/>
<Body>{children}</Body> <Body>{children}</Body>
</Container> </Container>

3
web/ASC.Web.Storybook/stories/field-container/base/README.md
View File

@ -24,6 +24,7 @@ Responsive form field container
| Props | Type | Required | Values | Default | Description | | Props | Type | Required | Values | Default | Description |
| ------------| -------- | :------: | -------| ------- | -------------------------------------------- | | ------------| -------- | :------: | -------| ------- | -------------------------------------------- |
| `isVertical`| `bool` | - | - | false | Vertical or horizontal alignment |
| `isRequired`| `bool` | - | - | false | Indicates that the field is required to fill | | `isRequired`| `bool` | - | - | false | Indicates that the field is required to fill |
| `hasError` | `bool` | - | - | - | Indicates that the field is incorrect | | `hasError` | `bool` | - | - | false | Indicates that the field is incorrect |
| `labelText` | `string` | - | - | - | Field label text | | `labelText` | `string` | - | - | - | Field label text |

1
web/ASC.Web.Storybook/stories/field-container/base/index.stories.js
View File

@ -20,6 +20,7 @@ storiesOf('Components|FieldContainer', module)
{({ value, set }) => ( {({ value, set }) => (
<Section> <Section>
<FieldContainer <FieldContainer
isVertical={boolean('isVertical', false)}
isRequired={boolean('isRequired', false)} isRequired={boolean('isRequired', false)}
hasError={boolean('hasError', false)} hasError={boolean('hasError', false)}
labelText={text('labelText', 'Name:')} labelText={text('labelText', 'Name:')}