Merged in chore/sw-3145-move-switch (pull request #2521)

Move Switch to design-system

* Move Switch to design-system

* Fix Icon import

* Fix Caption import...


Approved-by: Joakim Jäderberg

packages/design-system/lib/components/Switch/index.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { Switch as AriaSwitch } from 'react-aria-components'
+import { RegisterOptions, useController, useFormContext } from 'react-hook-form'
+
+import styles from './switch.module.css'
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import Caption from '../Caption'
+
+interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  name: string
+  registerOptions?: RegisterOptions
+}
+
+export default function Switch({
+  className,
+  name,
+  children,
+  registerOptions,
+}: React.PropsWithChildren<SwitchProps>) {
+  const { control } = useFormContext()
+  const { field, fieldState } = useController({
+    control,
+    name,
+    rules: registerOptions,
+  })
+
+  return (
+    <AriaSwitch
+      className={`${styles.container} ${className}`}
+      isSelected={field.value}
+      onChange={field.onChange}
+      data-testid={name}
+      isDisabled={registerOptions?.disabled}
+      excludeFromTabOrder
+    >
+      {children}
+      <span className={styles.switch} tabIndex={0}></span>
+      {fieldState.error ? (
+        <Caption className={styles.error} fontOnly>
+          <MaterialIcon icon="info" color="Icon/Interactive/Accent" />
+          {fieldState.error.message}
+        </Caption>
+      ) : null}
+    </AriaSwitch>
+  )
+}

packages/design-system/lib/components/Switch/switch.module.css

@@ -0,0 +1,46 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  color: var(--text-color);
+  cursor: pointer;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.switch {
+  width: 40px;
+  height: 24px;
+  border: 2px solid var(--Surface-Secondary-Default-dark);
+  background: var(--Surface-Secondary-Default-dark);
+  border-radius: 24px;
+  transition: all 200ms;
+  display: block;
+
+  &:before {
+    content: '';
+    display: block;
+    margin: 2px;
+    width: 16px;
+    height: 16px;
+    background: var(--Surface-UI-Fill-Default);
+    border-radius: 100%;
+    transition: all 200ms;
+  }
+}
+
+.container[data-selected] {
+  .switch {
+    border-color: var(--Surface-UI-Fill-Active);
+    background: var(--Surface-UI-Fill-Active);
+
+    &:before {
+      background: var(--Surface-UI-Fill-Default);
+      transform: translateX(100%);
+    }
+  }
+}
+
+.container[data-focus-visible] .switch {
+  outline: 2px solid var(--focus-ring-color);
+  outline-offset: 2px;
+}

packages/design-system/package.json

@@ -20,6 +20,7 @@
     "./Select": "./dist/components/Select/index.js",
     "./SkeletonShimmer": "./dist/components/SkeletonShimmer/index.js",
     "./Subtitle": "./dist/components/Subtitle/index.js",
+    "./Switch": "./dist/components/Switch/index.js",
     "./Title": "./dist/components/Title/index.js",
     "./Tooltip": "./dist/components/Tooltip/index.js",
     "./Typography": "./dist/components/Typography/index.js",