@purpurds/toggle 5.10.1 → 5.11.1

package/dist/useToggleDrag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useToggleDrag.d.ts","sourceRoot":"","sources":["../src/useToggleDrag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAqC,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,eAAO,MAAM,aAAa,0BAA2B,KAAK,WAAW,EAAE,SAAS,GAAG,UAAU,CAAC;;;;;;;;;;WAqBhE,MAAM;;;;CAiCnC,CAAC"}
+{"version":3,"file":"useToggleDrag.d.ts","sourceRoot":"","sources":["../src/useToggleDrag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAqC,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,eAAO,MAAM,aAAa,0BAA2B,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,UAAU,CAAC;;;;;;;;;oBAqBrE;QAAE,CAAC,EAAE,MAAM,CAAA;KAAE;;;CAiCrC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/toggle",
-  "version": "5.10.1",
+  "version": "5.11.1",
   "license": "AGPL-3.0-only",
   "main": "./dist/toggle.cjs.js",
   "types": "./dist/toggle.d.ts",
@@ -16,33 +16,33 @@
   "dependencies": {
     "@radix-ui/react-switch": "~1.0.3",
     "classnames": "~2.5.0",
-    "@storybook/client-api": "~7.6.0",
-    "@purpurds/label": "5.10.1",
-    "@purpurds/tokens": "5.10.1",
-    "@purpurds/paragraph": "5.10.1",
-    "@purpurds/icon": "5.10.1"
+    "@purpurds/paragraph": "5.11.1",
+    "@purpurds/icon": "5.11.1",
+    "@purpurds/tokens": "5.11.1",
+    "@purpurds/label": "5.11.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",
-    "@storybook/blocks": "~7.6.0",
-    "@storybook/react": "~7.6.0",
+    "@storybook/preview-api": "^8.2.6",
+    "@storybook/react": "^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",
+    "storybook": "^8.2.6",
+    "typescript": "^5.5.4",
+    "vite": "5.3.4",
     "vitest": "~1.5.0",
     "@purpurds/component-rig": "1.0.0"
   },

package/src/toggle.stories.tsx

@@ -1,16 +1,25 @@
 import React from "react";
+import { useArgs } from "@storybook/preview-api";
 import type { Meta, StoryObj } from "@storybook/react";
-import { Toggle } from "./toggle";
-import { useArgs } from "@storybook/client-api";
 
 import "@purpurds/icon/styles";
 import "@purpurds/label/styles";
 import "@purpurds/paragraph/styles";
+import { Toggle } from "./toggle";
 
-const meta: Meta<typeof Toggle> = {
+const meta = {
   title: "Inputs/Toggle",
   component: Toggle,
-};
+  parameters: {
+    design: [
+      {
+        name: "Toggle",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=1187-108",
+      },
+    ],
+  },
+} satisfies Meta<typeof Toggle>;
 
 export default meta;
 type Story = StoryObj<typeof Toggle>;
@@ -24,18 +33,26 @@ export const Controlled: Story = {
   argTypes: {
     defaultChecked: { table: { disable: true } },
     labelPosition: {
-      options: [undefined, "left", "right"],
+      options: ["left", "right"],
       control: "select",
+      table: { type: { summary: `"left" | "right"` } },
     },
   },
   parameters: {
-    design: [
-      {
-        name: "Toggle",
-        type: "figma",
-        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=1187-108",
+    docs: {
+      description: {
+        story: "For when you have to control and use the state of the toggle.",
       },
-    ],
+      source: {
+        code: `
+<Toggle
+  id="toggle-showcase"
+  checked={isChecked}
+  onChange={setIsChecked}
+  label="Controlled draggable toggle"  
+/>`,
+      },
+    },
   },
   render: ({ ...args }) => {
     const [{ checked }, updateArgs] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
@@ -58,13 +75,28 @@ export const Uncontrolled: Story = {
     onChange: { table: { disable: true } },
   },
   parameters: {
-    design: [
-      {
-        name: "Toggle",
-        type: "figma",
-        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=1187-108",
+    docs: {
+      description: {
+        story: `For when you don't have to controll state of the toggle, e.g. when in a form.
+
+_NOTE: do not use toggles instead of checkboxes or radio buttons!_`,
       },
-    ],
+      source: {
+        code: `
+/**
+ * Toggle will render checked, and handle it's state itself.
+ *
+ * Since it is rendered in a form, it will render a checkbox input under the hood
+ * that will reflect its value and state.
+ */
+<form>
+  <Toggle
+    id="toggle-uncontrolled"
+    defaultChecked
+    label="Uncontrolled toggle" />
+</form>`,
+      },
+    },
   },
   decorators: [
     (Story) => {
@@ -91,5 +123,6 @@ export const Uncontrolled: Story = {
       );
     },
   ],
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ onChange: _onChange, checked: _checked, ...args }) => <Toggle {...args} />,
 };

package/readme.mdx

@@ -1,124 +0,0 @@
-import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
-
-import * as ToggleStories from "./src/toggle.stories";
-import packageInfo from "./package.json";
-
-<Meta name="Docs" title="Components/Toggle" of={ToggleStories} />
-
-# Toggle
-
-<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";
-```
-
-### Examples
-
-In MyComponent.tsx
-
-#### Controlled.
-
----
-
-For when you have to controll and use the state of the toggle.
-
-```tsx
-import { Toggle } from "@purpurds/purpur";
-
-export const MyComponent = () => {
-  const [isChecked, setIsChecked] = useState(false);
-  return (
-    <div>
-      <Toggle
-        id="my-toggle"
-        checked={isChecked}
-        onChange={setIsChecked}
-        label="My toggle"
-        labelPosition="right"
-      />
-    </div>
-  );
-};
-```
-
-#### Uncontrolled
-
----
-
-For when you don't have to controll state of the toggle, e.g. when in a form.
-
-_NOTE: do not use toggles instead of checkboxes or radio buttons!_
-
-```tsx
-import { Toggle } from "@purpurds/purpur";
-
-export const MyComponent = () => {
-  /**
-   * Toggle will render checked, and handle it's state itself.
-   *
-   * Since it is rendered in a form, it will render a checkbox input under the hood
-   * that will reflect its value and state.
-   */
-  return (
-    <form>
-      <Toggle id="my-toggle" defaultChecked label="My uncontrolled toggle" />
-    </form>
-  );
-};
-```
-
-#### With custom label (not recommended).
-
----
-
-Use the `aria-labelledby` property and pass the id of the label.
-
-```tsx
-import { Toggle } from "@purpurds/purpur";
-
-export const MyComponent = () => {
-  return (
-    <div>
-      <label id="my-custom-label" htmlFor="my-toggle">
-        Custom label
-      </label>
-      <Toggle aria-labeledby="my-custom-label" id="my-toggle" {...otherProps} />
-    </div>
-  );
-};
-```
-
-#### Without label (not recommended).
-
----
-
-If there should be no label at all, use the `aria-label` to label the toggle for screen readers.
-
-```tsx
-import { Toggle } from "@purpurds/purpur";
-
-export const MyComponent = () => {
-  return (
-    <div>
-      <Toggle aria-label="Toggle some awesome stuff!" id="my-toggle" {...otherProps} />
-    </div>
-  );
-};
-```