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

packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { expect, fn } from 'storybook/test'
+
+import { PaymentOptionsGroup } from './PaymentOptionsGroup'
+import { PaymentOption } from './PaymentOption'
+import { PaymentMethodEnum } from '@scandic-hotels/common/constants/paymentMethod'
+import { FormDecorator } from '../../../../.storybook/decorators/FormDecorator'
+
+const meta: Meta<typeof PaymentOptionsGroup> = {
+  title: 'Components/Payment/PaymentOptionsGroup',
+  component: PaymentOptionsGroup,
+  decorators: [FormDecorator],
+}
+export default meta
+
+type Story = StoryObj<typeof PaymentOptionsGroup>
+
+export const Default: Story = {
+  args: {
+    label: 'Select Payment Method',
+    name: 'paymentMethod',
+    onChange: fn(),
+    children: (
+      <>
+        <PaymentOption label="Visa" value={PaymentMethodEnum.visa} />
+        <PaymentOption
+          label="American Express"
+          value={PaymentMethodEnum.americanExpress}
+        />
+        <PaymentOption
+          label="MasterCard"
+          value={PaymentMethodEnum.masterCard}
+          cardNumber="1234"
+        />
+      </>
+    ),
+  },
+  play: async ({ canvas, userEvent, args }) => {
+    const visaOption = await canvas.findByRole('radio', { name: 'Visa' })
+    expect(visaOption).toBeInTheDocument()
+
+    expect(args.onChange).not.toHaveBeenCalled()
+    await userEvent.click(visaOption)
+    expect(args.onChange).toHaveBeenCalledWith('visa')
+  },
+}