@boostdev/design-system-components 2.1.0 → 2.2.0

package/src/components/layout/Grid/GridItem.tsx

@@ -0,0 +1,150 @@
+import {
+  ElementType,
+  ComponentPropsWithoutRef,
+  CSSProperties,
+  useContext,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import css from './Grid.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
+import { GridContext } from './Grid';
+import {
+  aspectToColumnSpan,
+  findMediaChild,
+  mediaReadyEvent,
+  readMediaAspect,
+  type AutoSpanResult,
+} from './autoSpan';
+
+export type GridItemSpanValue =
+  | 'full'
+  | 'three-quarters'
+  | 'two-thirds'
+  | 'half'
+  | 'one-third'
+  | 'one-quarter'
+  | 'auto'
+  | number;
+
+export const GridItemSpan = {
+  full: 'full',
+  threeQuarters: 'three-quarters',
+  twoThirds: 'two-thirds',
+  half: 'half',
+  oneThird: 'one-third',
+  oneQuarter: 'one-quarter',
+  auto: 'auto',
+} as const satisfies Record<string, GridItemSpanValue>;
+
+const SPAN_VAR: Record<Exclude<GridItemSpanValue, number | 'auto'>, string> = {
+  full: 'var(--bds-grid_span-100)',
+  'three-quarters': 'span var(--bds-grid_columns-75)',
+  'two-thirds': 'span var(--bds-grid_columns-66)',
+  half: 'span var(--bds-grid_columns-50)',
+  'one-third': 'span var(--bds-grid_columns-33)',
+  'one-quarter': 'span var(--bds-grid_columns-25)',
+};
+
+function resolveSpan(value: Exclude<GridItemSpanValue, 'auto'>): string {
+  if (typeof value === 'number') return `span ${value}`;
+  return SPAN_VAR[value];
+}
+
+type GridItemOwnProps = WithClassName & {
+  columnSpan?: GridItemSpanValue;
+  rowSpan?: number;
+  startColumn?: number;
+  endColumn?: number;
+  as?: ElementType;
+};
+
+type GridItemProps<C extends ElementType = 'div'> = GridItemOwnProps &
+  Omit<ComponentPropsWithoutRef<C>, keyof GridItemOwnProps>;
+
+export function GridItem<C extends ElementType = 'div'>({
+  children,
+  className,
+  columnSpan,
+  rowSpan,
+  startColumn,
+  endColumn,
+  as,
+  style,
+  ...rest
+}: GridItemProps<C>) {
+  const { autoSpanMedia } = useContext(GridContext);
+  const effectiveSpan: GridItemSpanValue =
+    columnSpan ?? (autoSpanMedia ? 'auto' : 'full');
+
+  const ref = useRef<HTMLElement | null>(null);
+  const [autoSpan, setAutoSpan] = useState<AutoSpanResult>('one-quarter');
+
+  useLayoutEffect(() => {
+    if (effectiveSpan !== 'auto') return;
+    const el = ref.current;
+    if (!el) return;
+
+    let cancelled = false;
+    let cleanup: (() => void) | undefined;
+
+    const resolve = () => {
+      if (cancelled) return;
+      const media = findMediaChild(el);
+      if (!media) {
+        setAutoSpan('one-quarter');
+        return;
+      }
+      const aspect = readMediaAspect(media);
+      if (aspect !== null) {
+        setAutoSpan(aspectToColumnSpan(aspect));
+        return;
+      }
+      const event = mediaReadyEvent(media);
+      if (!event) {
+        setAutoSpan('one-quarter');
+        return;
+      }
+      const handler = () => {
+        const a = readMediaAspect(media);
+        if (a !== null) setAutoSpan(aspectToColumnSpan(a));
+      };
+      media.addEventListener(event, handler, { once: true });
+      cleanup = () => media.removeEventListener(event, handler);
+    };
+
+    resolve();
+
+    return () => {
+      cancelled = true;
+      cleanup?.();
+    };
+  }, [effectiveSpan, children]);
+
+  const hasExplicitRange = startColumn !== undefined || endColumn !== undefined;
+
+  const gridColumn = hasExplicitRange
+    ? `${startColumn ?? 'auto'} / ${endColumn ?? 'auto'}`
+    : resolveSpan(effectiveSpan === 'auto' ? autoSpan : effectiveSpan);
+
+  const composedStyle: CSSProperties = {
+    ...(style as CSSProperties),
+    gridColumn,
+    ...(rowSpan !== undefined ? { gridRow: `span ${rowSpan}` } : {}),
+  };
+
+  const Component = as ?? 'div';
+
+  return (
+    <Component
+      ref={ref as never}
+      {...rest}
+      className={cn(css.item, className)}
+      style={composedStyle}
+    >
+      {children}
+    </Component>
+  );
+}

package/src/components/layout/Grid/autoSpan.ts

@@ -0,0 +1,77 @@
+/**
+ * `columnSpan="auto"` support — derives a column span from the intrinsic aspect
+ * ratio of the first `<img>` or `<video>` child of a GridItem.
+ *
+ * Framework-agnostic: pure functions, used by both the React `GridItem` and the
+ * `bds-grid-item` web component. No layout reflow — reads `naturalWidth/Height`
+ * on images and `videoWidth/videoHeight` on videos, both of which are cached
+ * DOM properties that resolve once the media's metadata is available.
+ */
+
+export type AutoSpanResult =
+  | 'full'
+  | 'three-quarters'
+  | 'half'
+  | 'one-quarter';
+
+/**
+ * Map a width-to-height ratio to a named column span.
+ *
+ * Ratios were chosen for photography conventions:
+ *   • 3:2 / 16:9 landscape → `half`           (1.5 < r ≤ 2.2)
+ *   • 21:9 / 2.35:1 / 2.4:1 / 2.5:1 → `three-quarters` (2.2 < r ≤ 3.5)
+ *   • 32:9 / hard pano → `full`               (r > 3.5)
+ *   • Portrait, square, or unknown → `one-quarter` (r ≤ 1.5)
+ *
+ * Returns `one-quarter` for invalid/non-positive ratios so layout stays stable
+ * when metadata isn't yet resolved.
+ */
+export function aspectToColumnSpan(ratio: number): AutoSpanResult {
+  if (!Number.isFinite(ratio) || ratio <= 0) return 'one-quarter';
+  if (ratio > 3.5) return 'full';
+  if (ratio > 2.2) return 'three-quarters';
+  if (ratio > 1.5) return 'half';
+  return 'one-quarter';
+}
+
+/**
+ * Find the first `<img>` or `<video>` descendant of `root`. Returns `null`
+ * if none. Only descends the light DOM; shadow content is opaque by design.
+ */
+export function findMediaChild(
+  root: HTMLElement,
+): HTMLImageElement | HTMLVideoElement | null {
+  return root.querySelector('img, video');
+}
+
+/**
+ * Read the intrinsic aspect ratio (width / height) of an image or video.
+ * Returns `null` if the intrinsic dimensions haven't resolved yet — consumers
+ * should subscribe to `load` (images) or `loadedmetadata` (video) and retry.
+ */
+export function readMediaAspect(
+  media: HTMLImageElement | HTMLVideoElement,
+): number | null {
+  if (media instanceof HTMLImageElement) {
+    if (media.naturalWidth > 0 && media.naturalHeight > 0) {
+      return media.naturalWidth / media.naturalHeight;
+    }
+    return null;
+  }
+  if (media.videoWidth > 0 && media.videoHeight > 0) {
+    return media.videoWidth / media.videoHeight;
+  }
+  return null;
+}
+
+/**
+ * Returns the name of the event the given media element fires when its
+ * intrinsic dimensions become available.
+ */
+export function mediaReadyEvent(
+  media: HTMLImageElement | HTMLVideoElement,
+): 'load' | 'loadedmetadata' | null {
+  if (media instanceof HTMLImageElement) return media.complete ? null : 'load';
+  if (media.readyState < 1 /* HAVE_METADATA */) return 'loadedmetadata';
+  return null;
+}

package/src/components/layout/Grid/index.ts

@@ -0,0 +1,4 @@
+export { Grid } from './Grid';
+export type { GridVariant } from './Grid';
+export { GridItem, GridItemSpan } from './GridItem';
+export type { GridItemSpanValue } from './GridItem';

package/src/components/layout/Grid/masonry.ts

@@ -0,0 +1,134 @@
+import { RefObject, useLayoutEffect } from 'react';
+
+/**
+ * Masonry layout polyfill based on CSS Grid Layout Module Level 3 (a.k.a. "grid-lanes").
+ * https://www.w3.org/TR/css-grid-3/ · https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Masonry_layout
+ *
+ * Implementation strategy — row-span packing:
+ *   1. Override the container to `grid-auto-rows: 1px` + `row-gap: 0`. The
+ *      author-intended row gap is baked into each item's span instead of
+ *      being applied between rows — that way the ceil() rounding can only
+ *      overshoot by <1px per item, so visual gaps stay uniform.
+ *   2. Set `grid-auto-flow: dense` so items backfill into the earliest empty
+ *      slot — this is what produces the masonry effect when items have
+ *      variable heights.
+ *   3. For each child: measure its natural height H, then set
+ *      `grid-row-end: span ceil(H + targetGap)`. The last `targetGap` pixels
+ *      of each item's cell are empty, which renders as the visual gap below
+ *      the item.
+ *
+ * Items stay in normal document flow — no `position: absolute`. CSS Grid handles
+ * column-track sizing (including the foundation's responsive `--bds-grid_*` tokens),
+ * column spans, and definite placements; the polyfill only supplies the row-span.
+ * Column gap is left untouched; only row gap is subsumed into spans.
+ *
+ * When the browser supports the native `display: grid-lanes` or
+ * `grid-template-rows: masonry` value, the polyfill yields to CSS.
+ */
+
+const ROW_UNIT_PX = 1;
+
+export function supportsNativeMasonry(): boolean {
+  if (typeof CSS === 'undefined' || typeof CSS.supports !== 'function') return false;
+  return (
+    CSS.supports('display', 'grid-lanes') ||
+    CSS.supports('grid-template-rows', 'masonry')
+  );
+}
+
+export function applyMasonryLayout(container: HTMLElement, rawChildren: HTMLElement[]): void {
+  // We override row-gap to 0, so reading it back would always give 0 on re-runs.
+  // Read column-gap instead — `.grid` sets both via the `gap` shorthand and the
+  // polyfill never touches column-gap. (If a consumer sets asymmetric gaps, the
+  // row spacing falls back to the column value — a reasonable compromise.)
+  const cs = window.getComputedStyle(container);
+  const targetGap = parseFloat(cs.columnGap) || 0;
+
+  container.style.gridAutoRows = `${ROW_UNIT_PX}px`;
+  container.style.rowGap = '0px';
+  container.style.gridAutoFlow = 'dense';
+
+  const children = rawChildren.filter(
+    (el) => el.nodeType === 1 && window.getComputedStyle(el).display !== 'none',
+  );
+
+  // Pass 1 — clear prior row-span overrides so items measure at their natural height.
+  for (const child of children) {
+    child.style.gridRow = '';
+    child.style.gridRowStart = '';
+    child.style.gridRowEnd = '';
+  }
+
+  // Pass 2 — read all heights in a tight loop. The first offsetHeight read forces one
+  // reflow; subsequent reads are cached until the next style write. This avoids the
+  // O(N) forced-reflow cost of a read-then-write loop.
+  const heights = children.map((child) => child.offsetHeight);
+
+  // Pass 3 — batch all row-span writes. No reads in between, so the browser can
+  // coalesce style invalidation and do layout once for the whole batch.
+  for (let i = 0; i < children.length; i++) {
+    const span = Math.max(1, Math.ceil(heights[i] + targetGap));
+    children[i].style.gridRowEnd = `span ${span}`;
+  }
+}
+
+export function clearMasonryLayout(container: HTMLElement, rawChildren: HTMLElement[]): void {
+  container.style.gridAutoRows = '';
+  container.style.gridAutoFlow = '';
+  container.style.rowGap = '';
+  for (const child of rawChildren) {
+    if (child.nodeType !== 1) continue;
+    child.style.gridRow = '';
+    child.style.gridRowStart = '';
+    child.style.gridRowEnd = '';
+  }
+}
+
+/**
+ * React hook that runs the polyfill against `ref.current` and re-runs on
+ * size / mutation changes. No-op when `enabled` is false or when the browser
+ * natively supports masonry.
+ */
+export function useMasonry(ref: RefObject<HTMLElement | null>, enabled: boolean): void {
+  useLayoutEffect(() => {
+    const container = ref.current;
+    if (!container || !enabled) return;
+    if (supportsNativeMasonry()) return;
+
+    let frame = 0;
+    const schedule = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        applyMasonryLayout(container, Array.from(container.children) as HTMLElement[]);
+      });
+    };
+
+    schedule();
+
+    const ro =
+      typeof ResizeObserver !== 'undefined' ? new ResizeObserver(schedule) : null;
+    if (ro) {
+      // Observe each child's size, not the container — re-running when the container
+      // resizes causes a feedback loop (we set grid-auto-rows, which changes container
+      // block-size, which fires the observer). Child-size changes are what we actually
+      // need to respond to.
+      for (const child of Array.from(container.children)) ro.observe(child);
+    }
+
+    const mo =
+      typeof MutationObserver !== 'undefined'
+        ? new MutationObserver(() => {
+            if (ro) for (const child of Array.from(container.children)) ro.observe(child);
+            schedule();
+          })
+        : null;
+    mo?.observe(container, { childList: true });
+
+    return () => {
+      cancelAnimationFrame(frame);
+      ro?.disconnect();
+      mo?.disconnect();
+      clearMasonryLayout(container, Array.from(container.children) as HTMLElement[]);
+    };
+  }, [ref, enabled]);
+}

