scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Anton Gunnarsson
2025-07-03 08:37:01 +00:00
parent 0ffb40e94b
commit e5f8394f50
18 changed files with 50 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx
View File

@@ -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"

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

@@ -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"

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

@@ -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"

15
apps/scandic-web/components/Forms/Signup/index.tsx
View File

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

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

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

9
apps/scandic-web/types/components/checkbox/index.ts
View File

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

0
apps/scandic-web/components/TempDesignSystem/Form/Checkbox/checkbox.module.css → packages/design-system/lib/components/Form/Checkbox/checkbox.module.css
View File

40
apps/scandic-web/components/TempDesignSystem/Form/Checkbox/index.tsx → packages/design-system/lib/components/Form/Checkbox/index.tsx
View File

@@ -1,30 +1,37 @@
"use client"
'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 { forwardRef } from 'react'
import { Checkbox as AriaCheckbox } from 'react-aria-components'
import {
type RegisterOptions,
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 './checkbox.module.css'
import { MaterialIcon } from '../../Icons/MaterialIcon'
import Caption from '../../Caption'
import { getErrorMessage } from "./errors"
import styles from "./checkbox.module.css"
import type { CheckboxProps } from "@/types/components/checkbox"
interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
name: string
registerOptions?: RegisterOptions
hideError?: boolean
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}
</>

1
packages/design-system/package.json
View File

@@ -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",