feat: port Enterprise Health frontdoor design work (8 components) + "In production" docs strip - #420
Open
ebellamy-bh wants to merge 4 commits into
Open
feat: port Enterprise Health frontdoor design work (8 components) + "In production" docs strip#420ebellamy-bh wants to merge 4 commits into
ebellamy-bh wants to merge 4 commits into
Conversation
…Menu, docs "In production" strip - Button: `effect="sheen" | "orbit"` (sheen sweep, orbiting accent glint) and `data-variant`; shared keyframes in new src/styles/effects.css, shipped in dist/styles.css and beside init.css for Tailwind 4 consumers - VideoCard + PlayButton: branded spinning play ring, "Watch · 34 min" pill, muted YouTube hover preview with progress bar via new `useYouTubeHoverPreview` hook (exported from @mieweb/ui/hooks) - MegaMenu + MegaMenuBar: hover/click dropdown with heading, item grid or grouped columns, footer CTA, and a contextual right-column feature panel that follows the hovered item (`item.featured` → menu default; `resolveFeatured` override). SiteHeader accepts `menus` + `currentPath`; the mobile drawer flattens them into labelled groups. - Storybook: custom DocsPage renders `parameters.meta` as an "In production" block (used-in repos, live URLs, agent skills, design origin, Periscope) with SourceTip hover cards. Contract in src/docs/component-meta.ts; seeded on Button, SectionSpyNav, SourceTip, VideoCard, MegaMenu. AI-Agent: GitHub Copilot / claude-fable-5.1 AI-Sessions: 1 · 1 review rounds Atlas-Layer: interface Work-Type: origination
…EH frontdoor - YearTimeline: Gantt-style year with twelve month columns, rows grouped by cadence (scheduled windows as gradient pill bars; continuous and event-driven items in full-width lanes), month gridlines, a live playhead + "Today" pill, and Now / Up next badges. Generic replacement for the compliance calendar — fits any recurring annual schedule. - SliderCalculator: two-column calculator composed from `Slider`; consumer passes a pure `compute(values) → result` and gets an animated headline, summary, proportional breakdown bars, "Show the math" disclosure, actions and footnote. `AnimatedNumber` exported for reuse. - OrbitRing: concentric rings of satellite chips orbiting a centre mark at different speeds/directions, chips counter-rotating to stay upright, whole system pausing on hover/focus with a name label. Container-relative sizing. All three ship `parameters.meta` (used-in, skills, origin) for the docs strip. AI-Agent: GitHub Copilot / claude-fable-5.1 AI-Sessions: 1 Atlas-Layer: interface Work-Type: origination
…int meta - RadialExplorer: centre mark with icon tiles orbiting it, a glowing tracer ray to the active tile, tab dots, and a detail panel (media / copy / CTAs, welcome state) that auto-advances until the visitor engages. Chip grid below `lg`. Generic port of the EH hero HUD; pair `media` with `VideoCard variant="plate"`. - Globe: react-globe.gl wrapper — dotted-hex continents, hub/city dots with tooltips, auto-built hub-and-spoke arcs, auto-rotation (off under reduced motion), and a pill callout with flag, sub-label and live local clock. Ships from a separate `@mieweb/ui/globe` entry; `react-globe.gl` and `three` are optional peers so the default install stays light. Tests mock the WebGL layer and cover arc building, selection and the callout. - Docs meta: `tokens` (creation footprint — total/sessions/reviews/source) rendered as a "Cost" row beside the Periscope link. Tokens are the git-tracked fact; dollars stay a Periscope view. AI-Agent: GitHub Copilot / claude-fable-5.1 AI-Sessions: 1 Atlas-Layer: interface Work-Type: origination
…the EH preview BrandColors gains an optional `accent` (DEFAULT/light/dark); Enterprise Health sets it to match enterprise-health.css. The brand decorator now emits --mieweb-accent* (or resets them to `initial` so brands without an accent fall back to primary). AI-Agent: GitHub Copilot / claude-fable-5.1 AI-Sessions: 1 Atlas-Layer: interface Work-Type: maintenance
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
|
||
| function normalizePath(href: string): string { | ||
| const path = href.split('#')[0].split('?')[0]; | ||
| return path.replace(/\/+$/, '') || '/'; |
Deploying ui with
|
| Latest commit: |
2c2be78
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://0a0fa5df.ui-6d0.pages.dev |
| Branch Preview URL: | https://feat-eh-frontdoor-ports.ui-6d0.pages.dev |
Contributor
There was a problem hiding this comment.
Pull request overview
Ports the Enterprise Health frontdoor design system work into @mieweb/ui, including several new interactive components, a shared motion-effects stylesheet, and Storybook autodocs enhancements that surface “In production” metadata per component.
Changes:
- Added multiple new UI components (MegaMenu, VideoCard, YearTimeline, SliderCalculator, OrbitRing, RadialExplorer) plus a separate
@mieweb/ui/globeentry with optional peer deps. - Introduced shared motion/effects CSS (
effects.css) and wired it into both the compiled styles and the Tailwind v4 quick-startinit.css. - Implemented Storybook docs support for
parameters.metavia a custom DocsPage +ComponentMetaBlock, and added brand accent token injection for previews.
Reviewed changes
Copilot reviewed 49 out of 50 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| tsup.config.ts | Adds new build entrypoints/exports for Globe + new component subpath builds; marks globe deps external. |
| src/styles/init.css | Imports effects.css for Tailwind v4 quick-start users. |
| src/styles/effects.css | New shared motion/effects classes (sheen/orbit/spin/fade-in). |
| src/styles/base.css | Imports effects.css into compiled styles.css. |
| src/index.ts | Exports newly added components from the root barrel. |
| src/hooks/useYouTubeHoverPreview.ts | New hook powering muted YouTube hover previews. |
| src/hooks/index.ts | Exposes the new YouTube hover preview hook + types. |
| src/globe.ts | New separate @mieweb/ui/globe entrypoint exporting Globe. |
| src/docs/component-meta.ts | Defines the typed parameters.meta contract and URL helpers for docs. |
| src/components/YearTimeline/YearTimeline.tsx | New YearTimeline component implementation. |
| src/components/YearTimeline/YearTimeline.test.tsx | Adds unit tests for YearTimeline + resolveCurrent. |
| src/components/YearTimeline/YearTimeline.stories.tsx | Adds Storybook stories + “In production” metadata for YearTimeline. |
| src/components/YearTimeline/index.ts | Barrel export for YearTimeline. |
| src/components/VideoCard/VideoCard.tsx | New VideoCard + PlayButton components. |
| src/components/VideoCard/VideoCard.test.tsx | Adds unit tests for VideoCard + PlayButton. |
| src/components/VideoCard/VideoCard.stories.tsx | Adds Storybook stories + “In production” metadata for VideoCard. |
| src/components/VideoCard/index.ts | Barrel export for VideoCard. |
| src/components/SourceTip/SourceTip.stories.tsx | Seeds “In production” metadata for SourceTip. |
| src/components/SliderCalculator/SliderCalculator.tsx | New SliderCalculator + AnimatedNumber implementation. |
| src/components/SliderCalculator/SliderCalculator.test.tsx | Adds unit tests for SliderCalculator + AnimatedNumber. |
| src/components/SliderCalculator/SliderCalculator.stories.tsx | Adds Storybook stories + “In production” metadata for SliderCalculator. |
| src/components/SliderCalculator/index.ts | Barrel export for SliderCalculator. |
| src/components/SiteHeader/SiteHeader.tsx | Integrates MegaMenuBar + menus/currentPath support into SiteHeader + mobile drawer. |
| src/components/SectionSpyNav/SectionSpyNav.stories.tsx | Seeds “In production” metadata for SectionSpyNav. |
| src/components/RadialExplorer/RadialExplorer.tsx | New RadialExplorer component implementation. |
| src/components/RadialExplorer/RadialExplorer.test.tsx | Adds unit tests for RadialExplorer. |
| src/components/RadialExplorer/RadialExplorer.stories.tsx | Adds Storybook stories + “In production” metadata for RadialExplorer. |
| src/components/RadialExplorer/index.ts | Barrel export for RadialExplorer. |
| src/components/OrbitRing/OrbitRing.tsx | New OrbitRing component implementation. |
| src/components/OrbitRing/OrbitRing.test.tsx | Adds unit tests for OrbitRing. |
| src/components/OrbitRing/OrbitRing.stories.tsx | Adds Storybook stories + “In production” metadata for OrbitRing. |
| src/components/OrbitRing/index.ts | Barrel export for OrbitRing. |
| src/components/MegaMenu/MegaMenu.tsx | New MegaMenu + MegaMenuBar component implementation. |
| src/components/MegaMenu/MegaMenu.test.tsx | Adds unit tests for MegaMenu + MegaMenuBar. |
| src/components/MegaMenu/MegaMenu.stories.tsx | Adds Storybook stories + “In production” metadata for MegaMenu. |
| src/components/MegaMenu/index.ts | Barrel export for MegaMenu. |
| src/components/Globe/index.ts | Barrel export for Globe component. |
| src/components/Globe/Globe.tsx | New Globe wrapper implementation + arc builder + callout UI. |
| src/components/Globe/Globe.test.tsx | Adds unit tests with react-globe.gl/three stubs for jsdom. |
| src/components/Globe/Globe.stories.tsx | Adds Storybook stories + “In production” metadata for Globe. |
| src/components/Button/Button.tsx | Adds effect prop variants and data-variant for effects styling. |
| src/components/Button/Button.test.tsx | Adds tests for the new Button effect behavior. |
| src/components/Button/Button.stories.tsx | Adds Storybook controls and a story for Button hover effects + metadata. |
| src/brands/types.ts | Extends BrandColors with optional accent scale. |
| src/brands/enterprise-health.ts | Defines Enterprise Health brand accent colors. |
| package.json | Adds ./globe export, optional peer deps for globe, and copies effects.css into dist/styles. |
| .storybook/preview.tsx | Injects accent CSS vars for brand preview + uses custom DocsPage. |
| .storybook/DocsPage.tsx | New DocsPage layout inserting the “In production” block. |
| .storybook/blocks/ComponentMetaBlock.tsx | New docs block rendering parameters.meta via SourceTip chips. |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+69
to
+74
| /** Opt-in hover motion (see src/styles/effects.css). */ | ||
| effect: { | ||
| none: '', | ||
| sheen: 'mie-fx-sheen hover:-translate-y-0.5', | ||
| orbit: 'mie-fx-orbit hover:-translate-y-0.5', | ||
| }, |
Comment on lines
+221
to
+235
| const result = React.useMemo(() => compute(values), [compute, values]); | ||
|
|
||
| const fmtResult = makeFormatter(resultFormat, locale, currency); | ||
| const fmtBreakdown = makeFormatter(breakdownFormat, locale, currency); | ||
| const labels = { | ||
| show: 'Show the math', | ||
| hide: 'Hide the math', | ||
| ...mathLabels, | ||
| }; | ||
|
|
||
| const set = (key: string, v: number) => { | ||
| const next = { ...values, [key]: v }; | ||
| setValues(next); | ||
| onChange?.(next, compute(next)); | ||
| }; |
Comment on lines
+229
to
+232
| void loadYouTubeIframeApi().then(() => { | ||
| if (hoveringRef.current) beginPlayer(); | ||
| else stopPreview(); | ||
| }); |
Comment on lines
+26
to
30
| @import './effects.css'; | ||
|
|
||
| /* ── Dark Mode Variant ───────────────────────────────────────────────── */ | ||
| @custom-variant dark (&:where(.dark, [data-theme=dark], .dark *, [data-theme=dark] *)); | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Promotes the design work that shipped on the EH frontdoor (concept.enterprise.health) into
@mieweb/ui, re-tokenised on--mieweb-*so every brand gets it. Also adds a Storybook docs block that shows where each component is used in production and which agent skills teach it.New components
Button effect="sheen" | "orbit".btn--plum/.btn--outlinesrc/styles/effects.css(ships instyles.cssand besideinit.css)VideoCard+PlayButton+useYouTubeHoverPreviewMegaMenu+MegaMenuBaritem.featured→ menu default;resolveFeaturedoverride).SiteHeaderacceptsmenus+currentPath; mobile drawer flattens themYearTimelineSliderCalculator+AnimatedNumberSlider; consumer passes purecompute(values) → resultOrbitRingRadialExplorerlgGlobe@mieweb/ui/globeentry;react-globe.gl+threeare optional peers (AGGrid pattern) so the default install is unaffectedDocs: "In production" strip
parameters.meta(typed insrc/docs/component-meta.ts) renders on every autodocs page via a customDocsPage: used-in repos with live URLs, agent skills, design origin, creation-token footprint and a Periscope link — all asSourceTiphover cards (dogfooding). Seeded on Button, SectionSpyNav, SourceTip and every new component. Reverse links land inmieweb/agent-skills(metadata.ui-components).Storybook fix
BrandColors.accent(optional) is now injected as--mieweb-accent*by the brand decorator; Enterprise Health sets gold so gilt effects preview correctly. Brands without an accent reset the vars so components fall back to primary.Verification
pnpm typecheck✓pnpm lint✓pnpm vitest run792/792 ✓pnpm build✓ (dist/globe.*emitted)prefers-reduced-motion; all interactive pieces keyboard-reachableNotes for reviewers
0.9.0.tokensonparameters.metais intentionally unset; fill from session logs (tokens are the fact, dollars stay a Periscope view).Atlas-Layer: interface).