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/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx

@@ -6,6 +6,7 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { profileEdit } from "@scandic-hotels/common/constants/routes/myPages"
+import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -13,7 +14,6 @@ import { sasPartnershipTermsAndConditions } from "@/constants/webHrefs"
 
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
-import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Link from "@/components/TempDesignSystem/Link"
 
 import styles from "./link-sas.module.css"

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

@@ -6,13 +6,13 @@ import { useMediaQuery } from "usehooks-ts"
 
 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 { Typography } from "@scandic-hotels/design-system/Typography"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
 
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
-import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import { getErrorMessage } from "@/components/TempDesignSystem/Form/Input/errors"
 import Switch from "@/components/TempDesignSystem/Form/Switch"

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

@@ -6,13 +6,13 @@ import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
 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 { Typography } from "@scandic-hotels/design-system/Typography"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
 
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
-import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import { getErrorMessage } from "@/components/TempDesignSystem/Form/Input/errors"
 
 import { RemoveExtraRooms } from "../BookingCode"

apps/scandic-web/components/Forms/Signup/index.tsx

@@ -7,9 +7,11 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { Button } from "@scandic-hotels/design-system/Button"
+import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 import {
+  signupErrors,
   type SignUpSchema,
   signUpSchema,
 } from "@scandic-hotels/trpc/routers/user/schemas"
@@ -20,7 +22,6 @@ import {
   privacyPolicy,
 } from "@/constants/webHrefs"
 
-import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import DateSelect from "@/components/TempDesignSystem/Form/Date"
 import Input from "@/components/TempDesignSystem/Form/Input"
@@ -217,7 +218,17 @@ export default function SignupForm({ title }: SignUpFormProps) {
                 </h3>
               </Typography>
             </header>
-            <Checkbox name="termsAccepted" registerOptions={{ required: true }}>
+            <Checkbox
+              name="termsAccepted"
+              registerOptions={{
+                required: true,
+              }}
+              errorCodeMessages={{
+                [signupErrors.TERMS_REQUIRED]: intl.formatMessage({
+                  defaultMessage: "You must accept the terms and conditions",
+                }),
+              }}
+            >
               {intl.formatMessage({
                 defaultMessage: "I accept",
               })}

apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/Guarantee/index.tsx

@@ -11,12 +11,12 @@ import { useIntl } from "react-intl"
 
 import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
 import { Button } from "@scandic-hotels/design-system/Button"
+import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import MySavedCards from "@/components/HotelReservation/MySavedCards"
 import PaymentOption from "@/components/HotelReservation/PaymentOption"
-import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import useSetOverflowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA"
 
 import PaymentOptionsGroup from "../../Payment/PaymentOptionsGroup"

apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/index.tsx

@@ -2,10 +2,9 @@
 import { useIntl } from "react-intl"
 
 import { Divider } from "@scandic-hotels/design-system/Divider"
+import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
-
 import TermsAndConditions from "../Payment/TermsAndConditions"
 import Guarantee from "./Guarantee"
 

apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx

@@ -4,11 +4,11 @@ import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import Footnote from "@scandic-hotels/design-system/Footnote"
+import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { membershipTermsAndConditions } from "@/constants/webHrefs"
 
-import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Link from "@/components/TempDesignSystem/Link"
 import { useRoomContext } from "@/contexts/Details/Room"
 import useLang from "@/hooks/useLang"

apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx

@@ -3,13 +3,13 @@ import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import Footnote from "@scandic-hotels/design-system/Footnote"
+import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { membershipTermsAndConditions } from "@/constants/webHrefs"
 
 import LoginButton from "@/components/LoginButton"
 import Button from "@/components/TempDesignSystem/Button"
-import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Link from "@/components/TempDesignSystem/Link"
 import { useRoomContext } from "@/contexts/Details/Room"
 import useLang from "@/hooks/useLang"

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx

@@ -12,6 +12,7 @@ import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMetho
 import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
 import Body from "@scandic-hotels/design-system/Body"
 import { Button } from "@scandic-hotels/design-system/Button"
+import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 import { bedTypeMap } from "@scandic-hotels/trpc/constants/bedTypeMap"
@@ -25,7 +26,6 @@ import { env } from "@/env/client"
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import PaymentOption from "@/components/HotelReservation/PaymentOption"
-import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import { useAvailablePaymentOptions } from "@/hooks/booking/useAvailablePaymentOptions"
 import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus"
 import useLang from "@/hooks/useLang"

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/TermsAndConditions/index.tsx

@@ -1,11 +1,11 @@
 import { useIntl } from "react-intl"
 
 import Caption from "@scandic-hotels/design-system/Caption"
+import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { bookingTermsAndConditions, privacyPolicy } from "@/constants/webHrefs"
 
-import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx

@@ -3,6 +3,7 @@ import { useIntl } from "react-intl"
 
 import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
 import { dt } from "@scandic-hotels/common/dt"
+import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alertType"
@@ -14,7 +15,6 @@ import PaymentOptionsGroup from "@/components/HotelReservation/EnterDetails/Paym
 import MySavedCards from "@/components/HotelReservation/MySavedCards"
 import PaymentOption from "@/components/HotelReservation/PaymentOption"
 import Alert from "@/components/TempDesignSystem/Alert"
-import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/CancelStay/Steps/Confirmation/Multiroom/index.tsx

@@ -1,12 +1,11 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useMyStayStore } from "@/stores/my-stay"
 
-import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
-
 import styles from "./multiroom.module.css"
 
 import type { Room } from "@/types/stores/my-stay"

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx

@@ -5,6 +5,7 @@ import { useIntl } from "react-intl"
 
 import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
 import { Divider } from "@scandic-hotels/design-system/Divider"
+import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { guaranteeCallback } from "@/constants/routes/hotelReservation"
@@ -17,7 +18,6 @@ import PaymentOptionsGroup from "@/components/HotelReservation/EnterDetails/Paym
 import MySavedCards from "@/components/HotelReservation/MySavedCards"
 import PaymentOption from "@/components/HotelReservation/PaymentOption"
 import LoadingSpinner from "@/components/LoadingSpinner"
-import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Link from "@/components/TempDesignSystem/Link"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import { useGuaranteeBooking } from "@/hooks/booking/useGuaranteeBooking"

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

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

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