Component System: Add Grid Component (#28531)

* Add Grid Component for new Component System

* Update View and Grid exports

* Update Grid stories

* Add @testing-library/jest-dom for custom matchers (in particular, toHaveStyle)

* Update Grid tests to use toHaveStyle rather than snapshots

* Adjust alphabetical order of @testing-library/jest-dom

* Rename edge to spaced. Add unit test

* Add types for Grid

docs/manifest.json

@@ -965,6 +965,12 @@
 		"markdown_source": "../packages/components/src/form-token-field/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "Grid",
+		"slug": "grid",
+		"markdown_source": "../packages/components/src/grid/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "Guide",
 		"slug": "guide",

package.json

@@ -95,6 +95,7 @@
 		"@storybook/addon-storysource": "6.1.11",
 		"@storybook/addon-viewport": "6.1.11",
 		"@storybook/react": "6.1.11",
+		"@testing-library/jest-dom": "5.11.9",
 		"@testing-library/react": "11.2.2",
 		"@types/classnames": "2.2.10",
 		"@types/eslint": "6.8.0",

packages/components/src/grid/README.md

@@ -0,0 +1,78 @@
+# Grid
+
+`Grid` is a primitive layout component that can arrange content in a grid configuration.
+
+## Usage
+
+```jsx
+import {
+	__experientalGrid as Grid,
+	__experimentalView as View,
+} from '@wordpress/components';
+
+function Example() {
+	return (
+		<Grid columns={ 3 }>
+			<View>One</View>
+			<View>Two</View>
+			<View>Three</View>
+		</Grid>
+	);
+}
+```
+
+## Props
+
+##### align
+
+**Type**: `CSS['alignItems']`
+
+Adjusts the block alignment of children.
+
+##### alignment
+
+**Type**: `GridAlignment`
+
+Adjusts the horizontal and vertical alignment of children.
+
+##### columns
+
+**Type**: `number`,`(number`,`null)[]`
+
+Adjusts the number of columns of the `Grid`.
+
+##### gap
+
+**Type**: `number`
+
+Gap between each child.
+
+##### isInline
+
+**Type**: `boolean`
+
+Changes the CSS display from `grid` to `inline-grid`.
+
+##### justify
+
+**Type**: `CSS['justifyContent']`
+
+Adjusts the inline alignment of children.
+
+##### rows
+
+**Type**: `number`,`(number`,`null)[]`
+
+Adjusts the number of rows of the `Grid`.
+
+##### templateColumns
+
+**Type**: `CSS['gridTemplateColumns']`
+
+Adjusts the CSS grid `template-columns`.
+
+##### templateRows
+
+**Type**: `CSS['gridTemplateRows']`
+
+Adjusts the CSS grid `template-rows`.

packages/components/src/grid/grid-utils.js

@@ -0,0 +1,19 @@
+const ALIGNMENTS = {
+	bottom: { alignItems: 'flex-end', justifyContent: 'center' },
+	bottomLeft: { alignItems: 'flex-start', justifyContent: 'flex-end' },
+	bottomRight: { alignItems: 'flex-end', justifyContent: 'flex-end' },
+	center: { alignItems: 'center', justifyContent: 'center' },
+	spaced: { alignItems: 'center', justifyContent: 'space-between' },
+	left: { alignItems: 'center', justifyContent: 'flex-start' },
+	right: { alignItems: 'center', justifyContent: 'flex-end' },
+	stretch: { alignItems: 'stretch' },
+	top: { alignItems: 'flex-start', justifyContent: 'center' },
+	topLeft: { alignItems: 'flex-start', justifyContent: 'flex-start' },
+	topRight: { alignItems: 'flex-start', justifyContent: 'flex-end' },
+};
+
+export function getAlignmentProps( alignment ) {
+	const alignmentProps = ALIGNMENTS[ alignment ] || {};
+
+	return alignmentProps;
+}

packages/components/src/grid/grid.js

@@ -0,0 +1,37 @@
+/**
+ * Internal dependencies
+ */
+import { createComponent } from '../utils/create-component';
+import { useGrid } from './use-grid';
+
+/**
+ * `Grid` is a primitive layout component that can arrange content in a grid configuration.
+ *
+ * @example
+ * ```jsx
+ * import { __experimentalGrid as Grid } from `@wordpress/components`
+ *
+ * function Example() {
+ *   return (
+ *     <Grid columns={3}>
+ *       <View>
+ *         One
+ *       </View>
+ *       <View>
+ *         Two
+ *       </View>
+ *       <View>
+ *         Three
+ *       </View>
+ *     </Grid>
+ *   );
+ * }
+ * ```
+ */
+const Grid = createComponent( {
+	as: 'div',
+	useHook: useGrid,
+	name: 'Grid',
+} );
+
+export default Grid;

packages/components/src/grid/index.js

@@ -0,0 +1,2 @@
+export { default } from './grid';
+export * from './use-grid';

packages/components/src/grid/stories/index.js

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { number } from '@storybook/addon-knobs';
+
+/**
+ * Internal dependencies
+ */
+import View from '../../view';
+import Grid from '../index';
+
+export default {
+	component: Grid,
+	title: 'Components/Grid',
+};
+
+const Item = ( props ) => (
+	<View
+		css={ {
+			borderRadius: 8,
+			background: '#eee',
+			padding: 8,
+			textAlign: 'center',
+		} }
+		{ ...props }
+	/>
+);
+
+export const _default = () => {
+	const props = {
+		columns: number( 'columns', 4 ),
+		gap: number( 'gap', 2 ),
+	};
+	return (
+		<Grid alignment="bottom" { ...props }>
+			<Item>One</Item>
+			<Item>Two</Item>
+			<Item>Three</Item>
+			<Item>Four</Item>
+			<Item>Five</Item>
+			<Item>Six</Item>
+			<Item>Seven</Item>
+			<Item>Eight</Item>
+		</Grid>
+	);
+};