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

fix: only phrasing content is allowed inside buttons meaning no div or p elements, these are now replaced by span

Browse Source
This commit is contained in:
Christian Andolf
2024-10-25 15:44:30 +02:00
parent 0036fa1a68
commit 69ed852fc4
12 changed files with 56 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/DatePicker/Screen/Desktop.tsx
View File

@@ -82,8 +82,8 @@ export default function DatePickerDesktop({
size="small"
theme="base"
>
<Caption color="white" type="bold">
{intl.formatMessage({ id: "Select dates" })}
<Caption color="white" type="bold" asChild>
<span>{intl.formatMessage({ id: "Select dates" })}</span>
</Caption>
</Button>
</footer>

4
components/DatePicker/Screen/Mobile.tsx
View File

@@ -94,8 +94,8 @@ export default function DatePickerMobile({
size="large"
theme="base"
>
<Body color="white" textTransform="bold">
{intl.formatMessage({ id: "Select dates" })}
<Body color="white" textTransform="bold" asChild>
<span>{intl.formatMessage({ id: "Select dates" })}</span>
</Body>
</Button>
<div className={styles.backdrop} />

6
components/DatePicker/index.tsx
View File

@@ -89,8 +89,10 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
return (
<div className={styles.container} data-isopen={isOpen} ref={ref}>
<button className={styles.btn} onClick={handleOnClick} type="button">
<Body className={styles.body}>
{selectedFromDate} - {selectedToDate}
<Body className={styles.body} asChild>
<span>
{selectedFromDate} - {selectedToDate}
</span>
</Body>
</button>
<input {...register("date.fromDate")} type="hidden" />

4
components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/index.tsx
View File

@@ -33,8 +33,8 @@ export default function ClearSearchButton({
type="button"
>
<DeleteIcon color="burgundy" height={20} width={20} />
<Caption color="burgundy" type="bold">
{intl.formatMessage({ id: "Clear searches" })}
<Caption color="burgundy" type="bold" asChild>
<span>{intl.formatMessage({ id: "Clear searches" })}</span>
</Caption>
</button>
)

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

@@ -65,12 +65,17 @@ export default function FormContent({
theme="base"
type="submit"
>
<Caption color="white" type="bold" className={styles.buttonText}>
{intl.formatMessage({ id: "Search" })}
<Caption
color="white"
type="bold"
className={styles.buttonText}
asChild
>
<span>{intl.formatMessage({ id: "Search" })}</span>
</Caption>
<div className={styles.icon}>
<span className={styles.icon}>
<SearchIcon color="white" width={28} height={28} />
</div>
</span>
</Button>
</div>
</div>

36
components/GuestsRoomsPicker/index.tsx
View File

@@ -53,23 +53,25 @@ export default function GuestsRoomsPickerForm() {
return (
<div className={styles.container} data-isopen={isOpen} ref={ref}>
<button className={styles.btn} onClick={handleOnClick} type="button">
<Body className={styles.body}>
{intl.formatMessage(
{ id: "booking.rooms" },
{ totalRooms: rooms.length }
)}
{", "}
{intl.formatMessage(
{ id: "booking.adults" },
{ totalAdults: adultCount }
)}
{childCount > 0
? ", " +
intl.formatMessage(
{ id: "booking.children" },
{ totalChildren: childCount }
)
: null}
<Body className={styles.body} asChild>
<span>
{intl.formatMessage(
{ id: "booking.rooms" },
{ totalRooms: rooms.length }
)}
{", "}
{intl.formatMessage(
{ id: "booking.adults" },
{ totalAdults: adultCount }
)}
{childCount > 0
? ", " +
intl.formatMessage(
{ id: "booking.children" },
{ totalChildren: childCount }
)
: null}
</span>
</Body>
</button>
<div aria-modal className={styles.hideWrapper} role="dialog">

2
components/Header/MainMenu/MobileMenu/index.tsx
View File

@@ -68,7 +68,7 @@ export default function MobileMenu({
})}
onClick={() => toggleDropdown(DropdownTypeEnum.HamburgerMenu)}
>
<span className={styles.bar}></span>
<span className={styles.bar} />
</button>
<Modal className={styles.modal} isOpen={isHamburgerMenuOpen}>
<Dialog

6
components/Header/MainMenu/MyPagesMenu/index.tsx
View File

@@ -47,8 +47,10 @@ export default function MyPagesMenu({
onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMenu)}
>
<Avatar initials={getInitials(user.firstName, user.lastName)} />
<Subtitle type="two">
{intl.formatMessage({ id: "Hi" })} {user.firstName}!
<Subtitle type="two" asChild>
<span>
{intl.formatMessage({ id: "Hi" })} {user.firstName}!
</span>
</Subtitle>
<ChevronDownIcon
className={`${styles.chevron} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}

4
components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
View File

@@ -42,8 +42,8 @@ export default function MegaMenu({
onClick={() => toggleMegaMenu(false)}
>
<ChevronLeftIcon color="red" />
<Subtitle type="one" color="burgundy">
{title}
<Subtitle type="one" color="burgundy" asChild>
<span>{title}</span>
</Subtitle>
</button>
</div>

12
components/LanguageSwitcher/LanguageSwitcherContainer/index.tsx
View File

@@ -35,10 +35,12 @@ export default function LanguageSwitcherContainer({
onClick={() => toggleDropdown(position)}
>
<ChevronLeftIcon color="red" />
<Subtitle type="one">
{intl.formatMessage({
id: "Main menu",
})}
<Subtitle type="one" asChild>
<span>
{intl.formatMessage({
id: "Main menu",
})}
</span>
</Subtitle>
</button>
</div>
@@ -53,7 +55,7 @@ export default function LanguageSwitcherContainer({
})}
onClick={() => toggleDropdown(position)}
>
<span className={styles.bar}></span>
<span className={styles.bar} />
</button>
</div>
) : null}

4
components/TempDesignSystem/Form/Phone/index.tsx
View File

@@ -91,7 +91,7 @@ export default function Phone({
<Label required={!!registerOptions.required} size="small">
{formatMessage({ id: "Country code" })}
</Label>
<div className={styles.selectContainer}>
<span className={styles.selectContainer}>
{props.children}
<Body asChild fontOnly>
<DialCodePreview
@@ -106,7 +106,7 @@ export default function Phone({
height={18}
width={18}
/>
</div>
</span>
</button>
)}
/>

4
components/TempDesignSystem/Select/index.tsx
View File

@@ -60,12 +60,12 @@ export default function Select({
>
<Body asChild fontOnly>
<Button className={styles.input} data-testid={name}>
<div className={styles.inputContentWrapper} tabIndex={tabIndex}>
<span className={styles.inputContentWrapper} tabIndex={tabIndex}>
<Label required={required} size="small">
{label}
</Label>
<SelectValue />
</div>
</span>
<SelectChevron />
</Button>
</Body>