@madie/madie-design-system 1.2.93 → 1.2.95

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@madie/madie-design-system",
-    "version": "1.2.93",
+    "version": "1.2.95",
     "description": "Shared style guide across the Madie program.",
     "main": "dist/index.js",
     "homepage": "https://github.com/MeasureAuthoringTool/madie-design-system",
@@ -134,7 +134,7 @@
         "d3-selection": "^1.4.2",
         "d3-shape": "^1.3.7",
         "dayjs": "^1.11.7",
-        "dompurify": "^3.4.6",
+        "dompurify": "^3.4.12",
         "html-react-parser": "^5.2.6",
         "jwt-decode": "^3.1.2",
         "lodash": "^4.18.1",
@@ -144,11 +144,12 @@
         "react-modal": "^3.14.4",
         "retry": "^0.13.1",
         "styled-components": "^5.3.7",
-        "svgo": "^3.0.3",
+        "svgo": "^3.3.4",
         "tailwindcss": "^3.4.10",
         "twin.macro": "^3.4.0",
         "what-input": "^5.2.10",
-        "xss": "^1.0.10"
+        "xss": "^1.0.10",
+        "yaml": "^2.9.0"
     },
     "peerDependencies": {
         "@tanstack/match-sorter-utils": "^8.8.4",

package/styles/qppds/components/_toggle.scss

@@ -0,0 +1,85 @@
+@import "../settings/index";
+
+.qpp-c-toggle {
+  display: inline-flex;
+  align-items: center;
+  font-family: $font-rubik;
+  font-size: $font-size-14;
+  line-height: $line-height-md;
+}
+
+.qpp-c-toggle__input {
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+  clip: rect(0, 0, 0, 0);
+}
+
+.qpp-c-toggle__label {
+  align-items: center;
+  cursor: pointer;
+  display: inline-flex;
+  gap: $spacing-8;
+  min-height: rem(38px);
+}
+
+.qpp-c-toggle__control {
+  background-color: rgba($black, 0.38);
+  border-radius: rem(7px);
+  display: inline-flex;
+  height: rem(14px);
+  margin: 0 rem(3px);
+  position: relative;
+  transition: background-color 0.2s ease-in-out;
+  width: rem(38px);
+
+  &::after {
+    background-color: $white;
+    box-shadow: 0 rem(1px) rem(3px) rgba($black, 0.35);
+    border-radius: 50%;
+    content: "";
+    height: rem(20px);
+    left: rem(-3px);
+    position: absolute;
+    top: rem(-3px);
+    transition: transform 0.2s ease-in-out;
+    width: rem(20px);
+  }
+}
+
+.qpp-c-toggle__input:checked + .qpp-c-toggle__control {
+  background-color: rgba($blue-60, 0.5);
+
+  &::after {
+    background-color: $blue-60;
+    transform: translateX(rem(21px));
+  }
+}
+
+.qpp-c-toggle__input:focus-visible + .qpp-c-toggle__control {
+  box-shadow: 0 0 0 rem(4px) $blue-10;
+}
+
+.qpp-c-toggle--disabled .qpp-c-toggle__label {
+  color: $gray-60;
+  cursor: not-allowed;
+}
+
+.qpp-c-toggle__input:disabled + .qpp-c-toggle__control {
+  background-color: rgba($black, 0.12);
+
+  &::after {
+    background-color: $gray-20;
+    box-shadow: none;
+  }
+}
+
+.qpp-c-toggle__input:disabled:checked + .qpp-c-toggle__control {
+  background-color: rgba($blue-60, 0.3);
+
+  &::after {
+    background-color: #9ecaea;
+  }
+}

package/styles/qppds/components/index.scss

@@ -22,4 +22,5 @@
 @import "./pagination";
 @import "./rich-text-editor";
 @import "./toast";
+@import "./toggle";
 @import "./search-and-filter"

package/test/components/Toggle.test.jsx

@@ -0,0 +1,98 @@
+import "@testing-library/jest-dom";
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Toggle from "../../components/Toggle/Toggle";
+
+describe("Toggle", () => {
+    test("renders an off switch with its label", () => {
+        render(<Toggle id="hide-invalid" label="Hide Invalid Test Cases" />);
+
+        const toggle = screen.getByRole("switch", {
+            name: "Hide Invalid Test Cases",
+        });
+
+        expect(toggle).not.toBeChecked();
+    });
+
+    test("updates its state when uncontrolled", () => {
+        render(<Toggle id="hide-invalid" label="Hide Invalid Test Cases" />);
+
+        const toggle = screen.getByRole("switch", {
+            name: "Hide Invalid Test Cases",
+        });
+
+        fireEvent.click(toggle);
+
+        expect(toggle).toBeChecked();
+    });
+
+    test("toggles the local control when another instance has the same id", () => {
+        render(
+            <>
+                <Toggle id="hide-invalid" label="Hide Invalid Test Cases" />
+                <Toggle id="hide-invalid" label="Hide Invalid Test Cases" />
+            </>
+        );
+
+        const toggles = screen.getAllByRole("switch");
+        fireEvent.click(screen.getAllByText("Hide Invalid Test Cases")[1]);
+
+        expect(toggles[0]).not.toBeChecked();
+        expect(toggles[1]).toBeChecked();
+    });
+
+    test("reports changes when controlled", () => {
+        const onChange = jest.fn();
+
+        render(
+            <Toggle
+                checked={false}
+                id="hide-invalid"
+                label="Hide Invalid Test Cases"
+                onChange={onChange}
+            />
+        );
+
+        fireEvent.click(
+            screen.getByRole("switch", { name: "Hide Invalid Test Cases" })
+        );
+
+        expect(onChange).toHaveBeenCalledWith(expect.any(Object), true);
+    });
+
+    test("forwards input attributes to the switch", () => {
+        render(
+            <Toggle
+                data-testid="toggle-input"
+                id="hide-invalid"
+                label="Hide Invalid Test Cases"
+            />
+        );
+
+        expect(screen.getByTestId("toggle-input")).toHaveAttribute(
+            "role",
+            "switch"
+        );
+    });
+
+    test("does not change when disabled", () => {
+        const onChange = jest.fn();
+
+        render(
+            <Toggle
+                disabled
+                id="hide-invalid"
+                label="Hide Invalid Test Cases"
+                onChange={onChange}
+            />
+        );
+
+        const toggle = screen.getByRole("switch", {
+            name: "Hide Invalid Test Cases",
+        });
+
+        expect(toggle).toBeDisabled();
+        expect(toggle).not.toBeChecked();
+        expect(onChange).not.toHaveBeenCalled();
+    });
+});