@syscore/ui-library 1.4.0 → 1.5.0

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>
+    );
+  },
+};

package/client/ui/Panel.stories.tsx

@@ -57,7 +57,7 @@ const ExploreSidePanelView = (args: any) => {
 
     return (
         <LayoutGroup>
-            <Card className="space-y-8 rounded-r-none pt-8 border-r-0">
+            <Card className="space-y-2 rounded-r-none pt-8 border-r-0">
                 {/* CONCEPT Section */}
                 <motion.section layout="position" className="flex flex-col gap-3">
                     <Label className="px-2 text-gray-600 flex items-center  min-w-0">

package/client/ui/StandardTable.stories.tsx

@@ -0,0 +1,311 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  StandardTable,
+  StandardTableRow,
+  StandardTableContent,
+  StandardTableContainer,
+  StandardTableHeader,
+  StandardTableRowHeader,
+  StandardTableTrigger,
+  StandardTableListRow,
+} from "@/components/ui/standard-table";
+import { CodeBadge } from "@/components/ui/code-badge";
+import { useState } from "react";
+import { concepts } from "@/lib/concepts-mock-data";
+import { getConceptColor } from "@/lib/concept-colors";
+import { CONCEPT_ICONS } from "@/lib/concept-icons";
+import { Text } from "@/components/ui/typography";
+
+const meta = {
+  title: "Review/StandardTable",
+  component: StandardTable,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof StandardTable>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [expandedConcepts, setExpandedConcepts] = useState<Set<string>>(
+      new Set(),
+    );
+
+    const hasAnyExpanded = expandedConcepts.size > 0;
+
+    const toggleAllConcepts = () => {
+      if (hasAnyExpanded) {
+        setExpandedConcepts(new Set());
+      } else {
+        setExpandedConcepts(new Set(concepts.map((c) => c.id)));
+      }
+    };
+
+    const navigateTo = (path: string) => {
+      console.log(path);
+    };
+
+    function getSlugFromName(name: string) {
+      return name.toLowerCase().replace(/\s+/g, "-");
+    }
+
+    return (
+      <StandardTableContainer>
+        <StandardTableHeader
+          title="CONCEPTS"
+          hasExpanded={hasAnyExpanded}
+          onToggleAll={toggleAllConcepts}
+        />
+
+        <StandardTable
+          allowMultiple={true}
+          expandedValues={expandedConcepts}
+          onExpandedChange={setExpandedConcepts}
+        >
+          {[...concepts].map((concept) => {
+            const slug = getSlugFromName(concept.name);
+            const Icon = CONCEPT_ICONS[slug];
+            const color = getConceptColor(slug);
+
+            return (
+              <StandardTableRow key={concept.id} value={concept.id}>
+                <StandardTableRowHeader onClick={() => navigateTo("/")}>
+                  <Icon active={true} className="size-12 shrink-0" />
+                  <span className="overline-large flex-1">{concept.name}</span>
+                  <StandardTableTrigger />
+                </StandardTableRowHeader>
+
+                <StandardTableContent>
+                  {concept.themes.map((theme) => (
+                    <StandardTableListRow
+                      key={theme.id}
+                      badge={
+                        <CodeBadge
+                          code={theme.code}
+                          style={{
+                            backgroundColor: color.contrast || color.solid,
+                            borderColor: color.border,
+                            color: "white",
+                          }}
+                        />
+                      }
+                      title={theme.name}
+                      variant="nested"
+                      onClick={() => navigateTo("/")}
+                    />
+                  ))}
+                </StandardTableContent>
+              </StandardTableRow>
+            );
+          })}
+        </StandardTable>
+      </StandardTableContainer>
+    );
+  },
+};
+
+export const ConceptsTable: Story = {
+  render: () => {
+    const conceptSlug = "community";
+
+    const [expandedThemes, setExpandedThemes] = useState<Set<string>>(
+      new Set(),
+    );
+
+    const hasAnyExpanded = expandedThemes.size > 0;
+
+    const toggleAllThemes = () => {
+      if (hasAnyExpanded) {
+        setExpandedThemes(new Set());
+      } else {
+        setExpandedThemes(new Set(conceptData?.themes.map((t) => t.id) || []));
+      }
+    };
+
+    const navigateTo = (path: string) => {
+      console.log(path);
+    };
+
+    const conceptData = concepts.find(
+      (c) => c.name.toLowerCase() === conceptSlug.toLowerCase(),
+    );
+
+    const conceptColor = getConceptColor(conceptSlug);
+
+    return (
+      <StandardTableContainer>
+        <StandardTableHeader
+          title="THEMES"
+          hasExpanded={hasAnyExpanded}
+          onToggleAll={toggleAllThemes}
+        />
+
+        <StandardTable
+          allowMultiple={true}
+          expandedValues={expandedThemes}
+          onExpandedChange={setExpandedThemes}
+        >
+          {conceptData?.themes.map((theme) => {
+            return (
+              <StandardTableRow key={theme.id} value={theme.id}>
+                <StandardTableRowHeader onClick={() => navigateTo("/")}>
+                  <CodeBadge
+                    code={theme.code}
+                    style={{
+                      backgroundColor:
+                        conceptColor.contrast || conceptColor.solid,
+                      borderColor: conceptColor.border,
+                      color: "white",
+                    }}
+                  />
+                  <Text as="p" variant="body-large" className="flex-1">
+                    {theme.name}
+                  </Text>
+                  <StandardTableTrigger />
+                </StandardTableRowHeader>
+
+                <StandardTableContent>
+                  {theme.strategies.map((strategy) => (
+                    <StandardTableListRow
+                      key={strategy.id}
+                      badge={
+                        <CodeBadge
+                          code={strategy.code}
+                          style={{
+                            backgroundColor: conceptColor.light,
+                            borderColor: conceptColor.border,
+                            color: conceptColor.contrast || conceptColor.solid,
+                          }}
+                        />
+                      }
+                      title={strategy.name}
+                      variant="nested"
+                      onClick={() => navigateTo("/")}
+                      rightContent={
+                        <span className="flex justify-center items-center number-large font-semibold">
+                          {strategy.points}{" "}
+                          <span className="overline-medium ml-1">
+                            PT
+                            <span
+                              className={
+                                strategy.points === "1"
+                                  ? "opacity-0"
+                                  : "opacity-100"
+                              }
+                            >
+                              S
+                            </span>
+                          </span>
+                        </span>
+                      }
+                    />
+                  ))}
+                </StandardTableContent>
+              </StandardTableRow>
+            );
+          })}
+        </StandardTable>
+      </StandardTableContainer>
+    );
+  },
+};
+
+export const ThemesTable: Story = {
+  render: () => {
+    const conceptSlug = "community";
+    const themeCode = "C8";
+
+    const navigateTo = (path: string) => {
+      console.log(path);
+    };
+
+    const conceptData = concepts.find(
+      (c) => c.name.toLowerCase() === conceptSlug.toLowerCase(),
+    );
+    const themeData = conceptData?.themes.find((t) => t.code === themeCode);
+
+    const conceptColor = getConceptColor(conceptSlug);
+
+    return (
+      <StandardTableContainer>
+        <StandardTableHeader title="STRATEGIES" />
+
+        <StandardTable>
+          {themeData?.strategies.map((strategy) => {
+            return (
+              <StandardTableRow key={strategy.id} value={strategy.id}>
+                <StandardTableRowHeader onClick={() => navigateTo("/")}>
+                  <CodeBadge
+                    code={strategy.code}
+                    style={{
+                      backgroundColor: conceptColor.light,
+                      borderColor: conceptColor.border,
+                      color: conceptColor.contrast || conceptColor.solid,
+                    }}
+                  />
+                  <Text as="p" variant="body-large" className="flex-1">
+                    {strategy.name}
+                  </Text>
+                  <span className="flex justify-center items-center number-large font-semibold">
+                    {strategy.points}{" "}
+                    <span className="overline-medium ml-1">
+                      PT
+                      <span
+                        className={
+                          strategy.points === "1" ? "opacity-0" : "opacity-100"
+                        }
+                      >
+                        S
+                      </span>
+                    </span>
+                  </span>
+                </StandardTableRowHeader>
+
+                {/* <StandardTableContent>
+                  {themeData?.strategies.map((strategy) => (
+                    <StandardTableListRow
+                      key={strategy.id}
+                      badge={
+                        <CodeBadge
+                          code={strategy.code}
+                          style={{
+                            backgroundColor: themeColor.light,
+                            borderColor: themeColor.border,
+                            color: themeColor.contrast || themeColor.solid,
+                          }}
+                        />
+                      }
+                      title={strategy.name}
+                      onClick={() => navigateTo("/")}
+                      rightContent={
+                        <span className="flex justify-center items-center number-large font-semibold">
+                          {strategy.points}{" "}
+                          <span className="overline-medium ml-1">
+                            PT
+                            <span
+                              className={
+                                strategy.points === "1"
+                                  ? "opacity-0"
+                                  : "opacity-100"
+                              }
+                            >
+                              S
+                            </span>
+                          </span>
+                        </span>
+                      }
+                    />
+                  ))}
+                </StandardTableContent> */}
+              </StandardTableRow>
+            );
+          })}
+        </StandardTable>
+      </StandardTableContainer>
+    );
+  },
+};