@syscore/ui-library 1.15.2 → 1.15.4

package/client/components/icons/UtilityTriangleInfo.tsx

@@ -1,13 +1,30 @@
 import React from "react";
 import { cn } from "../../lib/utils";
 
+/** Green = low, Plum = medium, Coral = high */
+export type UtilityTriangleInfoVariant = "low" | "medium" | "high";
+
+const VARIANT_COLORS: Record<
+  UtilityTriangleInfoVariant,
+  { fill: string; stroke: string }
+> = {
+  low: { fill: "#50E7CA", stroke: "#1BC5A3" },
+  medium: { fill: "#DCADD2", stroke: "#AA6A9B" },
+  high: { fill: "#F0AA99", stroke: "#E67357" },
+};
+
 interface UtilityTriangleInfoProps {
   className?: string;
+  /** Low (green), Medium (plum), High (coral) */
+  variant?: UtilityTriangleInfoVariant;
 }
 
 export const UtilityTriangleInfo: React.FC<UtilityTriangleInfoProps> = ({
   className,
+  variant = "low",
 }) => {
+  const { fill, stroke } = VARIANT_COLORS[variant];
+
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -19,8 +36,8 @@ export const UtilityTriangleInfo: React.FC<UtilityTriangleInfoProps> = ({
     >
       <path
         d="M7.78821 1.348C7.6827 1.16611 7.53127 1.01514 7.34906 0.910189C7.16685 0.80524 6.96027 0.75 6.75 0.75C6.53973 0.75 6.33315 0.80524 6.15094 0.910189C5.96873 1.01514 5.8173 1.16611 5.71179 1.348L0.910803 9.74972C0.805511 9.93209 0.750054 10.139 0.75 10.3495C0.749946 10.5601 0.805297 10.767 0.910495 10.9494C1.01569 11.1319 1.16703 11.2834 1.34932 11.3888C1.53161 11.4943 1.73843 11.5499 1.94902 11.5501H11.551C11.7616 11.5499 11.9684 11.4943 12.1507 11.3888C12.333 11.2834 12.4843 11.1319 12.5895 10.9494C12.6947 10.767 12.7501 10.5601 12.75 10.3495C12.7499 10.139 12.6945 9.93209 12.5892 9.74972L7.78821 1.348Z"
-        fill="#50E7CA"
-        stroke="#1BC5A3"
+        fill={fill}
+        stroke={stroke}
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"

package/client/components/icons/imperative-badges/BadgeImperativePrimary.tsx

@@ -0,0 +1,45 @@
+import { cn } from "@/lib/utils";
+
+export const BadgeImperativePrimary = ({
+  className,
+}: {
+  className?: string;
+}) => {
+  return (
+    <div className={cn("size-6 flex items-center justify-center", className)}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="22"
+        viewBox="0 0 20 22"
+        fill="none"
+      >
+        <path
+          d="M19.2133 7.81921C19.2133 6.38498 18.4454 5.06051 17.2008 4.3479L11.5941 1.13788C10.3629 0.432974 8.85042 0.432974 7.61921 1.13788L2.01255 4.3479C0.767878 5.06051 0 6.38498 0 7.81921V14.1808C0 15.615 0.767878 16.9395 2.01255 17.6521L7.61921 20.8621C8.85042 21.567 10.3629 21.567 11.5941 20.8621L17.2008 17.6521C18.4454 16.9395 19.2133 15.615 19.2133 14.1808V7.81921Z"
+          fill="#905C84"
+        />
+        <path
+          d="M9.68994 5.5V16.5023"
+          stroke="white"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M14.4542 8.25055L4.92627 13.7517"
+          stroke="white"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M4.92627 8.25055L14.4542 13.7517"
+          stroke="white"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  );
+};

package/client/components/icons/imperative-badges/BadgeImperativeSecondary.tsx

@@ -0,0 +1,53 @@
+import { cn } from "@/lib/utils";
+
+export const BadgeImperativeSecondary = ({
+  className,
+}: {
+  className?: string;
+}) => {
+  return (
+    <div className={cn("size-6 flex items-center justify-center", className)}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="22"
+        viewBox="0 0 20 22"
+        fill="none"
+      >
+        <path
+          d="M19.2133 7.81921C19.2133 6.38498 18.4454 5.06051 17.2008 4.3479L11.5941 1.13788C10.3629 0.432974 8.85042 0.432974 7.61921 1.13788L2.01255 4.3479C0.767878 5.06051 0 6.38498 0 7.81921V14.1808C0 15.615 0.767878 16.9395 2.01255 17.6521L7.61921 20.8621C8.85042 21.567 10.3629 21.567 11.5941 20.8621L17.2008 17.6521C18.4454 16.9395 19.2133 15.615 19.2133 14.1808V7.81921Z"
+          fill="#128BA6"
+          fill-opacity="0.08"
+        />
+        <path
+          d="M7.86719 1.57227C8.9445 0.955469 10.2684 0.955469 11.3457 1.57227L16.9521 4.78223C18.0412 5.40577 18.7129 6.56439 18.7129 7.81934V14.1807C18.7129 15.4356 18.0412 16.5942 16.9521 17.2178L11.3457 20.4277C10.2684 21.0445 8.9445 21.0445 7.86719 20.4277L2.26074 17.2178C1.17187 16.5942 0.5 15.4355 0.5 14.1807V7.81934C0.5 6.56452 1.17187 5.40582 2.26074 4.78223L7.86719 1.57227Z"
+          stroke="#128BA6"
+          stroke-opacity="0.16"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M9.68994 5.5V16.5023"
+          stroke="#0F748A"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M14.4542 8.25055L4.92627 13.7517"
+          stroke="#0F748A"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M4.92627 8.25055L14.4542 13.7517"
+          stroke="#0F748A"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  );
+};

package/client/components/icons/imperative-badges/index.tsx

@@ -0,0 +1,2 @@
+export { BadgeImperativePrimary } from "./BadgeImperativePrimary";
+export { BadgeImperativeSecondary } from "./BadgeImperativeSecondary";

package/client/components/ui/tooltip.tsx

@@ -2,10 +2,23 @@
 
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
 import { UtilityClose } from "@/components/icons/UtilityClose";
 
+const tooltipContentVariants = cva("tooltip-content", {
+  variants: {
+    variant: {
+      default: "tooltip-content--default",
+      simple: "tooltip-content--simple",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
 type TriggerMode = "hover" | "click";
 
 // Context for passing trigger mode and close function to children
@@ -146,15 +159,17 @@ function TooltipTrigger({
 
 function TooltipContent({
   className,
+  variant,
   sideOffset = 0,
   side = "bottom",
   children,
   alignOffset = 0,
   hideClose = false,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content> & {
-  hideClose?: boolean;
-}) {
+}: React.ComponentProps<typeof TooltipPrimitive.Content> &
+  VariantProps<typeof tooltipContentVariants> & {
+    hideClose?: boolean;
+  }) {
   const { trigger, close, triggerRef } = React.useContext(TooltipContext);
   const contentRef = React.useRef<HTMLDivElement>(null);
 
@@ -193,25 +208,28 @@ function TooltipContent({
         sideOffset={sideOffset}
         alignOffset={alignOffset}
         side={side}
-        className={cn("tooltip-content", className)}
+        className={cn(tooltipContentVariants({ variant }), className)}
         {...props}
       >
-        {/* Marker/Arrow */}
-        <div className="tooltip-arrow">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="10"
-            height="5"
-            viewBox="0 0 10 5"
-            fill="none"
-          >
-            <path
-              d="M10 -1.74846e-06L-7.36867e-07 0C-3.29906e-07 2.76142 2.23858 5 5 5C7.76142 5 10 2.76142 10 -1.74846e-06Z"
-              fill="#39C9EA"
-            />
-          </svg>
-        </div>
-        {!hideClose && <ToggleClose className="absolute top-4 right-4" />}
+        {variant !== "simple" && (
+          <div className="tooltip-arrow">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="10"
+              height="5"
+              viewBox="0 0 10 5"
+              fill="none"
+            >
+              <path
+                d="M10 -1.74846e-06L-7.36867e-07 0C-3.29906e-07 2.76142 2.23858 5 5 5C7.76142 5 10 2.76142 10 -1.74846e-06Z"
+                fill="currentColor"
+              />
+            </svg>
+          </div>
+        )}
+        {variant !== "simple" && !hideClose && (
+          <ToggleClose className="absolute top-4 right-4" />
+        )}
         {children}
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
@@ -236,6 +254,7 @@ export {
   Tooltip,
   TooltipTrigger,
   TooltipContent,
+  tooltipContentVariants,
   TooltipProvider,
   ToggleClose,
 };

package/client/global.css

@@ -2042,7 +2042,6 @@ body {
 /* Tooltip Styles */
 .tooltip-content {
   position: relative;
-  background-color: #3e4049;
   z-index: 50;
   border-radius: 0.5rem;
   padding: 1.5rem;
@@ -2055,6 +2054,20 @@ body {
     zoom-in 0.15s ease-in-out;
 }
 
+.tooltip-content--default {
+  background-color: #3e4049;
+  color: #39c9ea;
+}
+
+.tooltip-content--simple {
+  border-radius: var(--radius-full, 9999px);
+  background-color: var(--color-cyan-50, #f0f8fb);
+  border: 1px solid var(--color-cyan-100, #eff5fb);
+  color: inherit;
+  padding: 0.75rem 1rem;
+  margin-top: 0.5rem;
+}
+
 .tooltip-content[data-state="closed"] {
   animation:
     fade-out 0.15s ease-in-out,

package/client/ui/Icons.stories.tsx

@@ -72,6 +72,10 @@ import {
   SealProviders,
 } from "../components/icons/provider-seals";
 import { UtilityTrash } from "@/components/icons/UtilityTrash";
+import {
+  BadgeImperativePrimary,
+  BadgeImperativeSecondary,
+} from "../components/icons/imperative-badges";
 import {
   BadgeCertificationBronze,
   BadgeCertificationSilver,
@@ -323,58 +327,58 @@ export const Seals: Story = {
         <h2 className="text-2xl font-bold mb-6">Seals</h2>
         <div className="grid grid-cols-1  gap-6">
           <div className="grid grid-cols-2 sm:grid-cols-6 items-start gap-6">
-            <div className="flex flex-col items-start gap-2">
+            <div className="flex flex-col items-center gap-2">
               <p>IWBILogo</p>
               <div className="flex flex-col items-center gap-2">
-                <IWBILogo className="size-48" />
+                <IWBILogo className="size-24" />
               </div>
             </div>
             <div className="flex flex-col items-center gap-2">
               <p>WELL Seals</p>
-              <div className="flex flex-col gap-2">
-                <SealWell className="size-40" />
-                <SealWorksWithWell className="size-40" />
+              <div className="flex flex-col items-center gap-2">
+                <SealWell className="size-24" />
+                <SealWorksWithWell className="size-24" />
               </div>
             </div>
             <div className="flex flex-col items-center gap-2">
               <p>IWBI Seals</p>
-              <div className="flex flex-col gap-2">
-                <SealIwbiMember className="size-40" />
-                <SealWellCertification className="size-40" />
-                <SealWellCommunity className="size-40" />
-                <SealWellResidence className="size-40" />
+              <div className="flex flex-col items-center gap-2">
+                <SealIwbiMember className="size-24" />
+                <SealWellCertification className="size-24" />
+                <SealWellCommunity className="size-24" />
+                <SealWellResidence className="size-24" />
               </div>
             </div>
             <div className="flex flex-col items-center gap-2">
               <p>Certification Seals</p>
-              <div className="flex flex-col gap-2">
-                <SealCertification className="size-40" />
-                <SealCertificationBronze className="size-40" />
-                <SealCertificationSilver className="size-40" />
-                <SealCertificationGold className="size-40" />
-                <SealCertificationPlatinum className="size-40" />
+              <div className="flex flex-col items-center justify-center gap-2">
+                <SealCertification className="size-24" />
+                <SealCertificationBronze className="size-24" />
+                <SealCertificationSilver className="size-24" />
+                <SealCertificationGold className="size-24" />
+                <SealCertificationPlatinum className="size-24" />
               </div>
             </div>
             <div className="flex flex-col items-center gap-2">
               <p>Rating Seals</p>
-              <div className="flex flex-col gap-2">
-                <SealRating className="size-40" />
-                <SealRatingHealthSafety className="size-40" />
-                <SealRatingOperations className="size-40" />
-                <SealRatingPerformance className="size-40" />
-                <SealRatingEquity className="size-40" />
-                <SealRatingCoworking className="size-40" />
-                <SealRatingWorkforce className="size-40" />
-                <SealRatingDesign className="size-40" />
-                <SealRatingRealEstate className="size-40" />
+              <div className="flex flex-col items-center justify-center gap-2">
+                <SealRating className="size-24" />
+                <SealRatingHealthSafety className="size-24" />
+                <SealRatingOperations className="size-24" />
+                <SealRatingPerformance className="size-24" />
+                <SealRatingEquity className="size-24" />
+                <SealRatingCoworking className="size-24" />
+                <SealRatingWorkforce className="size-24" />
+                <SealRatingDesign className="size-24" />
+                <SealRatingRealEstate className="size-24" />
               </div>
             </div>
             <div className="flex flex-col items-center gap-2">
               <p>Watermark Seals</p>
-              <div className="flex flex-col gap-2">
-                <WatermarkMemberOrg className="size-40" />
-                <WaterMarkWWWProducts className="size-40" />
-                <WaterMarkWellProjects className="size-40" />
+              <div className="flex flex-col items-center justify-center gap-2">
+                <WatermarkMemberOrg className="size-24" />
+                <WaterMarkWWWProducts className="size-24" />
+                <WaterMarkWellProjects className="size-24" />
               </div>
             </div>
           </div>
@@ -477,3 +481,21 @@ export const AchievementBadges: Story = {
     </div>
   ),
 };
+
+export const ImperativeBadges: Story = {
+  render: () => (
+    <div className="space-y-8 p-8">
+      <h2 className="text-2xl font-bold mb-6">Imperative Badges</h2>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+        <div className="flex flex-col items-center gap-2">
+          <BadgeImperativePrimary />
+          <span className="text-sm font-medium">Primary</span>
+        </div>
+        <div className="flex flex-col items-center gap-2">
+          <BadgeImperativeSecondary />
+          <span className="text-sm font-medium">Secondary</span>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/client/ui/PageHeader.stories.tsx

@@ -16,6 +16,8 @@ import {
 } from "../components/ui/tooltip";
 import { motion, AnimatePresence } from "motion/react";
 import { useState } from "react";
+import { BadgeImperativePrimary } from "@/components/icons/imperative-badges";
+import { Text } from "@/components/ui/typography";
 
 const meta = {
   title: "Review/PageHeader",
@@ -288,3 +290,83 @@ export const ThemeHeaderWithPoints: Story = {
     );
   },
 };
+
+export const ThemeHeaderWithImperativeBadge: 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.",
+    };
+
+    const [isHovered, setIsHovered] = useState(false);
+    const [tooltipOpen, setTooltipOpen] = useState(false);
+    const isVisible = isHovered || tooltipOpen;
+
+    return (
+      <PageHeader>
+        <PageHeaderTopSection className="mb-4">
+          <PageHeaderLeftContent>
+            <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">
+                  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>
+
+          <div className="flex items-center gap-4">
+            <Tooltip>
+              <TooltipTrigger>
+                <BadgeImperativePrimary className="cursor-pointer" />
+              </TooltipTrigger>
+              <TooltipContent variant="simple">
+                <Text as="p" variant="body-small">
+                  <span className="font-semibold">Required</span> for
+                  certification
+                </Text>
+              </TooltipContent>
+            </Tooltip>
+            <div className="flex items-end gap-1">
+              <span className="text-gray-800 number-large font-semibold">
+                1
+              </span>
+              <span className="text-gray-800 overline-medium">PT</span>
+            </div>
+          </div>
+        </PageHeaderTopSection>
+
+        <PageHeaderTitle className="heading-small mb-3">
+          {themeData.name}
+        </PageHeaderTitle>
+        <PageHeaderDescription className="body-large">
+          {themeData.description}
+        </PageHeaderDescription>
+      </PageHeader>
+    );
+  },
+};

package/client/ui/Tooltip.stories.tsx

@@ -49,33 +49,20 @@ export const Default: Story = {
   ),
 };
 
-export const WithContent: Story = {
+export const Click: Story = {
   render: () => (
     <div className="p-16">
       <Tooltip trigger="click">
-        <TooltipTrigger>Hover with Content</TooltipTrigger>
+        <TooltipTrigger>Click me</TooltipTrigger>
         <TooltipContent className="w-[400px]">
-          <div className="space-y-4">
+          <div className="space-y-3">
             <Text as="h1" variant="body-base" className="text-white">
-              Header
+              Click Tooltip
             </Text>
-            <div className="space-y-4">
-              <Text as="p" variant="body-small" className="text-white/90">
-                Body
-              </Text>
-              <Separator className="my-8" />
+            <div className="space-y-1">
               <Text as="p" variant="body-small" className="text-white/90">
-                Body
+                This tooltip opens on click and closes when clicking outside.
               </Text>
-
-              <div className="flex flex-row gap-4 justify-start items-start">
-                <Button size="utility" variant="tooltip-primary">
-                  Action
-                </Button>
-              </div>
-              <Button size="utility" variant="tooltip-secondary">
-                Action
-              </Button>
             </div>
           </div>
         </TooltipContent>
@@ -84,24 +71,45 @@ export const WithContent: Story = {
   ),
 };
 
-export const Click: Story = {
+export const Simple: Story = {
   render: () => (
     <div className="p-16">
-      <Tooltip trigger="click">
-        <TooltipTrigger>Click me</TooltipTrigger>
-        <TooltipContent className="w-[400px]">
-          <div className="space-y-3">
+      <Tooltip>
+        <TooltipTrigger>Hover (Simple)</TooltipTrigger>
+        <TooltipContent variant="simple">
+          <Text as="p" variant="body-small">
+            <span className="font-semibold">Required</span> for certification
+          </Text>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="p-16 flex gap-16">
+      <Tooltip>
+        <TooltipTrigger>Default</TooltipTrigger>
+        <TooltipContent className="w-[300px]">
+          <div className="space-y-2">
             <Text as="h1" variant="body-base" className="text-white">
-              Click Tooltip
+              Default Variant
+            </Text>
+            <Text as="p" variant="body-small" className="text-white/90">
+              Dark background tooltip.
             </Text>
-            <div className="space-y-1">
-              <Text as="p" variant="body-small" className="text-white/90">
-                This tooltip opens on click and closes when clicking outside.
-              </Text>
-            </div>
           </div>
         </TooltipContent>
       </Tooltip>
+      <Tooltip>
+        <TooltipTrigger>Simple</TooltipTrigger>
+        <TooltipContent variant="simple">
+          <Text as="p" variant="body-base">
+            Required for certification
+          </Text>
+        </TooltipContent>
+      </Tooltip>
     </div>
   ),
 };