Skip to content
This repository was archived by the owner on Jan 14, 2025. It is now read-only.

Commit f33a046

Browse files
hvolschenkMatt Goo
hvolschenk
authored and
Matt Goo
committed
feature(layout-grid): add new component (#351)
1 parent f1d4be0 commit f33a046

File tree

16 files changed

+806
-208
lines changed

16 files changed

+806
-208
lines changed

‎package-lock.json

+209-208
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"fab",
3535
"floating-label",
3636
"icon-button",
37+
"layout-grid",
3738
"line-ripple",
3839
"menu-surface",
3940
"ripple",
@@ -60,6 +61,7 @@
6061
"@material/fab": "^0.40.1",
6162
"@material/floating-label": "^0.40.1",
6263
"@material/icon-button": "^0.40.1",
64+
"@material/layout-grid": "^0.40.1",
6365
"@material/line-ripple": "^0.40.1",
6466
"@material/list": "^0.40.1",
6567
"@material/menu-surface": "^0.40.1",

‎packages/layout-grid/.npmignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
index.js

‎packages/layout-grid/Cell.js

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import classnames from 'classnames';
2+
import PropTypes from 'prop-types';
3+
import React from 'react';
4+
5+
const Cell = (props) => {
6+
const {
7+
align,
8+
children,
9+
className,
10+
columns,
11+
desktopColumns,
12+
order,
13+
phoneColumns,
14+
tabletColumns,
15+
tag: Tag,
16+
...otherProps
17+
} = props;
18+
19+
const classes = classnames('mdc-layout-grid__cell', className, {
20+
[`mdc-layout-grid__cell--align-${align}`]: !!align,
21+
[`mdc-layout-grid__cell--order-${order}`]: !!order,
22+
[`mdc-layout-grid__cell--span-${columns}`]: !!columns,
23+
[`mdc-layout-grid__cell--span-${desktopColumns}-desktop`]: !!desktopColumns,
24+
[`mdc-layout-grid__cell--span-${phoneColumns}-phone`]: !!phoneColumns,
25+
[`mdc-layout-grid__cell--span-${tabletColumns}-tablet`]: !!tabletColumns,
26+
});
27+
28+
return (
29+
<Tag className={classes} {...otherProps}>
30+
{children}
31+
</Tag>
32+
);
33+
};
34+
35+
Cell.propTypes = {
36+
align: PropTypes.oneOf(['bottom', 'middle', 'top']),
37+
children: PropTypes.node,
38+
className: PropTypes.string,
39+
columns: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
40+
desktopColumns: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
41+
order: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
42+
phoneColumns: PropTypes.oneOf([1, 2, 3, 4]),
43+
tabletColumns: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8]),
44+
tag: PropTypes.string,
45+
};
46+
47+
Cell.defaultProps = {
48+
align: undefined,
49+
children: undefined,
50+
className: '',
51+
columns: undefined,
52+
desktopColumns: undefined,
53+
order: undefined,
54+
phoneColumns: undefined,
55+
tabletColumns: undefined,
56+
tag: 'div',
57+
};
58+
59+
export default Cell;

‎packages/layout-grid/Grid.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import classnames from 'classnames';
2+
import PropTypes from 'prop-types';
3+
import React from 'react';
4+
5+
const Grid = (props) => {
6+
const {
7+
align,
8+
children,
9+
className,
10+
fixedColumnWidth,
11+
tag: Tag,
12+
...otherProps
13+
} = props;
14+
15+
const classes = classnames('mdc-layout-grid', className, {
16+
[`mdc-layout-grid--align-${align}`]: !!align,
17+
'mdc-layout-grid--fixed-column-width': fixedColumnWidth,
18+
});
19+
20+
return (
21+
<Tag className={classes} {...otherProps}>{children}</Tag>
22+
);
23+
};
24+
25+
Grid.propTypes = {
26+
align: PropTypes.oneOf(['left', 'right']),
27+
children: PropTypes.node.isRequired,
28+
className: PropTypes.string,
29+
fixedColumnWidth: PropTypes.bool,
30+
tag: PropTypes.string,
31+
};
32+
33+
Grid.defaultProps = {
34+
align: undefined,
35+
className: '',
36+
fixedColumnWidth: false,
37+
tag: 'div',
38+
};
39+
40+
export default Grid;

