@purpurds/accordion 5.2.0 → 5.3.0

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.
Files changed (13) hide show
  1. package/dist/LICENSE.txt +3 -3
  2. package/dist/accordion.cjs.js +5 -5
  3. package/dist/accordion.cjs.js.map +1 -1
  4. package/dist/accordion.d.ts +1 -0
  5. package/dist/accordion.d.ts.map +1 -1
  6. package/dist/accordion.es.js +107 -106
  7. package/dist/accordion.es.js.map +1 -1
  8. package/package.json +6 -6
  9. package/readme.mdx +9 -9
  10. package/src/accordion-item.stories.tsx +2 -3
  11. package/src/accordion.stories.tsx +6 -7
  12. package/src/accordion.test.tsx +3 -4
  13. package/src/accordion.tsx +3 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@purpurds/accordion",
3
- "version": "5.2.0",
3
+ "version": "5.3.0",
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.2.0",
20
- "@purpurds/icon": "5.2.0",
21
- "@purpurds/heading": "5.2.0",
22
- "@purpurds/paragraph": "5.2.0"
19
+ "@purpurds/tokens": "5.3.0",
20
+ "@purpurds/heading": "5.3.0",
21
+ "@purpurds/icon": "5.3.0",
22
+ "@purpurds/paragraph": "5.3.0"
23
23
  },
