Merged in chore/move-checkbox-component (pull request #2501)

chore(SW-3145): Move checkbox component to design-system

* Inline type

* Remove error handling from Checkbox internals

* Move Form/Checkbox

* Fix self referencing imports


Approved-by: Joakim Jäderberg

apps/scandic-web/components/TempDesignSystem/Form/Checkbox/checkbox.module.css

@@ -1,48 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  color: var(--text-color);
-  cursor: pointer;
-}
-
-.container[data-selected] .checkbox {
-  border: none;
-  background: var(--Surface-UI-Fill-Active);
-}
-
-.container[data-disabled] .checkbox {
-  border: 1px solid var(--UI-Input-Controls-Border-Disabled);
-  background: var(--UI-Input-Controls-Surface-Disabled);
-}
-
-.checkboxContainer {
-  display: flex;
-  align-items: center;
-  gap: var(--Spacing-x-one-and-half);
-}
-
-.checkbox {
-  width: 24px;
-  height: 24px;
-  min-width: 24px;
-  background: var(--UI-Input-Controls-Surface-Normal);
-  border: 1px solid var(--UI-Input-Controls-Border-Normal);
-  border-radius: 4px;
-  transition: all 200ms;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  forced-color-adjust: none;
-}
-
-.topAlign {
-  align-items: flex-start;
-}
-
-.error {
-  align-items: center;
-  color: var(--Scandic-Red-60);
-  display: flex;
-  gap: var(--Spacing-x-half);
-  margin: var(--Spacing-x1) 0 0;
-}

apps/scandic-web/components/TempDesignSystem/Form/Checkbox/errors.ts

@@ -1,15 +0,0 @@
-import { signupErrors } from "@scandic-hotels/trpc/routers/user/schemas"
-
-import type { IntlShape } from "react-intl"
-
-export function getErrorMessage(intl: IntlShape, errorCode?: string) {
-  switch (errorCode) {
-    case signupErrors.TERMS_REQUIRED:
-      return intl.formatMessage({
-        defaultMessage: "You must accept the terms and conditions",
-      })
-    default:
-      console.warn("Error code not supported:", errorCode)
-      return errorCode
-  }
-}

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

@@ -1,76 +0,0 @@
-"use client"
-
-import { forwardRef } from "react"
-import { Checkbox as AriaCheckbox } from "react-aria-components"
-import { useController, useFormContext } from "react-hook-form"
-import { useIntl } from "react-intl"
-
-import Caption from "@scandic-hotels/design-system/Caption"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-
-import { getErrorMessage } from "./errors"
-
-import styles from "./checkbox.module.css"
-
-import type { CheckboxProps } from "@/types/components/checkbox"
-
-const Checkbox = forwardRef<
-  HTMLInputElement,
-  React.PropsWithChildren<CheckboxProps>
->(function Checkbox(
-  {
-    className = "",
-    name,
-    children,
-    registerOptions,
-    hideError,
-    topAlign = false,
-  },
-  ref
-) {
-  const { control } = useFormContext()
-  const { field, fieldState } = useController({
-    control,
-    name,
-    rules: registerOptions,
-  })
-  const intl = useIntl()
-
-  return (
-    <AriaCheckbox
-      className={`${styles.container} ${className}`}
-      isSelected={field.value}
-      onChange={field.onChange}
-      data-testid={name}
-      isDisabled={registerOptions?.disabled}
-      excludeFromTabOrder
-    >
-      {({ isSelected }) => (
-        <>
-          <span
-            className={`${styles.checkboxContainer} ${topAlign ? styles.topAlign : ""}`}
-          >
-            <span
-              className={styles.checkbox}
-              tabIndex={registerOptions?.disabled ? undefined : 0}
-              ref={ref}
-            >
-              {isSelected && (
-                <MaterialIcon icon="check" color="Icon/Inverted" />
-              )}
-            </span>
-            {children}
-          </span>
-          {fieldState.error && !hideError ? (
-            <Caption className={styles.error} fontOnly>
-              <MaterialIcon icon="info" color="Icon/Interactive/Accent" />
-              {getErrorMessage(intl, fieldState.error.message)}
-            </Caption>
-          ) : null}
-        </>
-      )}
-    </AriaCheckbox>
-  )
-})
-
-export default Checkbox