@purpurds/checkbox 5.11.0 → 5.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/checkbox",
-  "version": "5.11.0",
+  "version": "5.11.1",
   "license": "AGPL-3.0-only",
   "main": "./dist/checkbox.cjs.js",
   "types": "./dist/checkbox.d.ts",
@@ -14,36 +14,36 @@
   },
   "source": "src/checkbox.tsx",
   "dependencies": {
-    "classnames": "~2.5.0",
     "@radix-ui/react-checkbox": "~1.0.4",
-    "@storybook/client-api": "~7.6.0",
-    "@purpurds/tokens": "5.11.0",
-    "@purpurds/field-error-text": "5.11.0",
-    "@purpurds/icon": "5.11.0",
-    "@purpurds/paragraph": "5.11.0",
-    "@purpurds/label": "5.11.0"
+    "classnames": "~2.5.0",
+    "@purpurds/field-error-text": "5.11.1",
+    "@purpurds/paragraph": "5.11.1",
+    "@purpurds/tokens": "5.11.1",
+    "@purpurds/icon": "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/checkbox.stories.tsx

@@ -1,17 +1,26 @@
-import { useArgs } from "@storybook/client-api";
-import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-import { Checkbox, CheckedState } from "./checkbox";
+import { useArgs } from "@storybook/preview-api";
+import type { Meta, StoryObj } from "@storybook/react";
 
 import "@purpurds/icon/styles";
 import "@purpurds/field-error-text/styles";
 import "@purpurds/label/styles";
 import "@purpurds/paragraph/styles";
+import { Checkbox, CheckedState, checkedState } from "./checkbox";
 
-const meta: Meta<typeof Checkbox> = {
+const meta = {
   title: "Inputs/Checkbox",
   component: Checkbox,
-};
+  parameters: {
+    design: [
+      {
+        name: "Checkbox",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=1274-614&mode=dev",
+      },
+    ],
+  },
+} satisfies Meta<typeof Checkbox>;
 
 export default meta;
 type Story = StoryObj<typeof Checkbox>;
@@ -19,22 +28,19 @@ type Story = StoryObj<typeof Checkbox>;
 export const Controlled: Story = {
   argTypes: {
     checked: {
-      options: [true, false, "indeterminate"],
+      table: {
+        type: {
+          summary: checkedState.map((x) => `${x === "indeterminate" ? `"${x}"` : x}`).join(" | "),
+        },
+      },
+      options: checkedState,
     },
   },
   args: {
     id: "checkbox-showcase",
     label: "Controlled checkbox",
   },
-  parameters: {
-    design: [
-      {
-        name: "Checkbox",
-        type: "figma",
-        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=1274-614&mode=dev",
-      },
-    ],
-  },
+
   render: ({ ...args }) => {
     const [{ checked }, updateArgs] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
     const setChecked = (value: CheckedState) => {
@@ -55,15 +61,6 @@ export const Uncontrolled: Story = {
     id: "checkbox-showcase",
     label: "Uncontrolled checkbox",
   },
-  parameters: {
-    design: [
-      {
-        name: "Checkbox",
-        type: "figma",
-        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=1274-614&mode=dev",
-      },
-    ],
-  },
   decorators: [
     (Story) => {
       const codeStyle = {
@@ -89,5 +86,6 @@ export const Uncontrolled: Story = {
       );
     },
   ],
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ onChange: _onChange, checked: _checked, ...args }) => <Checkbox {...args} />,
 };

package/src/checkbox.tsx

@@ -8,7 +8,9 @@ import c from "classnames";
 
 import styles from "./checkbox.module.scss";
 
-export type CheckedState = boolean | "indeterminate";
+export const checkedState = ["indeterminate", true, false] as const;
+
+export type CheckedState = (typeof checkedState)[number];
 export type CheckboxProps = {
   /**
    * To use when no label is given (not recommended).

package/readme.mdx

@@ -1,156 +0,0 @@
-import { Meta, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
-
-import * as CheckboxStories from "./src/checkbox.stories";
-import packageInfo from "./package.json";
-
-<Meta name="Docs" title="Components/Checkbox" of={CheckboxStories} />
-
-# Checkbox
-
-<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 checkbox.
-
-```tsx
-import { Checkbox } from "@purpurds/purpur";
-
-export const MyComponent = () => {
-  const [checked, setChecked] = useState(false);
-  return (
-    <div>
-      <Checkbox
-        id="my-checkbox"
-        checked={checked}
-        onChange={setChecked}
-        label="My checkbox"
-        labelPosition="right"
-      />
-    </div>
-  );
-};
-```
-
-#### Indeterminate.
-
----
-
-When using the Indeterminate state, the toggle must be controlled.
-
-```tsx
-import { Checkbox } from "@purpurds/purpur";
-
-export const MyComponent = () => {
-  const [checked, setChecked] = useState(false);
-
-  return (
-    <div>
-      <Checkbox
-        id="my-checkbox"
-        checked={checked}
-        onChange={setChecked}
-        label="My checkbox"
-        labelPosition="right"
-      />
-      <Button
-        variant="primary"
-        onClick={() =>
-          setChecked((prevChecked) => (prevChecked === "indeterminate" ? false : "indeterminate"))
-        }
-      >
-        Toggle indeterminate
-      </Button>
-    </div>
-  );
-};
-```
-
-#### Uncontrolled
-
----
-
-For when you don't have to controll state of the checkbox, e.g. when in a form.
-
-```tsx
-import { Checkbox } from "@purpurds/purpur";
-
-export const MyComponent = () => {
-  /**
-   * The checkbox 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 reflects its value and state.
-   */
-  return (
-    <form>
-      <Checkbox id="my-checkbox" defaultChecked label="My uncontrolled checkbox" />
-    </form>
-  );
-};
-```
-
-#### With custom label (not recommended).
-
----
-
-Use the `aria-labelledby` property and pass the id of the label.
-
-```tsx
-import { Checkbox } from "@purpurds/purpur";
-
-export const MyComponent = () => {
-  return (
-    <div>
-      <label id="my-custom-label" htmlFor="my-checkbox">
-        Custom label
-      </label>
-      <Checkbox aria-labeledby="my-custom-label" id="my-checkbox" {...otherProps} />
-    </div>
-  );
-};
-```
-
-#### Without label (not recommended).
-
----
-
-If there should be no label at all, use the `aria-label` to label the checkbox for screen readers.
-
-```tsx
-import { Checkbox } from "@purpurds/purpur";
-
-export const MyComponent = () => {
-  return (
-    <div>
-      <Checkbox aria-label="checkbox some awesome stuff!" id="my-checkbox" {...otherProps} />
-    </div>
-  );
-};
-```