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" size="small"
theme="base" theme="base"
> >
<Caption color="white" type="bold"> <Caption color="white" type="bold" asChild>
{intl.formatMessage({ id: "Select dates" })} <span>{intl.formatMessage({ id: "Select dates" })}</span>
</Caption> </Caption>
</Button> </Button>
</footer> </footer>

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

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

4
components/DatePicker/index.tsx
View File

@@ -89,8 +89,10 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
return ( return (
<div className={styles.container} data-isopen={isOpen} ref={ref}> <div className={styles.container} data-isopen={isOpen} ref={ref}>
<button className={styles.btn} onClick={handleOnClick} type="button"> <button className={styles.btn} onClick={handleOnClick} type="button">
<Body className={styles.body}> <Body className={styles.body} asChild>
<span>
{selectedFromDate} - {selectedToDate} {selectedFromDate} - {selectedToDate}
</span>
</Body> </Body>
</button> </button>
<input {...register("date.fromDate")} type="hidden" /> <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" type="button"
> >
<DeleteIcon color="burgundy" height={20} width={20} /> <DeleteIcon color="burgundy" height={20} width={20} />
<Caption color="burgundy" type="bold"> <Caption color="burgundy" type="bold" asChild>
{intl.formatMessage({ id: "Clear searches" })} <span>{intl.formatMessage({ id: "Clear searches" })}</span>
</Caption> </Caption>
</button> </button>
) )

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

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

4
components/GuestsRoomsPicker/index.tsx
View File

@@ -53,7 +53,8 @@ export default function GuestsRoomsPickerForm() {
return ( return (
<div className={styles.container} data-isopen={isOpen} ref={ref}> <div className={styles.container} data-isopen={isOpen} ref={ref}>
<button className={styles.btn} onClick={handleOnClick} type="button"> <button className={styles.btn} onClick={handleOnClick} type="button">
<Body className={styles.body}> <Body className={styles.body} asChild>
<span>
{intl.formatMessage( {intl.formatMessage(
{ id: "booking.rooms" }, { id: "booking.rooms" },
{ totalRooms: rooms.length } { totalRooms: rooms.length }
@@ -70,6 +71,7 @@ export default function GuestsRoomsPickerForm() {
{ totalChildren: childCount } { totalChildren: childCount }
) )
: null} : null}
</span>
</Body> </Body>
</button> </button>
<div aria-modal className={styles.hideWrapper} role="dialog"> <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)} onClick={() => toggleDropdown(DropdownTypeEnum.HamburgerMenu)}
> >
<span className={styles.bar}></span> <span className={styles.bar} />
</button> </button>
<Modal className={styles.modal} isOpen={isHamburgerMenuOpen}> <Modal className={styles.modal} isOpen={isHamburgerMenuOpen}>
<Dialog <Dialog

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

@@ -47,8 +47,10 @@ export default function MyPagesMenu({
onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMenu)} onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMenu)}
> >
<Avatar initials={getInitials(user.firstName, user.lastName)} /> <Avatar initials={getInitials(user.firstName, user.lastName)} />
<Subtitle type="two"> <Subtitle type="two" asChild>
<span>
{intl.formatMessage({ id: "Hi" })} {user.firstName}! {intl.formatMessage({ id: "Hi" })} {user.firstName}!
</span>
</Subtitle> </Subtitle>
<ChevronDownIcon <ChevronDownIcon
className={`${styles.chevron} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`} 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)} onClick={() => toggleMegaMenu(false)}
> >
<ChevronLeftIcon color="red" /> <ChevronLeftIcon color="red" />
<Subtitle type="one" color="burgundy"> <Subtitle type="one" color="burgundy" asChild>
{title} <span>{title}</span>
</Subtitle> </Subtitle>
</button> </button>
</div> </div>

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

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

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

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

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

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