Merge pull request #516 from ably/Accordion_add_onClick

Add onClick function in the AccordionData

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.7.4",
+  "version": "14.7.5",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

src/core/Accordion.tsx

@@ -203,7 +203,10 @@ const Accordion = ({
             name={item.name}
             rowIcon={item.icon}
             open={fullyOpen ?? openIndexes.includes(currentIndex)}
-            onClick={() => handleSetIndex(currentIndex)}
+            onClick={() => {
+              handleSetIndex(currentIndex);
+              item.onClick?.(currentIndex);
+            }}
             toggleIcons={icons}
             theme={theme}
             options={options}

src/core/Accordion/Accordion.stories.tsx

@@ -43,6 +43,11 @@ const longData = data.map((datum) => ({
   ),
 }));
 
+const dataWithCustomClickable = data.map((datum) => ({
+  ...datum,
+  onClick: () => alert(`Custom onClick for ${datum.name} section`),
+}));
+
 const AccordionPresentation = ({ data, options }: AccordionProps) => (
   <div className="grid sm:grid-cols-2 gap-16 w-full">
     {accordionThemes
@@ -204,3 +209,18 @@ export const StaticAndFullyOpen = {
     },
   },
 };
+
+export const WithCustomOnClick = {
+  render: () =>
+    AccordionPresentation({
+      data: dataWithCustomClickable,
+    }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "When you set an onClick entry, it will be called when the section is clicked. It will add an additional action to be performed apart from the open/close behavior.",
+      },
+    },
+  },
+};

src/core/Accordion/types.ts

@@ -6,6 +6,7 @@ export type AccordionData = {
   name: string;
   icon?: IconName;
   content: ReactNode;
+  onClick?: (index: number) => void;
 };
 
 export type AccordionIcons = {