@syscore/ui-library 1.15.3 → 1.16.0

package/client/global.css

@@ -2042,7 +2042,6 @@ body {
 /* Tooltip Styles */
 .tooltip-content {
   position: relative;
-  background-color: #3e4049;
   z-index: 50;
   border-radius: 0.5rem;
   padding: 1.5rem;
@@ -2055,6 +2054,20 @@ body {
     zoom-in 0.15s ease-in-out;
 }
 
+.tooltip-content--default {
+  background-color: #3e4049;
+  color: #39c9ea;
+}
+
+.tooltip-content--simple {
+  border-radius: var(--radius-full, 9999px);
+  background-color: var(--color-cyan-50, #f0f8fb);
+  border: 1px solid var(--color-cyan-100, #eff5fb);
+  color: inherit;
+  padding: 0.75rem 1rem;
+  margin-top: 0.5rem;
+}
+
 .tooltip-content[data-state="closed"] {
   animation:
     fade-out 0.15s ease-in-out,
@@ -3773,7 +3786,7 @@ body {
   position: fixed;
   inset: 0;
   z-index: 50;
-  background-color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(0, 0, 0, 0.08);
 }
 
 .drawer-content {
@@ -3785,9 +3798,10 @@ body {
   margin-top: 6rem;
   display: flex;
   height: auto;
+  max-height: 70vh;
   flex-direction: column;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
+  border-top-left-radius: 32px;
+  border-top-right-radius: 32px;
   border: 1px solid hsl(var(--border));
   background-color: hsl(var(--background));
 }
@@ -3796,10 +3810,10 @@ body {
   margin-left: auto;
   margin-right: auto;
   margin-top: 1rem;
-  height: 0.5rem;
-  width: 6.25rem;
+  height: 4px;
+  width: 52px;
   border-radius: 9999px;
-  background-color: hsl(var(--muted));
+  background-color: var(--color-gray-300);
 }
 
 .drawer-header {
@@ -3836,6 +3850,89 @@ body {
   color: hsl(var(--muted-foreground));
 }
 
+/* MobileNav Styles */
+.mobile-nav {
+  display: flex;
+  flex-direction: column;
+}
+
+.mobile-nav-panel {
+  background-color: white;
+  border-radius: 32px 32px 0 0;
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.mobile-nav-panel[data-closed] {
+  border-top: 0;
+}
+
+.mobile-nav-handle {
+  display: flex;
+  justify-content: center;
+  padding-top: 1rem;
+  padding-bottom: 2rem;
+  cursor: grab;
+  touch-action: none;
+}
+
+.mobile-nav-handle:active {
+  cursor: grabbing;
+}
+
+.mobile-nav-handle-bar {
+  height: 4px;
+  width: 52px;
+  border-radius: 9999px;
+  background-color: var(--color-gray-300);
+}
+
+.mobile-nav-content {
+  overflow-y: auto;
+  height: calc(100% - 40px);
+}
+
+.mobile-nav-bar {
+  border-top: 1px solid var(--color-gray-100);
+  background-color: var(--color-gray-50);
+  flex-shrink: 0;
+  min-height: 136px;
+}
+
+.mobile-nav-bar-inner {
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  max-width: 28rem;
+  align-items: center;
+  justify-content: space-around;
+  padding-top: 0.5rem;
+  padding-bottom: 2rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.mobile-nav-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  cursor: pointer;
+  transition: color 150ms;
+  color: var(--color-gray-400);
+}
+
+.mobile-nav-trigger:hover {
+  color: var(--color-gray-600);
+}
+
+.mobile-nav-trigger[data-active] {
+  color: var(--color-gray-900);
+}
+
 /* Pagination Styles */
 .pagination {
   margin-left: auto;

package/client/ui/Icons.stories.tsx

@@ -72,6 +72,10 @@ import {
   SealProviders,
 } from "../components/icons/provider-seals";
 import { UtilityTrash } from "@/components/icons/UtilityTrash";
+import {
+  BadgeImperativePrimary,
+  BadgeImperativeSecondary,
+} from "../components/icons/imperative-badges";
 import {
   BadgeCertificationBronze,
   BadgeCertificationSilver,
@@ -323,58 +327,58 @@ export const Seals: Story = {
         <h2 className="text-2xl font-bold mb-6">Seals</h2>
         <div className="grid grid-cols-1  gap-6">
           <div className="grid grid-cols-2 sm:grid-cols-6 items-start gap-6">
-            <div className="flex flex-col items-start gap-2">
+            <div className="flex flex-col items-center gap-2">
               <p>IWBILogo</p>
               <div className="flex flex-col items-center gap-2">
-                <IWBILogo className="size-48" />
+                <IWBILogo className="size-24" />
               </div>
             </div>
             <div className="flex flex-col items-center gap-2">
               <p>WELL Seals</p>
-              <div className="flex flex-col gap-2">
-                <SealWell className="size-40" />
-                <SealWorksWithWell className="size-40" />
+              <div className="flex flex-col items-center gap-2">
+                <SealWell className="size-24" />
+                <SealWorksWithWell className="size-24" />
               </div>
             </div>
             <div className="flex flex-col items-center gap-2">
               <p>IWBI Seals</p>
-              <div className="flex flex-col gap-2">
-                <SealIwbiMember className="size-40" />
-                <SealWellCertification className="size-40" />
-                <SealWellCommunity className="size-40" />
-                <SealWellResidence className="size-40" />
+              <div className="flex flex-col items-center gap-2">
+                <SealIwbiMember className="size-24" />
+                <SealWellCertification className="size-24" />
+                <SealWellCommunity className="size-24" />
+                <SealWellResidence className="size-24" />
               </div>
             </div>
             <div className="flex flex-col items-center gap-2">
               <p>Certification Seals</p>
-              <div className="flex flex-col gap-2">
-                <SealCertification className="size-40" />
-                <SealCertificationBronze className="size-40" />
-                <SealCertificationSilver className="size-40" />
-                <SealCertificationGold className="size-40" />
-                <SealCertificationPlatinum className="size-40" />
+              <div className="flex flex-col items-center justify-center gap-2">
+                <SealCertification className="size-24" />
+                <SealCertificationBronze className="size-24" />
+                <SealCertificationSilver className="size-24" />
+                <SealCertificationGold className="size-24" />
+                <SealCertificationPlatinum className="size-24" />
               </div>
             </div>
             <div className="flex flex-col items-center gap-2">
               <p>Rating Seals</p>
-              <div className="flex flex-col gap-2">
-                <SealRating className="size-40" />
-                <SealRatingHealthSafety className="size-40" />
-                <SealRatingOperations className="size-40" />
-                <SealRatingPerformance className="size-40" />
-                <SealRatingEquity className="size-40" />
-                <SealRatingCoworking className="size-40" />
-                <SealRatingWorkforce className="size-40" />
-                <SealRatingDesign className="size-40" />
-                <SealRatingRealEstate className="size-40" />
+              <div className="flex flex-col items-center justify-center gap-2">
+                <SealRating className="size-24" />
+                <SealRatingHealthSafety className="size-24" />
+                <SealRatingOperations className="size-24" />
+                <SealRatingPerformance className="size-24" />
+                <SealRatingEquity className="size-24" />
+                <SealRatingCoworking className="size-24" />
+                <SealRatingWorkforce className="size-24" />
+                <SealRatingDesign className="size-24" />
+                <SealRatingRealEstate className="size-24" />
               </div>
             </div>
             <div className="flex flex-col items-center gap-2">
               <p>Watermark Seals</p>
-              <div className="flex flex-col gap-2">
-                <WatermarkMemberOrg className="size-40" />
-                <WaterMarkWWWProducts className="size-40" />
-                <WaterMarkWellProjects className="size-40" />
+              <div className="flex flex-col items-center justify-center gap-2">
+                <WatermarkMemberOrg className="size-24" />
+                <WaterMarkWWWProducts className="size-24" />
+                <WaterMarkWellProjects className="size-24" />
               </div>
             </div>
           </div>
@@ -477,3 +481,21 @@ export const AchievementBadges: Story = {
     </div>
   ),
 };
+
+export const ImperativeBadges: Story = {
+  render: () => (
+    <div className="space-y-8 p-8">
+      <h2 className="text-2xl font-bold mb-6">Imperative Badges</h2>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+        <div className="flex flex-col items-center gap-2">
+          <BadgeImperativePrimary />
+          <span className="text-sm font-medium">Primary</span>
+        </div>
+        <div className="flex flex-col items-center gap-2">
+          <BadgeImperativeSecondary />
+          <span className="text-sm font-medium">Secondary</span>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/client/ui/MobileNav.stories.tsx

@@ -0,0 +1,317 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  MobileNav,
+  MobileNavPanel,
+  MobileNavBar,
+  MobileNavTrigger,
+} from "../components/ui/mobile-nav";
+import {
+  Workflow,
+  PenLine,
+  MessageSquare,
+  TriangleAlert,
+  X,
+} from "lucide-react";
+import { useState } from "react";
+import { UtilityText } from "../components/icons/UtilityText";
+import { UtilityCompare } from "../components/icons/UtilityCompare";
+import { UtilityRevisionsShow } from "../components/icons/UtilityRevisionsShow";
+import { UtilityFeedback } from "../components/icons/UtilityFeedback";
+
+const meta = {
+  title: "Review/MobileNav",
+  component: MobileNav,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component: `
+Mobile navigation with a spring-animated slide-up panel. Built as a **compound component** — state is managed internally via React context, so consumers never need \`useState\` or handlers.
+
+## Compound Components
+
+| Component | Role |
+|---|---|
+| \`MobileNav\` | Root — holds state, provides context |
+| \`MobileNavPanel\` | Slide-up panel with 3 discrete states: **initial** (content height, max 70%), **full** (viewport), **closed** |
+| \`MobileNavBar\` | Bottom nav bar wrapper |
+| \`MobileNavTrigger\` | Individual nav button — toggles the panel or fires a custom action |
+
+## Basic Usage
+
+\`\`\`tsx
+<MobileNav className="h-screen">
+  <MobileNavPanel>
+    {(activeKey) => <MyContent tab={activeKey} />}
+  </MobileNavPanel>
+
+  <MobileNavBar>
+    <MobileNavTrigger value="home" label="Home">
+      <HomeIcon className="size-6" />
+    </MobileNavTrigger>
+    <MobileNavTrigger value="search" label="Search">
+      <SearchIcon className="size-6" />
+    </MobileNavTrigger>
+  </MobileNavBar>
+</MobileNav>
+\`\`\`
+
+## Styling Active State
+
+\`MobileNavTrigger\` renders a \`<button>\` with the \`group\` class and a \`data-active\` attribute when selected. Use Tailwind's \`group-data-active:\` modifier on children to style based on active state:
+
+\`\`\`tsx
+<MobileNavTrigger value="home" label="Home">
+  <HomeIcon className="size-6 text-gray-400 group-data-active:text-gray-900" />
+  <span className="text-xs hidden group-data-active:block">Home</span>
+</MobileNavTrigger>
+\`\`\`
+
+## Custom Actions (onAction)
+
+Use \`onAction\` on a trigger to fire a custom callback instead of opening the panel:
+
+\`\`\`tsx
+<MobileNavTrigger value="add" label="Add" onAction={() => openModal()}>
+  <PlusIcon className="size-6" />
+</MobileNavTrigger>
+\`\`\`
+
+## Panel Gestures
+
+The drag handle supports swipe gestures that snap between discrete states:
+
+- **Swipe up** from initial → full screen
+- **Swipe down** from full → initial height
+- **Swipe down** from initial → close
+`,
+      },
+    },
+  },
+} satisfies Meta<typeof MobileNav>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+type TabKey = "list" | "workflow" | "edit" | "comments";
+
+const tabContent: Record<
+  TabKey,
+  { title: string; items: { label: string; description: string }[] }
+> = {
+  list: {
+    title: "Changes",
+    items: [
+      {
+        label: "Reduced scope",
+        description:
+          "Requirement 2 no longer includes sulfide as a testing parameter.",
+      },
+      {
+        label: "Clarity edits",
+        description: "Requirement 2 has been re-written to maximize clarity.",
+      },
+      {
+        label: "New threshold",
+        description:
+          "Requirement 3 adds a 0.05 mg/L threshold for lead in drinking water.",
+      },
+    ],
+  },
+  workflow: {
+    title: "Workflow",
+    items: [
+      {
+        label: "Review pending",
+        description: "3 items awaiting team review before finalization.",
+      },
+      {
+        label: "Approved",
+        description: "12 strategies have been approved this cycle.",
+      },
+    ],
+  },
+  edit: {
+    title: "Edits",
+    items: [
+      {
+        label: "Draft update",
+        description: "Strategy C8.2 has been revised with new language.",
+      },
+      {
+        label: "Formatting fix",
+        description:
+          "Table headers in Requirement 1 corrected for consistency.",
+      },
+    ],
+  },
+  comments: {
+    title: "Comments",
+    items: [
+      {
+        label: "Team feedback",
+        description:
+          'Sarah noted: "Consider adding a grace period for compliance."',
+      },
+      {
+        label: "Compliance window",
+        description:
+          "Suggest extending the compliance window from 30 to 60 days.",
+      },
+      {
+        label: "Testing methodology",
+        description:
+          "Lab results should include both grab and composite samples.",
+      },
+      {
+        label: "Documentation gap",
+        description:
+          "Section 4.2 is missing referenced appendix for field procedures.",
+      },
+      {
+        label: "Stakeholder input",
+        description:
+          "Community advisory board requested public comment period extension.",
+      },
+      {
+        label: "Budget concern",
+        description:
+          "Monitoring costs may exceed allocated budget by 15% in Q3.",
+      },
+      {
+        label: "Reviewer note",
+        description:
+          "External reviewer flagged Requirement 4 for further clarification.",
+      },
+    ],
+  },
+};
+
+const PanelContent = ({ activeKey }: { activeKey: string }) => {
+  const content = tabContent[activeKey as TabKey];
+  if (!content) return null;
+
+  return (
+    <div className="mx-auto w-full max-w-md">
+      <div className="px-4 pb-2">
+        <h2 className="text-lg font-semibold tracking-tight">
+          {content.title}
+        </h2>
+      </div>
+      <div className="px-4 pb-4 space-y-3">
+        {content.items.map((item) => (
+          <div
+            key={item.label}
+            className="flex items-start justify-between gap-3 rounded-lg border border-gray-100 bg-white p-4"
+          >
+            <div className="space-y-1">
+              <p className="text-sm font-semibold text-gray-900">
+                {item.label}
+              </p>
+              <p className="text-sm text-gray-500">{item.description}</p>
+            </div>
+            <TriangleAlert className="mt-0.5 size-5 shrink-0 text-teal-400" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const Default: Story = {
+  args: { children: null },
+
+  render: () => (
+    <MobileNav className="h-screen w-full bg-gray-50">
+      {/* Main content area */}
+      <div className="flex-1 p-6 overflow-y-auto">
+        <p className="text-sm text-gray-400">
+          Tap an icon below to open the panel.
+        </p>
+      </div>
+
+      {/* Panel slides up above the nav */}
+      <MobileNavPanel>
+        {(activeKey) => <PanelContent activeKey={activeKey} />}
+      </MobileNavPanel>
+
+      {/* Nav — always visible */}
+      <MobileNavBar>
+        <MobileNavTrigger value="list" label="Changes">
+          <UtilityText className="size-6 text-gray-500 group-data-active:text-gray-900" />
+        </MobileNavTrigger>
+        <MobileNavTrigger value="workflow" label="Workflow">
+          <UtilityCompare className="size-6 text-gray-500 group-data-active:text-gray-900" />
+        </MobileNavTrigger>
+        <MobileNavTrigger value="edit" label="Edits">
+          <UtilityRevisionsShow className="size-6 text-gray-500 group-data-active:text-gray-900" />
+        </MobileNavTrigger>
+        <MobileNavTrigger value="comments" label="Comments">
+          <MessageSquare className="size-6 text-gray-500 group-data-active:text-gray-900" />
+        </MobileNavTrigger>
+      </MobileNavBar>
+    </MobileNav>
+  ),
+};
+
+const WithCustomActionRender = () => {
+  const [modalOpen, setModalOpen] = useState(false);
+
+  return (
+    <MobileNav className="relative h-screen w-full bg-gray-50">
+      <div className="flex-1 p-6 overflow-y-auto">
+        <p className="text-sm text-gray-400">
+          The &ldquo;Edits&rdquo; trigger opens a modal instead of the panel.
+        </p>
+      </div>
+
+      <MobileNavPanel>
+        {(activeKey) => <PanelContent activeKey={activeKey} />}
+      </MobileNavPanel>
+
+      <MobileNavBar>
+        <MobileNavTrigger value="list" label="Changes">
+          <UtilityText className="size-6 text-gray-500 group-data-active:text-gray-900" />
+        </MobileNavTrigger>
+        <MobileNavTrigger value="workflow" label="Workflow">
+          <UtilityCompare className="size-8 text-gray-500 group-data-active:text-gray-900" />
+        </MobileNavTrigger>
+        <MobileNavTrigger
+          value="edit"
+          label="Edits"
+          onAction={() => setModalOpen(true)}
+        >
+          <UtilityRevisionsShow className="size-6 text-gray-500" />
+        </MobileNavTrigger>
+        <MobileNavTrigger value="comments" label="Comments">
+          <UtilityFeedback className="size-6 text-gray-500 group-data-active:text-gray-900" />
+        </MobileNavTrigger>
+      </MobileNavBar>
+
+      {modalOpen && (
+        <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/20">
+          <div className="relative rounded-xl bg-white p-6 shadow-lg w-72">
+            <button
+              onClick={() => setModalOpen(false)}
+              className="absolute top-3 right-3 text-gray-400 hover:text-gray-600"
+              aria-label="Close"
+            >
+              <X className="size-4" />
+            </button>
+            <p className="text-sm font-semibold text-gray-900">Edit mode</p>
+            <p className="mt-1 text-sm text-gray-500">
+              This modal was opened via onAction instead of the panel.
+            </p>
+          </div>
+        </div>
+      )}
+    </MobileNav>
+  );
+};
+
+export const WithCustomAction: Story = {
+  args: { children: null },
+  render: () => <WithCustomActionRender />,
+};

package/client/ui/PageHeader.stories.tsx

@@ -16,6 +16,8 @@ import {
 } from "../components/ui/tooltip";
 import { motion, AnimatePresence } from "motion/react";
 import { useState } from "react";
+import { BadgeImperativePrimary } from "@/components/icons/imperative-badges";
+import { Text } from "@/components/ui/typography";
 
 const meta = {
   title: "Review/PageHeader",
@@ -288,3 +290,83 @@ export const ThemeHeaderWithPoints: Story = {
     );
   },
 };
+
+export const ThemeHeaderWithImperativeBadge: Story = {
+  render: () => {
+    const themeCode = "C8";
+    const conceptColor = {
+      solid: "#0f748a",
+      contrast: "#0f748a",
+      border: "#0f748a",
+    };
+    const themeData = {
+      name: "Occupant experience",
+      description:
+        "This theme focuses on understanding and improving the overall experience of building occupants through research and feedback mechanisms.",
+    };
+
+    const [isHovered, setIsHovered] = useState(false);
+    const [tooltipOpen, setTooltipOpen] = useState(false);
+    const isVisible = isHovered || tooltipOpen;
+
+    return (
+      <PageHeader>
+        <PageHeaderTopSection className="mb-4">
+          <PageHeaderLeftContent>
+            <Tag
+              variant="code"
+              style={{
+                backgroundColor: conceptColor.contrast || conceptColor.solid,
+                borderColor: conceptColor.border,
+                color: "white",
+              }}
+            >
+              {themeCode}
+            </Tag>
+            <Tooltip trigger="click">
+              <TooltipTrigger>
+                <span className="body-base text-gray-600 underline-dotted cursor-pointer">
+                  Theme
+                </span>
+              </TooltipTrigger>
+              <TooltipContent className="max-w-[400px]">
+                <p className="body-base text-white">
+                  Themes are groupings of related strategies that address
+                  specific aspects of health and well-being within a concept
+                  area.
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          </PageHeaderLeftContent>
+
+          <div className="flex items-center gap-4">
+            <Tooltip>
+              <TooltipTrigger>
+                <BadgeImperativePrimary className="cursor-pointer" />
+              </TooltipTrigger>
+              <TooltipContent variant="simple">
+                <Text as="p" variant="body-small">
+                  <span className="font-semibold">Required</span> for
+                  certification
+                </Text>
+              </TooltipContent>
+            </Tooltip>
+            <div className="flex items-end gap-1">
+              <span className="text-gray-800 number-large font-semibold">
+                1
+              </span>
+              <span className="text-gray-800 overline-medium">PT</span>
+            </div>
+          </div>
+        </PageHeaderTopSection>
+
+        <PageHeaderTitle className="heading-small mb-3">
+          {themeData.name}
+        </PageHeaderTitle>
+        <PageHeaderDescription className="body-large">
+          {themeData.description}
+        </PageHeaderDescription>
+      </PageHeader>
+    );
+  },
+};