@purpurds/accordion 5.2.0 → 5.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/accordion",
-  "version": "5.2.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.2.0",
-    "@purpurds/icon": "5.2.0",
-    "@purpurds/heading": "5.2.0",
-    "@purpurds/paragraph": "5.2.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",
@@ -30,7 +30,7 @@
     "@testing-library/dom": "~9.3.3",
     "@testing-library/jest-dom": "~6.4.0",
     "@testing-library/react": "~14.3.0",
-    "@types/node": "18",
+    "@types/node": "20.12.12",
     "@types/react-dom": "~18.3.0",
     "@types/react": "~18.3.0",
     "eslint-plugin-testing-library": "~6.2.0",

package/readme.mdx

@@ -34,20 +34,20 @@ In MyComponent.tsx
 #### Default
 
 ```tsx
-import { Accordion, AccordionItem } from "@purpurds/purpur";
+import { Accordion } from "@purpurds/purpur";
 
 export const MyComponent = () => {
   return (
     <Accordion title="Accordion title" titleVariant="title-100">
-      <AccordionItem title="Section title" value="1">
+      <Accordion.Item title="Section title" value="1">
         Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
         rutrum nulla.
-      </AccordionItem>
+      </Accordion.Item>
 
-      <AccordionItem title="Section title" value="2">
+      <Accordion.Item title="Section title" value="2">
         Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
         rutrum nulla.
-      </AccordionItem>
+      </Accordion.Item>
     </Accordion>
   );
 };
@@ -59,17 +59,17 @@ export const MyComponent = () => {
 export const MyComponent = () => {
   return (
     <Accordion negative title="Accordion title">
-      <AccordionItem title="Section title1">
+      <Accordion.Item title="Section title1">
         Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
         rutrum nulla.
         <a href="https://telia.se">Link1</a>
-      </AccordionItem>
+      </Accordion.Item>
 
-      <AccordionItem title="Section title2">
+      <Accordion.Item title="Section title2">
         Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
         rutrum nulla.
         <a href="https://telia.se">Link2</a>
-      </AccordionItem>
+      </Accordion.Item>
     </Accordion>
   );
 };

package/src/accordion-item.stories.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { Accordion } from "./accordion";
-import { AccordionItem as AccordionItemComponent } from "./accordion-item";
 
 const meta: Meta<typeof Accordion> = {
   title: "Components/Accordion",
@@ -19,12 +18,12 @@ const meta: Meta<typeof Accordion> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof AccordionItemComponent>;
+type Story = StoryObj<typeof Accordion.Item>;
 
 export const AccordionItem: Story = {
   render: (args) => (
     <Accordion negative={args.negative}>
-      <AccordionItemComponent {...args} />
+      <Accordion.Item {...args} />
     </Accordion>
   ),
   args: {

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

@@ -2,7 +2,6 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { Accordion } from "./accordion";
-import { AccordionItem } from "./accordion-item";
 
 const meta: Meta<typeof Accordion> = {
   title: "Components/Accordion",
@@ -24,20 +23,20 @@ type Story = StoryObj<typeof Accordion>;
 export const Showcase: Story = {
   render: (args) => (
     <Accordion {...args}>
-      <AccordionItem title="Section title" value="1">
+      <Accordion.Item title="Section title" value="1">
         Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
         rutrum nulla.
-      </AccordionItem>
+      </Accordion.Item>
 
-      <AccordionItem title="Section title" value="2">
+      <Accordion.Item title="Section title" value="2">
         Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
         rutrum nulla.
-      </AccordionItem>
+      </Accordion.Item>
 
-      <AccordionItem title="Section title" value="3">
+      <Accordion.Item title="Section title" value="3">
         Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
         rutrum nulla.
-      </AccordionItem>
+      </Accordion.Item>
     </Accordion>
   ),
   args: {

package/src/accordion.test.tsx

@@ -1,21 +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";
-import { AccordionItem } from "./accordion-item";
 
 expect.extend(matchers);
 
+const onClickFunction = vi.fn();
+
 const setup = () =>
   render(
     <Accordion title="accordion heading">
-      <AccordionItem title="Test heading">item content</AccordionItem>
+      <Accordion.Item title="Test heading" onClick={onClickFunction}>
+        item content
+      </Accordion.Item>
     </Accordion>
   );
 
 describe("Accordion", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
   afterEach(cleanup);
 
   it("should render accordion heading", () => {
@@ -51,9 +58,9 @@ describe("Accordion", () => {
   it("should render custom accordion item content", () => {
     render(
       <Accordion title="accordion heading">
-        <AccordionItem title="Test heading">
+        <Accordion.Item title="Test heading">
           <a href="/test">Test link</a>
-        </AccordionItem>
+        </Accordion.Item>
       </Accordion>
     );
 
@@ -62,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");
+  });
 });

package/src/accordion.tsx

@@ -4,7 +4,7 @@ import * as RadixAccordion from "@radix-ui/react-accordion";
 import c from "classnames/bind";
 
 import styles from "./accordion.module.scss";
-import { isAccordionItem } from "./accordion-item";
+import { AccordionItem, isAccordionItem } from "./accordion-item";
 
 const cx = c.bind(styles);
 
@@ -64,4 +64,6 @@ export const Accordion = ({
   );
 };
 
+Accordion.Item = AccordionItem;
+
 Accordion.displayName = "Accordion";