/
index.js
55 lines (51 loc) · 1.6 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
import React from 'react';
import styled from 'react-emotion';
import PropTypes from 'prop-types';
import { SPACING } from '@govuk-react/constants';
const StyledLayout = styled('div')({
padding: SPACING.SCALE_2,
boxSizing: 'border-box',
});
/**
*
* THIS COMPONENT IS NO LONGER REQUIRED TO ACHIEVE LAYOUT;
* 1. `GridCol` contains the required gutters, we do not need to provide additional gutter
* to build an accurate grid layout.
*
* 2. `GridRow` contains the required `display: flex;` and associated properties for `GridCol`.
*
* 3. `Main` contains the required properties to center a container that matches up with `TopNav`
* and house the remaining body of content for the page.
*
* If you feel you may still need a `Layout` component, please do raise a ticket on [Github](https://github.com/govuk-react/govuk-react/issues/177)
*
* ### Usage
*
* This component provides default padding.
* You can use this component to wrap Grid components however it is not required.
*
* Simple usage
* ```jsx
* import GridRow from '@govuk-react/grid-row';
* import GridCol from '@govuk-react/grid-col';
*
* <Layout>
* <GridRow>
* <GridCol>
* ...
* </GridCol>
* </GridRow>
* </Layout>
* ```
*
* ### References:
* - https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_grid_layout.scss
* - https://github.com/alphagov/govuk_elements/blob/master/assets/sass/elements/_layout.scss
*
*/
const Layout = props => <StyledLayout {...props} />;
Layout.propTypes = {
/** GridRow and GridCol children nodes */
children: PropTypes.node.isRequired,
};
export default Layout;