feat(components): Update Switch component design (#2897)

* Update visual test structure

* Move Switch Web.stories.tsx to v9 storybook location

* Modernize Switch stories to v9 format

- Update imports from ComponentMeta/ComponentStory to Meta/StoryObj from @storybook/react-vite
- Update meta export to use satisfies pattern with type export
- Remove /Web from title path
- Remove unnecessary parameters (viewMode, previewTabs)
- Update story definitions to use Story type with render property
- Update template functions to use Story["args"] type

* Update Switch docs links to point to v9 web storybook

* Update Switch design

* Remove old invisible label and update switch layout

The old label had opacity=0 from the last retheme we did. The label itself was powering the layout of the pip which was confusing and not consistent in the on vs off position.

Updated layout to use calculated positions which work much better.

* Regen screenshots

* Regen snapshots

* Add tests

* Fix css lint

* Regen FeatureSwitch screenshots

* Update Switch.stories.tsx

* Update Switch.module.css.d.ts

SB v7's build had to modify this file.

* Make screen readers ignore the icon

* Replace basic story with controlled case

The controlled case is the ONLY case, so having a basic story that does nothing doesn't make sense.

* Replace snapshot tests with actual logical tests

Author: jdeichert

docs/components/Switch/Switch.stories.mdx

@@ -5,3 +5,5 @@ import { Meta } from "@storybook/addon-docs";
 # Switch
 
 [Switch docs](https://atlantis.getjobber.com/components/Switch) have moved to the new site.
+
+[Web](https://atlantis.getjobber.com/storybook/web/?path=/story/components-selections-switch--basic) stories have moved to Storybook v9.

docs/components/Switch/Web.stories.tsx

@@ -121,30 +121,24 @@ exports[`renders a full FeatureSwitch 1`] = `
           type="button"
         >
           <span
-            class="toggle"
+            aria-hidden="true"
+            class="icon"
           >
-            <span
-              class="label"
-            >
-              <span
-                class="base bold small uppercase white"
-              >
-                On
-              </span>
-            </span>
-            <span
-              class="pip"
-            />
-            <span
-              class="label"
+            <svg
+              data-testid="checkmark"
+              style="fill: var(--color-icon); display: inline-block; vertical-align: middle; width: 16px; height: 16px;"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <span
-                class="base bold small uppercase greyBlue"
-              >
-                Off
-              </span>
-            </span>
+              <path
+                d="M4.703 12.029a1 1 0 1 0-1.414 1.414l4.699 5.293a1 1 0 0 0 1.414 0L20.695 7.443a1 1 0 1 0-1.414-1.414L8.695 16.615l-3.992-4.586Z"
+                style="fill: var(--color-surface);"
+              />
+            </svg>
           </span>
+          <span
+            class="toggle"
+          />
         </button>
         <input
           type="hidden"

packages/components/src/FeatureSwitch/__snapshots__/FeatureSwitch.test.tsx.snap

@@ -1,14 +1,18 @@
 .switch {
   --switch--width: 48px;
   --switch--pipSize: 16px;
-  --switch--labelWidth: calc(var(--switch--pipSize) * 1.3);
   --switch--borderOffset: var(--border-thick);
+  --switch-pipOnPosition: calc(
+    var(--switch--width) - var(--switch--pipSize) -
+      (var(--switch--borderOffset) * 2) - var(--space-smallest)
+  );
+  --switch-pipOffPosition: var(--space-smallest);
 }
 
 .track,
 .track * {
   box-sizing: border-box;
-  transition: all var(--timing-base);
+  transition: all var(--timing-base) ease-in-out;
 }
 
 .track {
@@ -20,7 +24,7 @@
   border-radius: var(--switch--pipSize);
   overflow: hidden;
   line-height: normal;
-  background-color: var(--color-surface);
+  background-color: var(--color-inactive--surface);
   cursor: pointer;
   appearance: none;
   align-items: center;
@@ -41,59 +45,35 @@
   background-color: var(--color-interactive);
 }
 
-.toggle {
-  display: flex;
-  position: relative;
-  margin-left: calc(var(--switch--width) / -2);
-  pointer-events: none;
-  flex: 1 1 100%;
-  align-items: center;
-}
-
-.isChecked .toggle {
-  margin-left: 0;
-}
-
-.label {
-  display: flex;
-  position: relative;
-  min-width: var(--switch--labelWidth);
-  margin-top: var(--space-minuscule);
-  user-select: none;
-  pointer-events: none;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
+.isChecked:hover {
+  border-color: var(--color-interactive--hover);
+  background-color: var(--color-interactive--hover);
 }
 
-.label:first-of-type {
-  padding-left: var(--space-small);
-}
-
-.label:last-of-type {
-  padding-right: var(--space-small);
-}
-
-.pip {
-  flex: 0 0 auto;
+.toggle {
   width: var(--switch--pipSize);
   height: var(--switch--pipSize);
   border: none;
   border-radius: var(--radius-circle);
-  background-color: var(--color-interactive--subtle);
-  transition: all var(--timing-quick) ease-out;
+  background-color: var(--color-inactive--onSurface);
+  transform: translateX(var(--switch-pipOffPosition));
 }
 
-.isChecked .pip {
+.isChecked .toggle {
   border-color: var(--color-interactive);
   background-color: var(--color-surface);
+  transform: translateX(var(--switch-pipOnPosition));
 }
 
-.disabled .pip {
+.disabled .toggle {
   border-color: var(--color-disabled--secondary);
   background-color: var(--color-disabled);
 }
 
+.disabled.isChecked .toggle {
+  background-color: var(--color-surface);
+}
+
 .disabled {
   border-color: var(--color-disabled);
   background-color: var(--color-surface);
@@ -111,3 +91,23 @@
 .disabled:hover {
   border-color: var(--color-disabled);
 }
+
+.icon {
+  display: flex;
+  position: absolute;
+  transform: translateX(
+    calc(
+      var(--switch-pipOffPosition) + var(--switch--pipSize) +
+        var(--space-smaller)
+    )
+  );
+}
+
+.isChecked .icon {
+  transform: translateX(
+    calc(
+      var(--switch-pipOnPosition) - var(--switch--pipSize) -
+        var(--space-smaller)
+    )
+  );
+}

packages/components/src/Switch/Switch.module.css

@@ -3,9 +3,9 @@ declare const styles: {
   readonly "track": string;
   readonly "isChecked": string;
   readonly "toggle": string;
-  readonly "label": string;
-  readonly "pip": string;
   readonly "disabled": string;
+  readonly "pip": string;
+  readonly "icon": string;
 };
 export = styles;
 

packages/components/src/Switch/Switch.module.css.d.ts

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Switch } from "@jobber/components/Switch";
+import { Button } from "@jobber/components/Button";
+import { Stack } from "@jobber/components/Stack";
+
+const meta = {
+  title: "Components/Selections/Switch",
+  component: Switch,
+} satisfies Meta<typeof Switch>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const BasicTemplate = (args: Story["args"]) => {
+  const [value, setValue] = useState(false);
+
+  return (
+    <Stack>
+      <Button onClick={() => setValue(!value)} label="Controlled Example" />
+      <Switch {...args} value={value} onChange={setValue} />
+    </Stack>
+  );
+};
+
+export const Basic: Story = {
+  render: BasicTemplate,
+};