@syscore/ui-library 1.7.8 → 1.9.0

package/client/components/ui/toggle.tsx

@@ -3,26 +3,23 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 import { useSegmentedControl } from "../../hooks/use-segmented-control";
 
-const toggleVariants = cva(
-  "toggle",
-  {
-    variants: {
-      variant: {
-        default: "toggle--default",
-        outline: "toggle--outline",
-      },
-      size: {
-        default: "toggle--size-default",
-        sm: "toggle--size-sm",
-        lg: "toggle--size-lg",
-      },
+const toggleVariants = cva("toggle", {
+  variants: {
+    variant: {
+      default: "toggle--default",
+      outline: "toggle--outline",
     },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
+    size: {
+      default: "toggle--size-default",
+      sm: "toggle--size-sm",
+      lg: "toggle--size-lg",
     },
   },
-);
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
 
 // Segmented Control Component
 export interface SegmentedControlProps<T extends string = string>
@@ -51,14 +48,13 @@ const SegmentedControlInner = React.forwardRef<
     return (
       <div ref={ref} className={cn("segmented-control", className)} {...props}>
         {options.map((option) => {
-          const isReactElement = React.isValidElement(option.label);
           const isActive = selectedValue === option.value;
 
           return (
             <button
               key={option.value}
               className={cn(
-                "segmented-control-button",
+                "segmented-control-button body-small",
                 isActive
                   ? "segmented-control-button--active"
                   : "segmented-control-button--inactive",
@@ -67,11 +63,7 @@ const SegmentedControlInner = React.forwardRef<
               type="button"
               data-active={isActive}
             >
-              {isReactElement ? (
-                option.label
-              ) : (
-                <span className="body-small font-medium">{option.label}</span>
-              )}
+              {option.label}
             </button>
           );
         })}

package/client/global.css

@@ -1763,6 +1763,7 @@ body {
 .tag-general--active {
   background-color: var(--color-cyan-800, #0f748a);
   color: var(--color-white, #fff);
+  font-weight: 600;
 }
 
 .tag-general--active:hover {
@@ -1772,11 +1773,39 @@ body {
 .tag-general--inactive {
   background-color: var(--color-blue-100, #eff5fb);
   color: var(--color-blue-700, #286495);
+  font-weight: 500;
 }
 
 .tag-general--inactive:hover {
-  background-color: var(--color-cyan-800, #0f748a);
-  color: var(--color-white, #fff);
+  background-color: var(--color-blue-200, #cbe0f1);
+}
+
+/* Tag Code Variant - for code badges like "C1", "A3" */
+.tag-code {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  width: 3rem;
+  border-radius: calc(var(--radius-sm, 6px));
+  flex-shrink: 0;
+  border: 1.5px solid currentColor;
+  padding-left: 1px;
+  padding-right: 1px;
+  background: transparent;
+  cursor: pointer;
+}
+
+.tag-code:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px hsl(var(--ring)),
+    0 0 0 4px var(--color-white, #fff);
+}
+
+.tag-code:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 /* Toggle/Segmented Control Styles */
@@ -6625,7 +6654,6 @@ body {
 .body-large {
   font-size: 18px;
   font-style: normal;
-  font-weight: 400;
   line-height: 25.2px;
 }
 
@@ -6644,7 +6672,6 @@ body {
 .body-base {
   font-size: 16px;
   font-style: normal;
-  font-weight: 400;
   line-height: 22.4px;
 }
 
@@ -6663,7 +6690,6 @@ body {
 .body-small {
   font-size: 14px;
   font-style: normal;
-  font-weight: 400;
   line-height: 19.6px;
 }
 

package/client/lib/utils.ts

@@ -4,3 +4,9 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+/** Capitalize the first letter of a string */
+export function capitalize(str: string): string {
+  if (!str) return str;
+  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+}

package/client/ui/Accordion.stories.tsx

@@ -0,0 +1,430 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionContent,
+  AccordionContainer,
+  AccordionSectionHeader,
+  AccordionHeader,
+  AccordionTrigger,
+  AccordionListRow,
+} from "@/components/ui/accordion";
+import { Tag } from "@/components/ui/tag";
+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/Accordion",
+  component: Accordion,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// Generic unstyled example
+export const Default: Story = {
+  render: () => {
+    const [expanded, setExpanded] = useState<Set<string>>(new Set());
+
+    return (
+      <div className="p-8 max-w-2xl">
+        <Accordion
+          allowMultiple={false}
+          expandedValues={expanded}
+          onExpandedChange={setExpanded}
+          className="border rounded-lg overflow-hidden"
+        >
+          <AccordionItem value="item-1" className="border-b last:border-b-0">
+            <AccordionHeader className="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50">
+              <span className="font-medium">Is it accessible?</span>
+              <AccordionTrigger />
+            </AccordionHeader>
+            <AccordionContent className="overflow-hidden">
+              <div className="p-4 pt-0">
+                Yes. It adheres to the WAI-ARIA design pattern and includes
+                smooth animations powered by Motion.
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="item-2" className="border-b last:border-b-0">
+            <AccordionHeader className="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50">
+              <span className="font-medium">Is it animated?</span>
+              <AccordionTrigger />
+            </AccordionHeader>
+            <AccordionContent className="overflow-hidden">
+              <div className="p-4 pt-0">
+                Yes. It uses Motion/React for smooth height and opacity
+                animations.
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="item-3" className="border-b last:border-b-0">
+            <AccordionHeader className="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50">
+              <span className="font-medium">Can multiple items be open?</span>
+              <AccordionTrigger />
+            </AccordionHeader>
+            <AccordionContent className="overflow-hidden">
+              <div className="p-4 pt-0">
+                Yes. Set <code>allowMultiple=true</code> to allow multiple items
+                to be expanded at once.
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    );
+  },
+};
+
+// Multiple selection example
+export const MultipleSelection: Story = {
+  render: () => {
+    const [expanded, setExpanded] = useState<Set<string>>(new Set());
+
+    return (
+      <div className="p-8 max-w-2xl">
+        <Accordion
+          allowMultiple={true}
+          expandedValues={expanded}
+          onExpandedChange={setExpanded}
+          className="border rounded-lg overflow-hidden"
+        >
+          <AccordionItem value="item-1" className="border-b last:border-b-0">
+            <AccordionHeader className="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50">
+              <span className="font-medium">Section One</span>
+              <AccordionTrigger />
+            </AccordionHeader>
+            <AccordionContent className="overflow-hidden">
+              <div className="p-4 pt-0">
+                Content for section one. Multiple sections can be open
+                simultaneously.
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="item-2" className="border-b last:border-b-0">
+            <AccordionHeader className="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50">
+              <span className="font-medium">Section Two</span>
+              <AccordionTrigger />
+            </AccordionHeader>
+            <AccordionContent className="overflow-hidden">
+              <div className="p-4 pt-0">
+                Content for section two. Try opening multiple sections at once.
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="item-3" className="border-b last:border-b-0">
+            <AccordionHeader className="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50">
+              <span className="font-medium">Section Three</span>
+              <AccordionTrigger />
+            </AccordionHeader>
+            <AccordionContent className="overflow-hidden">
+              <div className="p-4 pt-0">
+                Content for section three. All three can be expanded together.
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    );
+  },
+};
+
+// IWBI Standard Table styled variant
+export const IWBIConceptsTable: 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 (
+      <AccordionContainer className="standard-table-container">
+        <AccordionSectionHeader
+          title="CONCEPTS"
+          hasExpanded={hasAnyExpanded}
+          onToggleAll={toggleAllConcepts}
+          className="standard-table-header"
+        />
+
+        <Accordion
+          allowMultiple={true}
+          expandedValues={expandedConcepts}
+          onExpandedChange={setExpandedConcepts}
+          className="border border-blue-200 rounded-xl overflow-hidden"
+        >
+          {[...concepts].map((concept) => {
+            const slug = getSlugFromName(concept.name);
+            const Icon = CONCEPT_ICONS[slug];
+            const color = getConceptColor(slug);
+
+            return (
+              <AccordionItem
+                key={concept.id}
+                value={concept.id}
+                className="standard-table-row"
+              >
+                <AccordionHeader
+                  onClick={() => navigateTo("/")}
+                  className="standard-table-row-header"
+                >
+                  <Icon active={true} className="size-12 shrink-0" />
+                  <span className="overline-large flex-1">{concept.name}</span>
+                  <AccordionTrigger className="standard-table-trigger" />
+                </AccordionHeader>
+
+                <AccordionContent className="standard-table-content">
+                  <div className="standard-table-content__inner">
+                    {concept.themes.map((theme) => (
+                      <AccordionListRow
+                        key={theme.id}
+                        badge={
+                          <Tag
+                            variant="code"
+                            style={{
+                              backgroundColor: color.contrast || color.solid,
+                              borderColor: color.border,
+                              color: "white",
+                            }}
+                          >
+                            {theme.code}
+                          </Tag>
+                        }
+                        title={theme.name}
+                        titleClassName="standard-table-list-row__title body-large"
+                        className="standard-table-list-row standard-table-list-row--nested"
+                        onClick={() => navigateTo("/")}
+                      />
+                    ))}
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            );
+          })}
+        </Accordion>
+      </AccordionContainer>
+    );
+  },
+};
+
+export const IWBIThemesTable: 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 (
+      <AccordionContainer className="standard-table-container">
+        <AccordionSectionHeader
+          title="THEMES"
+          hasExpanded={hasAnyExpanded}
+          onToggleAll={toggleAllThemes}
+          className="standard-table-header"
+        />
+
+        <Accordion
+          allowMultiple={true}
+          expandedValues={expandedThemes}
+          onExpandedChange={setExpandedThemes}
+          className="border border-blue-200 rounded-xl overflow-hidden"
+        >
+          {conceptData?.themes.map((theme) => {
+            return (
+              <AccordionItem
+                key={theme.id}
+                value={theme.id}
+                className="standard-table-row"
+              >
+                <AccordionHeader
+                  onClick={() => navigateTo("/")}
+                  className="standard-table-row-header"
+                >
+                  <Tag
+                    variant="code"
+                    style={{
+                      backgroundColor:
+                        conceptColor.contrast || conceptColor.solid,
+                      borderColor: conceptColor.border,
+                      color: "white",
+                    }}
+                  >
+                    {theme.code}
+                  </Tag>
+                  <Text as="p" variant="body-large" className="flex-1">
+                    {theme.name}
+                  </Text>
+                  <AccordionTrigger className="standard-table-trigger" />
+                </AccordionHeader>
+
+                <AccordionContent className="standard-table-content">
+                  <div className="standard-table-content__inner">
+                    {theme.strategies.map((strategy) => (
+                      <AccordionListRow
+                        key={strategy.id}
+                        badge={
+                          <Tag
+                            variant="code"
+                            style={{
+                              backgroundColor: conceptColor.light,
+                              borderColor: conceptColor.border,
+                              color:
+                                conceptColor.contrast || conceptColor.solid,
+                            }}
+                          >
+                            {strategy.code}
+                          </Tag>
+                        }
+                        title={strategy.name}
+                        titleClassName="standard-table-list-row__title body-large"
+                        className="standard-table-list-row standard-table-list-row--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>
+                        }
+                      />
+                    ))}
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            );
+          })}
+        </Accordion>
+      </AccordionContainer>
+    );
+  },
+};
+
+export const IWBIStrategiesTable: 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 (
+      <AccordionContainer className="standard-table-container">
+        <AccordionSectionHeader
+          title="STRATEGIES"
+          className="standard-table-header"
+        />
+
+        <Accordion className="border border-blue-200 rounded-xl overflow-hidden">
+          {themeData?.strategies.map((strategy) => {
+            return (
+              <AccordionItem
+                key={strategy.id}
+                value={strategy.id}
+                className="standard-table-row"
+              >
+                <AccordionHeader
+                  onClick={() => navigateTo("/")}
+                  className="standard-table-row-header"
+                >
+                  <Tag
+                    variant="code"
+                    style={{
+                      backgroundColor: conceptColor.light,
+                      borderColor: conceptColor.border,
+                      color: conceptColor.contrast || conceptColor.solid,
+                    }}
+                  >
+                    {strategy.code}
+                  </Tag>
+                  <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>
+                </AccordionHeader>
+              </AccordionItem>
+            );
+          })}
+        </Accordion>
+      </AccordionContainer>
+    );
+  },
+};

package/client/ui/PageHeader.stories.tsx

@@ -8,7 +8,7 @@ import {
   PageHeaderDescription,
 } from "../components/ui/page-header";
 import { BadgeCertificationBronze } from "../components/icons/AchievementBadges";
-import { CodeBadge } from "../components/ui/code-badge";
+import { Tag } from "../components/ui/tag";
 import {
   Tooltip,
   TooltipTrigger,
@@ -96,14 +96,16 @@ export const ThemeHeader: Story = {
       <PageHeader>
         <PageHeaderTopSection className="mb-4">
           <PageHeaderLeftContent>
-            <CodeBadge
-              code={themeCode}
+            <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">