Merged in feat/new-rate-cards (pull request #1600)
feat(SW-1435): Added RateCard component to design system * feat(SW-1435): Added new component: RateCard to design system * feat: added reward night points rate card * fix: set svg icon color to "currentColor" to make them more reusable * fix: added click handler for info icon * fix: added selectedRate Approved-by: Arvid Norlin
This commit is contained in:
Tobias Johansson
@@ -0,0 +1,108 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
import { RateCard } from './RateCard'
|
||||
|
||||
const meta: Meta<typeof RateCard> = {
|
||||
title: 'Components/RateCard/Campaign',
|
||||
component: RateCard,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ maxWidth: '400px' }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
argTypes: {
|
||||
title: { control: 'text' },
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof RateCard>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
variant: 'Campaign',
|
||||
title: 'NON-REFUNDABLE / PAY NOW',
|
||||
bannerText: 'Campaign ∙ Breakfast included',
|
||||
rate: {
|
||||
label: "Valentine's Special",
|
||||
price: '198',
|
||||
unit: 'EUR/NIGHT',
|
||||
},
|
||||
approximateRate: {
|
||||
price: '198 EUR',
|
||||
label: 'Approx.',
|
||||
},
|
||||
referenceRate: {
|
||||
price: '249 EUR',
|
||||
label: 'Lowest past price (last 30 days)',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export const Package: Story = {
|
||||
args: {
|
||||
variant: 'Campaign',
|
||||
title: 'NON-REFUNDABLE / PAY NOW',
|
||||
bannerText: 'WDCPHG ∙ Breakfast included',
|
||||
rate: {
|
||||
label: 'Luxurious wine & dine in Copenhagen',
|
||||
price: '1989',
|
||||
unit: 'EUR/NIGHT',
|
||||
},
|
||||
approximateRate: {
|
||||
price: '1989 EUR',
|
||||
label: 'Approx.',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export const CampaignLoggedIn: Story = {
|
||||
args: {
|
||||
variant: 'Campaign',
|
||||
title: 'NON-REFUNDABLE / PAY NOW',
|
||||
bannerText: 'SUM2025 ∙ Breakfast included',
|
||||
rate: {
|
||||
label: 'Luxurious wine & dine in Copenhagen',
|
||||
price: '198',
|
||||
unit: 'EUR/NIGHT',
|
||||
},
|
||||
approximateRate: {
|
||||
price: '198 EUR',
|
||||
label: 'Approx.',
|
||||
},
|
||||
comparisonRate: {
|
||||
price: '249',
|
||||
unit: 'EUR/NIGHT',
|
||||
},
|
||||
isHighlightedRate: true,
|
||||
},
|
||||
}
|
||||
|
||||
export const CampaignOmnibus: Story = {
|
||||
args: {
|
||||
variant: 'Campaign',
|
||||
title: 'NON-REFUNDABLE / PAY NOW',
|
||||
bannerText: 'WDCPHG ∙ Breakfast included',
|
||||
rate: {
|
||||
label: 'Luxurious wine & dine in Copenhagen',
|
||||
price: '198',
|
||||
unit: 'EUR/NIGHT',
|
||||
},
|
||||
memberRate: {
|
||||
label: 'Member price',
|
||||
price: '150',
|
||||
unit: 'EUR/NIGHT',
|
||||
},
|
||||
approximateRate: {
|
||||
price: '198 EUR',
|
||||
label: 'Approx.',
|
||||
},
|
||||
referenceRate: {
|
||||
price: '101 EUR',
|
||||
label: 'Lowest past price (last 30 days)',
|
||||
},
|
||||
},
|
||||
}
|
||||
142
packages/design-system/lib/components/RateCard/Code.stories.tsx
Normal file
142
packages/design-system/lib/components/RateCard/Code.stories.tsx
Normal file
@@ -0,0 +1,142 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
import { RateCard } from './RateCard'
|
||||
|
||||
const meta: Meta<typeof RateCard> = {
|
||||
title: 'Components/RateCard/Code',
|
||||
component: RateCard,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ maxWidth: '400px' }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
argTypes: {
|
||||
title: { control: 'text' },
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof RateCard>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
variant: 'Code',
|
||||
title: 'FREE CANCELLATION / PAY LATER',
|
||||
bannerText: 'Campaign ∙ Breakfast excluded',
|
||||
rate: {
|
||||
label: "Valentine's Special",
|
||||
price: '1989',
|
||||
unit: 'EUR/night',
|
||||
},
|
||||
approximateRate: {
|
||||
price: '1989 EUR',
|
||||
label: 'Approx.',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export const Voucher: Story = {
|
||||
args: {
|
||||
variant: 'Code',
|
||||
title: 'FREE CANCELLATION / PAY LATER',
|
||||
bannerText: 'VOG ∙ Breakfast included',
|
||||
rate: {
|
||||
label: 'Promotional name here',
|
||||
price: '1',
|
||||
unit: 'VOUCHER',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export const CorporateCheck: Story = {
|
||||
args: {
|
||||
variant: 'Code',
|
||||
title: 'FREE CANCELLATION / PAY LATER',
|
||||
bannerText: 'VOG ∙ Breakfast included',
|
||||
rate: {
|
||||
label: 'Promotional name here',
|
||||
price: '2cc + 800',
|
||||
unit: 'SEK',
|
||||
},
|
||||
approximateRate: {
|
||||
price: '76 EUR',
|
||||
label: 'Approx.',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export const DNumberDefault: Story = {
|
||||
args: {
|
||||
variant: 'Code',
|
||||
title: 'FREE CANCELLATION / PAY LATER',
|
||||
bannerText: 'D0043148 ∙ Breakfast included',
|
||||
rate: {
|
||||
label: 'Helsinki Partners Oy',
|
||||
price: '1989',
|
||||
unit: 'EUR/NIGHT',
|
||||
},
|
||||
approximateRate: {
|
||||
price: '76 EUR',
|
||||
label: 'Approx.',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export const DNumberHighlightedRate: Story = {
|
||||
args: {
|
||||
variant: 'Code',
|
||||
title: 'FREE CANCELLATION / PAY LATER',
|
||||
bannerText: 'D0043148 ∙ Breakfast included',
|
||||
rate: {
|
||||
label: 'Helsinki Partners Oy',
|
||||
price: '198',
|
||||
unit: 'EUR/NIGHT',
|
||||
},
|
||||
approximateRate: {
|
||||
price: '76 EUR',
|
||||
label: 'Approx.',
|
||||
},
|
||||
isHighlightedRate: true,
|
||||
},
|
||||
}
|
||||
|
||||
export const LNumberDefault: Story = {
|
||||
args: {
|
||||
variant: 'Code',
|
||||
title: 'NON-REFUNDABLE / PAY NOW',
|
||||
bannerText: 'L0043148 ∙ Breakfast included',
|
||||
rate: {
|
||||
label: 'Nordic Team Travel',
|
||||
price: '198',
|
||||
unit: 'EUR/NIGHT',
|
||||
},
|
||||
approximateRate: {
|
||||
price: '76 EUR',
|
||||
label: 'Approx.',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export const LNumberStrikethrough: Story = {
|
||||
args: {
|
||||
variant: 'Code',
|
||||
title: 'NON-REFUNDABLE / PAY NOW',
|
||||
bannerText: 'L0043148 ∙ Breakfast included',
|
||||
rate: {
|
||||
label: 'Nordic Team Travel',
|
||||
price: '198',
|
||||
unit: 'EUR/NIGHT',
|
||||
},
|
||||
comparisonRate: {
|
||||
price: '249',
|
||||
unit: 'EUR/NIGHT',
|
||||
},
|
||||
approximateRate: {
|
||||
price: '230/218 EUR',
|
||||
label: 'Approx.',
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
import { RateCard } from './RateCard'
|
||||
|
||||
const meta: Meta<typeof RateCard> = {
|
||||
title: 'Components/RateCard/Points',
|
||||
component: RateCard,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ maxWidth: '400px' }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
argTypes: {
|
||||
title: { control: 'text' },
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof RateCard>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
variant: 'Points',
|
||||
title: 'FREE CANCELLATION / PAY LATER',
|
||||
bannerText: 'Reward night ∙ Breakfast included',
|
||||
rates: [
|
||||
{
|
||||
points: '20000',
|
||||
currency: 'PTS',
|
||||
},
|
||||
{
|
||||
points: '15000',
|
||||
currency: 'PTS',
|
||||
additionalCurrency: {
|
||||
price: '250',
|
||||
currency: 'EUR',
|
||||
},
|
||||
},
|
||||
{
|
||||
points: '10000',
|
||||
currency: 'PTS',
|
||||
additionalCurrency: {
|
||||
price: '500',
|
||||
currency: 'EUR',
|
||||
},
|
||||
},
|
||||
],
|
||||
selectedRate: undefined,
|
||||
onRateSelect: (value) => console.log(value),
|
||||
},
|
||||
}
|
||||
|
||||
export const WithDisabledRates: Story = {
|
||||
args: {
|
||||
variant: 'Points',
|
||||
title: 'FREE CANCELLATION / PAY LATER',
|
||||
bannerText: 'Reward night ∙ Breakfast included',
|
||||
rates: [
|
||||
{
|
||||
points: '20000',
|
||||
currency: 'PTS',
|
||||
isDisabled: true,
|
||||
},
|
||||
{
|
||||
points: '15000',
|
||||
currency: 'PTS',
|
||||
isDisabled: true,
|
||||
additionalCurrency: {
|
||||
price: '250',
|
||||
currency: 'EUR',
|
||||
},
|
||||
},
|
||||
{
|
||||
points: '10000',
|
||||
currency: 'PTS',
|
||||
additionalCurrency: {
|
||||
price: '500',
|
||||
currency: 'EUR',
|
||||
},
|
||||
},
|
||||
],
|
||||
selectedRate: '2',
|
||||
onRateSelect: (value) => console.log(value),
|
||||
},
|
||||
}
|
||||
|
||||
export const NotEnoughPoints: Story = {
|
||||
args: {
|
||||
variant: 'Points',
|
||||
title: 'FREE CANCELLATION / PAY LATER',
|
||||
bannerText: 'Reward night ∙ Breakfast included',
|
||||
rates: [
|
||||
{
|
||||
points: '20000',
|
||||
currency: 'PTS',
|
||||
},
|
||||
{
|
||||
points: '15000',
|
||||
currency: 'PTS',
|
||||
additionalCurrency: {
|
||||
price: '250',
|
||||
currency: 'EUR',
|
||||
},
|
||||
},
|
||||
{
|
||||
points: '10000',
|
||||
currency: 'PTS',
|
||||
additionalCurrency: {
|
||||
price: '500',
|
||||
currency: 'EUR',
|
||||
},
|
||||
},
|
||||
],
|
||||
selectedRate: undefined,
|
||||
isNotEnoughPoints: true,
|
||||
notEnoughPointsText: 'Not enough points',
|
||||
onRateSelect: (value) => console.log(value),
|
||||
},
|
||||
}
|
||||
416
packages/design-system/lib/components/RateCard/RateCard.tsx
Normal file
416
packages/design-system/lib/components/RateCard/RateCard.tsx
Normal file
@@ -0,0 +1,416 @@
|
||||
import { PropsWithChildren } from 'react'
|
||||
import { Typography } from '../Typography'
|
||||
|
||||
import styles from './rate-card.module.css'
|
||||
import { variants } from './variants'
|
||||
import { Rate, RatePointsOption } from './types'
|
||||
import InfoCircleIcon from '../Icons/InfoCircle'
|
||||
import { Radio } from '../Radio'
|
||||
import { RadioGroup } from 'react-aria-components'
|
||||
import InfoCircleFilledIcon from '../Icons/InfoCircleFilled'
|
||||
import { Button } from '../Button'
|
||||
|
||||
type RateCardProps =
|
||||
| RegularRateCardProps
|
||||
| CampaignRateCardProps
|
||||
| CodeRateCardProps
|
||||
| PointsRateCardProps
|
||||
|
||||
export function RateCard(props: PropsWithChildren<RateCardProps>) {
|
||||
const classNames = variants({
|
||||
variant: props.variant,
|
||||
})
|
||||
|
||||
switch (props.variant) {
|
||||
case 'Campaign':
|
||||
return <CampaignRateCard {...props} className={classNames} />
|
||||
case 'Code':
|
||||
return <CodeRateCard {...props} className={classNames} />
|
||||
case 'Points':
|
||||
return <PointsRateCard {...props} className={classNames} />
|
||||
default:
|
||||
return <RegularRateCard {...props} className={classNames} />
|
||||
}
|
||||
}
|
||||
|
||||
interface RegularRateCardProps {
|
||||
variant: 'Regular'
|
||||
title: string
|
||||
rate: Rate
|
||||
memberRate?: Rate
|
||||
approximateRate: Omit<Rate, 'unit'>
|
||||
className?: string
|
||||
handleTermsClick?: () => void
|
||||
}
|
||||
|
||||
function RegularRateCard({
|
||||
title,
|
||||
className,
|
||||
approximateRate,
|
||||
rate,
|
||||
handleTermsClick,
|
||||
}: RegularRateCardProps) {
|
||||
const [mainTitle, subTitle] = title.split('/').map((part) => part.trim())
|
||||
|
||||
return (
|
||||
<div className={`${styles.rateCard} ${className}`}>
|
||||
<div className={styles.container}>
|
||||
<header>
|
||||
<Typography variant="Tag/sm">
|
||||
<h3 className={styles.title}>
|
||||
<Button
|
||||
variant="Icon"
|
||||
color="IconDefault"
|
||||
size="Small"
|
||||
onPress={handleTermsClick}
|
||||
>
|
||||
<InfoCircleIcon height={20} width={20} />
|
||||
</Button>
|
||||
{mainTitle}
|
||||
{subTitle && (
|
||||
<span className={styles.textSecondary}>{` / ${subTitle}`}</span>
|
||||
)}
|
||||
</h3>
|
||||
</Typography>
|
||||
</header>
|
||||
<main className={styles.content}>
|
||||
<div className={styles.rateRow}>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p>{rate.label}</p>
|
||||
</Typography>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<p>
|
||||
{rate.price}{' '}
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<span>{rate.unit}</span>
|
||||
</Typography>
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={`${styles.rateRow} ${styles.textSecondary}`}>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<p>{approximateRate.label}</p>
|
||||
</Typography>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<p>{approximateRate.price}</p>
|
||||
</Typography>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// RED CARD
|
||||
|
||||
interface CampaignRateCardProps extends Omit<RegularRateCardProps, 'variant'> {
|
||||
variant: 'Campaign'
|
||||
bannerText: string
|
||||
comparisonRate?: Omit<Rate, 'label'>
|
||||
referenceRate: Omit<Rate, 'unit'>
|
||||
isHighlightedRate?: boolean
|
||||
}
|
||||
|
||||
function CampaignRateCard({
|
||||
title,
|
||||
rate,
|
||||
memberRate,
|
||||
approximateRate,
|
||||
comparisonRate,
|
||||
referenceRate,
|
||||
className,
|
||||
bannerText,
|
||||
isHighlightedRate,
|
||||
handleTermsClick,
|
||||
}: CampaignRateCardProps) {
|
||||
const [mainTitle, subTitle] = title.split('/').map((part) => part.trim())
|
||||
|
||||
return (
|
||||
<div className={`${styles.rateCard} ${className}`}>
|
||||
<Typography variant="Tag/sm">
|
||||
<p className={styles.banner}>{bannerText}</p>
|
||||
</Typography>
|
||||
<div className={styles.container}>
|
||||
<header>
|
||||
<Typography variant="Tag/sm">
|
||||
<h3 className={styles.title}>
|
||||
<Button
|
||||
variant="Icon"
|
||||
color="IconDefault"
|
||||
size="Small"
|
||||
onPress={handleTermsClick}
|
||||
>
|
||||
<InfoCircleIcon height={20} width={20} />
|
||||
</Button>
|
||||
{mainTitle}
|
||||
{subTitle && (
|
||||
<span className={styles.textSecondary}>{` / ${subTitle}`}</span>
|
||||
)}
|
||||
</h3>
|
||||
</Typography>
|
||||
</header>
|
||||
<main className={styles.content}>
|
||||
<div
|
||||
className={`${styles.rateRow} ${isHighlightedRate ? styles.highlightedRate : ''}`}
|
||||
>
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<p>{rate.label}</p>
|
||||
</Typography>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<p>
|
||||
{rate.price}{' '}
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span>{rate.unit}</span>
|
||||
</Typography>
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
{memberRate ? (
|
||||
<div className={`${styles.rateRow} ${styles.highlightedRate}`}>
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<p>{memberRate.label}</p>
|
||||
</Typography>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<p>
|
||||
{memberRate.price}{' '}
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span>{memberRate.unit}</span>
|
||||
</Typography>
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
) : null}
|
||||
{comparisonRate ? (
|
||||
<div className={`${styles.rateRow} ${styles.comparisonRate}`}>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<p>
|
||||
<span className={styles.strikethrough}>{rate.price}</span>{' '}
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span className={styles.strikethrough}>
|
||||
{comparisonRate.unit}
|
||||
</span>
|
||||
</Typography>
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
) : null}
|
||||
<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}</p>
|
||||
</Typography>
|
||||
</div>
|
||||
</main>
|
||||
{referenceRate ? (
|
||||
<footer className={styles.footer}>
|
||||
<Typography variant="Tag/sm">
|
||||
<p>{referenceRate.label}</p>
|
||||
</Typography>
|
||||
<Typography variant="Tag/sm">
|
||||
<p>{referenceRate.price}</p>
|
||||
</Typography>
|
||||
</footer>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// BLUE CARD
|
||||
|
||||
interface CodeRateCardProps
|
||||
extends Omit<RegularRateCardProps, 'variant' | 'approximateRate'> {
|
||||
variant: 'Code'
|
||||
bannerText: string
|
||||
comparisonRate?: Omit<Rate, 'label'>
|
||||
approximateRate?: Omit<Rate, 'unit'>
|
||||
isHighlightedRate?: boolean
|
||||
}
|
||||
|
||||
function CodeRateCard({
|
||||
title,
|
||||
rate,
|
||||
approximateRate,
|
||||
comparisonRate,
|
||||
bannerText,
|
||||
className,
|
||||
isHighlightedRate,
|
||||
handleTermsClick,
|
||||
}: CodeRateCardProps) {
|
||||
const [mainTitle, subTitle] = title.split('/').map((part) => part.trim())
|
||||
|
||||
return (
|
||||
<div className={`${styles.rateCard} ${className}`}>
|
||||
<Typography variant="Tag/sm">
|
||||
<p className={styles.banner}>{bannerText}</p>
|
||||
</Typography>
|
||||
<div className={styles.container}>
|
||||
<header>
|
||||
<Typography variant="Tag/sm">
|
||||
<h3 className={styles.title}>
|
||||
<Button
|
||||
variant="Icon"
|
||||
color="IconDefault"
|
||||
size="Small"
|
||||
onPress={handleTermsClick}
|
||||
>
|
||||
<InfoCircleIcon height={20} width={20} />
|
||||
</Button>
|
||||
{mainTitle}
|
||||
{subTitle && (
|
||||
<span className={styles.textSecondary}>{` / ${subTitle}`}</span>
|
||||
)}
|
||||
</h3>
|
||||
</Typography>
|
||||
</header>
|
||||
<main className={styles.content}>
|
||||
<div
|
||||
className={`${styles.rateRow} ${isHighlightedRate ? styles.highlightedRate : ''}`}
|
||||
>
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<p>{rate.label}</p>
|
||||
</Typography>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<p>
|
||||
{rate.price}{' '}
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span>{rate.unit}</span>
|
||||
</Typography>
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
{comparisonRate ? (
|
||||
<div className={`${styles.rateRow} ${styles.comparisonRate}`}>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<p>
|
||||
<span className={styles.strikethrough}>{rate.price}</span>{' '}
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span className={styles.strikethrough}>
|
||||
{comparisonRate.unit}
|
||||
</span>
|
||||
</Typography>
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
) : 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}</p>
|
||||
</Typography>
|
||||
</div>
|
||||
) : null}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// POINTS CARD
|
||||
|
||||
interface PointsRateCardProps {
|
||||
variant: 'Points'
|
||||
title: string
|
||||
bannerText: string
|
||||
className?: string
|
||||
rates: RatePointsOption[]
|
||||
selectedRate: string | undefined
|
||||
onRateSelect: (value: string) => void
|
||||
isNotEnoughPoints?: boolean
|
||||
notEnoughPointsText?: string
|
||||
handleTermsClick?: () => void
|
||||
}
|
||||
|
||||
function PointsRateCard({
|
||||
title,
|
||||
bannerText,
|
||||
className,
|
||||
rates,
|
||||
selectedRate,
|
||||
isNotEnoughPoints,
|
||||
notEnoughPointsText,
|
||||
onRateSelect,
|
||||
handleTermsClick,
|
||||
}: PointsRateCardProps) {
|
||||
const [mainTitle, subTitle] = title.split('/').map((part) => part.trim())
|
||||
|
||||
return (
|
||||
<div className={`${styles.rateCard} ${className}`}>
|
||||
<Typography variant="Tag/sm">
|
||||
<p className={styles.banner}>{bannerText}</p>
|
||||
</Typography>
|
||||
<div className={styles.container}>
|
||||
<header>
|
||||
<Typography variant="Tag/sm">
|
||||
<h3 className={styles.title}>
|
||||
<Button
|
||||
variant="Icon"
|
||||
color="IconDefault"
|
||||
size="Small"
|
||||
onPress={handleTermsClick}
|
||||
>
|
||||
<InfoCircleIcon height={20} width={20} />
|
||||
</Button>
|
||||
{mainTitle}
|
||||
{subTitle && (
|
||||
<span className={styles.textSecondary}>{` / ${subTitle}`}</span>
|
||||
)}
|
||||
</h3>
|
||||
</Typography>
|
||||
</header>
|
||||
<main className={styles.content}>
|
||||
<RadioGroup value={selectedRate} onChange={onRateSelect}>
|
||||
{rates.map((rate, index) => (
|
||||
<div key={index} className={styles.rateRow}>
|
||||
<Radio
|
||||
value={index.toString()}
|
||||
isDisabled={rate.isDisabled || isNotEnoughPoints}
|
||||
>
|
||||
<div className={styles.pointsRow}>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<p>
|
||||
{rate.points}{' '}
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span>
|
||||
{rate.currency} {rate.additionalCurrency && ' + '}
|
||||
</span>
|
||||
</Typography>
|
||||
</p>
|
||||
</Typography>
|
||||
{rate.additionalCurrency && (
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<p>
|
||||
{rate.additionalCurrency.price}{' '}
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span>{rate.currency}</span>
|
||||
</Typography>
|
||||
</p>
|
||||
</Typography>
|
||||
)}
|
||||
</div>
|
||||
</Radio>
|
||||
</div>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</main>
|
||||
{isNotEnoughPoints ? (
|
||||
<footer className={styles.footer}>
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<p className={styles.notEnoughPoints}>
|
||||
<div className={styles.filledIcon}>
|
||||
<InfoCircleFilledIcon height={20} width={20} />
|
||||
</div>
|
||||
{notEnoughPointsText}
|
||||
</p>
|
||||
</Typography>
|
||||
</footer>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
import { RateCard } from './RateCard'
|
||||
|
||||
const meta: Meta<typeof RateCard> = {
|
||||
title: 'Components/RateCard/Regular',
|
||||
component: RateCard,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ maxWidth: '400px' }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
argTypes: {
|
||||
title: { control: 'text' },
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof RateCard>
|
||||
|
||||
export const Regular: Story = {
|
||||
args: {
|
||||
variant: 'Regular',
|
||||
title: 'FREE CANCELLATION / PAY NOW',
|
||||
rate: {
|
||||
label: 'Standard Price',
|
||||
price: '1989',
|
||||
unit: 'EUR/night',
|
||||
},
|
||||
approximateRate: {
|
||||
price: '1989 EUR',
|
||||
label: 'Approx.',
|
||||
},
|
||||
},
|
||||
}
|
||||
1
packages/design-system/lib/components/RateCard/index.tsx
Normal file
1
packages/design-system/lib/components/RateCard/index.tsx
Normal file
@@ -0,0 +1 @@
|
||||
export { RateCard } from './RateCard'
|
||||
@@ -0,0 +1,120 @@
|
||||
.rateCard {
|
||||
background-color: var(--Scandic-Grey-00);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
}
|
||||
|
||||
.banner {
|
||||
background-color: var(--Surface-Brand-Primary-1-OnSurface-Accent);
|
||||
border-top-left-radius: var(--Corner-radius-md);
|
||||
border-top-right-radius: var(--Corner-radius-md);
|
||||
text-align: center;
|
||||
color: var(--Text-Inverted);
|
||||
padding: var(--Space-x05) 0;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Space-x1);
|
||||
|
||||
padding: var(--Space-x1) var(--Space-x15) var(--Space-x15);
|
||||
}
|
||||
|
||||
.container > * {
|
||||
padding-bottom: var(--Space-x1);
|
||||
border-bottom: 2px solid var(--Neutral-Opacity-Black-5);
|
||||
}
|
||||
|
||||
.container > :last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Space-x05);
|
||||
}
|
||||
|
||||
.rateRow {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.highlightedRate {
|
||||
color: var(--Surface-Brand-Primary-1-OnSurface-Accent);
|
||||
}
|
||||
|
||||
.textSecondary {
|
||||
color: var(--Text-Secondary);
|
||||
}
|
||||
|
||||
.comparisonRate {
|
||||
color: var(--Text-Secondary);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.comparisonRate > p {
|
||||
font-weight: var(--Font-weight-Regular);
|
||||
}
|
||||
|
||||
.strikethrough {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.approximateRate {
|
||||
color: var(--Text-Secondary);
|
||||
padding-top: var(--Space-x05);
|
||||
}
|
||||
|
||||
.variant-regular {
|
||||
background-color: var(--Scandic-Grey-00);
|
||||
}
|
||||
|
||||
.pointsRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Space-x05);
|
||||
}
|
||||
|
||||
.notEnoughPoints {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
gap: var(--Space-x05);
|
||||
}
|
||||
|
||||
.variant-campaign {
|
||||
background-color: var(--Surface-Brand-Primary-1-Default);
|
||||
}
|
||||
|
||||
.variant-campaign .banner {
|
||||
background-color: var(--Surface-Brand-Primary-1-OnSurface-Accent);
|
||||
}
|
||||
|
||||
.variant-code {
|
||||
background: var(--Surface-Feedback-Information);
|
||||
}
|
||||
|
||||
.variant-code .banner {
|
||||
background-color: var(--Surface-Feedback-Information-Accent);
|
||||
}
|
||||
|
||||
.variant-points .banner {
|
||||
background: var(--Surface-Brand-Primary-1-OnSurface-Accent-Secondary);
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.filledIcon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--Scandic-Blue-70);
|
||||
}
|
||||
17
packages/design-system/lib/components/RateCard/types.ts
Normal file
17
packages/design-system/lib/components/RateCard/types.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
export type Rate = {
|
||||
label?: string
|
||||
price: string
|
||||
unit: string
|
||||
}
|
||||
|
||||
export type RatePointsOption = {
|
||||
points: string
|
||||
currency: string
|
||||
isDisabled?: boolean
|
||||
additionalCurrency?: AdditionalCurrency
|
||||
}
|
||||
|
||||
type AdditionalCurrency = {
|
||||
price: string
|
||||
currency: string
|
||||
}
|
||||
19
packages/design-system/lib/components/RateCard/variants.ts
Normal file
19
packages/design-system/lib/components/RateCard/variants.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { cva } from 'class-variance-authority'
|
||||
|
||||
import styles from './rate-card.module.css'
|
||||
|
||||
export const config = {
|
||||
variants: {
|
||||
variant: {
|
||||
Regular: styles['variant-regular'],
|
||||
Campaign: styles['variant-campaign'],
|
||||
Code: styles['variant-code'],
|
||||
Points: styles['variant-points'],
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'Regular',
|
||||
},
|
||||
} as const
|
||||
|
||||
export const variants = cva(styles.rateCard, config)
|
||||
Reference in New Issue
Block a user