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
2025-03-25 10:41:43 +00:00
parent fef3a785d0
commit 0e2192be0f
18 changed files with 1118 additions and 0 deletions
--- a/packages/design-system/lib/components/RateCard/Campaign.stories.tsx
+++ b/packages/design-system/lib/components/RateCard/Campaign.stories.tsx
@@ -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)',
+    },
+  },
+}