[Layout foundations] Add alpha ContentBlock component

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

@@ -0,0 +1,11 @@
+.ContentBlock {
+  margin: 0 auto;
+}
+
+.medium {
+  max-width: 41.375rem;
+}
+
+.large {
+  max-width: 62.375rem;
+}

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import type {ComponentMeta} from '@storybook/react';
+import {ContentBlock, Box, Text} from '@shopify/polaris';
+
+export default {
+  component: ContentBlock,
+} as ComponentMeta<typeof ContentBlock>;
+
+const placeHolder = {
+  background: 'var(--p-background-selected)',
+  borderRadius: 'var(--p-border-radius-05)',
+  border: '1px solid var(--p-surface-dark)',
+  padding: 'var(--p-space-4)',
+  width: '100%',
+  height: 'var(--p-space-32)',
+};
+
+export function Medium() {
+  return (
+    <ContentBlock width="medium">
+      <Box background="surface" borderRadius="2" padding="5" shadow="card">
+        <Text variant="bodySm" as="h3" alignment="center">
+          medium
+        </Text>
+      </Box>
+    </ContentBlock>
+  );
+}
+
+export function Large() {
+  return (
+    <ContentBlock width="large">
+      <Box background="surface" borderRadius="2" padding="5" shadow="card">
+        <Text variant="bodySm" as="h3" alignment="center">
+          large
+        </Text>
+      </Box>
+    </ContentBlock>
+  );
+}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import {classNames} from '../../utilities/css';
+
+import styles from './ContentBlock.scss';
+
+type Width = 'medium' | 'large';
+
+export interface ContentBlockProps {
+  /** Elements to display inside container */
+  children?: React.ReactNode;
+  /** Adjust maximum width of container */
+  width: Width;
+}
+
+export const ContentBlock = ({children, width}: ContentBlockProps) => {
+  const className = classNames(styles.ContentBlock, styles[width]);
+
+  return <div className={className}>{children}</div>;
+};

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

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

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import {mountWithApp} from 'tests/utilities';
+
+import {ContentBlock} from '../ContentBlock';
+
+const text = 'This is a stack';
+const children = <p>{text}</p>;
+
+describe('<ContentBlock />', () => {
+  it('renders children', () => {
+    const contentBlock = mountWithApp(
+      <ContentBlock width="medium">{children}</ContentBlock>,
+    );
+
+    expect(contentBlock).toContainReactComponent('p', {children: text});
+  });
+
+  it('renders custom properties', () => {
+    const contentBlock = mountWithApp(
+      <ContentBlock width="large">{children}</ContentBlock>,
+    );
+
+    expect(contentBlock).toContainReactComponent('div', {
+      className: expect.stringContaining('large'),
+    });
+  });
+});

polaris-react/src/index.ts

@@ -128,6 +128,9 @@ export type {ComboboxProps} from './components/Combobox';
 export {Connected} from './components/Connected';
 export type {ConnectedProps} from './components/Connected';
 
+export {ContentBlock} from './components/ContentBlock';
+export type {ContentBlockProps} from './components/ContentBlock';
+
 export {ContextualSaveBar} from './components/ContextualSaveBar';
 export type {ContextualSaveBarProps} from './components/ContextualSaveBar';
 

polaris.shopify.com/content/components/content-block/index.md

@@ -0,0 +1,15 @@
+---
+title: Content block
+description: Use to create a container that centers and sets the maximum width of the content within.
+category: Structure
+keywords:
+  - layout
+status:
+  value: Alpha
+  message: This component is in development. There could be breaking changes made to it in a non-major release of Polaris. Please use with caution.
+examples:
+  - fileName: content-block-width.tsx
+    title: Width
+    description: >-
+      Use to set maximum width.
+---

polaris.shopify.com/pages/examples/content-block-width.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {ContentBlock, Box, Text} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+function ContentBlockWidthExample() {
+  return (
+    <div style={{width: '500px'}}>
+      <ContentBlock width="medium">
+        <Box background="surface" borderRadius="2" padding="5" shadow="card">
+          <Text variant="bodySm" as="h3" alignment="center">
+            medium
+          </Text>
+        </Box>
+      </ContentBlock>
+      <br />
+      <ContentBlock width="large">
+        <Box background="surface" borderRadius="2" padding="5" shadow="card">
+          <Text variant="bodySm" as="h3" alignment="center">
+            large
+          </Text>
+        </Box>
+      </ContentBlock>
+    </div>
+  );
+}
+
+export default withPolarisExample(ContentBlockWidthExample);