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

fix: only phrasing content is allowed inside label element

Browse Source
This commit is contained in:
Christian Andolf
2024-10-29 13:35:13 +01:00
parent cfc400a619
commit a37cd3ff44
4 changed files with 35 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/Forms/BookingWidget/FormContent/Search/index.tsx
View File

@@ -128,10 +128,12 @@ export default function Search({ locations }: SearchProps) {
}) => ( }) => (
<div className={styles.container}> <div className={styles.container}>
<label {...getLabelProps({ htmlFor: name })} className={styles.label}> <label {...getLabelProps({ htmlFor: name })} className={styles.label}>
<Caption color={isOpen ? "uiTextActive" : "red"}> <Caption color={isOpen ? "uiTextActive" : "red"} asChild>
{state.searchData?.type === "hotels" <span>
? state.searchData?.relationships?.city?.name {state.searchData?.type === "hotels"
: intl.formatMessage({ id: "Where to" })} ? state.searchData?.relationships?.city?.name
: intl.formatMessage({ id: "Where to" })}
</span>
</Caption> </Caption>
</label> </label>
<div {...getRootProps({}, { suppressRefError: true })}> <div {...getRootProps({}, { suppressRefError: true })}>

37
components/Forms/BookingWidget/FormContent/Voucher/index.tsx
View File

@@ -34,8 +34,8 @@ export default function Voucher() {
> >
<div className={styles.vouchers}> <div className={styles.vouchers}>
<label> <label>
<Caption color="disabled" type="bold"> <Caption color="disabled" type="bold" asChild>
{vouchers} <span>{vouchers}</span>
</Caption> </Caption>
{/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */} {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
</label> </label>
@@ -49,21 +49,30 @@ export default function Voucher() {
arrow="left" arrow="left"
> >
<div className={styles.options}> <div className={styles.options}>
<label className={`${styles.option} ${styles.checkboxVoucher}`}> <div className={`${styles.option} ${styles.checkboxVoucher}`}>
<Checkbox name="useVouchers" registerOptions={{ disabled: true }} /> <Checkbox name="useVouchers" registerOptions={{ disabled: true }}>
<Caption color="disabled">{useVouchers}</Caption> <Caption color="disabled" asChild>
<span>{useVouchers}</span>
</Caption>
</Checkbox>
{/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */} {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
</label> </div>
<label className={styles.option}> <div className={styles.option}>
<Checkbox name="useBonus" registerOptions={{ disabled: true }} /> <Checkbox name="useBonus" registerOptions={{ disabled: true }}>
<Caption color="disabled">{bonus}</Caption> <Caption color="disabled" asChild>
<span>{bonus}</span>
</Caption>
</Checkbox>
{/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */} {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
</label> </div>
<label className={styles.option}> <div className={styles.option}>
<Checkbox name="useReward" registerOptions={{ disabled: true }} /> <Checkbox name="useReward" registerOptions={{ disabled: true }}>
<Caption color="disabled">{reward}</Caption> <Caption color="disabled" asChild>
<span>{reward}</span>
</Caption>
</Checkbox>
{/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */} {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
</label> </div>
</div> </div>
</Tooltip> </Tooltip>
</div> </div>

4
components/Forms/BookingWidget/FormContent/index.tsx
View File

@@ -50,8 +50,8 @@ export default function FormContent({
</div> </div>
<div className={styles.rooms}> <div className={styles.rooms}>
<label> <label>
<Caption color="red" type="bold"> <Caption color="red" type="bold" asChild>
{rooms} <span>{rooms}</span>
</Caption> </Caption>
</label> </label>
<GuestsRoomsProvider selectedGuests={selectedGuests}> <GuestsRoomsProvider selectedGuests={selectedGuests}>

8
components/TempDesignSystem/Form/Checkbox/index.tsx
View File

@@ -33,12 +33,12 @@ export default function Checkbox({
> >
{({ isSelected }) => ( {({ isSelected }) => (
<> <>
<div className={styles.checkboxContainer}> <span className={styles.checkboxContainer}>
<div className={styles.checkbox}> <span className={styles.checkbox}>
{isSelected && <CheckIcon color="white" />} {isSelected && <CheckIcon color="white" />}
</div> </span>
{children} {children}
</div> </span>
{fieldState.error ? ( {fieldState.error ? (
<Caption className={styles.error} fontOnly> <Caption className={styles.error} fontOnly>
<InfoCircleIcon color="red" /> <InfoCircleIcon color="red" />