Merged in feat/rename-card-to-choicecard (pull request #650)

feat: rename form/card to form/choicecard

Approved-by: Arvid Norlin

components/HotelReservation/EnterDetails/BedType/index.tsx

@@ -5,7 +5,7 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { KingBedIcon } from "@/components/Icons"
-import RadioCard from "@/components/TempDesignSystem/Form/Card/Radio"
+import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
 
 import { bedTypeSchema } from "./schema"
 
@@ -24,9 +24,7 @@ export default function BedType() {
     reValidateMode: "onChange",
   })
 
-  // @ts-expect-error - Types mismatch docs as this is
-  // a pattern that is allowed https://formatjs.io/docs/react-intl/api#usage
-  const text = intl.formatMessage(
+  const text = intl.formatMessage<React.ReactNode>(
     { id: "<b>Included</b> (based on availability)" },
     { b: (str) => <b>{str}</b> }
   )

components/HotelReservation/EnterDetails/Breakfast/index.tsx

@@ -5,7 +5,7 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { BreakfastIcon, NoBreakfastIcon } from "@/components/Icons"
-import RadioCard from "@/components/TempDesignSystem/Form/Card/Radio"
+import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
 
 import { breakfastSchema } from "./schema"
 
@@ -31,9 +31,7 @@ export default function Breakfast() {
           Icon={BreakfastIcon}
           id={breakfastEnum.BREAKFAST}
           name="breakfast"
-          // @ts-expect-error - Types mismatch docs as this is
-          // a pattern that is allowed https://formatjs.io/docs/react-intl/api#usage
-          subtitle={intl.formatMessage(
+          subtitle={intl.formatMessage<React.ReactNode>(
             { id: "<b>{amount} {currency}</b>/night per adult" },
             {
               amount: "150",

components/HotelReservation/EnterDetails/Details/index.tsx

@@ -4,7 +4,7 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import Button from "@/components/TempDesignSystem/Button"
-import CheckboxCard from "@/components/TempDesignSystem/Form/Card/Checkbox"
+import CheckboxCard from "@/components/TempDesignSystem/Form/ChoiceCard/Checkbox"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
@@ -88,8 +88,9 @@ export default function Details({ user }: DetailsProps) {
         <footer className={styles.footer}>
           {user ? null : (
             <CheckboxCard
+              highlightSubtitle
               list={list}
-              saving
+              name="join"
               subtitle={intl.formatMessage(
                 {
                   id: "{difference}{amount} {currency}",

components/TempDesignSystem/Form/ChoiceCard/Checkbox.tsx

@@ -1,6 +1,6 @@
-import Card from "."
+import Card from "./_Card"
 
-import type { CheckboxProps } from "./card"
+import type { CheckboxProps } from "./_Card/card"
 
 export default function CheckboxCard(props: CheckboxProps) {
   return <Card {...props} type="checkbox" />

components/TempDesignSystem/Form/ChoiceCard/Radio.tsx

@@ -1,6 +1,6 @@
-import Card from "."
+import Card from "./_Card"
 
-import type { RadioProps } from "./card"
+import type { RadioProps } from "./_Card/card"
 
 export default function RadioCard(props: RadioProps) {
   return <Card {...props} type="radio" />

components/TempDesignSystem/Form/ChoiceCard/_Card/card.ts

@@ -1,14 +1,15 @@
 import type { IconProps } from "@/types/components/icon"
 
-interface BaseCardProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+interface BaseCardProps
+  extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "title"> {
   Icon?: (props: IconProps) => JSX.Element
   declined?: boolean
+  highlightSubtitle?: boolean
   iconHeight?: number
   iconWidth?: number
-  name?: string
-  saving?: boolean
-  subtitle?: string
-  title: string
+  name: string
+  subtitle?: React.ReactNode
+  title: React.ReactNode
   type: "checkbox" | "radio"
   value?: string
 }
@@ -22,7 +23,7 @@ interface ListCardProps extends BaseCardProps {
 
 interface TextCardProps extends BaseCardProps {
   list?: never
-  text: string
+  text: React.ReactNode
 }
 
 export type CardProps = ListCardProps | TextCardProps

components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx

@@ -13,10 +13,10 @@ export default function Card({
   iconHeight = 32,
   iconWidth = 32,
   declined = false,
+  highlightSubtitle = false,
   id,
   list,
-  name = "join",
-  saving = false,
+  name,
   subtitle,
   text,
   title,
@@ -31,7 +31,7 @@ export default function Card({
       {subtitle ? (
         <Caption
           className={styles.subtitle}
-          color={saving ? "baseTextAccent" : "uiTextHighContrast"}
+          color={highlightSubtitle ? "baseTextAccent" : "uiTextHighContrast"}
           textTransform="bold"
         >
           {subtitle}