@syscore/ui-library 1.11.1 → 1.12.0

package/client/components/ui/tooltip.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
 import { cn } from "@/lib/utils";
+import { UtilityClose } from "@/components/icons/UtilityClose";
 
 type TriggerMode = "hover" | "click";
 
@@ -149,8 +150,11 @@ function TooltipContent({
   side = "bottom",
   children,
   alignOffset = 0,
+  hideClose = false,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+}: React.ComponentProps<typeof TooltipPrimitive.Content> & {
+  hideClose?: boolean;
+}) {
   const { trigger, close, triggerRef } = React.useContext(TooltipContext);
   const contentRef = React.useRef<HTMLDivElement>(null);
 
@@ -193,7 +197,7 @@ function TooltipContent({
         {...props}
       >
         {/* Marker/Arrow */}
-        <div className="tooltip-arrow" data-side={side}>
+        <div className="tooltip-arrow">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="10"
@@ -207,10 +211,31 @@ function TooltipContent({
             />
           </svg>
         </div>
+        {!hideClose && <ToggleClose className="absolute top-4 right-4" />}
         {children}
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   );
 }
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+function ToggleClose({ className }: { className?: string }) {
+  const { close } = React.useContext(TooltipContext);
+
+  return (
+    <button
+      data-slot="tooltip-close"
+      onClick={close}
+      className={cn("group cursor-pointer", className)}
+    >
+      <UtilityClose />
+    </button>
+  );
+}
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  ToggleClose,
+};

package/client/global.css

@@ -662,13 +662,13 @@ layer(base);
   --color-beige-50: #fdfcfc;
   --color-beige-100: #fbfaf9;
   --color-beige-200: #efeae6;
-  --color-beige-300: #e2d7d0;
-  --color-beige-400: #d2c2b6;
-  --color-beige-500: #c1aa9a;
-  --color-beige-600: #b59a87;
-  --color-beige-700: #a5856e;
-  --color-beige-800: #8b6c56;
-  --color-beige-900: #685140;
+  --color-beige-300: #e3dbd6;
+  --color-beige-400: #d3cac4;
+  --color-beige-500: #c1b6af;
+  --color-beige-600: #b4a9a1;
+  --color-beige-700: #a79a92;
+  --color-beige-800: #8e837b;
+  --color-beige-900: #716962;
 
   --color-mind: #0a5161;
   --color-community: #0f748a;
@@ -1131,8 +1131,6 @@ body {
   width: 2rem;
   height: 2rem;
   padding: 0;
-  background-color: var(--color-white, #fff);
-  border: 1px solid var(--color-gray-100, #eff1f2);
   transition: all 0.2s ease-in-out;
 }
 
@@ -1761,13 +1759,13 @@ body {
 }
 
 .tag-general--active {
-  background-color: var(--color-cyan-800, #0f748a);
-  color: var(--color-white, #fff);
+  background-color: var(--tag-active-bg, var(--color-cyan-800, #0f748a));
+  color: var(--tag-active-fg, var(--color-white, #fff));
   font-weight: 600;
 }
 
 .tag-general--active:hover {
-  border-color: var(--color-cyan-800, #0f748a);
+  border-color: var(--tag-active-bg, var(--color-cyan-800, #0f748a));
 }
 
 .tag-general--inactive {
@@ -1896,8 +1894,8 @@ body {
 }
 
 .segmented-control-button--active {
-  background-color: var(--color-cyan-800, #0f748a);
-  color: var(--color-white, #fff);
+  background-color: var(--toggle-active-bg, var(--color-cyan-800, #0f748a));
+  color: var(--toggle-active-fg, var(--color-white, #fff));
   font-weight: 600;
 }
 
@@ -2020,13 +2018,11 @@ body {
   color: currentColor;
 }
 
-
 /* Tooltip Styles */
 .tooltip-content {
   position: relative;
   background-color: #3e4049;
   z-index: 50;
-  width: fit-content;
   border-radius: 0.5rem;
   padding: 1.5rem;
   padding-top: 2rem;
@@ -2087,6 +2083,7 @@ body {
 }
 
 .tooltip-content[data-side="top"] {
+  margin-bottom: 12px;
   animation:
     fade-in 0.15s ease-in-out,
     zoom-in 0.15s ease-in-out,
@@ -2108,23 +2105,23 @@ body {
   justify-content: center;
 }
 
-.tooltip-arrow[data-side="top"] {
+[data-side="top"] > .tooltip-arrow {
   bottom: 0;
   transform: translateX(-50%) rotate(180deg);
 }
 
-.tooltip-arrow[data-side="bottom"] {
+[data-side="bottom"] > .tooltip-arrow {
   top: 0;
   transform: translateX(-50%);
 }
 
-.tooltip-arrow[data-side="left"] {
+[data-side="left"] > .tooltip-arrow {
   right: 0;
   top: 50%;
   transform: translateY(-50%) rotate(-90deg);
 }
 
-.tooltip-arrow[data-side="right"] {
+[data-side="right"] > .tooltip-arrow {
   left: 0;
   top: 50%;
   transform: translateY(-50%) rotate(90deg);
@@ -6993,7 +6990,8 @@ body {
 
 .page-header-description {
   /* Uses body-large utility */
-  max-width: 680px;
+  /* max-width: 680px; */
+  padding-right: 10rem;
 }
 
 /* Navigation Styles */

package/client/ui/Icons.stories.tsx

@@ -29,29 +29,51 @@ import { UtilitySearch } from "../components/icons/UtilitySearch";
 import { UtilitySort } from "../components/icons/UtilitySort";
 import { UtilityText } from "../components/icons/UtilityText";
 import { UtilityTriangleInfo } from "../components/icons/UtilityTriangleInfo";
-import { SealWell } from "../components/icons/SealWell";
-import { SealIwbiMember } from "../components/icons/SealIwbiMember";
-import { SealWellCertification } from "../components/icons/SealWellCertification";
-import { SealWellCommunity } from "../components/icons/SealWellCommunity";
-import { SealWellResidence } from "../components/icons/SealWellResidence";
-import { SealWorksWithWell } from "../components/icons/SealWorksWithWell";
-import { SealEnterpriseProvider } from "../components/icons/ProviderSeals";
-import { SealPerformanceTestingProvider } from "../components/icons/ProviderSeals";
-import { SealSurveyProvider } from "../components/icons/ProviderSeals";
+import {
+  IWBILogo,
+  SealWell,
+  SealIwbiMember,
+  SealWellCertification,
+  SealWellCommunity,
+  SealWellResidence,
+  SealWorksWithWell,
+} from "../components/icons/seals";
+import {
+  SealEnterpriseProvider,
+  SealPerformanceTestingProvider,
+  SealSurveyProvider,
+} from "../components/icons/provider-seals";
 import {
   BadgeEnterpriseProvider,
   BadgePerformanceTestingProvider,
   BadgeProductProvider,
   BadgeSurveyProvider,
-} from "../components/icons/ProviderBadges";
-import { WatermarkMemberOrg } from "../components/icons/WatermarkMemberOrg";
-import { WaterMarkWWWProducts } from "../components/icons/WaterMarkWWWProducts";
-import { WaterMarkWellProjects } from "../components/icons/WaterMarkWellProjects";
+} from "../components/icons/provider-badges";
+import {
+  WatermarkMemberOrg,
+  WaterMarkWWWProducts,
+  WaterMarkWellProjects,
+} from "../components/icons/watermarks";
 import {
   SealProductProvider,
   SealProviders,
-} from "../components/icons/ProviderSeals";
+} from "../components/icons/provider-seals";
 import { UtilityTrash } from "@/components/icons/UtilityTrash";
+import {
+  BadgeCertificationBronze,
+  BadgeCertificationSilver,
+  BadgeCertificationGold,
+  BadgeCertificationPlatinum,
+  BadgeRatingHealthySafety,
+  BadgeRatingOperations,
+  BadgeRatingPerformance,
+  BadgeRatingEquity,
+  BadgeRatingCoworking,
+  BadgeRatingWorkforce,
+  BadgeRatingDesign,
+  BadgeRatingRealEstate,
+  BadgeRatingResidential,
+} from "../components/icons/achievement-badges";
 
 const meta = {
   title: "Review/Icons",
@@ -281,13 +303,14 @@ export const UtilityIcons: Story = {
   ),
 };
 
-export const MarkIcons: Story = {
+export const Seals: Story = {
   render: () => (
     <div className="space-y-8 p-8 bg-cyan-50">
       <div>
-        <h2 className="text-2xl font-bold mb-6">Mark Icons</h2>
+        <h2 className="text-2xl font-bold mb-6">Seals</h2>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           <div className="flex flex-col items-center gap-4">
+            <IWBILogo />
             <SealWell />
             <SealIwbiMember />
             <SealWellCertification />
@@ -341,3 +364,69 @@ export const ProviderSeals: Story = {
     </div>
   ),
 };
+
+export const AchievementBadges: Story = {
+  render: () => (
+    <div className="space-y-8 p-8">
+      <h2 className="text-2xl font-bold mb-6">Achievement Badges</h2>
+      <h3 className="text-lg font-semibold mb-4">Certification</h3>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Bronze</span>
+          <BadgeCertificationBronze />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Silver</span>
+          <BadgeCertificationSilver />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Gold</span>
+          <BadgeCertificationGold />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Platinum</span>
+          <BadgeCertificationPlatinum />
+        </div>
+      </div>
+      <h3 className="text-lg font-semibold mb-4">Rating</h3>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Healthy Safety</span>
+          <BadgeRatingHealthySafety />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Operations</span>
+          <BadgeRatingOperations />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Performance</span>
+          <BadgeRatingPerformance />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Equity</span>
+          <BadgeRatingEquity />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Coworking</span>
+          <BadgeRatingCoworking />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Workforce</span>
+          <BadgeRatingWorkforce />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Design</span>
+          <BadgeRatingDesign />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Real Estate</span>
+          <BadgeRatingRealEstate />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Residential</span>
+          <BadgeRatingResidential />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/client/ui/PageHeader.stories.tsx

@@ -7,7 +7,7 @@ import {
   PageHeaderTitle,
   PageHeaderDescription,
 } from "../components/ui/page-header";
-import { BadgeCertificationBronze } from "../components/icons/AchievementBadges";
+import { BadgeCertificationBronze } from "../components/icons/achievement-badges";
 import { Tag } from "../components/ui/tag";
 import {
   Tooltip,

package/client/ui/Panel.stories.tsx

@@ -7,7 +7,7 @@ import { Tag } from "../components/ui/tag";
 import { CONCEPT_ICONS, conceptOrder } from "../lib/concept-icons";
 import { conceptColors } from "../lib/concept-colors";
 import { Card } from "../components/ui/card";
-import { useState } from "react";
+import { useState, type CSSProperties } from "react";
 import { Label } from "../components/ui/label";
 import { Toggle } from "../components/ui/toggle";
 
@@ -37,8 +37,17 @@ const ExploreSidePanelView = (args: any) => {
   const [hoveredStrategy, setHoveredStrategy] = useState<string | null>(null);
 
   // Derived data
-  const conceptsByKey = new Map(concepts.map((c) => [c.conceptKey, c]));
   const activeColor = getConceptColor(selectedConcept || "community");
+  const displayedConceptKey = hoveredConcept ?? selectedConcept;
+  const displayedConceptName = displayedConceptKey
+    ? capitalize(
+        concepts.find((c) => c.conceptKey === displayedConceptKey)?.name ?? "",
+      )
+    : "";
+  const displayedThemeCode = hoveredTheme ?? selectedTheme;
+  const displayedThemeName = displayedThemeCode
+    ? capitalize(themes.find((t) => t.code === displayedThemeCode)?.name ?? "")
+    : "";
 
   return (
     <LayoutGroup>
@@ -50,24 +59,21 @@ const ExploreSidePanelView = (args: any) => {
 
             <div className="relative min-w-0 flex-1 self-stretch">
               <AnimatePresence mode="wait">
-                {hoveredConcept && (
+                {displayedConceptName && (
                   <motion.div
-                    key={hoveredConcept}
+                    key={displayedConceptKey ?? "concept-label"}
                     initial={{ opacity: 0, x: -4 }}
                     animate={{ opacity: 1, x: 0 }}
                     exit={{ opacity: 0, x: 4 }}
                     transition={{ duration: 0.15 }}
-                    className="absolute top-1/2 -translate-y-1/2 left-0 right-0 body-small"
+                    className="absolute top-1/2 -translate-y-1/2 left-0 right-0 body-small max-w-40"
                     style={{ willChange: "opacity, transform" }}
                   >
                     <span className="line-clamp-1 text-gray-800">
                       <span aria-hidden="true" className="text-gray-300">
                         ·{" "}
                       </span>
-                      {capitalize(
-                        concepts.find((c) => c.conceptKey === hoveredConcept)
-                          ?.name ?? "",
-                      )}
+                      {displayedConceptName}
                     </span>
                   </motion.div>
                 )}
@@ -106,7 +112,9 @@ const ExploreSidePanelView = (args: any) => {
                     }
                     return undefined;
                   })()}
-                  aria-label={conceptsByKey.get(slug)?.name}
+                  aria-label={
+                    concepts.find((c) => c.conceptKey === slug)?.name
+                  }
                 >
                   <Icon
                     active={isFilled}
@@ -137,24 +145,21 @@ const ExploreSidePanelView = (args: any) => {
 
                 <div className="relative min-w-0 flex-1 self-stretch">
                   <AnimatePresence mode="wait">
-                    {hoveredTheme && (
+                    {displayedThemeName && (
                       <motion.div
-                        key={hoveredTheme}
+                        key={displayedThemeCode ?? "theme-label"}
                         initial={{ opacity: 0, x: -4 }}
                         animate={{ opacity: 1, x: 0 }}
                         exit={{ opacity: 0, x: 4 }}
                         transition={{ duration: 0.15 }}
-                        className="absolute top-1/2 -translate-y-1/2 left-0 right-0 body-small"
+                        className="absolute top-1/2 -translate-y-1/2 left-0 right-0 body-small max-w-40"
                         style={{ willChange: "opacity, transform" }}
                       >
                         <span className="block w-[235px] truncate pr-6 text-gray-800">
                           <span aria-hidden="true" className="text-gray-300">
                             ·{" "}
                           </span>
-                          {capitalize(
-                            themes.find((t) => t.code === hoveredTheme)?.name ??
-                              "",
-                          )}
+                          {displayedThemeName}
                         </span>
                       </motion.div>
                     )}
@@ -244,7 +249,7 @@ const ExploreSidePanelView = (args: any) => {
                         animate={{ opacity: 1, x: 0 }}
                         exit={{ opacity: 0, x: 4 }}
                         transition={{ duration: 0.15 }}
-                        className="absolute top-1/2 -translate-y-1/2 left-0 right-0  body-small"
+                        className="absolute top-1/2 -translate-y-1/2 left-0 right-0  body-small max-w-40"
                         style={{ willChange: "opacity, transform" }}
                       >
                         <span className="line-clamp-1">
@@ -319,6 +324,9 @@ const ExploreSidePanelView = (args: any) => {
                 { label: "Core", value: "core" },
               ]}
               value={scope}
+              style={
+                { "--toggle-active-bg": "var(--color-cyan-700)" } as CSSProperties
+              }
               onValueChange={(value) =>
                 onScopeChange(value as "non-core" | "core")
               }
@@ -333,7 +341,10 @@ const ExploreSidePanelView = (args: any) => {
           className="flex flex-col gap-3 items-start max-w-max"
         >
           <Label>PURSUIT</Label>
-          <div className=" inline-flex gap-3">
+          <div
+            className=" inline-flex gap-3"
+            style={{ "--tag-active-bg": "var(--color-cyan-700)" } as CSSProperties}
+          >
             <Tag
               variant="text"
               active={activePursuits.has("certification")}

package/client/ui/Tooltip.stories.tsx

@@ -6,6 +6,7 @@ import {
 } from "../components/ui/tooltip";
 import { Separator } from "../components/ui/separator";
 import { Button } from "../components/ui/button";
+import { Text } from "../components/ui/typography";
 
 const meta = {
   title: "Review/Tooltip",
@@ -25,15 +26,21 @@ export const Default: Story = {
     <div className="p-16">
       <Tooltip>
         <TooltipTrigger>Hover</TooltipTrigger>
-        <TooltipContent>
+        <TooltipContent className="w-[400px]">
           <div className="space-y-3">
-            <h4 className="text-white font-semibold text-base">
+            <Text as="h1" variant="body-base" className="text-white">
               Strategy Details
-            </h4>
+            </Text>
             <div className="space-y-1">
-              <p className="text-white/90 text-sm">Status: Active</p>
-              <p className="text-white/90 text-sm">Score: 12 PTS</p>
-              <p className="text-white/90 text-sm">Last updated: 2 days ago</p>
+              <Text as="p" variant="body-small" className="text-white/90">
+                Status: Active
+              </Text>
+              <Text as="p" variant="body-small" className="text-white/90">
+                Score: 12 PTS
+              </Text>
+              <Text as="p" variant="body-small" className="text-white/90">
+                Last updated: 2 days ago
+              </Text>
             </div>
           </div>
         </TooltipContent>
@@ -45,15 +52,21 @@ export const Default: Story = {
 export const WithContent: Story = {
   render: () => (
     <div className="p-16">
-      <Tooltip>
+      <Tooltip trigger="click">
         <TooltipTrigger>Hover with Content</TooltipTrigger>
-        <TooltipContent className="w-[400px]" alignOffset={500}>
+        <TooltipContent className="w-[400px]">
           <div className="space-y-4">
-            <h4 className="text-white font-semibold body-base">Header</h4>
+            <Text as="h1" variant="body-base" className="text-white">
+              Header
+            </Text>
             <div className="space-y-4">
-              <p className="text-white/90 body-small">Body</p>
+              <Text as="p" variant="body-small" className="text-white/90">
+                Body
+              </Text>
               <Separator className="my-8" />
-              <p className="text-white/90 body-small">Body</p>
+              <Text as="p" variant="body-small" className="text-white/90">
+                Body
+              </Text>
 
               <div className="flex flex-row gap-4 justify-start items-start">
                 <Button size="utility" variant="tooltip-primary">
@@ -75,18 +88,16 @@ export const Click: Story = {
   render: () => (
     <div className="p-16">
       <Tooltip trigger="click">
-        <TooltipTrigger >
-          Click me
-        </TooltipTrigger>
-        <TooltipContent>
+        <TooltipTrigger>Click me</TooltipTrigger>
+        <TooltipContent className="w-[400px]">
           <div className="space-y-3">
-            <h4 className="text-white font-semibold text-base">
+            <Text as="h1" variant="body-base" className="text-white">
               Click Tooltip
-            </h4>
+            </Text>
             <div className="space-y-1">
-              <p className="text-white/90 text-sm">
+              <Text as="p" variant="body-small" className="text-white/90">
                 This tooltip opens on click and closes when clicking outside.
-              </p>
+              </Text>
             </div>
           </div>
         </TooltipContent>