Merged in SW-3396-move-my-saved-cards-to-design-system (pull request #2762)

SW-3396 move my saved cards to design system * Move PaymentOption, PaymentOptionsGroup, PaymentIcons and MySavedCards (renamed SelectPaymentMethod) to design-system * Remove unused svg payment icons * cleanu * cleanup * trackUpdatePaymentMethod: remove hotelId argument that was never passed Approved-by: Anton Gunnarsson
2025-09-04 13:01:36 +00:00
parent 8e00769c64
commit 6fa301f8e7
57 changed files with 1687 additions and 583 deletions
--- a/packages/design-system/lib/components/Payment/PaymentMethodIcon.stories.tsx
+++ b/packages/design-system/lib/components/Payment/PaymentMethodIcon.stories.tsx
@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+
+import { PaymentMethodIcon } from './PaymentMethodIcon'
+import { PaymentMethodEnum } from '@scandic-hotels/common/constants/paymentMethod'
+import { Typography } from '../Typography'
+import { expect } from 'storybook/test'
+
+const methods = Object.values(PaymentMethodEnum).toSorted()
+
+const meta: Meta<typeof PaymentMethodIcon> = {
+  title: 'Components/Payment/PaymentMethodIcon',
+  component: PaymentMethodIcon,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    paymentMethod: {
+      control: { type: 'select' },
+      options: methods,
+      description: 'Payment method to display',
+    },
+    alt: {
+      control: { type: 'text' },
+      description: 'Alt text for the icon',
+    },
+  },
+}
+export default meta
+
+type Story = StoryObj<typeof PaymentMethodIcon>
+
+export const Playground: Story = {
+  args: {
+    paymentMethod: PaymentMethodEnum.visa,
+    alt: 'Visa payment method',
+  },
+  play: async ({ canvas, args }) => {
+    const img = await canvas.findByRole('img')
+
+    expect(img).toBeInTheDocument()
+    expect(img).toHaveAttribute('alt', args.alt)
+  },
+}
+
+export const All: Story = {
+  parameters: {
+    layout: 'padded',
+  },
+  render: (args) => (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(80px, 1fr))',
+        gap: 16,
+      }}
+    >
+      {methods.map((m) => (
+        <div
+          key={m}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 12,
+            padding: 8,
+            borderRadius: 8,
+          }}
+        >
+          <PaymentMethodIcon {...args} paymentMethod={m} />
+          <Typography variant={'Label/xsRegular'}>
+            <p>{m}</p>
+          </Typography>
+        </div>
+      ))}
+    </div>
+  ),
+  args: {
+    paymentMethod: PaymentMethodEnum.visa,
+  },
+}