@purpurds/accordion 5.11.0 → 5.11.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/accordion",
-  "version": "5.11.0",
+  "version": "5.11.2",
   "license": "AGPL-3.0-only",
   "main": "./dist/accordion.cjs.js",
   "types": "./dist/accordion.d.ts",
@@ -16,32 +16,32 @@
   "dependencies": {
     "classnames": "~2.5.0",
     "@radix-ui/react-accordion": "~1.1.2",
-    "@purpurds/tokens": "5.11.0",
-    "@purpurds/icon": "5.11.0",
-    "@purpurds/paragraph": "5.11.0",
-    "@purpurds/heading": "5.11.0"
+    "@purpurds/icon": "5.11.2",
+    "@purpurds/heading": "5.11.2",
+    "@purpurds/paragraph": "5.11.2",
+    "@purpurds/tokens": "5.11.2"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",
-    "@storybook/blocks": "~7.6.0",
-    "@storybook/react": "~7.6.0",
+    "@storybook/react": "^8.2.6",
+    "storybook": "^8.2.6",
     "@telia/base-rig": "~8.2.0",
     "@telia/react-rig": "~3.2.0",
     "@testing-library/dom": "~9.3.3",
     "@testing-library/jest-dom": "~6.4.0",
     "@testing-library/react": "~14.3.0",
     "@types/node": "20.12.12",
-    "@types/react-dom": "~18.3.0",
-    "@types/react": "~18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.3",
     "eslint-plugin-testing-library": "~6.2.0",
-    "eslint": "~8.57.0",
+    "eslint": "^8.57.0",
     "jsdom": "~22.1.0",
     "lint-staged": "~10.5.3",
     "prettier": "~2.8.8",
-    "react-dom": "~18.3.0",
-    "react": "~18.3.0",
-    "typescript": "~5.4.2",
-    "vite": "~5.2.2",
+    "react-dom": "^18.3.1",
+    "react": "^18.3.1",
+    "typescript": "^5.5.4",
+    "vite": "5.3.4",
     "vitest": "~1.5.0",
     "@purpurds/component-rig": "1.0.0"
   },

package/src/accordion-item.tsx

@@ -31,6 +31,7 @@ export type AccordionItemProps = {
   title: string;
   /**
    * This is the heading tag used for the accordion item title. Defaults to h3.
+   * `type HeadingTagType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"`
    */
   titleTag?: HeadingTagType;
   /**

package/src/accordion.stories.tsx

@@ -1,11 +1,16 @@
 import React from "react";
+import { HeadingTag, TitleVariant } from "@purpurds/heading";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import "@purpurds/heading/styles";
 import { Accordion } from "./accordion";
 
-const meta: Meta<typeof Accordion> = {
+const meta = {
   title: "Components/Accordion",
   component: Accordion,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-ignore
+  subcomponents: { "Accordion.Item": Accordion.Item },
   parameters: {
     design: [
       {
@@ -15,7 +20,31 @@ const meta: Meta<typeof Accordion> = {
       },
     ],
   },
-};
+  argTypes: {
+    titleVariant: {
+      control: "select",
+      options: Object.values(TitleVariant),
+      table: {
+        type: {
+          summary: Object.values(TitleVariant)
+            .map((x) => `"${x}"`)
+            .join(" | "),
+        },
+      },
+    },
+    titleTag: {
+      control: "select",
+      options: Object.values(HeadingTag),
+      table: {
+        type: {
+          summary: Object.values(HeadingTag)
+            .map((x) => `"${x}"`)
+            .join(" | "),
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof Accordion>;
 
 export default meta;
 type Story = StoryObj<typeof Accordion>;
@@ -40,8 +69,8 @@ export const Showcase: Story = {
     </Accordion>
   ),
   args: {
-    negative: false,
     title: "Title goes here",
     titleVariant: "title-300",
+    negative: false,
   },
 };

package/src/{accordion-item.stories.tsx → accordions-item.stories.tsx}

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import { Accordion } from "./accordion";
 
-const meta: Meta<typeof Accordion> = {
+const meta = {
   title: "Components/Accordion",
   component: Accordion,
   parameters: {
@@ -15,7 +15,13 @@ const meta: Meta<typeof Accordion> = {
       },
     ],
   },
-};
+  args: {
+    negative: false,
+    title: "Title goes here",
+    children:
+      "Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at rutrum nulla. ",
+  },
+} satisfies Meta<typeof Accordion>;
 
 export default meta;
 type Story = StoryObj<typeof Accordion.Item>;
@@ -26,10 +32,4 @@ export const AccordionItem: Story = {
       <Accordion.Item {...args} />
     </Accordion>
   ),
-  args: {
-    negative: false,
-    title: "Title goes here",
-    children:
-      "Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at rutrum nulla. ",
-  },
 };

package/readme.mdx

@@ -1,76 +0,0 @@
-import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
-
-import * as AccordionStories from "./src/accordion.stories";
-import packageInfo from "./package.json";
-
-<Meta name="Docs" title="Components/Accordion" of={AccordionStories} />
-
-# Accordion
-
-<Subtitle>Version {packageInfo.version}</Subtitle>
-
-### Showcase
-
-<Primary />
-
-### Properties
-
-<ArgTypes />
-
-### Installation
-
-#### Via NPM
-
-Add the dependency to your consumer app like `"@purpurds/purpur": "^x.y.z"`
-
-In MyApp.tsx
-
-```tsx
-import "@purpurds/purpur/styles";
-```
-
-In MyComponent.tsx
-
-#### Default
-
-```tsx
-import { Accordion } from "@purpurds/purpur";
-
-export const MyComponent = () => {
-  return (
-    <Accordion title="Accordion title" titleVariant="title-100">
-      <Accordion.Item title="Section title" value="1">
-        Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
-        rutrum nulla.
-      </Accordion.Item>
-
-      <Accordion.Item title="Section title" value="2">
-        Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
-        rutrum nulla.
-      </Accordion.Item>
-    </Accordion>
-  );
-};
-```
-
-#### Negative with custom content
-
-```tsx
-export const MyComponent = () => {
-  return (
-    <Accordion negative title="Accordion title">
-      <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>
-      </Accordion.Item>
-
-      <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>
-      </Accordion.Item>
-    </Accordion>
-  );
-};
-```