fixes
This commit is contained in:
Tobias Johansson
committed by
Simon Emanuelsson
Simon Emanuelsson
parent
93962e4c59
commit
310a5a7a68
@@ -0,0 +1,120 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
import CampaignRateCard from '.'
|
||||
|
||||
const meta: Meta<typeof CampaignRateCard> = {
|
||||
title: 'Components/RateCard/Campaign',
|
||||
component: CampaignRateCard,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ maxWidth: '400px' }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
argTypes: {
|
||||
rateTitle: { control: 'text' },
|
||||
paymentTerm: { control: 'text' },
|
||||
bannerText: { control: 'text' },
|
||||
rate: { control: 'object' },
|
||||
memberRate: { control: 'object' },
|
||||
referenceRate: { control: 'object' },
|
||||
comparisonRate: { control: 'object' },
|
||||
approximateRate: { control: 'object' },
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof CampaignRateCard>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
rateTitle: 'NON-REFUNDABLE',
|
||||
paymentTerm: 'PAY NOW',
|
||||
bannerText: 'Campaign ∙ Breakfast included',
|
||||
rate: {
|
||||
label: "Valentine's Special",
|
||||
price: '198',
|
||||
unit: 'EUR/NIGHT',
|
||||
},
|
||||
approximateRate: {
|
||||
price: '198',
|
||||
label: 'Approx.',
|
||||
unit: 'EUR',
|
||||
},
|
||||
referenceRate: {
|
||||
price: '249',
|
||||
label: 'Lowest past price (last 30 days)',
|
||||
unit: 'EUR',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export const Package: Story = {
|
||||
args: {
|
||||
rateTitle: 'NON-REFUNDABLE',
|
||||
paymentTerm: 'PAY NOW',
|
||||
bannerText: 'WDCPHG ∙ Breakfast included',
|
||||
rate: {
|
||||
label: 'Luxurious wine & dine in Copenhagen',
|
||||
price: '1989',
|
||||
unit: 'EUR/NIGHT',
|
||||
},
|
||||
approximateRate: {
|
||||
price: '1989',
|
||||
label: 'Approx.',
|
||||
unit: 'EUR',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export const CampaignLoggedIn: Story = {
|
||||
args: {
|
||||
rateTitle: 'NON-REFUNDABLE',
|
||||
paymentTerm: 'PAY NOW',
|
||||
bannerText: 'SUM2025 ∙ Breakfast included',
|
||||
rate: {
|
||||
label: 'Luxurious wine & dine in Copenhagen',
|
||||
price: '198',
|
||||
unit: 'EUR/NIGHT',
|
||||
},
|
||||
approximateRate: {
|
||||
price: '198',
|
||||
label: 'Approx.',
|
||||
unit: 'EUR',
|
||||
},
|
||||
comparisonRate: {
|
||||
price: '249',
|
||||
unit: 'EUR/NIGHT',
|
||||
},
|
||||
isHighlightedRate: true,
|
||||
},
|
||||
}
|
||||
|
||||
export const CampaignOmnibus: Story = {
|
||||
args: {
|
||||
rateTitle: 'NON-REFUNDABLE',
|
||||
paymentTerm: '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',
|
||||
label: 'Approx.',
|
||||
unit: 'EUR',
|
||||
},
|
||||
referenceRate: {
|
||||
price: '101',
|
||||
label: 'Lowest past price (last 30 days)',
|
||||
unit: 'EUR',
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
import { Typography } from '../../Typography'
|
||||
import { Rate } from '../types'
|
||||
|
||||
import styles from '../rate-card.module.css'
|
||||
import { Button } from '../../Button'
|
||||
import InfoCircleIcon from '../../Icons/InfoCircle'
|
||||
import { variants } from '../variants'
|
||||
|
||||
interface CampaignRateCardProps {
|
||||
name: string
|
||||
value: string
|
||||
isSelected: boolean
|
||||
rateTitle: string
|
||||
paymentTerm: string
|
||||
bannerText: string
|
||||
rate: Rate
|
||||
memberRate?: Rate
|
||||
referenceRate: Rate
|
||||
comparisonRate?: Omit<Rate, 'label'>
|
||||
isHighlightedRate?: boolean
|
||||
approximateRate: Rate
|
||||
handleChange: () => void
|
||||
handleTermsClick?: () => void
|
||||
}
|
||||
|
||||
export default function CampaignRateCard({
|
||||
name,
|
||||
value,
|
||||
isSelected,
|
||||
rateTitle,
|
||||
paymentTerm,
|
||||
rate,
|
||||
memberRate,
|
||||
approximateRate,
|
||||
comparisonRate,
|
||||
referenceRate,
|
||||
bannerText,
|
||||
isHighlightedRate,
|
||||
handleChange,
|
||||
handleTermsClick,
|
||||
}: CampaignRateCardProps) {
|
||||
const classNames = variants({
|
||||
variant: 'Campaign',
|
||||
})
|
||||
|
||||
return (
|
||||
<label>
|
||||
<input
|
||||
className={styles.radio}
|
||||
type="radio"
|
||||
name={name}
|
||||
value={value}
|
||||
checked={isSelected}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<div className={classNames}>
|
||||
<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>
|
||||
{rateTitle}
|
||||
<span className={styles.textSecondary}>
|
||||
{` / ${paymentTerm}`}
|
||||
</span>
|
||||
</h3>
|
||||
</Typography>
|
||||
</header>
|
||||
<div 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} {approximateRate.unit}
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
{referenceRate ? (
|
||||
<footer className={styles.footer}>
|
||||
<Typography variant="Tag/sm">
|
||||
<p>{referenceRate.label}</p>
|
||||
</Typography>
|
||||
<Typography variant="Tag/sm">
|
||||
<p>
|
||||
{referenceRate.price} {referenceRate.unit}
|
||||
</p>
|
||||
</Typography>
|
||||
</footer>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user