Merged in feat/BOOK-119-accessibility-replace-radiogroup (pull request #3081)
feat(BOOK-119): replace radio group on select rate with buttons and make them accessible * feat(BOOK-119): replace radio group on select rate with buttons and make them accessible * feat(BOOK-119): update roomNR * feat(BOOK-119): update onpress and buttonOverlay name change Approved-by: Erik Tiekstra
This commit is contained in:
Bianca Widstam
@@ -28,8 +28,6 @@ type Story = StoryObj<typeof RegularRateCard>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
name: 'regular',
|
||||
value: 'regular',
|
||||
rateTitle: 'FREE CANCELLATION',
|
||||
paymentTerm: 'PAY NOW',
|
||||
rate: {
|
||||
@@ -63,8 +61,6 @@ export const Default: Story = {
|
||||
|
||||
export const Selected: Story = {
|
||||
args: {
|
||||
name: 'regular',
|
||||
value: 'regular',
|
||||
isSelected: true,
|
||||
rateTitle: 'FREE CANCELLATION',
|
||||
paymentTerm: 'PAY NOW',
|
||||
@@ -94,8 +90,6 @@ export const Selected: Story = {
|
||||
|
||||
export const MemberRateActive: Story = {
|
||||
args: {
|
||||
name: 'regular',
|
||||
value: 'regular',
|
||||
rateTitle: 'FREE CANCELLATION',
|
||||
paymentTerm: 'PAY NOW',
|
||||
rate: {
|
||||
|
||||
@@ -6,10 +6,12 @@ import { Typography } from '../../Typography'
|
||||
import Modal from '../Modal'
|
||||
import styles from '../rate-card.module.css'
|
||||
import { variants } from '../variants'
|
||||
import { Button as ButtonRAC } from 'react-aria-components'
|
||||
import { cx } from 'class-variance-authority'
|
||||
import { useIntl } from 'react-intl'
|
||||
|
||||
interface RegularRateCardProps {
|
||||
name: string
|
||||
value: string
|
||||
id: string
|
||||
isSelected: boolean
|
||||
rateTitle: string
|
||||
paymentTerm: string
|
||||
@@ -23,8 +25,7 @@ interface RegularRateCardProps {
|
||||
}
|
||||
|
||||
export default function RegularRateCard({
|
||||
name,
|
||||
value,
|
||||
id,
|
||||
isSelected,
|
||||
rateTitle,
|
||||
paymentTerm,
|
||||
@@ -37,141 +38,153 @@ export default function RegularRateCard({
|
||||
rateTermDetails,
|
||||
}: RegularRateCardProps) {
|
||||
const classNames = variants({ variant: 'Regular' })
|
||||
|
||||
const intl = useIntl()
|
||||
|
||||
return (
|
||||
<label>
|
||||
<input
|
||||
className={styles.radio}
|
||||
type="radio"
|
||||
name={name}
|
||||
value={value}
|
||||
checked={isSelected}
|
||||
onChange={handleChange}
|
||||
<div
|
||||
className={cx(classNames, {
|
||||
[styles.selected]: isSelected,
|
||||
})}
|
||||
>
|
||||
<ButtonRAC
|
||||
onPress={handleChange}
|
||||
className={styles.buttonOverlay}
|
||||
aria-pressed={isSelected}
|
||||
aria-labelledby={`${id}-title`}
|
||||
aria-describedby={`${id}-details`}
|
||||
/>
|
||||
<div className={classNames}>
|
||||
<div className={styles.container}>
|
||||
<header>
|
||||
<Typography variant="Tag/sm">
|
||||
<h3 className={styles.title}>
|
||||
<Modal
|
||||
title={rateTitle}
|
||||
subtitle={paymentTerm}
|
||||
trigger={
|
||||
<IconButton theme="Black" style="Muted" wrapping>
|
||||
<MaterialIcon
|
||||
icon="info"
|
||||
size={20}
|
||||
color="Icon/Default"
|
||||
/>
|
||||
</IconButton>
|
||||
}
|
||||
<div className={styles.container}>
|
||||
<Typography variant="Tag/sm">
|
||||
<h3 className={styles.title}>
|
||||
<Modal
|
||||
title={rateTitle}
|
||||
subtitle={paymentTerm}
|
||||
trigger={
|
||||
<IconButton
|
||||
theme="Black"
|
||||
style="Muted"
|
||||
wrapping
|
||||
className={styles.triggerButton}
|
||||
aria-label={intl.formatMessage({
|
||||
id: 'selectRate.rateCard.openReservationPolicy',
|
||||
defaultMessage: 'Open reservation policy',
|
||||
})}
|
||||
>
|
||||
{rateTermDetails.map((termGroup) => (
|
||||
<div key={termGroup.title} className={styles.terms}>
|
||||
<Typography variant={'Body/Paragraph/mdBold'}>
|
||||
<p>{termGroup.title}</p>
|
||||
</Typography>
|
||||
{termGroup.terms.map((term) => (
|
||||
<Typography key={term}>
|
||||
<p className={styles.term}>
|
||||
<MaterialIcon
|
||||
icon="check"
|
||||
color="Icon/Feedback/Success"
|
||||
size={20}
|
||||
className={styles.termsIcon}
|
||||
/>
|
||||
{term}
|
||||
</p>
|
||||
</Typography>
|
||||
))}
|
||||
</div>
|
||||
<MaterialIcon icon="info" size={20} color="Icon/Default" />
|
||||
</IconButton>
|
||||
}
|
||||
>
|
||||
{rateTermDetails.map((termGroup) => (
|
||||
<div key={termGroup.title} className={styles.terms}>
|
||||
<Typography variant={'Body/Paragraph/mdBold'}>
|
||||
<p>{termGroup.title}</p>
|
||||
</Typography>
|
||||
{termGroup.terms.map((term) => (
|
||||
<Typography key={term}>
|
||||
<p className={styles.term}>
|
||||
<MaterialIcon
|
||||
icon="check"
|
||||
color="Icon/Feedback/Success"
|
||||
size={20}
|
||||
className={styles.termsIcon}
|
||||
/>
|
||||
{term}
|
||||
</p>
|
||||
</Typography>
|
||||
))}
|
||||
</Modal>
|
||||
{rateTitle}
|
||||
<span className={styles.textSecondary}>
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
{` / ${paymentTerm}`}
|
||||
</span>
|
||||
</h3>
|
||||
</Typography>
|
||||
<div className={styles.checkIcon}>
|
||||
<MaterialIcon icon="check" size={22} color="Icon/Inverted" />
|
||||
</div>
|
||||
</header>
|
||||
<div>
|
||||
{!isMemberRateActive && rate ? (
|
||||
<div className={styles.rateRow}>
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<p>{rate.label}</p>
|
||||
</Typography>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<p>
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
{`${rate.price} `}
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span>{rate.unit}</span>
|
||||
</Typography>
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
) : null}
|
||||
{memberRate ? (
|
||||
<div className={`${styles.rateRow} ${styles.highlightedRate}`}>
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<p>{memberRate.label}</p>
|
||||
</Typography>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<span>
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
{`${memberRate.price} `}
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span>{memberRate.unit}</span>
|
||||
</Typography>
|
||||
</span>
|
||||
</Typography>
|
||||
</div>
|
||||
) : null}
|
||||
{isMemberRateActive && rate ? (
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<div
|
||||
className={`${styles.rateRow} ${styles.strikeThroughRate}`}
|
||||
>
|
||||
<s>
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
{`${rate.price} `}
|
||||
<Typography variant="Tag/sm">
|
||||
<span>{rate.unit}</span>
|
||||
</Typography>
|
||||
</s>
|
||||
</div>
|
||||
))}
|
||||
</Modal>
|
||||
<span id={`${id}-title`}>
|
||||
{rateTitle}
|
||||
<span className={styles.textSecondary}>
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
{` / ${paymentTerm}`}
|
||||
</span>
|
||||
</span>
|
||||
</h3>
|
||||
</Typography>
|
||||
<div id={`${id}-details`}>
|
||||
{!isMemberRateActive && rate ? (
|
||||
<div className={styles.rateRow}>
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<p>{rate.label}</p>
|
||||
</Typography>
|
||||
) : null}
|
||||
{approximateRate ? (
|
||||
<div className={`${styles.rateRow} ${styles.approximateRate}`}>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<p>{approximateRate.label}</p>
|
||||
</Typography>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<p>
|
||||
{approximateRate.price} {approximateRate.unit}
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{omnibusRate ? (
|
||||
<footer className={styles.footer}>
|
||||
<Typography variant="Tag/sm">
|
||||
<p>{omnibusRate.label}</p>
|
||||
</Typography>
|
||||
<Typography variant="Tag/sm">
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<p>
|
||||
{omnibusRate.price} {omnibusRate.unit}
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
{`${rate.price} `}
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span>{rate.unit}</span>
|
||||
</Typography>
|
||||
</p>
|
||||
</Typography>
|
||||
</footer>
|
||||
</div>
|
||||
) : null}
|
||||
{memberRate ? (
|
||||
<div className={`${styles.rateRow} ${styles.highlightedRate}`}>
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<p>{memberRate.label}</p>
|
||||
</Typography>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<span>
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
{`${memberRate.price} `}
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span>{memberRate.unit}</span>
|
||||
</Typography>
|
||||
</span>
|
||||
</Typography>
|
||||
</div>
|
||||
) : null}
|
||||
{isMemberRateActive && rate ? (
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<div className={`${styles.rateRow} ${styles.strikeThroughRate}`}>
|
||||
<s>
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
{`${rate.price} `}
|
||||
<Typography variant="Tag/sm">
|
||||
<span>{rate.unit}</span>
|
||||
</Typography>
|
||||
</s>
|
||||
</div>
|
||||
</Typography>
|
||||
) : null}
|
||||
{approximateRate ? (
|
||||
<div className={`${styles.rateRow} ${styles.approximateRate}`}>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<p>{approximateRate.label}</p>
|
||||
</Typography>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<p>
|
||||
{approximateRate.price} {approximateRate.unit}
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{omnibusRate ? (
|
||||
<footer className={styles.footer}>
|
||||
<Typography variant="Tag/sm">
|
||||
<p>{omnibusRate.label}</p>
|
||||
</Typography>
|
||||
<Typography variant="Tag/sm">
|
||||
<p>
|
||||
{omnibusRate.price} {omnibusRate.unit}
|
||||
</p>
|
||||
</Typography>
|
||||
</footer>
|
||||
) : null}
|
||||
</div>
|
||||
</label>
|
||||
{isSelected && (
|
||||
<MaterialIcon
|
||||
icon="check"
|
||||
size={22}
|
||||
color="Icon/Inverted"
|
||||
className={styles.checkIcon}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user