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

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

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

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

@ -16,7 +16,7 @@ Responsive form field container
<FieldContainer labelText="Name:">
<TextInput/>
</FieldContainer>
</FieldContainer>
```
@ -24,6 +24,7 @@ Responsive form field container
| Props | Type | Required | Values | Default | Description |
| ------------| -------- | :------: | -------| ------- | -------------------------------------------- |
| `isVertical`| `bool` | - | - | false | Vertical or horizontal alignment |
| `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 |

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

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