‎packages/layout-grid/README.md

+119
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
# React Layout Grid
2+
3+
A React version of an [MDC Layout Grid](https://github.com/material-components/material-components-web/tree/master/packages/mdc-layout-grid).
4+
5+
## Installation
6+
7+
```
8+
npm install @material/react-layout-grid
9+
```
10+
11+
## Usage
12+
13+
### Styles
14+
15+
with Sass:
16+
```js
17+
import '@material/react-layout-grid/index.scss';
18+
```
19+
20+
with CSS:
21+
```js
22+
import '@material/react-layout-grid/dist/layout-grid.css';
23+
```
24+
25+
### Javascript Instantiation
26+
```js
27+
import React from 'react';
28+
import {Cell, Grid, Row} from '@material/react-layout-grid';
29+
30+
class MyApp extends React.Component {
31+
render() {
32+
return (
33+
<Grid>
34+
<Row>
35+
<Cell columns={4}>Tennis</Cell>
36+
<Cell columns={4}>Cricket</Cell>
37+
<Cell columns={4}>StarCraft</Cell>
38+
</Row>
39+
<Row>
40+
<Cell desktopColumns={4} order={2} phoneColumns={4} tabletColumns={4}>Tennis</Cell>
41+
<Cell desktopColumns={4} order={3} phoneColumns={4} tabletColumns={4}>Cricket</Cell>
42+
<Cell desktopColumns={4} order={1} phoneColumns={4} tabletColumns={4}>StarCraft</Cell>
43+
</Row>
44+
<Row>
45+
<Cell columns={4}>
46+
<Row>
47+
<Cell desktopColumns={8} phoneColumns={2} tabletColumns={5}>Tennis</Cell>
48+
<Cell desktopColumns={4} phoneColumns={2} tabletColumns={3}>Cricket</Cell>
49+
</Row>
50+
</Cell>
51+
<Cell columns={4}> - </Cell>
52+
<Cell columns={4}> - </Cell>
53+
</Row>
54+
</Grid>
55+
);
56+
}
57+
}
58+
59+
// with alignment
60+
class MyAppAligned extends React.Component {
61+
render() {
62+
return (
63+
<Grid align="right">
64+
<Row>
65+
<Cell align="top">Tennis<br /><br /><br /><br /><br /></Cell>
66+
<Cell align="middle">Cricket</Cell>
67+
<Cell align="bottom">StarCraft</Cell>
68+
</Row>
69+
</Grid>
70+
);
71+
}
72+
}
73+
```
74+
75+
## Components
76+
77+
### Grid
78+
79+
#### Props
80+
81+
Prop Name | Type | Description
82+
--- | --- | ---
83+
align | String (`left` or `right`) | An optional alignment of the grid contents
84+
children | Node | A React node to render within the Grid, usually a `Row` or `Row`s
85+
className | String | Classes to be applied to the root element
86+
tag | String | The tag type to render (default `'div'`)
87+
88+
### Row
89+
90+
#### Props
91+
92+
Prop Name | Type | Description
93+
--- | --- | ---
94+
children | Node | A React node to render within the Row, usually a `Cell` or `Cell`s
95+
className | String | Classes to be applied to the root element
96+
tag | String | The tag type to render (default `'div'`)
97+
98+
### Cell
99+
100+
#### Props
101+
102+
Prop Name | Type | Description
103+
--- | --- | ---
104+
align | String (`bottom`, `middle` or `top`) | An optional alignment of the cell contents
105+
children | Node | A React node to render within the Cell
106+
className | String | Classes to be applied to the root element
107+
columns | Number (1-12) | The width of the cell on all devices
108+
desktopColumns | Number (1-12) | The width of the cell on desktop
109+
order | Number (1-12) | The order that the cell is displayed in
110+
phoneColumns | Number (1-8) | The width of the cell on phones
111+
tabletColumns | Number (1-4) | The width of the cell on tablets
112+
tag | String | The tag type to render (default `'div'`)
113+
114+
## Sass Mixins
115+
116+
Sass mixins may be available to customize various aspects of the Components. Please refer to the
117+
MDC Web repository for more information on what mixins are available, and how to use them.
118+
119+
[Advanced Sass Mixins](https://github.com/material-components/material-components-web/tree/master/packages/mdc-layout-grid#sass-mixins)

‎packages/layout-grid/Row.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import classnames from 'classnames';
2+
import PropTypes from 'prop-types';
3+
import React from 'react';
4+
5+
const Row = (props) => {
6+
const {
7+
children,
8+
className,
9+
tag: Tag,
10+
...otherProps
11+
} = props;
12+
13+
const classes = classnames('mdc-layout-grid__inner', className);
14+
15+
return (
16+
<Tag className={classes} {...otherProps}>{children}</Tag>
17+
);
18+
};
19+
20+
Row.propTypes = {
21+
children: PropTypes.node.isRequired,
22+
className: PropTypes.string,
23+
tag: PropTypes.string,
24+
};
25+
26+
Row.defaultProps = {
27+
className: '',
28+
tag: 'div',
29+
};
30+
31+
export default Row;

‎packages/layout-grid/index.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// The MIT License
2+
//
3+
// Copyright (c) 2018 Google, Inc.
4+
//
5+
// Permission is hereby granted, free of charge, to any person obtaining a copy
6+
// of this software and associated documentation files (the "Software"), to deal
7+
// in the Software without restriction, including without limitation the rights
8+
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
// copies of the Software, and to permit persons to whom the Software is
10+
// furnished to do so, subject to the following conditions:
11+
//
12+
// The above copyright notice and this permission notice shall be included in
13+
// all copies or substantial portions of the Software.
14+
//
15+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
// THE SOFTWARE.
22+
23+
export {default as Cell} from './Cell';
24+
export {default as Grid} from './Grid';
25+
export {default as Row} from './Row';

‎packages/layout-grid/index.scss

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// The MIT License
2+
//
3+
// Copyright (c) 2018 Google, Inc.
4+
//
5+
// Permission is hereby granted, free of charge, to any person obtaining a copy
6+
// of this software and associated documentation files (the "Software"), to deal
7+
// in the Software without restriction, including without limitation the rights
8+
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
// copies of the Software, and to permit persons to whom the Software is
10+
// furnished to do so, subject to the following conditions:
11+
//
12+
// The above copyright notice and this permission notice shall be included in
13+
// all copies or substantial portions of the Software.
14+
//
15+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
// THE SOFTWARE.
22+
23+
@import "@material/layout-grid/mdc-layout-grid";

‎packages/layout-grid/package.json

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "@material/react-layout-grid",
3+
"version": "0.0.0",
4+
"description": "Material Components React Layout Grid",
5+
"license": "MIT",
6+
"main": "dist/index.js",
7+
"keywords": [
8+
"mdc web react",
9+
"material components react",
10+
"material design",
11+
"material layout grid",
12+
"materiallayoutgrid"
13+
],
14+
"repository": {
15+
"type": "git",
16+
"url": "https://github.com/material-components/material-components-web-react.git"
17+
},
18+
"dependencies": {
19+
"@material/layout-grid": "^0.40.1",
20+
"classnames": "^2.2.5",
21+
"prop-types": "^15.6.1",
22+
"react": "^16.4.2"
23+
},
24+
"publishConfig": {
25+
"access": "public"
26+
}
27+
}

0 commit comments

Comments
 (0)