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
@@ -78,3 +78,19 @@
|
||||
color: var(--Scandic-Red-100);
|
||||
padding: var(--Space-x15) 0;
|
||||
}
|
||||
|
||||
.variant-icon {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.color-icon-default {
|
||||
color: var(--Icon-Default);
|
||||
}
|
||||
|
||||
@@ -11,10 +11,12 @@ export const config = {
|
||||
Secondary: styles['variant-secondary'],
|
||||
Tertiary: styles['variant-tertiary'],
|
||||
Text: styles['variant-text'],
|
||||
Icon: styles['variant-icon'],
|
||||
},
|
||||
color: {
|
||||
Primary: styles['color-primary'],
|
||||
Inverted: styles['color-inverted'],
|
||||
IconDefault: styles['color-icon-default'],
|
||||
},
|
||||
size: {
|
||||
Small: styles['size-small'],
|
||||
|
||||
18
packages/design-system/lib/components/Icons/InfoCircle.tsx
Normal file
18
packages/design-system/lib/components/Icons/InfoCircle.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import { SVGProps } from 'react'
|
||||
|
||||
export default function InfoCircleIcon(props: SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={props.width ?? 20}
|
||||
height={props.height ?? 20}
|
||||
fill="none"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M10.005 13.896a.68.68 0 0 0 .494-.205.667.667 0 0 0 .208-.493v-3.48a.674.674 0 0 0-.204-.492.666.666 0 0 0-.49-.205.68.68 0 0 0-.493.205.667.667 0 0 0-.209.493v3.48c0 .19.068.355.204.492.136.137.3.205.49.205Zm-.013-6.313a.701.701 0 0 0 .507-.201.668.668 0 0 0 .208-.5.701.701 0 0 0-.202-.507.668.668 0 0 0-.5-.208.701.701 0 0 0-.506.202.668.668 0 0 0-.209.5c0 .198.068.367.202.506a.668.668 0 0 0 .5.208Zm.012 10.209a7.594 7.594 0 0 1-3.027-.61 7.85 7.85 0 0 1-4.16-4.162 7.588 7.588 0 0 1-.61-3.03c0-1.075.203-2.083.61-3.022a7.884 7.884 0 0 1 4.162-4.15 7.589 7.589 0 0 1 3.03-.61c1.075 0 2.083.204 3.022.61a7.883 7.883 0 0 1 4.15 4.157c.406.942.61 1.949.61 3.02a7.594 7.594 0 0 1-.61 3.027 7.849 7.849 0 0 1-4.158 4.16 7.54 7.54 0 0 1-3.019.61ZM10 16.396c1.77 0 3.28-.623 4.526-1.87 1.246-1.246 1.87-2.755 1.87-4.526 0-1.77-.624-3.28-1.87-4.526-1.247-1.246-2.755-1.87-4.526-1.87s-3.28.624-4.526 1.87C4.226 6.721 3.603 8.23 3.603 10s.623 3.28 1.87 4.526c1.246 1.247 2.755 1.87 4.526 1.87Z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { SVGProps } from 'react'
|
||||
|
||||
export default function InfoCircleFilledIcon(props: SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={props.width ?? 20}
|
||||
height={props.height ?? 20}
|
||||
fill="none"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M10.007 13.896a.68.68 0 0 0 .494-.205.667.667 0 0 0 .208-.493v-3.48a.674.674 0 0 0-.204-.492.665.665 0 0 0-.49-.205.68.68 0 0 0-.494.205.667.667 0 0 0-.208.493v3.48c0 .19.068.355.204.492.136.137.3.205.49.205Zm-.013-6.313a.701.701 0 0 0 .507-.201.668.668 0 0 0 .208-.5.701.701 0 0 0-.202-.507.668.668 0 0 0-.5-.208.701.701 0 0 0-.506.202.668.668 0 0 0-.209.5c0 .198.068.367.202.506a.668.668 0 0 0 .5.208Zm.012 10.209a7.594 7.594 0 0 1-3.028-.61 7.85 7.85 0 0 1-4.16-4.162 7.588 7.588 0 0 1-.609-3.03c0-1.075.203-2.083.61-3.022a7.884 7.884 0 0 1 4.162-4.15 7.589 7.589 0 0 1 3.03-.61c1.075 0 2.083.204 3.022.61a7.884 7.884 0 0 1 4.15 4.157 7.54 7.54 0 0 1 .61 3.02 7.594 7.594 0 0 1-.61 3.027 7.852 7.852 0 0 1-4.158 4.16 7.541 7.541 0 0 1-3.019.61Z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
31
packages/design-system/lib/components/Radio/Radio.tsx
Normal file
31
packages/design-system/lib/components/Radio/Radio.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import { PropsWithChildren } from 'react'
|
||||
import { Radio as AriaRadio } from 'react-aria-components'
|
||||
import styles from './radio.module.css'
|
||||
import { variants } from './variants'
|
||||
|
||||
interface RadioProps extends PropsWithChildren {
|
||||
value: string
|
||||
id?: string
|
||||
isDisabled?: boolean
|
||||
color?: 'Burgundy'
|
||||
}
|
||||
|
||||
export function Radio({ id, value, children, color, isDisabled }: RadioProps) {
|
||||
const inputId = id || `radio-${value}`
|
||||
|
||||
const classNames = variants({
|
||||
color,
|
||||
})
|
||||
|
||||
return (
|
||||
<AriaRadio
|
||||
id={inputId}
|
||||
value={value}
|
||||
isDisabled={isDisabled}
|
||||
className={`${styles.container} ${isDisabled ? styles.disabled : ''}`}
|
||||
>
|
||||
<div className={`${styles.radio} ${classNames}`} />
|
||||
<div>{children}</div>
|
||||
</AriaRadio>
|
||||
)
|
||||
}
|
||||
1
packages/design-system/lib/components/Radio/index.tsx
Normal file
1
packages/design-system/lib/components/Radio/index.tsx
Normal file
@@ -0,0 +1 @@
|
||||
export { Radio } from './Radio'
|
||||
32
packages/design-system/lib/components/Radio/radio.module.css
Normal file
32
packages/design-system/lib/components/Radio/radio.module.css
Normal file
@@ -0,0 +1,32 @@
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Space-x15);
|
||||
padding: var(--Space-x1) 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radio {
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: var(--Surface-UI-Fill-Default);
|
||||
border: 2px solid var(--Scandic-Beige-50);
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s ease-in-out;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.container[data-selected] .radio {
|
||||
border-color: var(--Surface-UI-Fill-Active);
|
||||
border-width: 8px;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.container[data-selected] .color-burgundy {
|
||||
border-color: var(--Surface-UI-Fill-Active);
|
||||
}
|
||||
16
packages/design-system/lib/components/Radio/variants.ts
Normal file
16
packages/design-system/lib/components/Radio/variants.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import { cva } from 'class-variance-authority'
|
||||
|
||||
import styles from './radio.module.css'
|
||||
|
||||
export const config = {
|
||||
variants: {
|
||||
color: {
|
||||
Burgundy: styles['color-burgundy'],
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
color: 'Burgundy',
|
||||
},
|
||||
} as const
|
||||
|
||||
export const variants = cva(styles.radio, config)
|
||||
@@ -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)
|
||||
@@ -11,6 +11,7 @@
|
||||
"./Chips": "./dist/components/Chips/index.js",
|
||||
"./Icons": "./dist/components/Icons/index.js",
|
||||
"./Typography": "./dist/components/Typography/index.js",
|
||||
"./RateCard": "./dist/components/RateCard/index.js",
|
||||
"./style.css": "./dist/style.css",
|
||||
"./base.css": "./dist/base.css",
|
||||
"./globals.css": "./dist/globals.css",
|
||||
|
||||
Reference in New Issue
Block a user