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

apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx

@@ -8,6 +8,7 @@ import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Switch from "@scandic-hotels/design-system/Switch"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
 
@@ -15,7 +16,6 @@ import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import { getErrorMessage } from "@/components/TempDesignSystem/Form/Input/errors"
-import Switch from "@/components/TempDesignSystem/Form/Switch"
 
 import { Input as BookingWidgetInput } from "../Input"
 import { isMultiRoomError } from "../utils"

apps/scandic-web/components/TempDesignSystem/Form/Switch/index.tsx

@@ -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>
-  )
-}

apps/scandic-web/components/TempDesignSystem/Form/Switch/switch.module.css

@@ -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;
-}

apps/scandic-web/types/components/switch/index.ts

@@ -1,7 +0,0 @@
-import type { RegisterOptions } from "react-hook-form"
-
-export interface SwitchProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  name: string
-  registerOptions?: RegisterOptions
-}