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/Points.stories.tsx
+++ b/packages/design-system/lib/components/RateCard/Points.stories.tsx
@@ -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),
+  },
+}