@syscore/ui-library 1.10.0 → 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/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"