@syscore/ui-library 1.9.0 → 1.10.0

package/client/components/icons/UtilityTriangleInfo.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+interface UtilityTriangleInfoProps {
+  className?: string;
+}
+
+export const UtilityTriangleInfo: React.FC<UtilityTriangleInfoProps> = ({
+  className,
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="13"
+      viewBox="0 0 14 13"
+      fill="none"
+      className={cn(className)}
+    >
+      <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"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

package/client/components/ui/dialog.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { XIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
+import { UtilityClose } from "../icons/UtilityClose";
 
 function Dialog({
   ...props
@@ -30,14 +30,17 @@ function DialogClose({
 
 function DialogOverlay({
   className,
+  children,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
   return (
-      <DialogPrimitive.Overlay
+    <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn("dialog-overlay", className)}
       {...props}
-    />
+    >
+      {children}
+    </DialogPrimitive.Overlay>
   );
 }
 
@@ -51,23 +54,24 @@ function DialogContent({
 }) {
   return (
     <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn("dialog-content", className)}
-        {...props}
-      >
-        <div className="dialog-content-inner">{children}</div>
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="dialog-close"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
+      <DialogOverlay>
+        <DialogPrimitive.Content
+          data-slot="dialog-content"
+          className={cn("dialog-content", className)}
+          {...props}
+        >
+          <div className="dialog-content-inner">{children}</div>
+          {showCloseButton && (
+            <DialogPrimitive.Close
+              data-slot="dialog-close"
+              className="dialog-close"
+            >
+              <UtilityClose />
+              <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+          )}
+        </DialogPrimitive.Content>
+      </DialogOverlay>
     </DialogPortal>
   );
 }
@@ -99,7 +103,7 @@ function DialogTitle({
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn("dialog-title heading-xxsmall", className)}
+      className={cn("dialog-title heading-xxsmall text-center", className)}
       {...props}
     />
   );

package/client/components/ui/tag.tsx

@@ -15,6 +15,11 @@ export interface TagProps
   status?: TagStatus;
   /** Color scheme for status tags */
   colorScheme?: "light" | "dark";
+  /** Minimum width  */
+  minWidth?: number | string;
+  /** Minimum height  */
+  minHeight?: number | string;
+
   onClick?: () => void;
 }
 
@@ -34,12 +39,20 @@ export const Tag = React.forwardRef<HTMLButtonElement, TagProps>(
       status,
       colorScheme = "light",
       className,
+      minWidth,
+      minHeight,
       style,
       onClick,
       ...props
     },
     ref,
   ) => {
+    const mergedStyle = {
+      minWidth,
+      minHeight,
+      ...style,
+    };
+
     // Status tag styling (highest priority)
     if (status) {
       const statusClass = getStatusClass(status, colorScheme);
@@ -48,7 +61,7 @@ export const Tag = React.forwardRef<HTMLButtonElement, TagProps>(
           ref={ref}
           onClick={onClick}
           className={cn("overline-medium", statusClass, className)}
-          style={style}
+          style={mergedStyle}
           {...props}
         >
           {children}
@@ -63,7 +76,7 @@ export const Tag = React.forwardRef<HTMLButtonElement, TagProps>(
           ref={ref}
           onClick={onClick}
           className={cn("tag-code", className)}
-          style={style}
+          style={mergedStyle}
           {...props}
         >
           <span className="number-small font-semibold" style={{ color: "inherit" }}>
@@ -83,7 +96,7 @@ export const Tag = React.forwardRef<HTMLButtonElement, TagProps>(
           active ? "tag-general--active" : "tag-general--inactive",
           className,
         )}
-        style={style}
+        style={mergedStyle}
         {...props}
       >
         {children}

package/client/global.css

@@ -2020,19 +2020,6 @@ body {
   color: currentColor;
 }
 
-/* Code Badge Styles */
-.code-badge {
-  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;
-}
 
 /* Tooltip Styles */
 .tooltip-content {
@@ -2461,6 +2448,11 @@ body {
   position: fixed;
   inset: 0;
   z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow-y: auto;
+  padding-block: 1.5rem;
   background-color: rgba(0, 0, 0, 0.5);
 }
 
@@ -2473,16 +2465,13 @@ body {
 }
 
 .dialog-content {
-  position: fixed;
-  top: 50%;
-  left: 50%;
+  position: relative;
   z-index: 50;
   display: grid;
   gap: 1rem;
-  overflow: hidden;
+  margin: auto;
   border-radius: 40px;
   border: 12px solid rgba(255, 255, 255, 0.2);
-  transform: translate(-50%, -50%);
   transition: all 0.2s ease-in-out;
 }
 
@@ -2500,6 +2489,7 @@ body {
 
 .dialog-content-inner {
   padding: 1.5rem;
+  border-radius: 28px;
   background-color: var(--color-gray-50, #f9f9fa);
 }
 
@@ -2507,13 +2497,8 @@ body {
   position: absolute;
   top: 1rem;
   right: 1rem;
-  border-radius: 2px;
-  opacity: 0.7;
-  transition: opacity 0.15s ease-in-out;
-}
-
-.dialog-close:hover {
-  opacity: 1;
+  z-index: 10;
+  cursor: pointer;
 }
 
 .dialog-close:focus {
@@ -2530,8 +2515,12 @@ body {
 .dialog-close svg {
   pointer-events: none;
   flex-shrink: 0;
-  height: 1rem;
-  width: 1rem;
+  color: var(--color-gray-400);
+  transition: color 0.2s ease-in-out;
+}
+
+.dialog-close:hover svg {
+  color: var(--color-gray-500);
 }
 
 .dialog-header {
@@ -2539,6 +2528,7 @@ body {
   flex-direction: column;
   gap: 0.5rem;
   text-align: center;
+  align-items: center;
 }
 
 @media (min-width: 640px) {

package/client/lib/concept-icons.ts

@@ -36,6 +36,7 @@ export const CONCEPT_ICONS: Record<
   nourishment: IconConceptNourishment,
   light: IconConceptLight,
   movement: IconConceptMovement,
+  thermal: IconConceptThermalComfort,
   "thermal-comfort": IconConceptThermalComfort,
   sound: IconConceptSound,
   materials: IconConceptMaterials,
@@ -43,3 +44,18 @@ export const CONCEPT_ICONS: Record<
   mind: IconConceptMind,
   innovation: IconConceptInnovation,
 };
+
+// Order of concepts for display
+export const conceptOrder: ConceptSlug[] = [
+  "air",
+  "water",
+  "nourishment",
+  "light",
+  "movement",
+  "thermal-comfort",
+  "sound",
+  "materials",
+  "community",
+  "mind",
+  "innovation",
+];

package/client/ui/Dialog.stories.tsx

@@ -114,3 +114,109 @@ export const WithForm: Story = {
     );
   },
 };
+
+export const LongContentScroll: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>
+          <Button variant="general-secondary">Terms & Conditions</Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[540px]">
+          <DialogHeader>
+            <DialogTitle>Terms of Service</DialogTitle>
+            <DialogDescription>
+              Please review the following terms before proceeding.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-4 py-4 body-base text-gray-700">
+            <h3 className="heading-xxxsmall">1. Acceptance of Terms</h3>
+            <p>
+              By accessing and using the WELL Building Standard platform, you
+              acknowledge that you have read, understood, and agree to be bound
+              by these Terms of Service. If you do not agree to these terms, you
+              must not use the platform. These terms constitute a legally binding
+              agreement between you and the International WELL Building
+              Institute.
+            </p>
+
+            <h3 className="heading-xxxsmall">2. Use of Services</h3>
+            <p>
+              You agree to use the platform only for lawful purposes and in
+              accordance with these Terms. You are responsible for ensuring that
+              your use of the platform complies with all applicable laws,
+              regulations, and professional standards. Unauthorized use of the
+              platform may give rise to a claim for damages and/or be a criminal
+              offense.
+            </p>
+
+            <h3 className="heading-xxxsmall">3. User Accounts</h3>
+            <p>
+              To access certain features of the platform, you may be required to
+              create an account. You are responsible for maintaining the
+              confidentiality of your account credentials and for all activities
+              that occur under your account. You agree to notify us immediately
+              of any unauthorized use of your account or any other breach of
+              security.
+            </p>
+
+            <h3 className="heading-xxxsmall">4. Intellectual Property</h3>
+            <p>
+              All content, features, and functionality of the platform,
+              including but not limited to text, graphics, logos, icons, images,
+              audio clips, digital downloads, and data compilations, are the
+              exclusive property of the International WELL Building Institute
+              and are protected by international copyright, trademark, patent,
+              trade secret, and other intellectual property laws.
+            </p>
+
+            <h3 className="heading-xxxsmall">5. Data Privacy</h3>
+            <p>
+              We are committed to protecting your privacy. Our collection and
+              use of personal information is governed by our Privacy Policy,
+              which is incorporated into these Terms by reference. By using the
+              platform, you consent to the collection, use, and sharing of your
+              information as described in the Privacy Policy.
+            </p>
+
+            <h3 className="heading-xxxsmall">6. Limitation of Liability</h3>
+            <p>
+              To the fullest extent permitted by applicable law, the
+              International WELL Building Institute shall not be liable for any
+              indirect, incidental, special, consequential, or punitive damages,
+              or any loss of profits or revenues, whether incurred directly or
+              indirectly, or any loss of data, use, goodwill, or other
+              intangible losses resulting from your use of the platform.
+            </p>
+
+            <h3 className="heading-xxxsmall">7. Modifications</h3>
+            <p>
+              We reserve the right to modify these Terms at any time. We will
+              provide notice of any material changes by posting the updated
+              Terms on the platform. Your continued use of the platform after
+              such modifications constitutes your acceptance of the revised
+              Terms.
+            </p>
+          </div>
+          <DialogFooter>
+            <Button
+              size="utility"
+              variant="general-secondary"
+              onClick={() => setOpen(false)}
+            >
+              Decline
+            </Button>
+            <Button
+              size="utility"
+              variant="general-primary"
+              onClick={() => setOpen(false)}
+            >
+              Accept
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+};

package/client/ui/Panel.stories.tsx

@@ -4,28 +4,13 @@ import { AnimatePresence } from "motion/react";
 import { getConceptColor } from "../lib/concept-colors";
 import { capitalize, cn } from "../lib/utils";
 import { Tag } from "../components/ui/tag";
-import { CONCEPT_ICONS } from "../lib/concept-icons";
+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 { Label } from "../components/ui/label";
 import { Toggle } from "../components/ui/toggle";
 
-// Order of concepts for display
-const conceptOrder: ConceptSlug[] = [
-  "air",
-  "water",
-  "nourishment",
-  "light",
-  "movement",
-  "thermal-comfort",
-  "sound",
-  "materials",
-  "community",
-  "mind",
-  "innovation",
-];
-
 // Wrapper component that manages state and accepts initial values from args
 const ExploreSidePanelView = (args: any) => {
   const {