@syscore/ui-library 1.9.1 → 1.10.1

package/client/components/ui/accordion.tsx

@@ -33,6 +33,8 @@ interface AccordionItemContextValue {
   value: string;
   /** Whether this item is expanded */
   isExpanded: boolean;
+  /** Whether to remove borders when open */
+  noBorderOnOpen?: boolean;
 }
 
 const AccordionItemContext =
@@ -324,21 +326,32 @@ AccordionHeaderRow.displayName = "AccordionHeaderRow";
 interface AccordionItemProps extends React.ComponentPropsWithoutRef<"div"> {
   /** Unique value for this item */
   value: string;
+  /** Remove bottom border when the accordion item is open */
+  noBorderOnOpen?: boolean;
 }
 
 const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
-  ({ value, children, className, ...props }, ref) => {
+  ({ value, children, className, noBorderOnOpen, ...props }, ref) => {
     const { isExpanded: isExpandedFn } = useAccordion();
     const isExpanded = isExpandedFn(value);
 
     const itemContextValue = React.useMemo(
-      () => ({ value, isExpanded }),
-      [value, isExpanded],
+      () => ({ value, isExpanded, noBorderOnOpen }),
+      [value, isExpanded, noBorderOnOpen],
     );
 
     return (
       <AccordionItemContext.Provider value={itemContextValue}>
-        <div ref={ref} className={cn(className)} {...props}>
+        <div
+          ref={ref}
+          className={cn(className)}
+          style={
+            noBorderOnOpen && isExpanded
+              ? { borderBottom: "none" }
+              : undefined
+          }
+          {...props}
+        >
           {children}
         </div>
       </AccordionItemContext.Provider>
@@ -349,12 +362,26 @@ const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
 AccordionItem.displayName = "AccordionItem";
 
 // AccordionHeader
-type AccordionHeaderProps = React.ComponentPropsWithoutRef<"div">;
+type AccordionHeaderProps = React.ComponentPropsWithoutRef<"div"> & {
+  /** Remove background color when the accordion item is open */
+  transparentOnOpen?: boolean;
+};
 
 const AccordionHeader = React.forwardRef<HTMLDivElement, AccordionHeaderProps>(
-  ({ children, className, onClick, ...props }, ref) => {
+  ({ children, className, onClick, transparentOnOpen, ...props }, ref) => {
+    const { isExpanded } = useAccordionItem();
     return (
-      <div ref={ref} onClick={onClick} className={cn(className)} {...props}>
+      <div
+        ref={ref}
+        onClick={onClick}
+        className={cn(className)}
+        style={
+          transparentOnOpen && isExpanded
+            ? { backgroundColor: "transparent" }
+            : undefined
+        }
+        {...props}
+      >
         {children}
       </div>
     );
@@ -409,7 +436,7 @@ type AccordionContentProps = React.ComponentPropsWithoutRef<"div">;
 
 const AccordionContent = React.forwardRef<HTMLDivElement, AccordionContentProps>(
   ({ children, className, ...props }, ref) => {
-    const { isExpanded } = useAccordionItem();
+    const { isExpanded, noBorderOnOpen } = useAccordionItem();
 
     return (
       <AnimatePresence initial={false}>
@@ -420,7 +447,10 @@ const AccordionContent = React.forwardRef<HTMLDivElement, AccordionContentProps>
             exit={{ height: 0, opacity: 0 }}
             transition={{ duration: 0.3, ease: [0.25, 0.46, 0.45, 0.94] }}
             className={cn(className)}
-            style={{ willChange: "opacity" }}
+            style={{
+              willChange: "opacity",
+              ...(noBorderOnOpen ? { borderTop: "none" } : {}),
+            }}
           >
             <div ref={ref} {...props}>
               {children}

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/Accordion.stories.tsx

@@ -195,6 +195,7 @@ export const IWBIConceptsTable: Story = {
                 <AccordionHeader
                   onClick={() => navigateTo("/")}
                   className="standard-table-row-header"
+                  transparentOnOpen
                 >
                   <Icon active={true} className="size-12 shrink-0" />
                   <span className="overline-large flex-1">{concept.name}</span>
@@ -235,6 +236,190 @@ export const IWBIConceptsTable: Story = {
   },
 };
 
+// Showcases transparentOnOpen and noBorderOnOpen props
+export const TransparentOnOpen: Story = {
+  render: () => {
+    const [expandedConcepts, setExpandedConcepts] = useState<Set<string>>(
+      new Set(),
+    );
+
+    const hasAnyExpanded = expandedConcepts.size > 0;
+
+    const toggleAllConcepts = () => {
+      if (hasAnyExpanded) {
+        setExpandedConcepts(new Set());
+      } else {
+        setExpandedConcepts(new Set(concepts.map((c) => c.id)));
+      }
+    };
+
+    const navigateTo = (path: string) => {
+      console.log(path);
+    };
+
+    function getSlugFromName(name: string) {
+      return name.toLowerCase().replace(/\s+/g, "-");
+    }
+
+    return (
+      <div className="grid grid-cols-2 gap-4">
+        <div className="flex flex-col gap-2">
+          <div className="flex gap-2">
+            <code className="text-xs bg-gray-100 px-2 py-1 rounded">
+              AccordionItem: noBorderOnOpen
+            </code>
+            <code className="text-xs bg-gray-100 px-2 py-1 rounded">
+              AccordionHeader: transparentOnOpen
+            </code>
+          </div>
+        <AccordionContainer className="standard-table-container">
+          <AccordionSectionHeader
+            title="no border and transparent on open"
+            hasExpanded={hasAnyExpanded}
+            onToggleAll={toggleAllConcepts}
+            className="standard-table-header"
+          />
+
+          <Accordion
+            allowMultiple={true}
+            expandedValues={expandedConcepts}
+            onExpandedChange={setExpandedConcepts}
+            className="border border-blue-200 rounded-xl overflow-hidden"
+          >
+            {[...concepts].map((concept) => {
+              const slug = getSlugFromName(concept.name);
+              const Icon = CONCEPT_ICONS[slug];
+              const color = getConceptColor(slug);
+
+              return (
+                <AccordionItem
+                  key={concept.id}
+                  value={concept.id}
+                  className="standard-table-row"
+                  noBorderOnOpen
+                >
+                  <AccordionHeader
+                    onClick={() => navigateTo("/")}
+                    className="standard-table-row-header"
+                    transparentOnOpen
+                  >
+                    <Icon active={true} className="size-12 shrink-0" />
+                    <span className="overline-large flex-1">
+                      {concept.name}
+                    </span>
+                    <AccordionTrigger className="standard-table-trigger" />
+                  </AccordionHeader>
+
+                  <AccordionContent className="standard-table-content">
+                    <div className="standard-table-content__inner">
+                      {concept.themes.slice(0, 1).map((theme) => (
+                        <AccordionListRow
+                          key={theme.id}
+                          badge={
+                            <Tag
+                              variant="code"
+                              style={{
+                                backgroundColor: color.contrast || color.solid,
+                                borderColor: color.border,
+                                color: "white",
+                              }}
+                            >
+                              {theme.code}
+                            </Tag>
+                          }
+                          title={theme.name}
+                          titleClassName="standard-table-list-row__title body-large"
+                          className="standard-table-list-row standard-table-list-row--nested"
+                          onClick={() => navigateTo("/")}
+                        />
+                      ))}
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+              );
+            })}
+          </Accordion>
+        </AccordionContainer>
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <div className="flex gap-2">
+            <code className="text-xs bg-gray-100 px-2 py-1 rounded">
+              No props
+            </code>
+          </div>
+        <AccordionContainer className="standard-table-container">
+          <AccordionSectionHeader
+            title="Default"
+            hasExpanded={hasAnyExpanded}
+            onToggleAll={toggleAllConcepts}
+            className="standard-table-header"
+          />
+
+          <Accordion
+            allowMultiple={true}
+            expandedValues={expandedConcepts}
+            onExpandedChange={setExpandedConcepts}
+            className="border border-blue-200 rounded-xl overflow-hidden"
+          >
+            {[...concepts].map((concept) => {
+              const slug = getSlugFromName(concept.name);
+              const Icon = CONCEPT_ICONS[slug];
+              const color = getConceptColor(slug);
+
+              return (
+                <AccordionItem
+                  key={concept.id}
+                  value={concept.id}
+                  className="standard-table-row"
+                >
+                  <AccordionHeader
+                    onClick={() => navigateTo("/")}
+                    className="standard-table-row-header"
+                  >
+                    <Icon active={true} className="size-12 shrink-0" />
+                    <span className="overline-large flex-1">
+                      {concept.name}
+                    </span>
+                    <AccordionTrigger className="standard-table-trigger" />
+                  </AccordionHeader>
+
+                  <AccordionContent className="standard-table-content">
+                    <div className="standard-table-content__inner">
+                      {concept.themes.slice(0, 1).map((theme) => (
+                        <AccordionListRow
+                          key={theme.id}
+                          badge={
+                            <Tag
+                              variant="code"
+                              style={{
+                                backgroundColor: color.contrast || color.solid,
+                                borderColor: color.border,
+                                color: "white",
+                              }}
+                            >
+                              {theme.code}
+                            </Tag>
+                          }
+                          title={theme.name}
+                          titleClassName="standard-table-list-row__title body-large"
+                          className="standard-table-list-row standard-table-list-row--nested"
+                          onClick={() => navigateTo("/")}
+                        />
+                      ))}
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+              );
+            })}
+          </Accordion>
+        </AccordionContainer>
+        </div>
+      </div>
+    );
+  },
+};
+
 export const IWBIThemesTable: Story = {
   render: () => {
     const conceptSlug = "community";
@@ -288,6 +473,7 @@ export const IWBIThemesTable: Story = {
                 <AccordionHeader
                   onClick={() => navigateTo("/")}
                   className="standard-table-row-header"
+                  transparentOnOpen
                 >
                   <Tag
                     variant="code"
@@ -392,6 +578,7 @@ export const IWBIStrategiesTable: Story = {
                 <AccordionHeader
                   onClick={() => navigateTo("/")}
                   className="standard-table-row-header"
+                  transparentOnOpen
                 >
                   <Tag
                     variant="code"

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>
+    );
+  },
+};