package/src/index.ts

@@ -67,6 +67,8 @@ export { Textarea } from './components/interaction/form/Textarea';
 export { ButtonContainer, ButtonGroup } from './components/layout/ButtonGroup';
 export type { ButtonContainerProps, ButtonGroupProps } from './components/layout/ButtonGroup';
 export { Card } from './components/layout/Card';
+export { Grid, GridItem, GridItemSpan } from './components/layout/Grid';
+export type { GridVariant, GridItemSpanValue } from './components/layout/Grid';
 export { SectionHeader } from './components/layout/SectionHeader';
 export { IconWrapper } from './components/layout/IconWrapper';
 export type { IconWrapperProps } from './components/layout/IconWrapper';

package/src/web-components/index.ts

@@ -58,6 +58,10 @@ export { BdsDescriptionList } from './ui/bds-description-list';
 export { BdsBreadcrumb } from './ui/bds-breadcrumb';
 export { BdsLink } from './ui/bds-link';
 
+// Phase 8 — layout primitives
+export { BdsGrid } from './layout/bds-grid';
+export { BdsGridItem } from './layout/bds-grid-item';
+
 // Phase 8 — complete parity with React library
 export { BdsButtonGroup } from './ui/bds-button-group';
 export { BdsTable } from './ui/bds-table';

