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);
|
color: var(--Scandic-Red-100);
|
||||||
padding: var(--Space-x15) 0;
|
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'],
|
Secondary: styles['variant-secondary'],
|
||||||
Tertiary: styles['variant-tertiary'],
|
Tertiary: styles['variant-tertiary'],
|
||||||
Text: styles['variant-text'],
|
Text: styles['variant-text'],
|
||||||
|
Icon: styles['variant-icon'],
|
||||||
},
|
},
|
||||||
color: {
|
color: {
|
||||||
Primary: styles['color-primary'],
|
Primary: styles['color-primary'],
|
||||||
Inverted: styles['color-inverted'],
|
Inverted: styles['color-inverted'],
|
||||||
|
IconDefault: styles['color-icon-default'],
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
Small: styles['size-small'],
|
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",
|
"./Chips": "./dist/components/Chips/index.js",
|
||||||
"./Icons": "./dist/components/Icons/index.js",
|
"./Icons": "./dist/components/Icons/index.js",
|
||||||
"./Typography": "./dist/components/Typography/index.js",
|
"./Typography": "./dist/components/Typography/index.js",
|
||||||
|
"./RateCard": "./dist/components/RateCard/index.js",
|
||||||
"./style.css": "./dist/style.css",
|
"./style.css": "./dist/style.css",
|
||||||
"./base.css": "./dist/base.css",
|
"./base.css": "./dist/base.css",
|
||||||
"./globals.css": "./dist/globals.css",
|
"./globals.css": "./dist/globals.css",
|
||||||
|
|||||||
Reference in New Issue
Block a user