@syscore/ui-library 1.3.5 → 1.3.7

package/client/ui/StandardNavigation.stories.tsx

@@ -0,0 +1,399 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { StandardNavigation, NavItem } from "@/components/ui/standard-navigation";
+import { StandardLogo } from "@/components/icons/StandardLogo";
+import { NavAccount } from "@/components/icons/NavAccount";
+import { Globe } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+
+
+const meta = {
+  title: "Review/StandardNavigation",
+  component: StandardNavigation,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof StandardNavigation>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// Sample navigation links with nested sections
+const sampleNavLinks: NavItem[] = [
+  {
+    label: "WELL",
+    section: {
+      heading: "WELL sets the standard for people-first places",
+      headingGradient:
+        "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
+      columns: [
+        {
+          title: "Everything",
+          links: [
+            { label: "Explore WELL", href: "/explore" },
+            { label: "Enroll in WELL", href: "/enroll" },
+            { label: "What's new", href: "/whats-new" },
+          ],
+        },
+        {
+          title: "WHY WELL",
+          links: [
+            { label: "Performance", href: "/performance" },
+            { label: "ROI", href: "/roi" },
+            { label: "Impact", href: "/impact" },
+          ],
+        },
+        {
+          title: "Standard",
+          links: [
+            { label: "Strategies", href: "/strategies" },
+            { label: "Themes", href: "/themes" },
+            { label: "Milestones", href: "/milestones" },
+          ],
+        },
+        {
+          title: "Network",
+          links: [
+            { label: "Organizations", href: "/organizations" },
+            { label: "People", href: "/people" },
+          ],
+        },
+        {
+          title: "Solutions",
+          links: [
+            { label: "Products", href: "/products" },
+            { label: "Services", href: "/services" },
+          ],
+        },
+        {
+          title: "Places",
+          links: [
+            { label: "Locations", href: "/locations" },
+            { label: "Portfolios", href: "/portfolios" },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    label: "Pursuits",
+    section: {
+      heading: "WELL works everywhere, at any scale",
+      headingGradient:
+        "linear-gradient(99deg, #41D5F6 3.39%, #3EECD1 57.86%, #66FCD9 112.32%)",
+      columns: [
+        {
+          title: "SUBSCRIBE",
+          links: [
+            { label: "WELL at scale", href: "/well-at-scale" },
+            { label: "Pricing", href: "/pricing", bulletColor: "" },
+            { label: "Leaderboard", href: "/leaderboard", bulletColor: "" },
+          ],
+        },
+        {
+          title: "Certify",
+          links: [
+            { label: "WELL Certification", href: "/certification" },
+            {
+              label: "WELL Residence",
+              href: "/residence",
+              badge: "PILOT",
+            },
+          ],
+        },
+        {
+          title: "Get rated",
+          links: [
+            { label: "WELL Ratings", href: "/ratings" },
+            {
+              label: "Health-Safety Rating",
+              href: "/health-safety",
+              bulletColor: "#F3E7D8",
+            },
+            {
+              label: "Performance Rating",
+              href: "/performance-rating",
+              bulletColor: "#0F748A",
+            },
+            {
+              label: "Equity Rating",
+              href: "/equity-rating",
+              bulletColor: "#17AA8D",
+            },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    label: "Network",
+    section: {
+      heading: "Our network drives our movement",
+      headingGradient:
+        "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
+      columns: [
+        {
+          title: "JOIN",
+          links: [
+            { label: "Membership", href: "/membership" },
+            { label: "Works with WELL", href: "/works-with-well" },
+            {
+              label: "Enterprise Provider",
+              href: "/enterprise-provider",
+              bulletColor: "#2E74AD",
+            },
+            {
+              label: "Product Provider",
+              href: "/product-provider",
+              bulletColor: "#149EBD",
+            },
+            {
+              label: "Performance Testing Provider",
+              href: "/performance-testing",
+              bulletColor: "#ED896F",
+            },
+          ],
+        },
+        {
+          title: "EARN",
+          links: [
+            { label: "WELL AP", href: "/well-ap" },
+            { label: "WELL Faculty", href: "/well-faculty" },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    label: "Knowledge",
+    section: {
+      heading: "Learn from the experts on health",
+      headingGradient:
+        "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
+      columns: [
+        {
+          title: "LEARN",
+          links: [
+            { label: "WELL Forum", href: "/forum" },
+            { label: "Threads", href: "/threads", bulletColor: "" },
+            { label: "Webcasts", href: "/webcasts", bulletColor: "" },
+            { label: "Trainings", href: "/trainings", bulletColor: "" },
+          ],
+        },
+        {
+          title: "ATTEND",
+          links: [
+            { label: "WELL 2025", href: "/well-2025" },
+            { label: "Flagship events", href: "/flagship", bulletColor: "" },
+            { label: "Thematic summits", href: "/thematic", bulletColor: "" },
+            { label: "Regional summits", href: "/regional", bulletColor: "" },
+          ],
+        },
+        {
+          title: "GUIDANCE",
+          links: [
+            { label: "Knowledge base", href: "/knowledge-base" },
+            { label: "Tutorials", href: "/tutorials", bulletColor: "" },
+            { label: "Guides", href: "/guides", bulletColor: "" },
+            { label: "FAQs", href: "/faqs", bulletColor: "" },
+          ],
+        },
+        {
+          title: "Resources",
+          links: [
+            { label: "Resource library", href: "/resources" },
+            { label: "Technical tools", href: "/technical-tools", bulletColor: "" },
+            { label: "Sales tools", href: "/sales-tools", bulletColor: "" },
+            { label: "Media", href: "/media", bulletColor: "" },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    label: "IWBI",
+    section: {
+      heading: "The International WELL Building Institute (IWBI)",
+      headingGradient:
+        "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
+      columns: [
+        {
+          title: "About",
+          links: [
+            { label: "IWBI", href: "/iwbi" },
+            { label: "Research", href: "/research" },
+            { label: "Advocacy", href: "/advocacy" },
+          ],
+        },
+        {
+          title: "Meet",
+          links: [
+            { label: "Team", href: "/team" },
+            { label: "Advisories", href: "/advisories" },
+            { label: "Governance Council", href: "/governance" },
+          ],
+        },
+        {
+          title: "Explore",
+          links: [
+            { label: "Newsroom", href: "/newsroom" },
+            { label: "Jobs", href: "/jobs" },
+            { label: "Blog", href: "/blog" },
+          ],
+        },
+      ],
+    },
+  },
+];
+
+// Simple navigation links without nested sections
+const simpleNavLinks: NavItem[] = [
+  { label: "Home", href: "/" },
+  { label: "About", href: "/about" },
+  { label: "Services", href: "/services" },
+  { label: "Contact", href: "/contact" },
+];
+
+export const Default: Story = {
+  render: () => (
+    <div className="h-screen bg-[linear-gradient(var(--gradient-0))]">
+      <StandardNavigation
+        navLinks={sampleNavLinks}
+        logo={StandardLogo}
+        userIcon={NavAccount}
+        onLinkClick={(href) => console.log("Clicked:", href)}
+      />
+      <div className="pt-20 p-8">
+        <p className="text-gray-600">
+          StandardNavigation component with StandardLogo and nested navigation
+          links.
+        </p>
+        <p className="text-gray-600">
+          Hover over menu items to see dropdown trays.
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+export const WithCustomActions: Story = {
+  render: () => {
+    return (
+      <div className="h-screen bg-[linear-gradient(var(--gradient-0))]">
+        <StandardNavigation
+          navLinks={sampleNavLinks}
+          logo={StandardLogo}
+          userIcon={NavAccount}
+          beforeActions={
+            <Button
+              variant="ghost"
+              size="icon"
+              className="navigation-action-button"
+              aria-label="Change language"
+            >
+              <Globe className="h-5 w-5" />
+            </Button>
+          }
+          userDropdown={
+            <div className="navigation-user-dropdown-content p-2 bg-white border border-gray-200 rounded-md shadow-lg min-w-[200px]">
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-gray-100 rounded">
+                Profile
+              </button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-gray-100 rounded">
+                Settings
+              </button>
+              <hr className="my-1" />
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-gray-100 rounded">
+                Account
+              </button>
+              <hr className="my-1" />
+              <button className="w-full text-left px-3 py-2 text-sm text-red-600 hover:bg-gray-100 rounded">
+                Sign Out
+              </button>
+            </div>
+          }
+          onLinkClick={(href) => console.log("Clicked:", href)}
+        />
+        <div className="pt-20 p-8">
+          <p className="text-gray-600">
+            Navigation with custom actions (language switcher) and user dropdown
+            menu.
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const SimpleLinks: Story = {
+  render: () => (
+    <div className="h-screen bg-[linear-gradient(var(--gradient-0))]">
+      <StandardNavigation
+        navLinks={simpleNavLinks}
+        logo={StandardLogo}
+        userIcon={NavAccount}
+        onLinkClick={(href) => console.log("Clicked:", href)}
+      />
+      <div className="pt-20 p-8">
+        <p className="text-gray-600">
+          Navigation with simple links (no nested sections).
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+export const StrategyMode: Story = {
+  render: () => (
+    <div className="h-screen bg-white">
+      <StandardNavigation
+        navLinks={sampleNavLinks}
+        logo={StandardLogo}
+        userIcon={NavAccount}
+        isStrategy={true}
+        onLinkClick={(href) => console.log("Clicked:", href)}
+        onClose={() => console.log("Close clicked")}
+      />
+      <div className="pt-20 p-8">
+        <p className="text-gray-600">Strategy mode navigation.</p>
+      </div>
+    </div>
+  ),
+};
+
+export const WithoutLogo: Story = {
+  render: () => (
+    <div className="h-screen bg-[linear-gradient(var(--gradient-0))]">
+      <StandardNavigation
+        navLinks={sampleNavLinks}
+        userIcon={NavAccount}
+        onLinkClick={(href) => console.log("Clicked:", href)}
+      />
+      <div className="pt-20 p-8">
+        <p className="text-gray-600">
+          Navigation without logo (shows placeholder).
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+export const WithoutUserIcon: Story = {
+  render: () => (
+    <div className="h-screen bg-[linear-gradient(var(--gradient-0))]">
+      <StandardNavigation
+        navLinks={sampleNavLinks}
+        logo={StandardLogo}
+        onLinkClick={(href) => console.log("Clicked:", href)}
+      />
+      <div className="pt-20 p-8">
+        <p className="text-gray-600">
+          Navigation without user icon (shows placeholder).
+        </p>
+      </div>
+    </div>
+  ),
+};
+