@syscore/ui-library 1.10.0 → 1.11.0

package/client/components/icons/UtilityMessage.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+interface UtilityMessageProps {
+  className?: string;
+}
+
+export const UtilityMessage: React.FC<UtilityMessageProps> = ({
+  className,
+}) => {
+  return (
+    <div
+      className={cn(
+        "size-4 flex items-center justify-center text-gray-500",
+        className,
+      )}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="22"
+        height="21"
+        viewBox="0 0 22 21"
+        fill="none"
+        className={cn("size-[14px] text-inherit")}
+      >
+        <path
+          d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H5.828C5.29761 17.0001 4.78899 17.2109 4.414 17.586L2.212 19.788C2.1127 19.8873 1.9862 19.9549 1.84849 19.9823C1.71077 20.0097 1.56803 19.9956 1.43831 19.9419C1.30858 19.8881 1.1977 19.7971 1.11969 19.6804C1.04167 19.5637 1.00002 19.4264 1 19.286V3C1 2.46957 1.21071 1.96086 1.58579 1.58579C1.96086 1.21071 2.46957 1 3 1H19C19.5304 1 20.0391 1.21071 20.4142 1.58579C20.7893 1.96086 21 2.46957 21 3V15Z"
+          fill="currentColor"
+          fill-opacity="0.2"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  );
+};

package/client/components/icons/UtilityTrash.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+interface UtilityTrashProps {
+  className?: string;
+}
+
+export const UtilityTrash: React.FC<UtilityTrashProps> = ({ className }) => {
+  return (
+    <div
+      className={cn(
+        "size-4 flex items-center justify-center text-gray-500",
+        className,
+      )}
+    >
+      <svg
+        width="15"
+        height="16"
+        viewBox="0 0 15 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={cn("size-[14px] text-inherit")}
+      >
+        <path
+          d="M11.9504 3.5498V13.3498C11.9504 13.7211 11.8029 14.0772 11.5403 14.3398C11.2778 14.6023 10.9217 14.7498 10.5504 14.7498H3.55039C3.17909 14.7498 2.82299 14.6023 2.56044 14.3398C2.29789 14.0772 2.15039 13.7211 2.15039 13.3498V3.5498"
+          fill="white"
+        />
+        <path
+          d="M11.9504 3.5498V13.3498C11.9504 13.7211 11.8029 14.0772 11.5403 14.3398C11.2778 14.6023 10.9217 14.7498 10.5504 14.7498H3.55039C3.17909 14.7498 2.82299 14.6023 2.56044 14.3398C2.29789 14.0772 2.15039 13.7211 2.15039 13.3498V3.5498"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M0.75 3.5498H13.35"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M4.25 3.55V2.15C4.25 1.7787 4.3975 1.4226 4.66005 1.16005C4.9226 0.8975 5.2787 0.75 5.65 0.75H8.45C8.8213 0.75 9.1774 0.8975 9.43995 1.16005C9.7025 1.4226 9.85 1.7787 9.85 2.15V3.55"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  );
+};

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

@@ -20,6 +20,7 @@ import { UtilityClassification } from "../components/icons/UtilityClassification
 import { UtilityClose } from "../components/icons/UtilityClose";
 import { UtilityDrag } from "../components/icons/UtilityDrag";
 import { UtilityEdit } from "../components/icons/UtilityEdit";
+import { UtilityMessage } from "../components/icons/UtilityMessage";
 import { UtilityOptions } from "../components/icons/UtilityOptions";
 import { UtilityPortfolio } from "../components/icons/UtilityPortfolio";
 import { UtilityReset } from "../components/icons/UtilityReset";
@@ -27,6 +28,7 @@ import { UtilityScoring } from "../components/icons/UtilityScoring";
 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";
@@ -49,6 +51,7 @@ import {
   SealProductProvider,
   SealProviders,
 } from "../components/icons/ProviderSeals";
+import { UtilityTrash } from "@/components/icons/UtilityTrash";
 
 const meta = {
   title: "Review/Icons",
@@ -232,6 +235,10 @@ export const UtilityIcons: Story = {
             <UtilityEdit />
             <span className="text-sm font-medium">Edit</span>
           </div>
+          <div className="flex flex-col items-center gap-2">
+            <UtilityMessage />
+            <span className="text-sm font-medium">Message</span>
+          </div>
           <div className="flex flex-col items-center gap-2">
             <UtilityOptions />
             <span className="text-sm font-medium">Options</span>
@@ -260,6 +267,14 @@ export const UtilityIcons: Story = {
             <UtilityText />
             <span className="text-sm font-medium">Text</span>
           </div>
+          <div className="flex flex-col items-center gap-2">
+            <UtilityTrash />
+            <span className="text-sm font-medium">Trash</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <UtilityTriangleInfo />
+            <span className="text-sm font-medium">TriangleInfo</span>
+          </div>
         </div>
       </div>
     </div>