@syscore/ui-library 1.11.0 → 1.11.2

package/client/components/icons/UtilityClose.tsx

@@ -9,7 +9,7 @@ export const UtilityClose: React.FC<UtilityCloseProps> = ({ className }) => {
   return (
     <div
       className={cn(
-        "size-4 flex items-center justify-center text-gray-500",
+        "size-4 flex items-center justify-center text-gray-500 group-hover:text-gray-400",
         className,
       )}
     >

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

@@ -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);
@@ -6096,7 +6093,7 @@ body {
   top: 0;
   left: 0;
   z-index: 50;
-  height: 3.5rem;
+  height: 4rem;
   width: 100%;
 }
 
@@ -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/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,22 +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">
-                      ·{" "}
-                      {capitalize(
-                        concepts.find((c) => c.conceptKey === hoveredConcept)
-                          ?.name ?? "",
-                      )}
+                    <span className="line-clamp-1 text-gray-800">
+                      <span aria-hidden="true" className="text-gray-300">
+                        ·{" "}
+                      </span>
+                      {displayedConceptName}
                     </span>
                   </motion.div>
                 )}
@@ -104,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}
@@ -135,22 +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="line-clamp-1">
-                          ·{" "}
-                          {capitalize(
-                            themes.find((t) => t.code === hoveredTheme)?.name ??
-                              "",
-                          )}
+                        <span className="block w-[235px] truncate pr-6 text-gray-800">
+                          <span aria-hidden="true" className="text-gray-300">
+                            ·{" "}
+                          </span>
+                          {displayedThemeName}
                         </span>
                       </motion.div>
                     )}
@@ -240,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">
@@ -315,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")
               }
@@ -329,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>