@syscore/ui-library 1.3.7 → 1.5.0

package/client/ui/Card.stories.tsx

@@ -210,103 +210,6 @@ export const FiltersPanel: Story = {
 //   },
 // };
 
-
-export const NavigatorPanel: Story = {
-  render: () => {
-    const [activeConcept, setActiveConcept] = useState<string>("community");
-    const [activeTheme, setActiveTheme] = useState<string>("C7");
-    const [activeStrategy, setActiveStrategy] = useState<string>("C7.4");
-
-    const concepts = [
-      { id: "mind", Icon: IconConceptMind },
-      { id: "community", Icon: IconConceptCommunity },
-      { id: "movement", Icon: IconConceptMovement },
-      { id: "water", Icon: IconConceptWater },
-      { id: "air", Icon: IconConceptAir },
-      { id: "light", Icon: IconConceptLight },
-      { id: "thermal", Icon: IconConceptThermalComfort },
-      { id: "nourishment", Icon: IconConceptNourishment },
-      { id: "sound", Icon: IconConceptSound },
-      { id: "materials", Icon: IconConceptMaterials },
-    ];
-
-    const themes = Array.from({ length: 9 }, (_, i) => `C${9 - i}`).reverse();
-    const strategies = ["C7.1", "C7.2", "C7.3", "C7.4"];
-
-    return (
-      <Card className="w-[344px] bg-cyan-50 border-gray-100 rounded-xl p-6 shadow-none flex flex-col gap-6">
-        {/* Concepts */}
-        <div className="flex flex-col gap-3">
-          <Label className="text-gray-600">Concept</Label>
-          <div className="flex flex-wrap gap-2">
-            {concepts.map(({ id, Icon }) => (
-              <button
-                key={id}
-                onClick={() => setActiveConcept(id)}
-                className="rounded-full transition-transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2"
-              >
-                <Icon active={activeConcept === id} className="size-12" />
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Theme */}
-        <div className="flex flex-col gap-3">
-          <Label className="text-gray-600">Theme</Label>
-          <div className="flex flex-wrap gap-2">
-            {themes.map((theme) => (
-              <button
-                key={theme}
-                onClick={() => setActiveTheme(theme)}
-                className={`w-12 h-8 rounded-[6px] flex items-center justify-center transition-colors ${activeTheme === theme
-                  ? "bg-cyan-800 text-white"
-                  : "bg-blue-100 text-blue-600 hover:bg-blue-200"
-                  }`}
-              >
-                <span className="body-small font-semibold">{theme}</span>
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Strategy */}
-        <div className="flex flex-col gap-3">
-          <Label className="text-gray-600">Strategy</Label>
-          <div className="flex flex-wrap gap-2">
-            {strategies.map((strategy) => (
-              <button
-                key={strategy}
-                onClick={() => setActiveStrategy(strategy)}
-                className={`w-12 h-8 rounded-[6px] flex items-center justify-center transition-colors ${activeStrategy === strategy
-                  ? "bg-[#0F748A]/10 border border-[#0F748A]/20 text-cyan-900"
-                  : "bg-blue-100 text-blue-600 hover:bg-blue-200"
-                  }`}
-              >
-                <span className="body-small font-semibold">{strategy}</span>
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Scope */}
-        <div className="flex flex-col gap-3">
-          <Label className="text-gray-600">Scope</Label>
-          <Toggle
-            className="w-full h-8 border border-gray-100 bg-white rounded-full p-0 [&>button]:flex-1"
-            options={[
-              { label: "Non-core", value: "non-core" },
-              { label: "Core", value: "core" },
-            ]}
-            defaultValue="non-core"
-          />
-        </div>
-      </Card>
-    );
-  },
-};
-
-
 export const ConceptCard: Story = {
   parameters: {
     docs: {
@@ -431,4 +334,5 @@ export const ConceptCard: Story = {
       </div>
     );
   },
-};
+};
+

package/client/ui/Hero.stories.tsx

@@ -0,0 +1,72 @@
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "../components/ui/button";
+import { HeroSection } from "../components/ui/hero-section";
+import { motion } from "motion/react";
+
+const meta = {
+    title: "Review/Hero",
+    component: HeroSection,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+} satisfies Meta<typeof HeroSection>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => (
+        <HeroSection backgroundSlot={
+            <motion.div
+                className="absolute bottom-0 flex items-center justify-center max-w-[1303px] mx-auto hidden sm:block"
+                initial={{ opacity: 0, scale: 1 }}
+                animate={{ opacity: 1, scale: 1.05 }}
+                transition={{ duration: 1, ease: [0.25, 0.46, 0.45, 0.94] }}
+                style={{ willChange: "transform, opacity" }}
+            >
+                <motion.div
+                    animate={{
+                        y: [0, -15, 0],
+                        scale: [1, 1.02, 1],
+                    }}
+                    transition={{
+                        duration: 8,
+                        ease: "easeInOut",
+                        repeat: Infinity,
+                        repeatType: "loop",
+                    }}
+                    style={{ willChange: "transform" }}
+                >
+                    <img
+                        src="/img/half-sphere.png"
+                        alt="WELL Standard Sphere"
+                        width={900}
+                        height={900}
+                        className="w-auto object-bottom object-contain select-none pointer-events-none "
+                    />
+                </motion.div>
+            </motion.div>
+        } contentSlot={
+            <motion.div
+                className="flex flex-wrap justify-center gap-4"
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: 0.5 }}
+            >
+                <Button variant="secondary-light" size="xlarge" className="shadow-2xl ">
+                    Explore the standard
+                </Button>
+                <Button
+                    size="xlarge"
+                    variant="clear"
+                    className="shadow-2xl bg-none bg-[#282A3133] px-15 text-white hover:bg-[#282a3166] "
+                >
+                    See what&apos;s new
+                </Button>
+            </motion.div>} />
+    ),
+};
+

package/client/ui/Navigation.stories.tsx

@@ -23,35 +23,44 @@ const navItems = [
 ];
 
 export const Default: Story = {
-  render: () => (
-    <div className="h-screen bg-[linear-gradient(var(--gradient-0))]">
+  args: {
+    isStrategy: false,
+    onLinkClick: (href) => console.log("Clicked:", href),
+    pathname: "/",
+  },
+  render: (args) => (
+    <div className="h-screen bg-cyan-900">
       <Navigation
-        navItems={navItems}
-        isStrategy={false}
-        onLinkClick={(href) => console.log("Clicked:", href)}
+        {...args}
       />
-      <div className="pt-20 p-8">
-        <p className="text-gray-600">
-          Navigation component is fixed at the top.
-        </p>
-        <p className="text-gray-600">Hover over menu items to see dropdowns.</p>
-      </div>
+
+    </div>
+  ),
+};
+
+export const WithNavItems: Story = {
+  args: {
+    navItems: navItems,
+    isStrategy: false,
+    onLinkClick: (href) => console.log("Clicked:", href),
+    pathname: "/",
+  },
+  render: (args) => (
+    <div className="h-screen bg-cyan-900">
+      <Navigation {...args} />
     </div>
   ),
 };
 
 export const StrategyMode: Story = {
-  render: () => (
+  args: {
+    isStrategy: true,
+    onLinkClick: (href) => console.log("Clicked:", href),
+    pathname: "/strategy",
+  },
+  render: (args) => (
     <div className="h-screen bg-white">
-      <Navigation
-        navItems={navItems}
-        isStrategy={true}
-        onLinkClick={(href) => console.log("Clicked:", href)}
-      />
-
-      <div className="pt-20 p-8">
-        <p className="text-gray-600">Strategy mode navigation.</p>
-      </div>
+      <Navigation {...args} />
     </div>
   ),
 };

package/client/ui/PageHeader.stories.tsx

@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  PageHeader,
+  PageHeaderTopSection,
+  PageHeaderLeftContent,
+  PageHeaderBadge,
+  PageHeaderTitle,
+  PageHeaderDescription,
+} from "../components/ui/page-header";
+import { BadgeCertificationBronze } from "../components/icons/AchievementBadges";
+import { CodeBadge } from "../components/ui/code-badge";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "../components/ui/tooltip";
+
+const meta = {
+  title: "Review/PageHeader",
+  component: PageHeader,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof PageHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Header variant 1: Explore the standard (simple title + conditional animated badge)
+export const ExploreStandard: Story = {
+  render: () => {
+    const hasAnyExpanded = true;
+
+    return (
+      <PageHeader>
+        <PageHeaderTopSection>
+          <PageHeaderTitle className="heading-small">
+            Explore the standard
+          </PageHeaderTitle>
+          <PageHeaderBadge animated show={hasAnyExpanded}>
+            <BadgeCertificationBronze />
+          </PageHeaderBadge>
+        </PageHeaderTopSection>
+
+        <PageHeaderDescription className="body-large">
+          Dive into a unified, harmonized WELL. Browse concepts, themes and
+          strategies that drive progress toward healthier, people-first places.
+        </PageHeaderDescription>
+      </PageHeader>
+    );
+  },
+};
+
+// Header variant 1: Without badge
+export const ExploreStandardNoBadge: Story = {
+  render: () => {
+    const hasAnyExpanded = false;
+
+    return (
+      <PageHeader>
+        <PageHeaderTopSection>
+          <PageHeaderTitle className="heading-small">
+            Explore the standard
+          </PageHeaderTitle>
+          <PageHeaderBadge animated show={hasAnyExpanded}>
+            <BadgeCertificationBronze />
+          </PageHeaderBadge>
+        </PageHeaderTopSection>
+
+        <PageHeaderDescription className="body-large">
+          Dive into a unified, harmonized WELL. Browse concepts, themes and
+          strategies that drive progress toward healthier, people-first places.
+        </PageHeaderDescription>
+      </PageHeader>
+    );
+  },
+};
+
+// Header variant 2: Theme header (CodeBadge + Tooltip + permanent badge)
+export const ThemeHeader: 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.",
+    };
+
+    return (
+      <PageHeader>
+        <PageHeaderTopSection className="mb-4">
+          <PageHeaderLeftContent>
+            <CodeBadge
+              code={themeCode}
+              style={{
+                backgroundColor: conceptColor.contrast || conceptColor.solid,
+                borderColor: conceptColor.border,
+                color: "white",
+              }}
+            />
+            <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>
+
+          <PageHeaderBadge>
+            <BadgeCertificationBronze />
+          </PageHeaderBadge>
+        </PageHeaderTopSection>
+
+        <PageHeaderTitle className="heading-small mb-3">
+          {themeData.name}
+        </PageHeaderTitle>
+        <PageHeaderDescription className="body-large">
+          {themeData.description}
+        </PageHeaderDescription>
+      </PageHeader>
+    );
+  },
+};
+
+// Title only
+export const TitleOnly: Story = {
+  render: () => {
+    return (
+      <PageHeader>
+        <PageHeaderTitle className="heading-small">
+          Title only header
+        </PageHeaderTitle>
+      </PageHeader>
+    );
+  },
+};