24
24
  "devDependencies": {
25
25
  "@rushstack/eslint-patch": "~1.10.0",
@@ -30,7 +30,7 @@
30
30
  "@testing-library/dom": "~9.3.3",
31
31
  "@testing-library/jest-dom": "~6.4.0",
32
32
  "@testing-library/react": "~14.3.0",
33
- "@types/node": "18",
33
+ "@types/node": "20.12.12",
34
34
  "@types/react-dom": "~18.3.0",
35
35
  "@types/react": "~18.3.0",
36
36
  "eslint-plugin-testing-library": "~6.2.0",
package/readme.mdx CHANGED
@@ -34,20 +34,20 @@ In MyComponent.tsx
34
34
  #### Default
35
35
 
36
36
  ```tsx
37
- import { Accordion, AccordionItem } from "@purpurds/purpur";
37
+ import { Accordion } from "@purpurds/purpur";
38
38
 
39
39
  export const MyComponent = () => {
40
40
  return (
41
41
  <Accordion title="Accordion title" titleVariant="title-100">
42
- <AccordionItem title="Section title" value="1">
42
+ <Accordion.Item title="Section title" value="1">
43
43
  Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
44
44
  rutrum nulla.
45
- </AccordionItem>
45
+ </Accordion.Item>
46
46
 
47
- <AccordionItem title="Section title" value="2">
47
+ <Accordion.Item title="Section title" value="2">
48
48
  Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
49
49
  rutrum nulla.
50
- </AccordionItem>
50
+ </Accordion.Item>
51
51
  </Accordion>
52
52
  );
53
53
  };
@@ -59,17 +59,17 @@ export const MyComponent = () => {
59
59
  export const MyComponent = () => {
60
60
  return (
61
61
  <Accordion negative title="Accordion title">
62
- <AccordionItem title="Section title1">
62
+ <Accordion.Item title="Section title1">
63
63
  Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
64
64
  rutrum nulla.
65
65
  <a href="https://telia.se">Link1</a>
66
- </AccordionItem>
66
+ </Accordion.Item>
67
67
 
68
- <AccordionItem title="Section title2">
68
+ <Accordion.Item title="Section title2">
69
69
  Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
70
70
  rutrum nulla.
71
71
  <a href="https://telia.se">Link2</a>
72
- </AccordionItem>
72
+ </Accordion.Item>
73
73
  </Accordion>
74
74
  );
75
75
  };
package/src/accordion-item.stories.tsx CHANGED
@@ -2,7 +2,6 @@ import React from "react";
2
2
  import type { Meta, StoryObj } from "@storybook/react";
3
3
 
4
4
  import { Accordion } from "./accordion";
5
- import { AccordionItem as AccordionItemComponent } from "./accordion-item";
6
5
 
7
6
  const meta: Meta<typeof Accordion> = {
8
7
  title: "Components/Accordion",
@@ -19,12 +18,12 @@ const meta: Meta<typeof Accordion> = {
19
18
  };
20
19
 
21
20
  export default meta;
22
- type Story = StoryObj<typeof AccordionItemComponent>;
21
+ type Story = StoryObj<typeof Accordion.Item>;
23
22
 
24
23
  export const AccordionItem: Story = {
25
24
  render: (args) => (
26
25
  <Accordion negative={args.negative}>
27
- <AccordionItemComponent {...args} />
26
+ <Accordion.Item {...args} />
28
27
  </Accordion>
29
28
  ),
30
29
  args: {
package/src/accordion.stories.tsx CHANGED
@@ -2,7 +2,6 @@ import React from "react";
2
2
  import type { Meta, StoryObj } from "@storybook/react";
3
3
 
4
4
  import { Accordion } from "./accordion";
5
- import { AccordionItem } from "./accordion-item";
6
5
 
7
6
  const meta: Meta<typeof Accordion> = {
8
7
  title: "Components/Accordion",
@@ -24,20 +23,20 @@ type Story = StoryObj<typeof Accordion>;
24
23
  export const Showcase: Story = {
25
24
  render: (args) => (
26
25
  <Accordion {...args}>
27
- <AccordionItem title="Section title" value="1">
26
+ <Accordion.Item title="Section title" value="1">
28
27
  Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
29
28
  rutrum nulla.
30
- </AccordionItem>
29
+ </Accordion.Item>
31
30
 
32
- <AccordionItem title="Section title" value="2">
31
+ <Accordion.Item title="Section title" value="2">
33
32
  Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
34
33
  rutrum nulla.
35
- </AccordionItem>
34
+ </Accordion.Item>
36
35
 
37
- <AccordionItem title="Section title" value="3">
36
+ <Accordion.Item title="Section title" value="3">
38
37
  Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
39
38
  rutrum nulla.
40
- </AccordionItem>
39
+ </Accordion.Item>
41
40
  </Accordion>
42
41
  ),
43
42
  args: {
package/src/accordion.test.tsx CHANGED
@@ -4,14 +4,13 @@ import { cleanup, fireEvent, render, screen } from "@testing-library/react";
4
4
  import { afterEach, describe, expect, it } from "vitest";
5
5
 
6
6
  import { Accordion } from "./accordion";
7
- import { AccordionItem } from "./accordion-item";
8
7
 
9
8
  expect.extend(matchers);
10
9
 
11
10
  const setup = () =>
12
11
  render(
13
12
  <Accordion title="accordion heading">
14
- <AccordionItem title="Test heading">item content</AccordionItem>
13
+ <Accordion.Item title="Test heading">item content</Accordion.Item>
15
14
  </Accordion>
16
15
  );
17
16
 
@@ -51,9 +50,9 @@ describe("Accordion", () => {
51
50
  it("should render custom accordion item content", () => {
52
51
  render(
53
52
  <Accordion title="accordion heading">
54
- <AccordionItem title="Test heading">
53
+ <Accordion.Item title="Test heading">
55
54
  <a href="/test">Test link</a>
56
- </AccordionItem>
55
+ </Accordion.Item>
57
56
  </Accordion>
58
57
  );
59
58
 
package/src/accordion.tsx CHANGED
@@ -4,7 +4,7 @@ import * as RadixAccordion from "@radix-ui/react-accordion";
4
4
  import c from "classnames/bind";
5
5
 
6
6
  import styles from "./accordion.module.scss";
7
- import { isAccordionItem } from "./accordion-item";
7
+ import { AccordionItem, isAccordionItem } from "./accordion-item";
8
8
 
9
9
  const cx = c.bind(styles);
10
10
 
@@ -64,4 +64,6 @@ export const Accordion = ({
64
64
  );
65
65
  };
66
66
 
67
+ Accordion.Item = AccordionItem;
68
+
67
69
  Accordion.displayName = "Accordion";