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
2025-07-04 08:33:04 +00:00
parent c3279ec254
commit d7981eae42
5 changed files with 13 additions and 17 deletions
@@ -1,45 +0,0 @@
-"use client"
-
-import { Switch as AriaSwitch } from "react-aria-components"
-import { useController, useFormContext } from "react-hook-form"
-
-import Caption from "@scandic-hotels/design-system/Caption"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-
-import styles from "./switch.module.css"
-
-import type { SwitchProps } from "@/types/components/switch"
-
-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>
-  )
-}
@@ -1,46 +0,0 @@
-.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;
-}