@purpurds/accordion 5.3.0 → 5.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/accordion",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/accordion.cjs.js",
   "types": "./dist/accordion.d.ts",
@@ -16,10 +16,10 @@
   "dependencies": {
     "classnames": "~2.5.0",
     "@radix-ui/react-accordion": "~1.1.2",
-    "@purpurds/tokens": "5.3.0",
-    "@purpurds/heading": "5.3.0",
-    "@purpurds/icon": "5.3.0",
-    "@purpurds/paragraph": "5.3.0"
+    "@purpurds/tokens": "5.4.0",
+    "@purpurds/icon": "5.4.0",
+    "@purpurds/paragraph": "5.4.0",
+    "@purpurds/heading": "5.4.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",

package/src/accordion-item.tsx

@@ -27,6 +27,11 @@ export type AccordionItemProps = {
    * Value is used to identify the accordion. By default title is used for that purpose. If there are identical titles in the accordion, then value should be defined.
    * */
   value?: string;
+  /**
+   * onClick is called when accordion item is expanded or collapsed
+   * event.target.dataset.state will be either "open" or "closed"
+   */
+  onClick?: () => void;
 };
 
 export const AccordionItem = ({
@@ -34,6 +39,7 @@ export const AccordionItem = ({
   className,
   title,
   negative,
+  onClick,
   ...props
 }: AccordionItemProps) => {
   const classes = cx([
@@ -47,7 +53,10 @@ export const AccordionItem = ({
   return (
     <RadixAccordion.Item className={classes} value={title} {...props}>
       <RadixAccordion.Header className={cx(`${rootClassName}__header`)} asChild>
-        <RadixAccordion.Trigger className={cx(`${rootClassName}__trigger`, className)}>
+        <RadixAccordion.Trigger
+          onClick={onClick}
+          className={cx(`${rootClassName}__trigger`, className)}
+        >
           <Heading tag="h3" variant="title-100" className={cx(`${rootClassName}__title`)}>
             {title}
           </Heading>

package/src/accordion.test.tsx

@@ -1,20 +1,28 @@
 import React from "react";
 import * as matchers from "@testing-library/jest-dom/matchers";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import { Accordion } from "./accordion";
 
 expect.extend(matchers);
 
+const onClickFunction = vi.fn();
+
 const setup = () =>
   render(
     <Accordion title="accordion heading">
-      <Accordion.Item title="Test heading">item content</Accordion.Item>
+      <Accordion.Item title="Test heading" onClick={onClickFunction}>
+        item content
+      </Accordion.Item>
     </Accordion>
   );
 
 describe("Accordion", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
   afterEach(cleanup);
 
   it("should render accordion heading", () => {
@@ -61,4 +69,18 @@ describe("Accordion", () => {
 
     expect(screen.getByRole("link", { name: "Test link" })).toBeDefined();
   });
+
+  it("should send onClick event when trigger is clicked", () => {
+    setup();
+
+    const trigger = screen.getByRole("button");
+
+    fireEvent.click(trigger);
+    expect(onClickFunction).toHaveBeenCalled();
+    expect(onClickFunction.mock.calls[0][0].target.dataset.state).toBe("open");
+
+    fireEvent.click(trigger);
+    expect(onClickFunction).toHaveBeenCalled();
+    expect(onClickFunction.mock.calls[0][0].target.dataset.state).toBe("closed");
+  });
 });