Rewrite control-switch (#167)

* First stab at control-switch * Add more examples * Add a temporary CSS file for dev * Add to headlog and revise snapshots
mapbox · Jul 28, 2022 · 9de5ccd · 9de5ccd
1 parent 7e7c26f
commit 9de5ccd
Show file tree

Hide file tree

Showing 17 changed files with 397 additions and 491 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,9 @@ Changelog
 
 ## HEAD
 
+- [breaking] Rewrites `src/components/control-switch` as a functional component.and uses [`swtich` from Radix](https://radix-website-git-release.modulz-deploys.com/docs/primitives/components/switch). 🚨 **Drop options**:
+    - `optional`: Additional text like "optional" should be applied by the consumer using the label prop.
+    - `initialValue` and `validator` which were previously provided by the form component.
 - [breaking] Rewrites `src/components/icon` as a functional component and uses [`accessible-icon` from Radix](https://www.radix-ui.com/docs/primitives/utilities/accessible-icon) as an internal primitive.
 - [breaking] Rewrites `src/components/control-wrapper` as a functional component.
 - [feature] Introduces TypeScript to the source code and converts:

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
   "dependencies": {
     "@mapbox/query-selector-contains-node": "^1.0.0",
     "@radix-ui/react-accessible-icon": "^0.1.4",
+    "@radix-ui/react-switch": "^0.1.5",
     "classnames": "^2.2.6",
     "clipboard": "^2.0.0",
     "debounce": "^1.1.0",

diff --git a/src/components/control-switch/__tests__/__snapshots__/control-switch.test.js.snap b/src/components/control-switch/__tests__/__snapshots__/control-switch.test.js.snap
diff --git a/src/components/control-switch/__tests__/__snapshots__/control-switch.test.tsx.snap b/src/components/control-switch/__tests__/__snapshots__/control-switch.test.tsx.snap
@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ControlSwitch basic renders 1`] = `
+<body>
+  <div>
+    <div
+      class="relative "
+    >
+      <fieldset
+        class="flex flex--center-cross"
+      >
+        <label
+          class="switch-container "
+          for="test"
+        >
+          <button
+            aria-checked="false"
+            class="switch switch--s-label"
+            data-state="unchecked"
+            data-testid="test-switch"
+            id="test"
+            role="switch"
+            type="button"
+            value="on"
+          >
+            <span
+              data-state="unchecked"
+            />
+          </button>
+          <span
+            class="txt-s ml6"
+          >
+            Basic
+          </span>
+        </label>
+      </fieldset>
+      <div
+        role="alert"
+      />
+    </div>
+  </div>
+</body>
+`;
diff --git a/src/components/control-switch/__tests__/control-switch-test-cases.js b/src/components/control-switch/__tests__/control-switch-test-cases.js