@purpurds/toggle 3.0.0

package/dist/useToggleDrag.d.ts

@@ -0,0 +1,18 @@
+import { MutableRefObject } from "react";
+import { ToggleProps } from "./toggle";
+export declare const useToggleDrag: ({ checked, onChange }: Pick<ToggleProps, "checked" | "onChange">) => {
+    trackRef: MutableRefObject<HTMLDivElement | null>;
+    thumbRef: import("react").RefObject<HTMLSpanElement>;
+    isDragging: boolean;
+    bounds: {
+        left: number;
+        right: number;
+    };
+    position: number;
+    onDrag: ({ x }: {
+        x: number;
+    }) => void;
+    onStop: () => void;
+    onChangeWithDrag: () => void;
+};
+//# sourceMappingURL=useToggleDrag.d.ts.map

package/dist/useToggleDrag.d.ts.map

@@ -0,0 +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"}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@purpurds/toggle",
+  "version": "3.0.0",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/toggle.cjs.js",
+  "types": "./dist/toggle.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/toggle.cjs.js",
+      "systemjs": "./dist/toggle.system.js",
+      "types": "./dist/toggle.d.ts",
+      "default": "./dist/toggle.es.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "source": "src/toggle.tsx",
+  "dependencies": {
+    "@radix-ui/react-switch": "~1.0.3",
+    "classnames": "~2.5.0",
+    "@storybook/client-api": "~7.6.0",
+    "@purpurds/label": "3.0.0",
+    "@purpurds/paragraph": "3.0.0",
+    "@purpurds/tokens": "3.0.0",
+    "@purpurds/icon": "3.0.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.7.0",
+    "@storybook/blocks": "~7.6.0",
+    "@storybook/react": "~7.6.0",
+    "@telia/base-rig": "~8.2.0",
+    "@telia/react-rig": "~3.2.0",
+    "@testing-library/dom": "~9.3.3",
+    "@testing-library/jest-dom": "~6.3.0",
+    "@testing-library/react": "~14.1.2",
+    "@types/node": "18",
+    "@types/react-dom": "~18.2.17",
+    "@types/react": "~18.2.42",
+    "eslint-plugin-testing-library": "~6.2.0",
+    "eslint": "~8.56.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "~10.5.3",
+    "prettier": "~2.8.8",
+    "react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "typescript": "~5.2.2",
+    "vite": "~5.0.6",
+    "vitest": "~1.2.0",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "rm -rf dist && vite build && vite build --mode systemjs",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/readme.mdx

@@ -0,0 +1,136 @@
+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/toggle": "x.y.z"`
+
+#### From outside the monorepo (build-time)
+
+To install this package, you need to setup access to the artifactory. [Click here to go to the guide on how to do that](https://github.com/telia-company/jfrog-documentation/blob/main/doc/JFrog/JFrog_Onboarding.md#getting-access-to-artifactory-and-other-jfrog-applications).
+
+---
+
+In MyApp.tsx
+
+```tsx
+import "@purpurds/tokens/index.css";
+```
+
+and
+
+```tsx
+import "@purpurds/toggle/styles";
+```
+
+### Examples
+
+In MyComponent.tsx
+
+#### Controlled.
+
+---
+
+For when you have to controll and use the state of the toggle.
+
+```tsx
+import { Toggle } from "@purpurds/toggle";
+
+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/toggle";
+
+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/toggle";
+
+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/toggle";
+
+export const MyComponent = () => {
+  return (
+    <div>
+      <Toggle aria-label="Toggle some awesome stuff!" id="my-toggle" {...otherProps} />
+    </div>
+  );
+};
+```

package/src/DraggableX.tsx

@@ -0,0 +1,127 @@
+import {
+  Children,
+  cloneElement,
+  CSSProperties,
+  isValidElement,
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+
+export type DraggableXProps = {
+  children?: ReactNode;
+  disabled?: boolean;
+  position: number;
+  bounds: { left: number; right: number };
+  onStart?: () => void;
+  onDrag?: (args: { x: number }) => void;
+  onStop?: () => void;
+  style?: CSSProperties;
+};
+
+const isTouchEvent = (e: MouseEvent | TouchEvent): e is TouchEvent => e && "touches" in e;
+
+/**
+ * Bare minimum to make the toggle draggable.
+ * It is created for usage in the toggle only but could easily be extracted and used elsewhere.
+ *
+ * It is called `DraggableX` since it's only for dragging along the x-axis.
+ */
+export const DraggableX = ({
+  children,
+  disabled,
+  onStart,
+  onDrag,
+  onStop,
+  bounds,
+  position,
+  style,
+}: DraggableXProps) => {
+  const [dragX, setDragX] = useState<number | undefined>(undefined);
+  const [dragStartX, setDragStartX] = useState<number | undefined>(undefined);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const startDrag = (e: React.MouseEvent | React.TouchEvent) => {
+    if (!disabled) {
+      e.preventDefault();
+      const clientX = isTouchEvent(e.nativeEvent)
+        ? e.nativeEvent.touches[0].clientX
+        : e.nativeEvent.clientX;
+      setDragStartX(clientX);
+      onStart?.();
+    }
+  };
+
+  const onMouseMove = useCallback(
+    (e: MouseEvent | TouchEvent) => {
+      if (typeof dragStartX !== "number") {
+        return;
+      }
+
+      const clientX = isTouchEvent(e) ? e.touches[0].clientX : e.clientX;
+      const dragDelta = clientX - dragStartX;
+
+      if (!dragDelta) {
+        return;
+      }
+
+      const nextDragX = position + dragDelta;
+      if (!isDragging && Math.abs(nextDragX)) {
+        setIsDragging(true);
+      }
+
+      const nextDragXBounded = (() => {
+        if (nextDragX > bounds.right) {
+          return bounds.right;
+        }
+
+        if (nextDragX < bounds.left) {
+          return bounds.left;
+        }
+
+        return nextDragX;
+      })();
+
+      setDragX(nextDragXBounded);
+      onDrag?.({ x: nextDragXBounded });
+    },
+    [onDrag, setDragX, isDragging, dragStartX]
+  );
+
+  const onMouseUp = useCallback(() => {
+    setDragStartX(undefined);
+    setDragX(undefined);
+    setIsDragging(false);
+    onStop?.();
+  }, [onStop, setDragStartX]);
+
+  useEffect(() => {
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("touchmove", onMouseMove);
+
+    return () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("touchmove", onMouseMove);
+    };
+  }, [onMouseMove]);
+
+  useEffect(() => {
+    window.addEventListener("mouseup", onMouseUp);
+    window.addEventListener("touchend", onMouseUp);
+
+    return () => {
+      window.removeEventListener("mouseup", onMouseUp);
+      window.removeEventListener("touchend", onMouseUp);
+    };
+  }, [onMouseUp]);
+
+  return isValidElement(children)
+    ? cloneElement(Children.only<ReactElement>(children), {
+        onMouseDown: startDrag,
+        onTouchStart: startDrag,
+        style: { ...style, transform: `translateX(${isDragging ? dragX : position}px)` },
+      })
+    : null;
+};

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}

package/src/toggle.module.scss

@@ -0,0 +1,153 @@
+$track-height: var(--purpur-spacing-300);
+$track-width: calc(var(--purpur-spacing-400) + var(--purpur-spacing-150));
+$thumb-size: calc(var(--purpur-spacing-200) + var(--purpur-spacing-25));
+
+.purpur-toggle {
+  $root: &;
+  all: unset;
+  height: $track-width;
+  width: $track-width;
+  cursor: pointer;
+
+  &:hover:not(:disabled) > #{$root}__track {
+    background-color: var(--purpur-color-background-interactive-transparent-hover);
+    border-color: var(--purpur-color-border-interactive-primary);
+  }
+
+  &:active:not(:disabled) > #{$root}__track {
+    background-color: var(--purpur-color-background-interactive-transparent-active);
+  }
+
+  &:disabled {
+    cursor: default;
+
+    & > #{$root}__track {
+      border-color: var(--purpur-color-border-weak);
+    }
+  }
+
+  &:focus-visible {
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: var(--purpur-border-radius-xs);
+      outline: var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);
+      outline-offset: var(--purpur-spacing-25);
+      pointer-events: none;
+    }
+  }
+
+  &[data-state="checked"] {
+    & > #{$root}__track {
+      background-color: var(--purpur-color-background-interactive-primary);
+      border-color: var(--purpur-color-functional-transparent);
+    }
+
+    &:hover:not(:disabled) > #{$root}__track {
+      background-color: var(--purpur-color-background-interactive-primary-hover);
+      border-color: var(--purpur-color-functional-transparent);
+    }
+
+    &:active:not(:disabled) > #{$root}__track {
+      background-color: var(--purpur-color-background-interactive-primary-active);
+      border-color: var(--purpur-color-functional-transparent);
+    }
+
+    &:disabled > #{$root}__track {
+      background-color: var(--purpur-color-background-interactive-disabled);
+      border-color: var(--purpur-color-functional-transparent);
+    }
+
+    & #{$root}__checkmark-container {
+      opacity: 1;
+    }
+  }
+
+  &__track {
+    display: block;
+    width: $track-width;
+    height: $track-height;
+    position: relative;
+    background-color: var(--purpur-color-text-interactive-on-primary);
+    color: var(--purpur-color-text-interactive-on-primary);
+    box-sizing: border-box;
+    border: var(--purpur-border-width-xs) solid var(--purpur-color-border-interactive-primary);
+    border-radius: var(--purpur-border-radius-full);
+    transition:
+      background-color var(--purpur-motion-duration-150) ease,
+      border-color var(--purpur-motion-duration-150) ease;
+  }
+
+  &__thumb {
+    position: absolute;
+    display: block;
+    height: $thumb-size;
+    width: $thumb-size;
+    border-radius: var(--purpur-border-radius-full);
+    background-color: var(--purpur-color-background-interactive-primary);
+    transition:
+      transform var(--purpur-motion-duration-150) ease,
+      background-color var(--purpur-motion-duration-150) ease;
+    will-change: transform;
+    top: 2px;
+
+    &[data-disabled] {
+      background-color: var(--purpur-color-background-interactive-disabled);
+    }
+
+    &[data-state="checked"] {
+      background-color: var(--purpur-color-text-interactive-on-primary);
+
+      &[data-disabled] {
+        background-color: var(--purpur-color-text-interactive-on-primary);
+      }
+    }
+
+    &--dragging {
+      cursor: grabbing;
+      transition:
+        transform 35ms ease,
+        background-color var(--purpur-motion-duration-150) ease;
+    }
+  }
+
+  &__checkmark-container {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 50%;
+    opacity: 0;
+    transform: translateY(-50%);
+    left: var(--purpur-spacing-25);
+    transition: opacity var(--purpur-motion-duration-150) ease;
+    width: $thumb-size;
+    height: $thumb-size;
+  }
+
+  &__checkmark {
+    display: flex !important;
+  }
+
+  &__label {
+    &--right {
+      padding-left: var(--purpur-spacing-150);
+    }
+
+    &--left {
+      padding-right: var(--purpur-spacing-150);
+    }
+  }
+
+  &__container {
+    width: fit-content;
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    & p {
+      transition: color var(--purpur-motion-duration-150) ease;
+    }
+  }
+}

