@purpurds/breadcrumbs 5.11.0 → 5.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/breadcrumbs",
-  "version": "5.11.0",
+  "version": "5.11.1",
   "license": "AGPL-3.0-only",
   "main": "./dist/breadcrumbs.cjs.js",
   "types": "./dist/breadcrumbs.d.ts",
@@ -15,30 +15,30 @@
   "source": "src/breadcrumbs.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
-    "@purpurds/tokens": "5.11.0",
-    "@purpurds/icon": "5.11.0"
+    "@purpurds/tokens": "5.11.1",
+    "@purpurds/icon": "5.11.1"
   },
   "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/breadcrumbs.stories.tsx

@@ -2,11 +2,14 @@ import React, { ReactElement, ReactNode, useEffect, useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import "@purpurds/icon/styles";
-import { Breadcrumbs, BreadcrumbsItemProps } from "./breadcrumbs";
+import { Breadcrumbs, BreadcrumbsItem, BreadcrumbsItemProps } from "./breadcrumbs";
 
-const meta: Meta<typeof Breadcrumbs> = {
+const meta = {
   title: "Components/Breadcrumbs",
   component: Breadcrumbs,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-ignore
+  subcomponents: { "Breadcrumbs.Item": BreadcrumbsItem },
   parameters: {
     design: [
       {
@@ -15,9 +18,35 @@ const meta: Meta<typeof Breadcrumbs> = {
         url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?node-id=27132%3A14635&mode=dev",
       },
     ],
+    docs: {
+      description: {
+        component: `When a website has a lot of pages, breadcrumbs can help a user find their current location within the overal hierarchy. This page shows how you can make breadcrumbs accessible to all users. Use them when you have several levels of navigation and want to make the parent pages available as navigation. 
+        
+    Accessibility
+The Purpur breadcrumbs are accessible by default according to best practices. The last BreadcrumbsItem is the one belonging to the page the user is currently on.
+
+
+    Meta Data & SEO
+Another benefit of helping the user find their way, is that we also help the search engines increasing understanding of our site.
+
+By default, the breadcrumbs will render a JSON+LD [script tag](https://purpur.telia.io/iframe.html?path=/story/components-breadcrumbs--breadcrumb-meta-data) with [structured meta data](https://developers.google.com/search/docs/appearance/structured-data/breadcrumb#json-ld) extracted from the breadcrumb items.
+
+    Custom Link Component
+If you need a custom link, perhaps to use a router, like the next/link component, you can simply pass your custom link component and skip the href property on Breadcrumbs.Item, only passing it directly to Link.`,
+      },
+    },
+  },
+  argTypes: {
+    children: {
+      table: {
+        type: {
+          summary: "ReactNode | ReactNode[]",
+        },
+      },
+    },
   },
   args: { negative: false },
-};
+} satisfies Meta<typeof Breadcrumbs>;
 
 export default meta;
 
@@ -97,8 +126,7 @@ const Renderer =
       </>
     );
 
-export const DefaultVariant: Story = {
-  name: "Default variant",
+export const Showcase: Story = {
   args: {
     meta: true,
     children: [
@@ -116,25 +144,6 @@ export const DefaultVariant: Story = {
   render: Renderer(false),
 };
 
-export const NegativeVariant: Story = {
-  name: "Negative variant",
-  args: {
-    negative: true,
-    children: [
-      <Breadcrumbs.Item href="/galaxies" key={0}>
-        Galaxies
-      </Breadcrumbs.Item>,
-      <Breadcrumbs.Item href="/outer-rim" key={1}>
-        Outer Rim
-      </Breadcrumbs.Item>,
-      <Breadcrumbs.Item href="/mandalore" key={2}>
-        Mandalore
-      </Breadcrumbs.Item>,
-    ],
-  },
-  render: Renderer(false),
-};
-
 export const CustomItem: Story = {
   name: "Custom Breadcrumb Items",
   args: {

package/src/breadcrumbs.tsx

@@ -162,4 +162,4 @@ const Item = ({
 
 Breadcrumbs.Item = Item;
 
-export { Breadcrumbs };
+export { Breadcrumbs, Item as BreadcrumbsItem };

package/readme.mdx

@@ -1,91 +0,0 @@
-import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
-
-import * as BreadcrumbsStories from "./src/breadcrumbs.stories";
-import packageInfo from "./package.json";
-
-<Meta name="Docs" title="Components/Breadcrumbs" of={BreadcrumbsStories} />
-
-# Breadcrumbs
-
-<Subtitle>Version {packageInfo.version}</Subtitle>
-
-When a website has a lot of pages, breadcrumbs can help a user find their current location within the overal hierarchy. This page shows how you can make breadcrumbs accessible to all users.
-
-Use them when you have several levels of navigation and want to make the parent pages available as navigation.
-
-### Accessibility
-
-The Purpur breadcrumbs are accessible by default according to best practices. The last BreadcrumbsItem is the one belonging to the page the user is currently on.
-
-### Meta Data & SEO
-
-Another benefit of helping the user find their way, is that we also help the search engines increasing understanding of our site.
-
-By default, the breadcrumbs will render a [`JSON+LD` script tag](?path=/story/components-breadcrumbs--breadcrumb-meta-data) with [structured meta data](https://developers.google.com/search/docs/appearance/structured-data/breadcrumb#json-ld) extracted from the breadcrumb items.
-
-### Custom Link Component
-
-If you need a [custom link](#custom-link), perhaps to use a router, like the `next/link` component, you can simply [pass your custom link](#custom-link) component and skip the `href` property on Breadcrumbs.Item, only passing it directly to `<Link />`.
-
-### 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
-
-```tsx
-import { Breadcrumbs } from "@purpurds/purpur";
-
-export const MyComponent = () => {
-  return (
-    <Breadcrumbs>
-      <Breadcrumbs.Item href="/ships" onClick={() => console.log("clicking on ships")}>
-        Ships
-      </Breadcrumbs.Item>
-      <Breadcrumbs.Item href="/ships/twin-seaters/">Twin Seaters</Breadcrumbs.Item>
-      <Breadcrumbs.Item href="/ships/twin-seaters/naboo-n1">N1 Starfighter</Breadcrumbs.Item>
-    </Breadcrumbs>
-  );
-};
-```
-
-### Custom Link
-
-With a custom link component such as `next/link`:
-
-```tsx
-import { Breadcrumbs } from "@purpurds/breadcrumbs";
-import Link from "next/link";
-
-export const MyComponent = () => {
-  return (
-    <Breadcrumbs>
-      <Breadcrumbs.Item>
-        <Link href="/ships">Ships</Link>
-      </Breadcrumbs.Item>
-      <Breadcrumbs.Item>
-        <Link href="/ships/twin-seaters">Twin Seaters</Link>
-      </Breadcrumbs.Item>
-      <Breadcrumbs.Item>
-        <Link href="/ships/twin-seaters/naboo-n1">N1 Starfighter</Link>
-      </Breadcrumbs.Item>
-    </Breadcrumbs>
-  );
-};
-```