@popsure/dirty-swan 0.27.15 → 0.27.17

package/dist/lib/components/comparisonTable/components/AccordionItem/AccordionItem.d.ts

@@ -1,11 +1,10 @@
 /// <reference types="react" />
-export declare const AccordionItem: ({ children, className, headerClassName, iconSrc, isOpen, onOpen, onClose, title, }: {
+export declare const AccordionItem: ({ children, className, headerClassName, isOpen, onOpen, onClose, label, }: {
     children: React.ReactNode | string;
     className?: string | undefined;
     headerClassName?: string | undefined;
-    iconSrc?: string | undefined;
     isOpen: boolean;
     onOpen: () => void;
     onClose: () => void;
-    title: string;
+    label: React.ReactNode;
 }) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.27.15",
+  "version": "0.27.17",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/lib/components/comparisonTable/components/AccordionItem/AccordionItem.tsx

@@ -25,20 +25,18 @@ export const AccordionItem = ({
   children,
   className = '',
   headerClassName = '',
-  iconSrc = '',
   isOpen,
   onOpen,
   onClose,
-  title,
+  label,
 }: {
   children: React.ReactNode | string;
   className?: string;
   headerClassName?: string;
-  iconSrc?: string;
   isOpen: boolean;
   onOpen: () => void;
   onClose: () => void;
-  title: string;
+  label: React.ReactNode;
 }) => {
   const handleClick = () => {
     if (!isOpen) {
@@ -56,8 +54,11 @@ export const AccordionItem = ({
         type="button"
       >
         <div className={`d-flex ai-center ${styles.iconAndTextContainer}`}>
-          {!!iconSrc && <img src={iconSrc} alt={`${title} icon`} />}
-          <h4 className="p-h4">{title}</h4>
+          {typeof label === 'string' ? (
+            <h4 className="p-h4">{label}</h4>
+          ) : (
+            <>{label}</>
+          )}
         </div>
         <ChevronSVG
           className={`${styles.chevron} ${!isOpen && styles.chevronClosed}`}

package/src/lib/components/comparisonTable/index.tsx

@@ -149,19 +149,19 @@ const ComparisonTable = <T extends { id: number }>(
                   );
                 });
 
+                const idString = `headerGroup-${headerGroup.id}`;
+
                 return (
                   <>
                     {headerGroup.label && collapsibleSections ? (
                       <AccordionItem
                         className="mt8"
-                        title={String(headerGroup.label)}
+                        label={headerGroup.label}
                         headerClassName="p24 br8"
-                        isOpen={selectedSection === String(headerGroup.label)}
-                        onOpen={() =>
-                          setSelectedSection(String(headerGroup.label))
-                        }
+                        isOpen={selectedSection === idString}
+                        onOpen={() => setSelectedSection(idString)}
                         onClose={() => setSelectedSection('')}
-                        key={String(headerGroup.label)}
+                        key={idString}
                       >
                         <ScrollSyncPane>
                           <div