/
index.js
61 lines (54 loc) · 1.4 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { ERROR_COLOUR } from 'govuk-colours';
import { spacing } from '@govuk-react/lib';
import { BORDER_WIDTH_FORM_GROUP_ERROR, SPACING_POINTS } from '@govuk-react/constants';
const FormGroup = styled('div')(
spacing.responsiveMargin({ size: 6, direction: 'bottom' }),
{
'& &:last-of-type': {
marginBottom: 0,
},
},
({ error }) =>
error
? {
paddingLeft: SPACING_POINTS[3],
borderLeft: `${BORDER_WIDTH_FORM_GROUP_ERROR} solid ${ERROR_COLOUR}`,
'& &': {
padding: 0,
border: 0,
},
}
: undefined,
spacing.withWhiteSpace()
);
/**
*
* ### Usage
*
* Simple
* ```jsx
* import Checkbox from '@govuk-react/checkbox';
*
* <FormGroup>
* <Checkbox name="group-1">Example</Checkbox>
* </FormGroup>
* ```
*
* ### References
* - https://github.com/alphagov/govuk-frontend/blob/master/src/objects/_form-group.scss
*/
const FormGroupDocumented = props => <FormGroup {...props} />;
FormGroupDocumented.propTypes = {
children: PropTypes.node.isRequired,
error: PropTypes.bool,
};
FormGroupDocumented.defaultProps = {
error: false,
};
FormGroup.propTypes = FormGroupDocumented.propTypes;
FormGroup.defaultProps = FormGroupDocumented.defaultProps;
export { FormGroupDocumented };
export default FormGroup;