[Layout foundations] Add layout components for alpha release

.changeset/fast-candles-approve.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': patch
+'polaris.shopify.com': patch
+---
+
+Updated `AlphaCard` border radius to a boolean

.changeset/few-ghosts-carry.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': patch
+'polaris.shopify.com': patch
+---
+
+Renamed `Columns` spacing

.changeset/fresh-dingos-press.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added alpha `Inline` component

.changeset/fuzzy-trainers-allow.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': patch
+'polaris.shopify.com': patch
+---
+
+Renamed `background` prop on `AlphaCard` for consistency

.changeset/good-mugs-share.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': patch
+'polaris.shopify.com': patch
+---
+
+Rename `Tiles` component

.changeset/green-cougars-sneeze.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': minor
+---
+
+Added alpha pages for `AlphaStack`, `Box`, `Columns`, `Inline`, and `Tile` components. Updated `StatusBanner` to capitalize status value.

.changeset/poor-kiwis-travel.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added `AlphaStack` component

.changeset/proud-pans-deliver.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added `Columns` component

.changeset/red-cycles-allow.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added `Box` component

.changeset/selfish-poets-lick.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': patch
+'polaris.shopify.com': patch
+---
+
+Renamed `AlphaCard` `shadow` prop

.changeset/shiny-feet-bake.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added `AlphaCard` component

.changeset/stale-penguins-love.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+'polaris.shopify.com': patch
+---
+
+Added `fullWidth` prop to `AlphaStack` and updated styleguide docs

.changeset/tall-socks-cover.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added alpha `ContentBlock` component

.changeset/three-games-cough.md

@@ -0,0 +1,7 @@
+---
+'@shopify/polaris': patch
+'@shopify/polaris-tokens': minor
+---
+
+Refactored token types in primitive Layout components
+Exposed `DepthShadowAlias` type

.changeset/witty-months-compare.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': minor
+---
+
+Added alpha page for `ContentBlock`

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import type {ComponentMeta} from '@storybook/react';
+import {AlphaCard, AlphaStack, Text} from '@shopify/polaris';
+
+export default {
+  component: AlphaCard,
+} as ComponentMeta<typeof AlphaCard>;
+
+export function Default() {
+  return (
+    <AlphaCard>
+      <AlphaStack spacing="5">
+        <Text as="h3" variant="headingMd">
+          Online store dashboard
+        </Text>
+        <p>View a summary of your online store’s performance.</p>
+      </AlphaStack>
+    </AlphaCard>
+  );
+}
+
+export function BackgroundSubdued() {
+  return (
+    <AlphaCard background="surface-subdued">
+      <AlphaStack spacing="5">
+        <Text as="h3" variant="headingMd">
+          Online store dashboard
+        </Text>
+        <p>View a summary of your online store’s performance.</p>
+      </AlphaStack>
+    </AlphaCard>
+  );
+}
+
+export function WithoutBorderRadius() {
+  return (
+    <AlphaCard hasBorderRadius={false}>
+      <AlphaStack spacing="5">
+        <Text as="h3" variant="headingMd">
+          Online store dashboard
+        </Text>
+        <p>View a summary of your online store’s performance.</p>
+      </AlphaStack>
+    </AlphaCard>
+  );
+}
+
+export function BorderRadiusRoundedAbove() {
+  return (
+    <AlphaCard roundedAbove="sm">
+      <AlphaStack spacing="5">
+        <Text as="h3" variant="headingMd">
+          Online store dashboard
+        </Text>
+        <p>View a summary of your online store’s performance.</p>
+      </AlphaStack>
+    </AlphaCard>
+  );
+}
+
+export function Flat() {
+  return (
+    <AlphaCard shadow="transparent">
+      <AlphaStack spacing="5">
+        <Text as="h3" variant="headingMd">
+          Online store dashboard
+        </Text>
+        <p>View a summary of your online store’s performance.</p>
+      </AlphaStack>
+    </AlphaCard>
+  );
+}

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