package/src/toggle.stories.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+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";
+
+const meta: Meta<typeof Toggle> = {
+  title: "Inputs/Toggle",
+  component: Toggle,
+};
+
+export default meta;
+type Story = StoryObj<typeof Toggle>;
+
+export const Controlled: Story = {
+  args: {
+    label: "Controlled draggable toggle",
+    id: "toggle-showcase",
+    checked: false,
+  },
+  argTypes: {
+    defaultChecked: { table: { disable: true } },
+    labelPosition: {
+      options: [undefined, "left", "right"],
+      control: "select",
+    },
+  },
+  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",
+      },
+    ],
+  },
+  render: ({ ...args }) => {
+    const [{ checked }, updateArgs] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
+    const setChecked = (value: boolean) => {
+      args.onChange?.(value);
+      updateArgs({ checked: value });
+    };
+
+    return <Toggle {...args} onChange={setChecked} checked={checked} />;
+  },
+};
+
+export const Uncontrolled: Story = {
+  args: {
+    label: "Uncontrolled toggle",
+    id: "toggle-uncontrolled",
+  },
+  argTypes: {
+    checked: { table: { disable: true } },
+    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",
+      },
+    ],
+  },
+  decorators: [
+    (Story) => {
+      const codeStyle = {
+        background: "var(--purpur-color-transparent-black-50)",
+        padding: "var(--purpur-spacing-10)",
+        borderRadius: "var(--purpur-border-radius-xs)",
+        border: "var(--purpur-border-width-xs) solid var(--purpur-color-transparent-black-100)",
+      };
+
+      return (
+        <form>
+          <Story />
+          <hr />
+          <p>
+            In this case <code style={codeStyle}>checked</code> and&nbsp;
+            <code style={codeStyle}>onChange</code> are not passed to the component.
+          </p>
+          <p>
+            Also, it is wrapped in a form which makes the toggle render a checkbox input under the
+            hood that reflects its value and state.
+          </p>
+        </form>
+      );
+    },
+  ],
+  render: ({ onChange: _onChange, checked: _checked, ...args }) => <Toggle {...args} />,
+};

