@syscore/ui-library 1.2.2 → 1.3.0

package/client/components/icons/ConceptIcons.tsx

@@ -84,6 +84,9 @@ export const conceptColors = {
 } as const;
 
 
+const DEFAULT_FILL = "#EFF5FB";
+const DEFAULT_STROKE = "#2E74AD";
+
 interface ConceptIconProps {
   className?: string;
   active?: boolean;
@@ -99,8 +102,8 @@ export const IconConceptMind: React.FC<ConceptIconProps> = ({
   outlined = false,
 }) => {
   const conceptColor = conceptColors.mind.solid;
-  const bgFill = outlined ? "white" : active ? conceptColor : "#EFF5FB";
-  const strokeColor = outlined ? conceptColor : active ? "white" : "#2E74AD";
+  const bgFill = outlined ? "white" : active ? conceptColor : DEFAULT_FILL;
+  const strokeColor = outlined ? conceptColor : active ? "white" : DEFAULT_STROKE;
 
   return (
     <svg
@@ -196,8 +199,8 @@ export const IconConceptCommunity: React.FC<ConceptIconProps> = ({
   outlined = false,
 }) => {
   const conceptColor = conceptColors.community.solid;
-  const bgFill = outlined ? "white" : active ? conceptColor : "#EFF5FB";
-  const strokeColor = outlined ? conceptColor : active ? "white" : "#2E74AD";
+  const bgFill = outlined ? "white" : active ? conceptColor : DEFAULT_FILL;
+  const strokeColor = outlined ? conceptColor : active ? "white" : DEFAULT_STROKE;
 
   return (
     <svg
@@ -253,8 +256,8 @@ export const IconConceptMovement: React.FC<ConceptIconProps> = ({
   outlined = false,
 }) => {
   const conceptColor = conceptColors.movement.solid;
-  const bgFill = outlined ? "white" : active ? conceptColor : "#EFF5FB";
-  const strokeColor = outlined ? conceptColor : active ? "white" : "#2E74AD";
+  const bgFill = outlined ? "white" : active ? conceptColor : DEFAULT_FILL;
+  const strokeColor = outlined ? conceptColor : active ? "white" : DEFAULT_STROKE;
 
   return (
     <svg
@@ -286,8 +289,8 @@ export const IconConceptWater: React.FC<ConceptIconProps> = ({
   outlined = false,
 }) => {
   const conceptColor = conceptColors.water.solid;
-  const bgFill = outlined ? "white" : active ? conceptColor : "#EFF5FB";
-  const strokeColor = outlined ? conceptColor : active ? "white" : "#2E74AD";
+  const bgFill = outlined ? "white" : active ? conceptColor : DEFAULT_FILL;
+  const strokeColor = outlined ? conceptColor : active ? "white" : DEFAULT_STROKE;
 
   return (
     <svg
@@ -327,8 +330,8 @@ export const IconConceptAir: React.FC<ConceptIconProps> = ({
   outlined = false,
 }) => {
   const conceptColor = conceptColors.air.contrast || conceptColors.air.solid;
-  const bgFill = outlined ? "white" : active ? conceptColor : "#EFF5FB";
-  const strokeColor = outlined ? conceptColor : active ? "white" : "#2E74AD";
+  const bgFill = outlined ? "white" : active ? conceptColor : DEFAULT_FILL;
+  const strokeColor = outlined ? conceptColor : active ? "white" : DEFAULT_STROKE;
 
   return (
     <svg
@@ -376,8 +379,8 @@ export const IconConceptLight: React.FC<ConceptIconProps> = ({
   outlined = false,
 }) => {
   const conceptColor = conceptColors.light.contrast || conceptColors.light.solid;
-  const bgFill = outlined ? "white" : active ? conceptColor : "#EFF5FB";
-  const strokeColor = outlined ? conceptColor : active ? "white" : "#2E74AD";
+  const bgFill = outlined ? "white" : active ? conceptColor : DEFAULT_FILL;
+  const strokeColor = outlined ? conceptColor : active ? "white" : DEFAULT_STROKE;
 
   return (
     <svg
@@ -472,9 +475,10 @@ export const IconConceptThermalComfort: React.FC<ConceptIconProps> = ({
   active = true,
   outlined = false,
 }) => {
-  const conceptColor = conceptColors.thermalComfort.contrast || conceptColors.thermalComfort.solid;
-  const bgFill = outlined ? "white" : active ? conceptColor : "#EFF5FB";
-  const strokeColor = outlined ? conceptColor : active ? "white" : "#2E74AD";
+  const conceptColor =
+    conceptColors.thermalComfort?.contrast || conceptColors.thermalComfort.solid;
+  const bgFill = outlined ? "white" : active ? conceptColor : DEFAULT_FILL;
+  const strokeColor = outlined ? conceptColor : active ? "white" : DEFAULT_STROKE;
 
   return (
     <svg
@@ -586,8 +590,8 @@ export const IconConceptNourishment: React.FC<ConceptIconProps> = ({
   outlined = false,
 }) => {
   const conceptColor = conceptColors.nourishment.solid;
-  const bgFill = outlined ? "white" : active ? conceptColor : "#EFF5FB";
-  const strokeColor = outlined ? conceptColor : active ? "white" : "#2E74AD";
+  const bgFill = outlined ? "white" : active ? conceptColor : DEFAULT_FILL;
+  const strokeColor = outlined ? conceptColor : active ? "white" : DEFAULT_STROKE;
 
   return (
     <svg
@@ -643,8 +647,8 @@ export const IconConceptSound: React.FC<ConceptIconProps> = ({
   outlined = false,
 }) => {
   const conceptColor = conceptColors.sound.solid;
-  const bgFill = outlined ? "white" : active ? conceptColor : "#EFF5FB";
-  const strokeColor = outlined ? conceptColor : active ? "white" : "#2E74AD";
+  const bgFill = outlined ? "white" : active ? conceptColor : DEFAULT_FILL;
+  const strokeColor = outlined ? conceptColor : active ? "white" : DEFAULT_STROKE;
 
   return (
     <svg
@@ -716,8 +720,8 @@ export const IconConceptMaterials: React.FC<ConceptIconProps> = ({
   outlined = false,
 }) => {
   const conceptColor = conceptColors.materials.solid;
-  const bgFill = outlined ? "white" : active ? conceptColor : "#EFF5FB";
-  const strokeColor = outlined ? conceptColor : active ? "white" : "#2E74AD";
+  const bgFill = outlined ? "white" : active ? conceptColor : DEFAULT_FILL;
+  const strokeColor = outlined ? conceptColor : active ? "white" : DEFAULT_STROKE;
 
   return (
     <svg
@@ -773,8 +777,8 @@ export const IconConceptInnovation: React.FC<ConceptIconProps> = ({
   outlined = false,
 }) => {
   const conceptColor = conceptColors.innovation.solid;
-  const bgFill = outlined ? "white" : active ? conceptColor : "#EFF5FB";
-  const strokeColor = outlined ? conceptColor : active ? "white" : "#2E74AD";
+  const bgFill = outlined ? "white" : active ? conceptColor : DEFAULT_FILL;
+  const strokeColor = outlined ? conceptColor : active ? "white" : DEFAULT_STROKE;
 
   return (
     <svg

package/client/components/ui/tag.tsx

@@ -16,7 +16,7 @@ const getStatusClass = (
   status: TagStatus,
   variant: "light" | "dark" = "light"
 ) => {
-  return `tag tag--${variant}-${status}`;
+  return `status-tag tag--${variant}-${status}`;
 };
 
 export const Tag = React.forwardRef<HTMLButtonElement, TagProps>(

package/client/components/ui/typography.tsx

@@ -0,0 +1,116 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const typographyVariants = cva("", {
+    variants: {
+        variant: {
+            "heading-large": "heading-large",
+            "heading-medium": "heading-medium",
+            "heading-small": "heading-small",
+            "heading-xsmall": "heading-xsmall",
+            "heading-xxsmall": "heading-xxsmall",
+            "body-large": "body-large",
+            "body-base": "body-base",
+            "body-small": "body-small",
+            "overline-large": "overline-large",
+            "overline-medium": "overline-medium",
+            "overline-small": "overline-small",
+            "number-large": "number-large",
+            "number-base": "number-base",
+        },
+    },
+    defaultVariants: {
+        variant: "body-base",
+    },
+});
+
+type Variant = NonNullable<VariantProps<typeof typographyVariants>["variant"]>;
+
+const defaultElementMap: Record<Variant, React.ElementType> = {
+    "heading-large": "h1",
+    "heading-medium": "h2",
+    "heading-small": "h3",
+    "heading-xsmall": "h4",
+    "heading-xxsmall": "h5",
+    "body-large": "p",
+    "body-base": "p",
+    "body-small": "p",
+    "overline-large": "span",
+    "overline-medium": "span",
+    "overline-small": "span",
+    "number-large": "span",
+    "number-base": "span",
+};
+
+interface TextProps extends React.HTMLAttributes<HTMLElement> {
+    variant?: Variant;
+    as?: React.ElementType;
+}
+
+const Text = React.forwardRef<HTMLElement, TextProps>(
+    ({ className, variant = "body-base", as, ...props }, ref) => {
+        const Component = as || defaultElementMap[variant];
+
+        return (
+            <Component
+                ref={ref}
+                className={cn(typographyVariants({ variant }), className)}
+                {...props}
+            />
+        );
+    }
+);
+Text.displayName = "Text";
+
+interface ListProps extends React.HTMLAttributes<HTMLUListElement> {}
+
+const List = React.forwardRef<HTMLUListElement, ListProps>(
+    ({ className, ...props }, ref) => {
+        return (
+            <ul
+                ref={ref}
+                className={cn("typography-list", className)}
+                {...props}
+            />
+        );
+    }
+);
+List.displayName = "List";
+
+interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
+    variant?: Variant;
+}
+
+const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>(
+    ({ className, variant = "body-base", children, ...props }, ref) => {
+        return (
+            <li
+                ref={ref}
+                className={cn("typography-list-item", className)}
+                {...props}
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="4"
+                    height="4"
+                    viewBox="0 0 4 4"
+                    fill="none"
+                    className="typography-list-bullet"
+                    aria-hidden="true"
+                >
+                    <circle cx="2" cy="2" r="2" fill="#71747D" />
+                </svg>
+                <span className={cn(typographyVariants({ variant }))}>
+                    {children}
+                </span>
+            </li>
+        );
+    }
+);
+ListItem.displayName = "ListItem";
+
+export { Text, List, ListItem, typographyVariants, defaultElementMap };
+export type { TextProps, ListProps, ListItemProps, Variant as TypographyVariant };
+

package/client/global.css

@@ -699,7 +699,7 @@
 }
 
 /* Tag Styles */
-.tag {
+.status-tag {
   display: inline-flex;
   align-items: center;
   padding: 8px;
@@ -709,14 +709,14 @@
   transition: all 0.2s ease-in-out;
 }
 
-.tag:focus-visible {
+.status-tag:focus-visible {
   outline: none;
   box-shadow:
     0 0 0 2px hsl(var(--ring)),
     0 0 0 4px var(--color-white, #fff);
 }
 
-.tag:disabled {
+.status-tag:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
@@ -5528,3 +5528,22 @@
   width: 1rem;
   height: 1rem;
 }
+
+/* Typography List Styles */
+.typography-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-left: 0.5rem;
+  margin-top: 1rem;
+}
+
+.typography-list-item {
+  display: flex;
+  align-items: center;
+}
+
+.typography-list-bullet {
+  flex-shrink: 0;
+  margin-right: 1rem;
+}

package/client/ui/Card.stories.tsx

@@ -19,7 +19,20 @@ import {
 } from "../components/ui/select";
 import { Label } from "../components/ui/label";
 import { Toggle } from "../components/ui/toggle";
-
+import {
+  IconConceptMind,
+  IconConceptCommunity,
+  IconConceptMovement,
+  IconConceptWater,
+  IconConceptAir,
+  IconConceptLight,
+  IconConceptThermalComfort,
+  IconConceptNourishment,
+  IconConceptSound,
+  IconConceptMaterials,
+  IconConceptInnovation,
+} from "../components/icons/ConceptIcons";
+import { Text } from "../components/ui/typography";
 import { UtilityReset } from "../components/icons/UtilityReset";
 
 const meta = {
@@ -192,20 +205,6 @@ export const FiltersPanel: Story = {
 //   },
 // };
 
-import {
-  IconConceptAir,
-  IconConceptCommunity,
-  IconConceptLight,
-  IconConceptMaterials,
-  IconConceptMind,
-  IconConceptMovement,
-  IconConceptNourishment,
-  IconConceptSound,
-  IconConceptThermalComfort,
-  IconConceptWater,
-} from "../components/icons/ConceptIcons";
-
-// ... existing imports
 
 export const NavigatorPanel: Story = {
   render: () => {
@@ -255,11 +254,10 @@ export const NavigatorPanel: Story = {
               <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"
-                }`}
+                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>
@@ -275,11 +273,10 @@ export const NavigatorPanel: Story = {
               <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"
-                }`}
+                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>
@@ -303,3 +300,124 @@ export const NavigatorPanel: Story = {
     );
   },
 };
+
+
+export const ConceptCard: Story = {
+  render: () => {
+    const CONCEPTS_MOCK = [
+      {
+        id: "air",
+        slug: "air",
+        name: "Air",
+        title: "AIR",
+        description: "Reduce or minimize sources of indoor air pollution",
+      },
+      {
+        id: "water",
+        slug: "water",
+        name: "Water",
+        title: "WATER",
+        description: "Increase hydration and access to high quality water",
+      },
+      {
+        id: "nourishment",
+        slug: "nourishment",
+        name: "Nourishment",
+        title: "NOURISHMENT",
+        description:
+          "Make healthy foods the easy decision and encourage better food choices",
+      },
+      {
+        id: "light",
+        slug: "light",
+        name: "Light",
+        title: "LIGHT",
+        description:
+          "Design lighting to increase alertness, enhance occupant experience, and promote optimal sleep patterns",
+      },
+      {
+        id: "movement",
+        slug: "movement",
+        name: "Movement",
+        title: "MOVEMENT",
+        description: "Integrate physical activity and fitness into everyday life",
+      },
+      {
+        id: "thermal-comfort",
+        slug: "thermal-comfort",
+        name: "Thermal Comfort",
+        title: "THERMAL COMFORT",
+        description: "Provide productive and comfortable indoor environments",
+      },
+      {
+        id: "sound",
+        slug: "sound",
+        name: "Sound",
+        title: "SOUND",
+        description:
+          "Support optimal acoustical comfort to reduce distractions and promote focus",
+      },
+      {
+        id: "materials",
+        slug: "materials",
+        name: "Materials",
+        title: "MATERIALS",
+        description:
+          "Improve respiratory health through use of safe materials and finishes",
+      },
+      {
+        id: "community",
+        slug: "community",
+        name: "Community",
+        title: "COMMUNITY",
+        description: "Foster community engagement and social support",
+      },
+      {
+        id: "mind",
+        slug: "mind",
+        name: "Mind",
+        title: "MIND",
+        description:
+          "Support cognitive and emotional health through design, technology, and treatment strategies",
+      },
+      {
+        id: "innovation",
+        slug: "innovation",
+        name: "Innovation",
+        title: "INNOVATION",
+        description: "Develop unique strategies for creating healthy environments",
+      },
+    ];
+
+    const CONCEPT_ICONS = {
+      air: IconConceptAir,
+      water: IconConceptWater,
+      nourishment: IconConceptNourishment,
+      light: IconConceptLight,
+      movement: IconConceptMovement,
+      "thermal-comfort": IconConceptThermalComfort,
+      sound: IconConceptSound,
+      materials: IconConceptMaterials,
+      community: IconConceptCommunity,
+      mind: IconConceptMind,
+      innovation: IconConceptInnovation,
+    };
+
+    return (
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {CONCEPTS_MOCK.map((concept) => {
+          const Icon = CONCEPT_ICONS[concept.slug as keyof typeof CONCEPT_ICONS];
+          return (
+            <Card key={concept.id} className=" border-gray-100 bg-white p-6 gap-6 hover:scale-102 hover:border-gray-200 ease-in-out duration-200 will-change-transform">
+              <div className="flex items-center gap-4">
+                {Icon && <Icon className="size-12" />}
+                <Text as="h3" variant="overline-large">{concept.title}</Text>
+              </div>
+              <Text as="p" variant="body-base">{concept.description}</Text>
+            </Card>
+          );
+        })}
+      </div>
+    );
+  },
+};