@@ -0,0 +1,57 @@
+import type {
+  BreakpointsAlias,
+  ColorsTokenName,
+  DepthShadowAlias,
+  ShapeBorderRadiusScale,
+  SpacingSpaceScale,
+} from '@shopify/polaris-tokens';
+import React from 'react';
+
+import {useBreakpoints} from '../../utilities/breakpoints';
+import {Box} from '../Box';
+
+type CardShadowTokensScale = Extract<DepthShadowAlias, 'card' | 'transparent'>;
+
+type CardBackgroundColorTokenScale = Extract<
+  ColorsTokenName,
+  'surface' | 'surface-subdued'
+>;
+
+export interface AlphaCardProps {
+  /** Elements to display inside card */
+  children?: React.ReactNode;
+  background?: CardBackgroundColorTokenScale;
+  hasBorderRadius?: boolean;
+  shadow?: CardShadowTokensScale;
+  padding?: SpacingSpaceScale;
+  roundedAbove?: BreakpointsAlias;
+}
+
+export const AlphaCard = ({
+  children,
+  background = 'surface',
+  hasBorderRadius: hasBorderRadiusProp = true,
+  shadow = 'card',
+  padding = '5',
+  roundedAbove,
+}: AlphaCardProps) => {
+  const breakpoints = useBreakpoints();
+  const defaultBorderRadius = '2' as ShapeBorderRadiusScale;
+
+  let hasBorderRadius = !roundedAbove && hasBorderRadiusProp;
+
+  if (roundedAbove && breakpoints[`${roundedAbove}Up`]) {
+    hasBorderRadius = true;
+  }
+
+  return (
+    <Box
+      background={background}
+      padding={padding}
+      shadow={shadow}
+      {...(hasBorderRadius && {borderRadius: defaultBorderRadius})}
+    >
+      {children}
+    </Box>
+  );
+};

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

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

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import {mountWithApp} from 'tests/utilities';
+import {matchMedia} from '@shopify/jest-dom-mocks';
+import {
+  BreakpointsTokenName,
+  breakpoints,
+  getMediaConditions,
+} from '@shopify/polaris-tokens';
+
+import {AlphaCard} from '..';
+
+const mediaConditions = getMediaConditions(breakpoints);
+
+const heading = <p>Online store dashboard</p>;
+const subheading = <p>View a summary of your online store performance</p>;
+
+describe('AlphaCard', () => {
+  beforeEach(() => {
+    matchMedia.mock();
+  });
+
+  afterEach(() => {
+    matchMedia.restore();
+  });
+
+  it('renders children', () => {
+    const alphaCard = mountWithApp(
+      <AlphaCard>
+        {heading}
+        {subheading}
+      </AlphaCard>,
+    );
+
+    expect(alphaCard).toContainReactComponentTimes('p', 2);
+  });
+
+  it('sets default border radius when roundedAbove breakpoint passed in', () => {
+    setMediaWidth('breakpoints-sm');
+    const alphaCard = mountWithApp(
+      <AlphaCard roundedAbove="sm">
+        {heading}
+        {subheading}
+      </AlphaCard>,
+    );
+
+    expect(alphaCard).toContainReactComponent('div', {
+      style: expect.objectContaining({
+        '--pc-box-border-radius-bottom-left': 'var(--p-border-radius-2)',
+        '--pc-box-border-radius-bottom-right': 'var(--p-border-radius-2)',
+        '--pc-box-border-radius-top-left': 'var(--p-border-radius-2)',
+        '--pc-box-border-radius-top-right': 'var(--p-border-radius-2)',
+      }),
+    });
+  });
+});
+
+function setMediaWidth(breakpointsTokenName: BreakpointsTokenName) {
+  const aliasDirectionConditions = Object.values(
+    mediaConditions[breakpointsTokenName],
+  );
+
+  jest.spyOn(window, 'matchMedia').mockImplementation((query) => ({
+    matches: aliasDirectionConditions.includes(query),
+    media: '',
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  }));
+}

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

@@ -0,0 +1,16 @@
+.AlphaStack {
+  display: flex;
+  flex-direction: column;
+  align-items: var(--pc-stack-align);
+  gap: var(--pc-stack-spacing);
+
+  > * {
+    max-width: 100%;
+  }
+}
+
+.fullWidth {
+  > * {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import type {ComponentMeta} from '@storybook/react';
+import {Badge, AlphaStack} from '@shopify/polaris';
+
+export default {
+  component: AlphaStack,
+} as ComponentMeta<typeof AlphaStack>;
+
+export function Default() {
+  return (
+    <AlphaStack>
+      <Badge>Paid</Badge>
+      <Badge>Processing</Badge>
+      <Badge>Fulfilled</Badge>
+      <Badge>Completed</Badge>
+    </AlphaStack>
+  );
+}
+
+export function Spacing() {
+  return (
+    <AlphaStack spacing="8">
+      <Badge>Paid</Badge>
+      <Badge>Processing</Badge>
+      <Badge>Fulfilled</Badge>
+      <Badge>Completed</Badge>
+    </AlphaStack>
+  );
+}
+
+export function AlignCenter() {
+  return (
+    <AlphaStack align="center">
+      <Badge>Paid</Badge>
+      <Badge>Processing</Badge>
+      <Badge>Fulfilled</Badge>
+      <Badge>Completed</Badge>
+    </AlphaStack>
+  );
+}
+
+export function AlignEnd() {
+  return (
+    <AlphaStack align="end">
+      <Badge>Paid</Badge>
+      <Badge>Processing</Badge>
+      <Badge>Fulfilled</Badge>
+      <Badge>Completed</Badge>
+    </AlphaStack>
+  );
+}
+
+export function FullWidthChildren() {
+  return (
+    <AlphaStack fullWidth>
+      <Badge>Paid</Badge>
+      <Badge>Processing</Badge>
+      <Badge>Fulfilled</Badge>
+      <Badge>Completed</Badge>
+    </AlphaStack>
+  );
+}