package/src/toggle.test.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { Toggle } from "./toggle";
+
+expect.extend(matchers);
+
+describe("Toggle", () => {
+  afterEach(cleanup);
+
+  it("should render uncontrolled default checked", () => {
+    render(<Toggle id="test" defaultChecked />);
+    expect(screen.getByRole("switch")).toHaveAttribute("data-state", "checked");
+    fireEvent.click(screen.getByRole("switch"));
+    expect(screen.getByRole("switch")).toHaveAttribute("data-state", "unchecked");
+  });
+
+  it("should render uncontrolled default unchecked checked", () => {
+    render(<Toggle id="test" defaultChecked={false} />);
+    expect(screen.getByRole("switch")).toHaveAttribute("data-state", "unchecked");
+    fireEvent.click(screen.getByRole("switch"));
+    expect(screen.getByRole("switch")).toHaveAttribute("data-state", "checked");
+  });
+
+  it("should render controlled checked", () => {
+    render(<Toggle id="test" checked />);
+    expect(screen.getByRole("switch")).toHaveAttribute("data-state", "checked");
+    screen.getByRole("switch").click();
+    expect(screen.getByRole("switch")).toHaveAttribute("data-state", "checked");
+  });
+
+  it("should render controlled unchecked", () => {
+    render(<Toggle id="test" checked={false} />);
+    expect(screen.getByRole("switch")).toHaveAttribute("data-state", "unchecked");
+    screen.getByRole("switch").click();
+    expect(screen.getByRole("switch")).toHaveAttribute("data-state", "unchecked");
+  });
+
+  it("should render disabled", () => {
+    render(<Toggle data-testid="test" id="test" disabled />);
+    expect(screen.getByRole("switch")).toHaveAttribute("disabled");
+  });
+
+  it("should render label left", () => {
+    render(<Toggle data-testid="test" id="test" labelPosition="left" label="Test label" />);
+    expect(screen.getByRole("switch").previousSibling).toHaveTextContent("Test label");
+    expect(screen.getByRole("switch").nextSibling).toBeNull();
+  });
+
+  it("should render label right", () => {
+    render(<Toggle data-testid="test" id="test" labelPosition="right" label="Test label" />);
+    expect(screen.getByRole("switch").previousSibling).toBeNull();
+    expect(screen.getByRole("switch").nextSibling).toHaveTextContent("Test label");
+  });
+
+  it("should not render label given no label", () => {
+    render(<Toggle data-testid="test" id="test" labelPosition="right" />);
+    expect(screen.queryByTestId("test-label")).not.toBeInTheDocument();
+  });
+
+  it("should emit onChange", () => {
+    const onChangeMock = vi.fn();
+    render(<Toggle data-testid="test" id="test" label="Test label" onChange={onChangeMock} />);
+    screen.getByTestId("test-label").click();
+    screen.getByRole("switch").click();
+    screen.getByTestId("test-thumb").click();
+    expect(onChangeMock).toHaveBeenCalledTimes(3);
+  });
+});