@thewhatmatters/wmds 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/CONSUMING.md +4 -4
- package/README.md +3 -3
- package/dist/styles.css +1 -1
- package/docs/component-contracts.md +1 -1
- package/docs/components.md +6 -6
- package/docs/exports.json +1 -13
- package/docs/patterns/components-avatar--dropdown-row.tsx +1 -1
- package/docs/patterns/components-badge--with-avatar.tsx +1 -1
- package/docs/patterns/components-button-button--destructive-action.tsx +1 -1
- package/docs/patterns/components-button-button--ghost-action.tsx +1 -1
- package/docs/patterns/components-button-button--inverse-action.tsx +1 -1
- package/docs/patterns/components-button-button--link-render.tsx +1 -1
- package/docs/patterns/components-button-button--multi-state-badge.tsx +1 -1
- package/docs/patterns/components-button-button--outline-mono.tsx +1 -1
- package/docs/patterns/components-button-button--primary-action.tsx +1 -1
- package/docs/patterns/components-button-button--row-hug.tsx +1 -1
- package/docs/patterns/components-button-button--row-layout.tsx +1 -1
- package/docs/patterns/components-button-button--secondary-action.tsx +1 -1
- package/docs/patterns/components-button-button--suggestion-pills.tsx +1 -1
- package/docs/patterns/components-button-button--with-count.tsx +1 -1
- package/docs/patterns/components-button-button--with-icon.tsx +1 -1
- package/docs/patterns/components-button-floatingactionbutton--vertical-actions.tsx +1 -1
- package/docs/patterns/components-calembed--pattern-skip-in-footer.tsx +1 -1
- package/docs/patterns/components-card-card--body-slot-occupancy-history.tsx +1 -1
- package/docs/patterns/components-card-card--headerless-media.tsx +1 -1
- package/docs/patterns/components-card-card--outlined-layout.tsx +1 -1
- package/docs/patterns/components-card-card--pinned-height.tsx +1 -1
- package/docs/patterns/components-card-selectablecard--selectable-cards-pattern.tsx +1 -1
- package/docs/patterns/components-chart--audience-activity-heatmap.tsx +1 -1
- package/docs/patterns/components-chart--cartesian-no-data-gaps.tsx +1 -1
- package/docs/patterns/components-chart--occupancy-history-in-card.tsx +1 -1
- package/docs/patterns/components-chart--occupancy-in-card.tsx +1 -1
- package/docs/patterns/components-chart--post-reach-distribution.tsx +1 -1
- package/docs/patterns/components-chart--ranked-audience-breakdown.tsx +1 -1
- package/docs/patterns/components-chart--unit-grid-composition.tsx +1 -1
- package/docs/patterns/components-chatqa--pattern-qa-with-reply.tsx +1 -1
- package/docs/patterns/components-checkbox-checkbox--default.tsx +1 -1
- package/docs/patterns/components-checkbox-checkbox--with-description.tsx +1 -1
- package/docs/patterns/components-checkbox-checkboxgroup--default.tsx +1 -1
- package/docs/patterns/components-dialog--alert-dialog-destructive.tsx +1 -1
- package/docs/patterns/components-dialog--default-dialog.tsx +1 -1
- package/docs/patterns/components-dialog--form-dialog.tsx +1 -1
- package/docs/patterns/components-displaycontrols--page-utilities.tsx +1 -1
- package/docs/patterns/components-field--horizontal-input.tsx +1 -1
- package/docs/patterns/components-field--horizontal-text-area.tsx +1 -1
- package/docs/patterns/components-field--multi-control.tsx +1 -1
- package/docs/patterns/components-footerreveal--marketing-hero-pattern.tsx +1 -1
- package/docs/patterns/components-footerreveal--marketing-hero-ruled-pattern.tsx +1 -1
- package/docs/patterns/components-footerreveal--marketing-hero-with-gallery-intro.tsx +1 -1
- package/docs/patterns/components-footerreveal--marketing-page-pattern.tsx +1 -1
- package/docs/patterns/components-footerreveal--ruled-grid-footer-pattern.tsx +1 -1
- package/docs/patterns/components-footerreveal--sequenced-marketing-hero.tsx +1 -1
- package/docs/patterns/components-herointro--two-line-intro.tsx +1 -1
- package/docs/patterns/components-herotilestack--marketing-hero-pattern.tsx +1 -1
- package/docs/patterns/components-herotilestack--marketing-hero-text-sequence.tsx +1 -1
- package/docs/patterns/components-herotilestack--marketing-hero-with-gallery-intro.tsx +1 -1
- package/docs/patterns/components-intakeconfirmation--booked-pattern.tsx +1 -1
- package/docs/patterns/components-intakeconfirmation--emailed-pattern.tsx +1 -1
- package/docs/patterns/components-intakeform--about-you-pattern.tsx +1 -1
- package/docs/patterns/components-intakemodal--intake-modal-pattern.tsx +1 -1
- package/docs/patterns/components-kbd--command-row.tsx +1 -1
- package/docs/patterns/components-kbd--numbered-choices.tsx +1 -1
- package/docs/patterns/components-kbd--shortcut.tsx +1 -1
- package/docs/patterns/components-moremenu--action-menu.tsx +1 -1
- package/docs/patterns/components-moremenu--in-card-header.tsx +1 -1
- package/docs/patterns/components-navlist--side-nav-settings.tsx +1 -1
- package/docs/patterns/components-pageheader--app-header-pattern.tsx +1 -1
- package/docs/patterns/components-pageheader--page-section-header.tsx +1 -1
- package/docs/patterns/components-pageheader--toolbar-header.tsx +1 -1
- package/docs/patterns/components-panel--end-detail-rail.tsx +1 -1
- package/docs/patterns/components-pillgroup--pill-group-pattern.tsx +1 -1
- package/docs/patterns/components-promptbar--pattern-marketing-composer.tsx +3 -3
- package/docs/patterns/components-promptbar--pattern-prompt-bar.tsx +1 -1
- package/docs/patterns/components-radio-radiogroup--default.tsx +1 -1
- package/docs/patterns/components-scrollhorizontal--project-gallery-pattern.tsx +1 -1
- package/docs/patterns/components-scrollhorizontal--with-intro.tsx +1 -1
- package/docs/patterns/components-sheet--bottom-sheet.tsx +1 -1
- package/docs/patterns/components-sheet--end-sheet.tsx +1 -1
- package/docs/patterns/components-sitenav--brand-and-cta.tsx +1 -1
- package/docs/patterns/components-sitenav--centered-links.tsx +1 -1
- package/docs/patterns/components-sitenav--compact.tsx +1 -1
- package/docs/patterns/components-sitenav--marketing-header.tsx +1 -1
- package/docs/patterns/components-sitenav--mega-menu.tsx +1 -1
- package/docs/patterns/components-stat--insights-row.tsx +1 -1
- package/docs/patterns/components-stepprogress--step-progress-pattern.tsx +1 -1
- package/docs/patterns/components-switch--default.tsx +1 -1
- package/docs/patterns/components-switch--settings-row.tsx +1 -1
- package/docs/patterns/components-tab--settings-pages.tsx +1 -1
- package/docs/patterns/components-taskrows--action-details.tsx +1 -1
- package/docs/patterns/components-taskrows--capsules.tsx +1 -1
- package/docs/patterns/components-taskrows--card-with-status-rows.tsx +1 -1
- package/docs/patterns/components-taskrows--controlled-expand.tsx +1 -1
- package/docs/patterns/components-taskrows--custom-slots.tsx +1 -1
- package/docs/patterns/components-taskrows--status-list.tsx +1 -1
- package/docs/patterns/components-taskrows--tag-chips.tsx +1 -1
- package/docs/patterns/components-textlink--external-destination.tsx +1 -1
- package/docs/patterns/components-textlink--inline-prose.tsx +1 -1
- package/docs/patterns/components-textlink--supporting-copy.tsx +1 -1
- package/docs/patterns/components-textsequence--default.tsx +1 -1
- package/docs/patterns/components-textsequence--reduced-motion.tsx +1 -1
- package/docs/patterns/components-textsequence--shapes.tsx +1 -1
- package/docs/patterns/components-toast--stacked-notifications.tsx +1 -1
- package/docs/patterns/components-tooltip--controlled.tsx +1 -1
- package/docs/patterns/components-tooltip--disabled-control.tsx +1 -1
- package/docs/patterns/components-tooltip--icon-action.tsx +1 -1
- package/docs/patterns/components-tooltip--keyboard-shortcut.tsx +1 -1
- package/docs/patterns/components-tooltip--placement.tsx +1 -1
- package/docs/patterns/foundations-scroll-fade--horizontal-rail.tsx +1 -1
- package/docs/patterns/foundations-scroll-fade--overflowing-list.tsx +1 -1
- package/docs/patterns/guides-chart-explorations--comparison-gallery.tsx +1 -1
- package/docs/patterns/guides-overlay-flows--notification-preferences.tsx +1 -1
- package/docs/patterns/guides-profile-typography--editorial-profile.tsx +1 -1
- package/docs/patterns/index.json +1 -153
- package/package.json +1 -1
- package/docs/patterns/sites-pitchkit-account-settings--account-settings-owner.tsx +0 -265
- package/docs/patterns/sites-pitchkit-creator-identity--creator-identity-owner-settings.tsx +0 -154
- package/docs/patterns/sites-pitchkit-creator-identity--creator-identity-public.tsx +0 -96
- package/docs/patterns/sites-pitchkit-insights-and-kit--creator-insights-loading.tsx +0 -1006
- package/docs/patterns/sites-pitchkit-insights-and-kit--creator-insights.tsx +0 -1031
- package/docs/patterns/sites-pitchkit-insights-and-kit--insufficient-audience-data.tsx +0 -1015
- package/docs/patterns/sites-pitchkit-insights-and-kit--insufficient-reach-and-audience-data.tsx +0 -1017
- package/docs/patterns/sites-pitchkit-insights-and-kit--insufficient-reach-data.tsx +0 -1033
- package/docs/patterns/sites-pitchkit-insights-and-kit--owner-pitch-kit.tsx +0 -838
- package/docs/patterns/sites-pitchkit-insights-and-kit--shareable-pitch-kit.tsx +0 -608
- package/docs/patterns/sites-pitchkit-intro--intro-owner.tsx +0 -161
- package/docs/patterns/sites-pitchkit-intro--intro-public.tsx +0 -111
- package/docs/patterns/sites-pitchkit-past-brands--past-brands-owner.tsx +0 -611
- package/docs/patterns/sites-pitchkit-past-brands--past-brands-public.tsx +0 -299
- package/docs/patterns/sites-pitchkit-theme-picker--theme-picker-owner.tsx +0 -832
- package/docs/patterns/sites-whatmatters-intake--start-a-project-pattern.tsx +0 -234
- package/docs/patterns/sites-whatmatters-marketing-landing--marketing-landing.tsx +0 -87
- package/docs/patterns/sites-whatmatters-prompt-chat--landing-to-chat.tsx +0 -899
- package/docs/patterns/sites-whatmatters-rfp-submitted--rfp-submitted.tsx +0 -302
|
@@ -24,4 +24,4 @@ decorative hand on the marketing hero headline, from `public/rive/interactive-ic
|
|
|
24
24
|
|
|
25
25
|
## PromptBar
|
|
26
26
|
|
|
27
|
-
wide prompt pill — inline **TextArea** (`rows={1}`, one line when empty, grows through **3 lines**, then scrolls) and an **IconButton** `sm` send control (Lucide **ArrowRight**) inset with even padding. The pill owns focus; the send control does not draw a second ring. Placeholder **Ask anything…**. Enter sends; Shift+Enter inserts a newline. Send stays disabled and muted until the draft has text, then uses **`--color-brand`** (`#011272` / `bg-brand`). No new Button role. Voice and attachments are not part of this version. Copy **Components/PromptBar → Pattern — prompt bar**.
|
|
27
|
+
wide prompt pill — inline **TextArea** (`rows={1}`, one line when empty, grows through **3 lines**, then scrolls) and an **IconButton** `sm` send control (Lucide **ArrowRight**) inset with even padding. The pill owns focus; the send control does not draw a second ring. Placeholder **Ask anything…**. Enter sends; Shift+Enter inserts a newline. Send stays disabled and muted until the draft has text, then uses **`--color-brand`** (`#011272` / `bg-brand`). No new Button role. Voice and attachments are not part of this version. Copy **Components/PromptBar → Pattern — prompt bar**. **PromptBar** also mounts on the **marketing homepage**: **Components/PromptBar → Pattern — marketing composer** pins it to the bottom of the viewport on the page grid (`--grid-max: 40rem`, above the safe area, under **SiteNav**), and sending hands off to the app's ask page — the app routes to `/ask?q=…`, and the ask page opens on that first exchange. The ask page itself is app code. Do not hand-roll the pin, and do not restyle **SiteNav**.
|
package/docs/components.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @thewhatmatters/wmds — component contracts
|
|
2
2
|
|
|
3
|
-
Version 0.
|
|
3
|
+
Version 0.3.0. Generated from the WMDS repository's AGENTS.md (Storybook-first) by `scripts/generate-package-docs.mjs` — do not edit here.
|
|
4
4
|
|
|
5
5
|
Storybook paths such as **Components/Button/Button → Pattern — …** name a story; its Show code is in `patterns/` (see `patterns/index.json`). Longer contracts for FooterReveal, HeroTileStack, TextSequence, ScrollHorizontal, RiveHand, and PromptBar are in `component-contracts.md`. ADR numbers refer to decision records in the WMDS repository.
|
|
6
6
|
|
|
@@ -8,14 +8,14 @@ Storybook paths such as **Components/Button/Button → Pattern — …** name a
|
|
|
8
8
|
- **Dark mode:** `[data-theme="dark"]` on `<html>` or any ancestor — same token names, swapped values in `colors.css`.
|
|
9
9
|
- **Consuming apps:** use exported components and typed props; `className` for layout only — not re-theming. Page layout utilities (`gap`, `grid`, `max-w`) are fine between components.
|
|
10
10
|
- **Theme tokens:** Semantic roles in **`src/theme/colors.css`**; typography in **`src/theme/typography.css`** (`type-*` utilities, geometric scale; **display-1/2/3** are fluid via `clamp` — display-1 hits **5rem** on desktop and scales down to **2.5rem** on mobile); motion in **`src/theme/motion.css`**; page spine in **`src/theme/grid.css`** (`--grid-*`, `grid-page` / `band`, `--leading-base`). **`--spacing` stays 4px** — do not re-scale; baseline is 8px. See **ADR-0007**, **ADR-0008**, **ADR-0009**, **ADR-0010**, **DESIGN.md → Grid**. Use **`typographyClass()`** — not raw `text-sm` in document copy.
|
|
11
|
-
- **Page layout:** Every Storybook **
|
|
11
|
+
- **Page layout:** Every Storybook **Guides** page and consuming product page starts on **`grid-page`**; use **`band`** + responsive column spans for content alignment. Constrain a specific experience by overriding **`--grid-max`** on that wrapper (for example, `960px`) rather than replacing the grid with an arbitrary centered container.
|
|
12
12
|
- **Scroll fade:** use **`scroll-fade-y`** / **`scroll-fade-x`** on the element that owns overflow to hint at clipped list or rail content. The mask is scroll-aware, disappears when no overflow exists in supporting browsers, and follows inline direction for RTL. Keep the surface fill/border on a wrapper; customize with `--scroll-fade-size` only when the default 12% / 40px cap does not fit. Copy **Foundations → Scroll fade → Pattern — …**.
|
|
13
13
|
- **Motion:** Duration tiers in **`src/theme/motion.css`** — **fast** (hover/focus), **medium** (panels/layout), **slow** (rare). Single **`--ease-standard`**. CSS via `motionTransition()`; Motion via `motionTransitionProp()`. Choreography tokens `--motion-stagger`, `--motion-beat`, `--motion-blur-reveal` through `motionStaggerSeconds()`, `motionBeatSeconds(n)`, `motionBlurReveal(reduce)`, and `readMotionDurationSeconds(tier)` — Show code never hard-codes a blur, stagger, or duration. See **ADR-0008**. Storybook wraps `<MotionConfig reducedMotion="user">`.
|
|
14
14
|
- **Icons:** **[Lucide](https://lucide.dev/icons/) only** until further notice — import from **`lucide-react`** in components, stories, and examples. Peer dependency, not bundled; use `stroke-current` / `ButtonIcon` for sizing. See **Foundations → Icons**.
|
|
15
15
|
- **Button:** pill by default; **`layout="row"`** for flat full-width detail/settings lines (**`width="hug"`** sizes a row to its content with a tight gap — inline disclosure triggers); **`align="start"`** left-aligns a pill label and **`emphasis="quiet"`** puts `role="outline"` on the `border-border` hairline (full-width suggestion pills — **Pattern — suggestion pills**); **`layout="nav"`** for **NavList** rows (`selected`). Six **roles** (`primary`, `secondary`, `ghost`, `destructive`, **`inverse`** — surface fill and brand text, for a brand-blue field, **`outline`** — hairline border and transparent fill). Patterns: action, **`row`**, **`nav`**, `icon`, `count`, `status` morph, **`mono`** + **`endIcon`** (accent arrow square) — mutually exclusive where documented. No slots. [Motion reference](https://motion.dev/examples/react-multi-state-badge).
|
|
16
16
|
- **Avatar:** circular identity — required `name`, optional `src`, initials → **User** fallback; sizes `xsm` / `sm` / `md` (default) / `lg` / `xl` (20–128px). Optional `presence={{ tone, label, pulsing? }}` — rim dot via **Status** dot tokens (not the **Status** component). **`avatarSizeForCluster()`** for header rows; **`size="sm"`** in **Dropdown.Item** `start`. Not clickable — wrap at call site. Agents: copy **Components/Avatar → Pattern — …**; see **ADR-0017**.
|
|
17
17
|
- **IconButton:** circular icon-only control. Patterns: toolbar (ghost), `fab`, `loading`, native `title`, **`inset`** (compact dismiss inside Chip), **`render={<a/>}`** (circular brand / icon links). Compose **Tooltip** for tokenized hover/focus labels and pass `title=""` to avoid duplicate native UI. **`aria-label` required** — use `Button` when text is needed.
|
|
18
|
-
- **Kbd:** semantic keyboard keycap — one physical key per **Kbd**; compose multiple keycaps for shortcuts. Sizes `sm` | `md`; add `aria-label` when symbolic labels need spoken expansion. Display-only — never interactive on the keycap itself. Numbered choice rows pair trailing **Kbd** digits with **`useKbdChoiceKeys`** so `1`–`4` select the same way a click does while focus is not in a text field (see **Pattern — numbered choice keys**
|
|
18
|
+
- **Kbd:** semantic keyboard keycap — one physical key per **Kbd**; compose multiple keycaps for shortcuts. Sizes `sm` | `md`; add `aria-label` when symbolic labels need spoken expansion. Display-only — never interactive on the keycap itself. Numbered choice rows pair trailing **Kbd** digits with **`useKbdChoiceKeys`** so `1`–`4` select the same way a click does while focus is not in a text field (see **Pattern — numbered choice keys**). Copy **Components/Kbd → Pattern — keyboard shortcut**.
|
|
19
19
|
- **TextLink:** inline anchor for navigation inside prose — canonical solid underline, stronger hover decoration, and focus ring. `external` opens a new tab and appends Lucide **SquareArrowOutUpRight** with spoken context. Inherits surrounding type size; `className` is layout only. Use **Button** for actions. Copy **Components/TextLink → Pattern — inline prose link**.
|
|
20
20
|
- **Tooltip:** short supplemental label — **`Tooltip.Provider`** shares hover delay; **`Tooltip.Trigger render={...}`** composes a ref/DOM-prop-forwarding control; **`Tooltip.Content`** portals with collision-aware physical or logical placement. Opens on hover/focus, closes with Escape, and does not open on touch. No essential or interactive content. Disabled native controls need the documented focusable wrapper. Copy **Components/Tooltip → Pattern — …**.
|
|
21
21
|
- **Badge:** solid and **muted** semantic fills. Patterns: label, **`emphasis="muted"`**, `count`, `icon`, **`avatar`**, **`iconOnly`** — mutually exclusive where documented. **`avatar={{ src, alt }}`** renders **Avatar** at the badge size (`badgeAvatarSize`: sm → 20px, md → 24px). **`BadgeSegmentCount`** for filter/tab segment totals (Chip trailing count). No **Status** dot inside Badge. See **ADR-0033**.
|
|
@@ -37,7 +37,7 @@ Storybook paths such as **Components/Button/Button → Pattern — …** name a
|
|
|
37
37
|
- **Accordion:** generic expand/collapse — **leading**, **label**, **trailing**, built-in chevron, `motion-collapse` panel. Variants: `list`, `capsule`, `plain`. **TaskRows** is the task-status pattern on top.
|
|
38
38
|
- **Card:** `Card.Header`, `Card.Body`, `Card.Footer`. Layout cards (`padding="none"`): header/footer on the shell; **`Card.Header`** is two horizontal slots (`start` | `end`) at **16px** (`px-4`). **`end` is always trailing** (`ml-auto`) — overflow / **MoreMenu** stays on the right even when `start` is omitted. **`Card.Body` is a square composition slot** with a **2px** horizontal gutter — no inner pad, no radius, **no default fill**. The **occupant** dictates how the body region looks; use **`cardLayoutBodyOccupantInsetXClasses`** (`px-3.5` / 14px) + **`cardLayoutBodyOccupantPadYClasses`** (`py-[16px]` / literal 16px vertical) when body content should align with header/footer (2px + 14px = 16px horizontal). Shape config lives in **`src/theme/shape.css`**: shell **`--radius-card-shell: 16px`**, body occupant **`--radius-card-body: 14px`**. Radius-only media → **`cardLayoutBodyOccupantRadiusClasses`**; inset gray/chart wells → **`cardLayoutBodyOccupantWellClasses`** or **`cardLayoutBodyOccupantDotGridWellClasses`**. A headerless layout **Card.Body** densifies the shell top to 2px (`pt-[2px]`) — same density as footerless / `bodyTerminal` bottom; **`headerless`** is only an override for wrapped slot composition. A direct terminal **`Card.Body`** automatically fills stretched cards and gets the 2px bottom shell inset; **`bodyTerminal`** is only an override for wrapped slot composition. Pin a layout height on the root (`className`) with Header + Body + Footer — Header/Footer stay put; **Card.Body** scrolls (2px gutter unchanged; no new variant). See **Components/Card/Card → Pattern — pinned height**. `variant="surface"` is elevated; **`variant="outlined"`** uses **`shadow-soft-card`** with no stroke (same elevation as layout `surface`). Radius stays **`--radius-card-shell`**. Default **`shape="rounded"`**. **`shape="flush"`** only when a parent owns outer chrome. Simple cards: `padding="md"`.
|
|
39
39
|
- **Input:** pill-only. Optional leading `icon`; trailing `endBadge` or status / `loading`. Hero search with inset button → **Search** molecule. See **ADR-0006**.
|
|
40
|
-
- **PromptBar:** wide prompt pill — inline **TextArea** (one line when empty, grows through 3 lines, then scrolls) and an inset **IconButton** `sm` send control. Enter sends; Shift+Enter inserts a newline; send stays disabled until the draft has text. No new Button role. Copy **Components/PromptBar → Pattern — prompt bar
|
|
40
|
+
- **PromptBar:** wide prompt pill — inline **TextArea** (one line when empty, grows through 3 lines, then scrolls) and an inset **IconButton** `sm` send control. Enter sends; Shift+Enter inserts a newline; send stays disabled until the draft has text. No new Button role. Copy **Components/PromptBar → Pattern — prompt bar**. On the **marketing homepage** it is pinned to the bottom of the viewport on the page grid and hands off to the app's ask page (`/ask?q=…`, which starts the conversation with `q`): copy **Components/PromptBar → Pattern — marketing composer**; do not hand-roll the pin. Do not restyle **SiteNav**. Full contract: **docs/component-contracts.md → PromptBar**.
|
|
41
41
|
- **TextArea:** element-radius multiline — same optional `label`, `description`, `status`, `message`, and `loading` as **Input**; default `resize="vertical"`. See **ADR-0006**.
|
|
42
42
|
- **Field:** label/layout wrapper — `orientation="vertical" | "horizontal"`; never required. Validation stays on **Input** / **TextArea**. See **ADR-0006**.
|
|
43
43
|
- **Checkbox:** boolean toggle — label row + optional `description`, `indeterminate`, `status` / `message`, and `loading`. See **ADR-0006**.
|
|
@@ -49,9 +49,9 @@ Storybook paths such as **Components/Button/Button → Pattern — …** name a
|
|
|
49
49
|
- **Dropdown:** shared menu panel (`p-0.5` inset) + three-slot rows (`start` | label | `end`) — composed by **Select**; action menus via **MoreMenu**.
|
|
50
50
|
- **MoreMenu:** kebab **IconButton** + floating **Dropdown** action menu — **Card.Header** `end` (right) only; never left-align overflow. Menu right-aligns to trigger; expanded trigger retains the ghost hover surface; **`items`** + **`onAction`**. Sizes **`xs` | `sm` | `md` | `lg`** (**IconButton** scale). Not for single-select — **Select** / **SegmentedControl**.
|
|
51
51
|
- **Toast:** temporary notification organism — mount one **`Toaster`** at the app root and call **`toast.add()`** / `update()` / `dismiss()`. Six `position` values (top/bottom × left/center/right), default five-item layered deck (newest interactive in front, older surfaces offset behind), semantic tones, optional action (**Button**) and dismiss (**IconButton**). Errors announce as `alert`; other tones as `status`. `duration: null` persists. Blocking decisions use **AlertDialog**. See **ADR-0025**.
|
|
52
|
-
- **Confetti:** celebratory burst — mount one **`ConfettiProvider`**. After an async success, render the confirmation surface and call **`useConfettiOnMount(options?)`** there (once per mount; a ref skips StrictMode and re-renders). **`useConfetti().fire(options?)`** is the same burst when the moment is not a mount. `origin` is an element, a ref (center of the box), or a viewport `{ x, y }` point; default is the viewport center. Confirmation pages pass the top-center of the viewport and a wide `spread`. Overlapping bursts are kept. Removed `duration + 0.5s` after start. Reduced motion: `fire()` does nothing. Colors default to chart categorical 1–7 (`confettiDefaultColors`). There is no trigger component.
|
|
52
|
+
- **Confetti:** celebratory burst — mount one **`ConfettiProvider`**. After an async success, render the confirmation surface and call **`useConfettiOnMount(options?)`** there (once per mount; a ref skips StrictMode and re-renders). **`useConfetti().fire(options?)`** is the same burst when the moment is not a mount. `origin` is an element, a ref (center of the box), or a viewport `{ x, y }` point; default is the viewport center. Confirmation pages pass the top-center of the viewport and a wide `spread`. Overlapping bursts are kept. Removed `duration + 0.5s` after start. Reduced motion: `fire()` does nothing. Colors default to chart categorical 1–7 (`confettiDefaultColors`). There is no trigger component. **IntakeConfirmation** is the reference composition. See **ADR-0031**.
|
|
53
53
|
- **Dialog:** modal overlay — portal scrim, focus trap, scroll lock, **medium** enter/exit; composes **Card** shell + **IconButton** close. **`Dialog.Content`** — `title`, `description`, `footer`, `size` (`sm` | `md` | `lg`); header/footer pinned, body scrolls; **no section hairlines** — brief/direct copy + `gap-4` section rhythm. **`AlertDialog`** — blocking confirm with cancel + confirm **Button** roles; `confirmRole="destructive"` for irreversible actions; scrim dismiss off by default.
|
|
54
|
-
- **IntakeModal:** full-screen Start a project shell — typographic **WM** + **WhatMatters** wordmark (no separate logo asset), **IconButton** close (Lucide **X**, name **Close**), **StepProgress** (navy segments, pill label **Step N of 4**), pinned **Back** / **Continue** footer. Focus trap, Escape, scroll lock, `aria-modal`. **SelectableCard** is the multi-select grid (2 columns mobile, 3 from `lg`) with a `toggle` slot for hugged **SegmentedControl** and a **Badge** `iconOnly` check. **PillGroup** is the wrapping radio pills; **Not sure yet** uses existing **Badge** neutral `emphasis="muted"` — no new Badge emphasis. **IntakeForm** is **Field** + **Input** / **TextArea** (optional Link URL); required fields show `status` + `message` on blur; company and link stay optional; the details counter is the field description. **CalEmbed** is the calendar frame plus **TextLink** skip; with no embed mounted it shows a visitor-facing empty state (`emptyTitle`, `emptyDescription`), never developer notes. **CalEmbed.Skip** is that same skip; in a **Card** gate put it in **Card.Footer** and pass `skip={false}` so the in-body link is omitted. **IntakeConfirmation** (`booked` | `emailed`) calls **`useConfettiOnMount`** with `intakeConfettiColors` (includes `--color-brand`); optional `bookingTime` / `videoHref` / `googleCalendarHref` / `icsHref` reuse **TextLink** and **Button**.
|
|
54
|
+
- **IntakeModal:** full-screen Start a project shell — typographic **WM** + **WhatMatters** wordmark (no separate logo asset), **IconButton** close (Lucide **X**, name **Close**), **StepProgress** (navy segments, pill label **Step N of 4**), pinned **Back** / **Continue** footer. Focus trap, Escape, scroll lock, `aria-modal`. **SelectableCard** is the multi-select grid (2 columns mobile, 3 from `lg`) with a `toggle` slot for hugged **SegmentedControl** and a **Badge** `iconOnly` check. **PillGroup** is the wrapping radio pills; **Not sure yet** uses existing **Badge** neutral `emphasis="muted"` — no new Badge emphasis. **IntakeForm** is **Field** + **Input** / **TextArea** (optional Link URL); required fields show `status` + `message` on blur; company and link stay optional; the details counter is the field description. **CalEmbed** is the calendar frame plus **TextLink** skip; with no embed mounted it shows a visitor-facing empty state (`emptyTitle`, `emptyDescription`), never developer notes. **CalEmbed.Skip** is that same skip; in a **Card** gate put it in **Card.Footer** and pass `skip={false}` so the in-body link is omitted. **IntakeConfirmation** (`booked` | `emailed`) calls **`useConfettiOnMount`** with `intakeConfettiColors` (includes `--color-brand`); optional `bookingTime` / `videoHref` / `googleCalendarHref` / `icsHref` reuse **TextLink** and **Button**. Copy **Components/IntakeModal → Pattern — intake modal** and compose the steps in the app. See **ADR-0038**.
|
|
55
55
|
- **Sheet:** dismissible edge overlay — `side="bottom" | "end" | "start"` only (**no `top`** — not a product pattern); same scrim/focus/scroll lock as **Dialog**; bottom drawer or side detail rail; header/footer pinned, body scrolls; **hairline borders** on scroll regions. Mobile **16px inset on trailing edge only** (e.g. `end` → left gap for scrim; entry/top/bottom flush); tablet+ side sheets fully edge-flush. **`Sheet.Content`** — Card header rhythm, scrollable body, optional footer.
|
|
56
56
|
- **Panel:** persistent edge flyover — `side="end" | "start"` only; **non-blocking visual scrim** (clicks pass through), **no scroll lock**, **no focus trap**; `aria-modal="false"`; page stays interactive. Same width tokens and hairline scroll chrome as **Sheet** side panels. Use for peek/detail rails; use **Sheet** when the canvas should block.
|
|
57
57
|
- **Status:** fixed-scale indicators — **`variant="ring"`** (24px task progress: `active`, `step`) or **`variant="dot"`** (8px semantic: `tone`, `pulsing`). `besideLabel` / `label` for a11y. Not inside Badge.
|
package/docs/exports.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"package": "@thewhatmatters/wmds",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"import": "import { Button } from \"@thewhatmatters/wmds\";",
|
|
5
5
|
"styles": [
|
|
6
6
|
"@thewhatmatters/wmds/styles.css",
|
|
@@ -783,18 +783,6 @@
|
|
|
783
783
|
"GridOverlay",
|
|
784
784
|
"GRID_ON_CLASS"
|
|
785
785
|
],
|
|
786
|
-
"sites": [
|
|
787
|
-
"Sites/PitchKit/Account settings",
|
|
788
|
-
"Sites/PitchKit/Creator identity",
|
|
789
|
-
"Sites/PitchKit/Insights and kit",
|
|
790
|
-
"Sites/PitchKit/Intro",
|
|
791
|
-
"Sites/PitchKit/Past brands",
|
|
792
|
-
"Sites/PitchKit/Theme picker",
|
|
793
|
-
"Sites/WhatMatters/Intake",
|
|
794
|
-
"Sites/WhatMatters/Marketing landing",
|
|
795
|
-
"Sites/WhatMatters/Prompt chat",
|
|
796
|
-
"Sites/WhatMatters/RFP submitted"
|
|
797
|
-
],
|
|
798
786
|
"guides": [
|
|
799
787
|
"Guides/Chart explorations",
|
|
800
788
|
"Guides/Overlay flows",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — dropdown row
|
|
2
2
|
// Storybook: Components/Avatar → Pattern — dropdown row (?path=/story/components-avatar--dropdown-row)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — with avatar
|
|
2
2
|
// Storybook: Components/Badge → Pattern — with avatar (?path=/story/components-badge--with-avatar)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — destructive action
|
|
2
2
|
// Storybook: Components/Button/Button → Pattern — destructive action (?path=/story/components-button-button--destructive-action)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — ghost action
|
|
2
2
|
// Storybook: Components/Button/Button → Pattern — ghost action (?path=/story/components-button-button--ghost-action)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — inverse action
|
|
2
2
|
// Storybook: Components/Button/Button → Pattern — inverse action (?path=/story/components-button-button--inverse-action)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — link
|
|
2
2
|
// Storybook: Components/Button/Button → Pattern — link (?path=/story/components-button-button--link-render)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — submit / async
|
|
2
2
|
// Storybook: Components/Button/Button → Pattern — submit / async (?path=/story/components-button-button--multi-state-badge)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — outline mono
|
|
2
2
|
// Storybook: Components/Button/Button → Pattern — outline mono (?path=/story/components-button-button--outline-mono)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — primary action
|
|
2
2
|
// Storybook: Components/Button/Button → Pattern — primary action (?path=/story/components-button-button--primary-action)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — row (hug)
|
|
2
2
|
// Storybook: Components/Button/Button → Pattern — row (hug) (?path=/story/components-button-button--row-hug)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — row
|
|
2
2
|
// Storybook: Components/Button/Button → Pattern — row (?path=/story/components-button-button--row-layout)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — secondary action
|
|
2
2
|
// Storybook: Components/Button/Button → Pattern — secondary action (?path=/story/components-button-button--secondary-action)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — suggestion pills
|
|
2
2
|
// Storybook: Components/Button/Button → Pattern — suggestion pills (?path=/story/components-button-button--suggestion-pills)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — with count
|
|
2
2
|
// Storybook: Components/Button/Button → Pattern — with count (?path=/story/components-button-button--with-count)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — with icon
|
|
2
2
|
// Storybook: Components/Button/Button → Pattern — with icon (?path=/story/components-button-button--with-icon)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — vertical actions
|
|
2
2
|
// Storybook: Components/Button/FloatingActionButton → Pattern — vertical actions (?path=/story/components-button-floatingactionbutton--vertical-actions)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — skip in footer
|
|
2
2
|
// Storybook: Components/CalEmbed → Pattern — skip in footer (?path=/story/components-calembed--pattern-skip-in-footer)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Example — body slot (occupancy history)
|
|
2
2
|
// Storybook: Components/Card/Card → Example — body slot (occupancy history) (?path=/story/components-card-card--body-slot-occupancy-history)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — headerless media
|
|
2
2
|
// Storybook: Components/Card/Card → Pattern — headerless media (?path=/story/components-card-card--headerless-media)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — outlined layout
|
|
2
2
|
// Storybook: Components/Card/Card → Pattern — outlined layout (?path=/story/components-card-card--outlined-layout)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — pinned height
|
|
2
2
|
// Storybook: Components/Card/Card → Pattern — pinned height (?path=/story/components-card-card--pinned-height)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — selectable cards
|
|
2
2
|
// Storybook: Components/Card/SelectableCard → Pattern — selectable cards (?path=/story/components-card-selectablecard--selectable-cards-pattern)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — matrix heatmap
|
|
2
2
|
// Storybook: Components/Chart → Pattern — matrix heatmap (?path=/story/components-chart--audience-activity-heatmap)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — Cartesian no-data gaps
|
|
2
2
|
// Storybook: Components/Chart → Pattern — Cartesian no-data gaps (?path=/story/components-chart--cartesian-no-data-gaps)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — occupancy history in Card
|
|
2
2
|
// Storybook: Components/Chart → Pattern — occupancy history in Card (?path=/story/components-chart--occupancy-history-in-card)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — occupancy KPI in Card
|
|
2
2
|
// Storybook: Components/Chart → Pattern — occupancy KPI in Card (?path=/story/components-chart--occupancy-in-card)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — distribution strip
|
|
2
2
|
// Storybook: Components/Chart → Pattern — distribution strip (?path=/story/components-chart--post-reach-distribution)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — ranked audience breakdown
|
|
2
2
|
// Storybook: Components/Chart → Pattern — ranked audience breakdown (?path=/story/components-chart--ranked-audience-breakdown)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — 100-unit composition
|
|
2
2
|
// Storybook: Components/Chart → Pattern — 100-unit composition (?path=/story/components-chart--unit-grid-composition)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — Q&A with reply
|
|
2
2
|
// Storybook: Components/ChatQa → Pattern — Q&A with reply (?path=/story/components-chatqa--pattern-qa-with-reply)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — default
|
|
2
2
|
// Storybook: Components/Checkbox/Checkbox → Pattern — default (?path=/story/components-checkbox-checkbox--default)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — with description
|
|
2
2
|
// Storybook: Components/Checkbox/Checkbox → Pattern — with description (?path=/story/components-checkbox-checkbox--with-description)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — default
|
|
2
2
|
// Storybook: Components/Checkbox/CheckboxGroup → Pattern — default (?path=/story/components-checkbox-checkboxgroup--default)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — alert dialog (destructive)
|
|
2
2
|
// Storybook: Components/Dialog → Pattern — alert dialog (destructive) (?path=/story/components-dialog--alert-dialog-destructive)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — dialog
|
|
2
2
|
// Storybook: Components/Dialog → Pattern — dialog (?path=/story/components-dialog--default-dialog)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — form dialog
|
|
2
2
|
// Storybook: Components/Dialog → Pattern — form dialog (?path=/story/components-dialog--form-dialog)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — page display controls
|
|
2
2
|
// Storybook: Components/DisplayControls → Pattern — page display controls (?path=/story/components-displaycontrols--page-utilities)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — horizontal input
|
|
2
2
|
// Storybook: Components/Field → Pattern — horizontal input (?path=/story/components-field--horizontal-input)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — horizontal textarea
|
|
2
2
|
// Storybook: Components/Field → Pattern — horizontal textarea (?path=/story/components-field--horizontal-text-area)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — multi-control
|
|
2
2
|
// Storybook: Components/Field → Pattern — multi-control (?path=/story/components-field--multi-control)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — marketing hero
|
|
2
2
|
// Storybook: Components/FooterReveal → Pattern — marketing hero (?path=/story/components-footerreveal--marketing-hero-pattern)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — marketing hero ruled grid
|
|
2
2
|
// Storybook: Components/FooterReveal → Pattern — marketing hero ruled grid (?path=/story/components-footerreveal--marketing-hero-ruled-pattern)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Marketing hero with gallery intro
|
|
2
2
|
// Storybook: Components/FooterReveal → Marketing hero with gallery intro (?path=/story/components-footerreveal--marketing-hero-with-gallery-intro)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — marketing page
|
|
2
2
|
// Storybook: Components/FooterReveal → Pattern — marketing page (?path=/story/components-footerreveal--marketing-page-pattern)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — ruled grid footer
|
|
2
2
|
// Storybook: Components/FooterReveal → Pattern — ruled grid footer (?path=/story/components-footerreveal--ruled-grid-footer-pattern)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — marketing hero with sequenced gallery
|
|
2
2
|
// Storybook: Components/FooterReveal → Pattern — marketing hero with sequenced gallery (?path=/story/components-footerreveal--sequenced-marketing-hero)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — two-line intro
|
|
2
2
|
// Storybook: Components/HeroIntro → Pattern — two-line intro (?path=/story/components-herointro--two-line-intro)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — marketing hero
|
|
2
2
|
// Storybook: Components/HeroTileStack → Pattern — marketing hero (?path=/story/components-herotilestack--marketing-hero-pattern)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — marketing hero text sequence
|
|
2
2
|
// Storybook: Components/HeroTileStack → Pattern — marketing hero text sequence (?path=/story/components-herotilestack--marketing-hero-text-sequence)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Marketing hero with gallery intro
|
|
2
2
|
// Storybook: Components/HeroTileStack → Marketing hero with gallery intro (?path=/story/components-herotilestack--marketing-hero-with-gallery-intro)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — booked
|
|
2
2
|
// Storybook: Components/IntakeConfirmation → Pattern — booked (?path=/story/components-intakeconfirmation--booked-pattern)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — emailed
|
|
2
2
|
// Storybook: Components/IntakeConfirmation → Pattern — emailed (?path=/story/components-intakeconfirmation--emailed-pattern)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — about you
|
|
2
2
|
// Storybook: Components/IntakeForm → Pattern — about you (?path=/story/components-intakeform--about-you-pattern)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — intake modal
|
|
2
2
|
// Storybook: Components/IntakeModal → Pattern — intake modal (?path=/story/components-intakemodal--intake-modal-pattern)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — command row
|
|
2
2
|
// Storybook: Components/Kbd → Pattern — command row (?path=/story/components-kbd--command-row)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — numbered choice keys
|
|
2
2
|
// Storybook: Components/Kbd → Pattern — numbered choice keys (?path=/story/components-kbd--numbered-choices)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — keyboard shortcut
|
|
2
2
|
// Storybook: Components/Kbd → Pattern — keyboard shortcut (?path=/story/components-kbd--shortcut)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — action menu
|
|
2
2
|
// Storybook: Components/MoreMenu → Pattern — action menu (?path=/story/components-moremenu--action-menu)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — Card header cluster
|
|
2
2
|
// Storybook: Components/MoreMenu → Pattern — Card header cluster (?path=/story/components-moremenu--in-card-header)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — side nav (settings)
|
|
2
2
|
// Storybook: Components/NavList → Pattern — side nav (settings) (?path=/story/components-navlist--side-nav-settings)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — app header
|
|
2
2
|
// Storybook: Components/PageHeader → Pattern — app header (?path=/story/components-pageheader--app-header-pattern)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// @thewhatmatters/wmds@0.
|
|
1
|
+
// @thewhatmatters/wmds@0.3.0 · Pattern — page header
|
|
2
2
|
// Storybook: Components/PageHeader → Pattern — page header (?path=/story/components-pageheader--page-section-header)
|
|
3
3
|
// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
|
|
4
4
|
|