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/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/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
-}

packages/design-system/lib/components/Form/Checkbox/index.tsx

@@ -1,30 +1,37 @@
-"use client"
+'use client'
 
-import { forwardRef } from "react"
+import { forwardRef } from 'react'
-import { Checkbox as AriaCheckbox } from "react-aria-components"
+import { Checkbox as AriaCheckbox } from 'react-aria-components'
-import { useController, useFormContext } from "react-hook-form"
+import {
-import { useIntl } from "react-intl"
+  type RegisterOptions,
+  useController,
+  useFormContext,
+} from 'react-hook-form'
 
-import Caption from "@scandic-hotels/design-system/Caption"
+import styles from './checkbox.module.css'
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { MaterialIcon } from '../../Icons/MaterialIcon'
+import Caption from '../../Caption'
 
-import { getErrorMessage } from "./errors"
+interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
-
+  name: string
-import styles from "./checkbox.module.css"
+  registerOptions?: RegisterOptions
-
+  hideError?: boolean
-import type { CheckboxProps } from "@/types/components/checkbox"
+  topAlign?: boolean
+  errorCodeMessages?: Record<string, string>
+}
 
 const Checkbox = forwardRef<
   HTMLInputElement,
   React.PropsWithChildren<CheckboxProps>
 >(function Checkbox(
   {
-    className = "",
+    className = '',
     name,
     children,
     registerOptions,
     hideError,
     topAlign = false,
+    errorCodeMessages,
   },
   ref
 ) {
@@ -34,7 +41,6 @@ const Checkbox = forwardRef<
     name,
     rules: registerOptions,
   })
-  const intl = useIntl()
 
   return (
     <AriaCheckbox
@@ -48,7 +54,7 @@ const Checkbox = forwardRef<
       {({ isSelected }) => (
         <>
           <span
-            className={`${styles.checkboxContainer} ${topAlign ? styles.topAlign : ""}`}
+            className={`${styles.checkboxContainer} ${topAlign ? styles.topAlign : ''}`}
           >
             <span
               className={styles.checkbox}
@@ -64,7 +70,9 @@ const Checkbox = forwardRef<
           {fieldState.error && !hideError ? (
             <Caption className={styles.error} fontOnly>
               <MaterialIcon icon="info" color="Icon/Interactive/Accent" />
-              {getErrorMessage(intl, fieldState.error.message)}
+              {(fieldState.error.message &&
+                errorCodeMessages?.[fieldState.error.message]) ||
+                fieldState.error.message}
             </Caption>
           ) : null}
         </>

packages/design-system/package.json

@@ -13,6 +13,7 @@
     "./Chips": "./dist/components/Chips/index.js",
     "./Divider": "./dist/components/Divider/index.js",
     "./Footnote": "./dist/components/Footnote/index.js",
+    "./Form/Checkbox": "./dist/components/Form/Checkbox/index.js",
     "./Input": "./dist/components/Input/index.js",
     "./Label": "./dist/components/Label/index.js",
     "./Select": "./dist/components/Select/index.js",