@purpurds/accordion 5.3.0 → 5.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@purpurds/accordion",
3
- "version": "5.3.0",
3
+ "version": "5.4.1",
4
4
  "license": "AGPL-3.0-only",
5
5
  "main": "./dist/accordion.cjs.js",
6
6
  "types": "./dist/accordion.d.ts",
@@ -16,10 +16,10 @@
16
16
  "dependencies": {
17
17
  "classnames": "~2.5.0",
18
18
  "@radix-ui/react-accordion": "~1.1.2",
19
- "@purpurds/tokens": "5.3.0",
20
- "@purpurds/heading": "5.3.0",
21
- "@purpurds/icon": "5.3.0",
22
- "@purpurds/paragraph": "5.3.0"
19
+ "@purpurds/tokens": "5.4.1",
20
+ "@purpurds/icon": "5.4.1",
21
+ "@purpurds/heading": "5.4.1",
22
+ "@purpurds/paragraph": "5.4.1"
23
23
  },
24
24
  "devDependencies": {
25
25
  "@rushstack/eslint-patch": "~1.10.0",
@@ -27,6 +27,11 @@ export type AccordionItemProps = {
27
27
  * 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.
28
28
  * */
29
29
  value?: string;
30
+ /**
31
+ * onClick is called when accordion item is expanded or collapsed
32
+ * event.target.dataset.state will be either "open" or "closed"
33
+ */
34
+ onClick?: () => void;
30
35
  };
31
36
 
32
37
  export const AccordionItem = ({
@@ -34,6 +39,7 @@ export const AccordionItem = ({
34
39
  className,
35
40
  title,
36
41
  negative,
42
+ onClick,
37
43
  ...props
38
44
  }: AccordionItemProps) => {
39
45
  const classes = cx([
@@ -47,7 +53,10 @@ export const AccordionItem = ({
47
53
  return (
48
54
  <RadixAccordion.Item className={classes} value={title} {...props}>
49
55
  <RadixAccordion.Header className={cx(`${rootClassName}__header`)} asChild>
50
- <RadixAccordion.Trigger className={cx(`${rootClassName}__trigger`, className)}>
56
+ <RadixAccordion.Trigger
57
+ onClick={onClick}
58
+ className={cx(`${rootClassName}__trigger`, className)}
59
+ >
51
60
  <Heading tag="h3" variant="title-100" className={cx(`${rootClassName}__title`)}>
52
61
  {title}
53
62
  </Heading>
@@ -1,20 +1,28 @@
1
1
  import React from "react";
2
2
  import * as matchers from "@testing-library/jest-dom/matchers";
3
3
  import { cleanup, fireEvent, render, screen } from "@testing-library/react";
4
- import { afterEach, describe, expect, it } from "vitest";
4
+ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
5
5
 
6
6
  import { Accordion } from "./accordion";
7
7
 
8
8
  expect.extend(matchers);
9
9
 
10
+ const onClickFunction = vi.fn();
11
+
10
12
  const setup = () =>
11
13
  render(
12
14
  <Accordion title="accordion heading">
13
- <Accordion.Item title="Test heading">item content</Accordion.Item>
15
+ <Accordion.Item title="Test heading" onClick={onClickFunction}>
16
+ item content
17
+ </Accordion.Item>
14
18
  </Accordion>
15
19
  );
16
20
 
17
21
  describe("Accordion", () => {
22
+ beforeEach(() => {
23
+ vi.clearAllMocks();
24
+ });
25
+
18
26
  afterEach(cleanup);
19
27
 
20
28
  it("should render accordion heading", () => {
@@ -61,4 +69,18 @@ describe("Accordion", () => {
61
69
 
62
70
  expect(screen.getByRole("link", { name: "Test link" })).toBeDefined();
63
71
  });
72
+
73
+ it("should send onClick event when trigger is clicked", () => {
74
+ setup();
75
+
76
+ const trigger = screen.getByRole("button");
77
+
78
+ fireEvent.click(trigger);
79
+ expect(onClickFunction).toHaveBeenCalled();
80
+ expect(onClickFunction.mock.calls[0][0].target.dataset.state).toBe("open");
81
+
82
+ fireEvent.click(trigger);
83
+ expect(onClickFunction).toHaveBeenCalled();
84
+ expect(onClickFunction.mock.calls[0][0].target.dataset.state).toBe("closed");
85
+ });
64
86
  });