[Layout foundations] Add Tile component (#7092)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes #6898 <!-- link to issue if one exists -->

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

Adds a new alpha `Tile` component

<details>
      <summary><code>Tile</code> component preview</summary>
<img width="1032" alt="Screen Shot 2022-09-08 at 4 48 11 PM"
src="https://user-images.githubusercontent.com/59836805/189224294-93c54b0a-ba93-4651-88e8-3de3e76ad3c4.png">
    </details>

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';

import {Page, Tile, Box, Text} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <Tile spacing="3" columns="2">
        <Box background="surface" borderRadius="2" padding="5" shadow="card">
          <Text as="h2" variant="headingMd">
            Sales
          </Text>
          <Text as="p" variant="bodyMd">
            View a summary of your online store’s sales.
          </Text>
        </Box>
        <Box background="surface" borderRadius="2" padding="5" shadow="card">
          <Text as="h2" variant="headingMd">
            Sales
          </Text>
          <Text as="p" variant="bodyMd">
            View a summary of your online store’s sales.
          </Text>
        </Box>
        <Box background="surface" borderRadius="2" padding="5" shadow="card">
          <Text as="h2" variant="headingMd">
            Sales
          </Text>
          <Text as="p" variant="bodyMd">
            View a summary of your online store’s sales.
          </Text>
        </Box>
        <Box background="surface" borderRadius="2" padding="5" shadow="card">
          <Text as="h2" variant="headingMd">
            Sales
          </Text>
          <Text as="p" variant="bodyMd">
            View a summary of your online store’s sales.
          </Text>
        </Box>
      </Tile>
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Co-authored-by: Lo Kim <[email protected]>

Author: chazdean

polaris-react/src/components/Tile/Tile.scss

@@ -0,0 +1,7 @@
+@import '../../styles/common';
+
+.Tile {
+  display: grid;
+  grid-template-columns: var(--pc-tile-column-number);
+  gap: var(--pc-tile-spacing);
+}

polaris-react/src/components/Tile/Tile.stories.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import type {ComponentMeta} from '@storybook/react';
+import {Box, Tile, Text} from '@shopify/polaris';
+
+export default {
+  component: Tile,
+} as ComponentMeta<typeof Tile>;
+
+const styles = {
+  background: 'var(--p-surface)',
+  border: 'var(--p-border-base)',
+  borderRadius: 'var(--p-border-radius-2)',
+  padding: 'var(--p-space-4)',
+};
+
+const children = Array.from(Array(4)).map((ele, index) => (
+  <div key={index} style={styles}>
+    <Text as="h2" variant="headingMd">
+      Sales
+    </Text>
+    <Text as="p" variant="bodyMd">
+      View a summary of your online store’s sales.
+    </Text>
+  </div>
+));
+
+export function Default() {
+  return (
+    <Tile spacing="1" columns="2">
+      {children}
+    </Tile>
+  );
+}
+
+export function LargeSpacing() {
+  return (
+    <Tile spacing="10" columns="2">
+      {children}
+    </Tile>
+  );
+}
+
+export function ManyColumns() {
+  const children = Array.from(Array(10)).map((ele, index) => (
+    <div key={index} style={styles}>
+      <Text as="h2" variant="headingMd">
+        Sales
+      </Text>
+      <Text as="p" variant="bodyMd">
+        View a summary of your online store’s sales.
+      </Text>
+    </div>
+  ));
+
+  return (
+    <Tile spacing="3" columns="5">
+      {children}
+    </Tile>
+  );
+}

polaris-react/src/components/Tile/Tile.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import type {spacing} from '@shopify/polaris-tokens';
+
+import styles from './Tile.scss';
+
+type SpacingTokenName = keyof typeof spacing;
+
+// TODO: Bring this logic into tokens
+type Spacing = SpacingTokenName extends `space-${infer Scale}` ? Scale : never;
+
+type Columns =
+  | '1'
+  | '2'
+  | '3'
+  | '4'
+  | '5'
+  | '6'
+  | '7'
+  | '8'
+  | '9'
+  | '10'
+  | '11'
+  | '12';
+
+export interface TileProps {
+  /** Elements to display inside tile */
+  children: React.ReactNode;
+  /** Adjust spacing between elements */
+  spacing: Spacing;
+  /** Adjust number of columns */
+  columns: Columns;
+}
+
+export const Tile = ({children, spacing, columns}: TileProps) => {
+  const style = {
+    '--pc-tile-column-number': `repeat(${columns}, 1fr)`,
+    '--pc-tile-spacing': `var(--p-space-${spacing})`,
+  } as React.CSSProperties;
+
+  return (
+    <div className={styles.Tile} style={style}>
+      {children}
+    </div>
+  );
+};

polaris-react/src/components/Tile/index.ts

@@ -0,0 +1 @@
+export * from './Tile';

polaris-react/src/components/Tile/tests/Tile.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {mountWithApp} from 'tests/utilities';
+
+import {Tile} from '../Tile';
+
+const Children = () => <p>This is a tile</p>;
+
+describe('<Tile />', () => {
+  it('renders children', () => {
+    const tile = mountWithApp(
+      <Tile spacing="1" columns="1">
+        <Children />
+      </Tile>,
+    );
+
+    expect(tile).toContainReactComponent(Children);
+  });
+
+  it('uses custom properties when passed in', () => {
+    const tile = mountWithApp(
+      <Tile spacing="1" columns="2">
+        <Children />
+      </Tile>,
+    );
+
+    expect(tile).toContainReactComponent('div', {
+      style: {
+        '--pc-tile-column-number': 'repeat(2, 1fr)',
+        '--pc-tile-spacing': 'var(--p-space-1)',
+      } as React.CSSProperties,
+    });
+  });
+});

polaris-react/src/index.ts

@@ -366,6 +366,9 @@ export type {TextStyleProps} from './components/TextStyle';
 export {Thumbnail} from './components/Thumbnail';
 export type {ThumbnailProps} from './components/Thumbnail';
 
+export {Tile} from './components/Tile';
+export type {TileProps} from './components/Tile';
+
 export {Toast} from './components/Toast';
 export type {ToastProps} from './components/Toast';