package/src/web-components/layout/BdsGrid.mdx

@@ -0,0 +1,210 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsGrid.stories';
+
+<Meta of={Stories} />
+
+# &lt;bds-grid&gt;
+
+Framework-agnostic Grid layout custom element. Built on the `@boostdev/design-system-foundation` grid tokens.
+
+> **Status: experimental** — API may change before stable release.
+
+## Installation
+
+```js
+import '@boostdev/design-system-components/web-components';
+```
+
+## Variants
+
+| Variant  | Use case                                                                                 |
+| -------- | ---------------------------------------------------------------------------------------- |
+| `main`   | Default. Responsive content-block grid matching the Figma main grid.                     |
+| `page`   | Single-column full-width grid. Use at page root.                                          |
+| `funnel` | Narrow variant of `main`; capped at `--bds-container_max-width--narrow` (48rem).          |
+| `custom` | Explicit column count via the `columns` attribute. Not responsive — use sparingly.        |
+
+## Responsive behavior
+
+`main` and `funnel` inherit the foundation's column ladder automatically. Named `column-span` values adapt across breakpoints so no media queries are required in consumer code:
+
+| Viewport          | Total columns | `one-quarter` | `one-third` | `half` | `two-thirds` | `three-quarters` | `full` |
+| ----------------- | ------------- | ------------- | ----------- | ------ | ------------ | ---------------- | ------ |
+| mobile (< 48rem)  | 4             | 4             | 4           | 4      | 4            | 4                | 4      |
+| tablet (≥ 48rem)  | 8             | 4             | 4           | 4      | 4            | 8                | 8      |
+| desktop (≥ 60rem) | 12            | 3             | 4           | 6      | 8            | 9                | 12     |
+
+Numeric `column-span="n"` is literal — it does not adapt. Use named values for responsive behavior.
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Attributes
+
+| Attribute         | Type                                           | Default  | Description                                        |
+| ----------------- | ---------------------------------------------- | -------- | -------------------------------------------------- |
+| `variant`         | `"main" \| "page" \| "funnel" \| "custom"`     | `"main"` | Grid type                                          |
+| `columns`         | number                                         | —        | Column count (only for `variant="custom"`)         |
+| `is-centered`     | boolean                                        | `false`  | Caps max-width via `--bds-container_max-width`     |
+| `is-masonry`      | boolean                                        | `false`  | Enables masonry layout (CSS Grid Level 3 "grid-lanes"). Uses native CSS when supported, otherwise runs a JS polyfill. |
+| `auto-span-media` | boolean                                        | `false`  | Child `<bds-grid-item>`s without an explicit `column-span` resolve their span from the intrinsic aspect ratio of their first `<img>`/`<video>` descendant. See [Aspect-ratio auto-span](#aspect-ratio-auto-span). |
+
+## Slots
+
+| Slot        | Description                                  |
+| ----------- | -------------------------------------------- |
+| `(default)` | Grid content; typically `<bds-grid-item>` children |
+
+## CSS custom properties
+
+| Property          | Default                   | Description                                |
+| ----------------- | ------------------------- | ------------------------------------------ |
+| `--grid_gap`      | `var(--bds-grid_gap)`     | Gap between grid items                     |
+| `--grid_columns`  | `4`                       | Column count for `variant="custom"`        |
+
+## Usage in plain HTML
+
+```html
+<bds-grid variant="main">
+  <bds-grid-item column-span="half">A</bds-grid-item>
+  <bds-grid-item column-span="half">B</bds-grid-item>
+</bds-grid>
+```
+
+## Nesting
+
+Grids can nest. A `variant="page"` inside another grid uses `grid-column: 1 / -1` so nested page grids always occupy the full width of their container.
+
+```html
+<bds-grid variant="main">
+  <bds-grid-item column-span="full">
+    <bds-grid variant="page">…</bds-grid>
+  </bds-grid-item>
+</bds-grid>
+```
+
+## Accessibility
+
+`<bds-grid>` is purely presentational — no implicit ARIA role. Wrap in a landmark (`<main>`, `<section>`) if one applies. The grid does not manage focus order; source order drives reading order and should match the visual flow.
+
+## Masonry layout
+
+Set `is-masonry` on any `<bds-grid>` to enable masonry (a.k.a. Pinterest-style) layout. Items flow into whichever track currently has the most room, removing the ragged gaps a standard grid leaves when items have uneven heights.
+
+```html
+<bds-grid is-masonry>
+  <bds-grid-item column-span="one-quarter">…</bds-grid-item>
+  <bds-grid-item column-span="one-quarter">…</bds-grid-item>
+</bds-grid>
+```
+
+### When to use
+
+- Image/card galleries with heterogenous heights.
+- Feeds/moodboards where uniform-height tiles would look wrong.
+
+### When NOT to use
+
+- Layouts where the visual order must match reading/tab order. `grid-auto-flow: dense` can backfill an item into an earlier visual slot than its DOM position suggests. Keep DOM order meaningful.
+- Fixed-height cards — a standard grid is simpler and has no JS dependency.
+- Row-aligned layouts (comparison tables).
+
+### How it works
+
+Targets [CSS Grid Layout Module Level 3](https://www.w3.org/TR/css-grid-3/) ("grid lanes"):
+
+- **Native path** — when the browser supports `display: grid-lanes` or `grid-template-rows: masonry`, CSS handles everything and the polyfill short-circuits.
+- **Polyfill path** — row-span packing: the container collapses to a 1 px row track with `grid-auto-flow: dense`, and each item is given `grid-row-end: span ceil(height + gap)`. Items stay in **normal flow** (no absolute positioning), so surrounding content lays out correctly around the grid.
+
+Re-runs on child size changes (`ResizeObserver` on each child) and child addition/removal (`MutationObserver` on the host). The container itself is not observed to avoid a feedback loop — setting row-spans changes the container's block-size.
+
+### Span behavior in masonry
+
+- `column-span` works normally — wider items span more columns. Use this to make a hero or panorama stand out.
+- `row-span` is **ignored**. The stacking axis has no rows to span.
+- `start-column` / `end-column` still apply for definite placement.
+
+### Performance
+
+- Initial layout is one measure pass + one write pass (heights are batched to avoid per-item reflows).
+- Re-layout is scheduled via `requestAnimationFrame` so bursts of observer callbacks coalesce into a single run per frame.
+- Row-gap is baked into each item's span, so ceil-rounding only introduces sub-pixel overshoot per item — not visible in practice.
+
+### Accessibility
+
+Masonry does not change semantics — DOM order is preserved. Because visual order can differ from DOM order, **do not rely on visual order for screen-reader reading order**. Structure content so it makes sense top-to-bottom in the DOM.
+
+## Aspect-ratio auto-span
+
+For galleries mixing portrait, landscape, and panoramic media, set `auto-span-media` on `<bds-grid>` and each `<bds-grid-item>` without a `column-span` attribute will derive its span from the intrinsic aspect ratio of its first `<img>` or `<video>` descendant.
+
+```html
+<bds-grid is-masonry auto-span-media>
+  <bds-grid-item><img src="/portrait.jpg" alt=""></bds-grid-item>
+  <bds-grid-item><img src="/landscape.jpg" alt=""></bds-grid-item>
+  <bds-grid-item><img src="/panorama.jpg" alt=""></bds-grid-item>
+</bds-grid>
+```
+
+Individual items can opt out with an explicit `column-span` (e.g. `column-span="full"` for a hero that shouldn't be auto-sized) or opt in explicitly with `column-span="auto"` when the parent grid doesn't set `auto-span-media`.
+
+### Thresholds
+
+| Aspect ratio (w ÷ h) | Resolved span       | Typical source                    |
+| -------------------- | ------------------- | --------------------------------- |
+| ≤ 1.5                | `'one-quarter'`     | Portrait, square, 3:2 portrait    |
+| > 1.5 and ≤ 2.2      | `'half'`            | 16:9, 3:2 landscape, 2:1          |
+| > 2.2 and ≤ 3.5      | `'three-quarters'`  | 21:9, 2.35:1, 2.5:1 (cinematic)   |
+| > 3.5                | `'full'`            | 32:9, hard panoramic              |
+| invalid / unresolved | `'one-quarter'`     | No media / metadata not yet ready |
+
+Named-span responsive behavior still applies — on mobile every item collapses to full-width regardless of its resolved span.
+
+### Loading behavior
+
+Dimensions are read from `img.naturalWidth/naturalHeight` and `video.videoWidth/videoHeight` — no layout is triggered. If metadata is not yet available when the element upgrades, the item starts at `'one-quarter'` and re-resolves when the `load` (image) or `loadedmetadata` (video) event fires. Subsequent slot mutations re-run the resolver.
+
+### When NOT to use auto-span
+
+- Items whose span reflects **content importance** rather than media shape — set `column-span` explicitly.
+- Non-media grids — every item falls back to `'one-quarter'` because there's no aspect to read.
+- Galleries where all images share the same aspect — the thresholds won't differentiate them; a uniform explicit span is simpler.
+
+## Framework equivalents
+
+| React                   | Web component              |
+| ----------------------- | -------------------------- |
+| `<Grid>` / `<GridItem>` | `<bds-grid>` / `<bds-grid-item>` |
+
+## Examples
+
+### Main grid
+<Canvas of={Stories.Main} />
+
+### Page grid
+<Canvas of={Stories.Page} />
+
+### Funnel
+<Canvas of={Stories.Funnel} />
+
+### Custom
+<Canvas of={Stories.Custom} />
+
+### Centered
+<Canvas of={Stories.Centered} />
+
+### Spans
+<Canvas of={Stories.Spans} />
+
+### Start / end (escape hatch)
+<Canvas of={Stories.StartEnd} />
+
+### Complex layout
+<Canvas of={Stories.ComplexLayout} />
+
+### Masonry
+<Canvas of={Stories.Masonry} />
+
+### Masonry with spans
+<Canvas of={Stories.MasonryWithSpans} />