@purpurds/tabs 5.11.0 → 5.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/tabs",
-  "version": "5.11.0",
+  "version": "5.11.1",
   "license": "AGPL-3.0-only",
   "main": "./dist/tabs.cjs.js",
   "types": "./dist/tabs.d.ts",
@@ -16,31 +16,31 @@
   "dependencies": {
     "classnames": "~2.5.0",
     "@radix-ui/react-tabs": "~1.0.4",
-    "@purpurds/tokens": "5.11.0",
-    "@purpurds/paragraph": "5.11.0",
-    "@purpurds/icon": "5.11.0"
+    "@purpurds/icon": "5.11.1",
+    "@purpurds/paragraph": "5.11.1",
+    "@purpurds/tokens": "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/tab-content.test.tsx

@@ -3,9 +3,9 @@ import * as matchers from "@testing-library/jest-dom/matchers";
 import { cleanup, render, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it } from "vitest";
 
-import { Tabs } from "./tabs";
-import { TabContent } from "./tab-content";
 import "./__mocks__/intersectionObserverMock";
+import { TabContent } from "./tab-content";
+import { Tabs } from "./tabs";
 
 const rootClassName = "purpur-tab-content";
 

package/src/tabs.stories.tsx

@@ -4,9 +4,12 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Tabs } from "./tabs";
 import { tabsVariants } from "./tabs.utils";
 
-const meta: Meta<typeof Tabs> = {
+const meta = {
   title: "Components/Tabs",
   component: Tabs,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-ignore
+  subcomponents: { "Tabs.Content": Tabs.Content },
   parameters: {
     design: [
       {
@@ -17,11 +20,33 @@ const meta: Meta<typeof Tabs> = {
     ],
   },
   argTypes: {
-    variant: { control: "select", options: tabsVariants },
-    ["data-testid"]: { control: { type: "text" } },
-    className: { control: { type: "text" } },
+    variant: {
+      control: "select",
+      options: tabsVariants,
+      table: { type: { summary: tabsVariants.map((x) => `"${x}"`).join(" | ") } },
+    },
+    children: {
+      table: {
+        type: {
+          summary: "ReactElement<typeof TabContent>[] | ReactElement<typeof TabContent>",
+        },
+      },
+    },
+    fullWidth: {
+      table: { type: { summary: "boolean" } },
+    },
+    negative: {
+      table: { type: { summary: "boolean" } },
+    },
+    ["data-testid"]: { table: { type: { summary: "string" } }, control: { type: "text" } },
+    className: {
+      table: {
+        type: { summary: "string" },
+      },
+      control: { type: "text" },
+    },
   },
-};
+} satisfies Meta<typeof Tabs>;
 
 export default meta;
 

package/readme.mdx

@@ -1,56 +0,0 @@
-import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
-
-import * as TabsStories from "./src/tabs.stories";
-import * as TabContentStories from "./src/tab-content.stories";
-import packageInfo from "./package.json";
-
-<Meta name="Docs" title="Components/Tabs" of={TabsStories} />
-
-# Tabs
-
-<Subtitle>Version {packageInfo.version}</Subtitle>
-
-### Showcase
-
-<Primary />
-
-### Properties
-
-#### Tabs
-
-<ArgTypes />
-
-#### Tabs.Content
-
-<ArgTypes of={TabContentStories} />
-
-### 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 { Tabs } from "@purpurds/purpur";
-
-export const MyComponent = () => {
-  return (
-    <Tabs variant="contained">
-      <Tabs.Content tabId="tab-1" name="Tab name 1">
-        <div>Some content</div>
-      </Tabs.Content>
-      <Tabs.Content tabId="tab-2" name="Tab name 2">
-        <div>Some content</div>
-      </Tabs.Content>
-    </Tabs>
-  );
-};
-```

package/src/tab-content.stories.tsx

@@ -1,43 +0,0 @@
-import React from "react";
-import { Root } from "@radix-ui/react-tabs";
-import type { Meta, StoryObj } from "@storybook/react";
-
-import { Tabs } from "./tabs";
-
-const meta: Meta<typeof Tabs.Content> = {
-  title: "Components/Tabs",
-  component: Tabs.Content,
-  parameters: {
-    design: [
-      {
-        name: "Tabs",
-        type: "figma",
-        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=2942-430&mode=design&t=zoKkl2HAtk3UuKoP-0",
-      },
-    ],
-    storyHead: {
-      title: "Tabs.Content",
-    },
-  },
-  argTypes: {
-    ["data-testid"]: { control: { type: "text" } },
-    className: { control: { type: "text" } },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Tabs.Content>;
-
-export const TabContent: Story = {
-  args: {
-    tabId: "tab-1",
-    name: "Tab name-1",
-    children: <div>Some content</div>,
-  },
-  render: ({ children, ...args }) => (
-    <Root defaultValue={args.tabId}>
-      <Tabs.Content {...args}>{children}</Tabs.Content>
-    </Root>
-  ),
-};