feat(BOOK-62): Added new InfoCard component and using that on hotel pages

Approved-by: Bianca Widstam

packages/design-system/lib/components/InfoCard/InfoCard.stories.tsx

@@ -0,0 +1,262 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+
+import { Theme } from '@scandic-hotels/common/utils/theme'
+import { InfoCard } from './InfoCard.tsx'
+import { infoCardConfig } from './variants.ts'
+
+const DEFAULT_ARGS = {
+  topTitle: "Here's to your health!",
+  heading: 'Gym & Wellness',
+  primaryButton: {
+    href: '#',
+    text: 'Primary button',
+  },
+  secondaryButton: {
+    href: '#',
+    text: 'Secondary button',
+  },
+  bodyText:
+    'Our gym is open 24/7 and offers state-of-the-art equipment to help you stay fit during your stay.',
+}
+
+const meta: Meta<typeof InfoCard> = {
+  title: 'Components/InfoCard',
+  component: InfoCard,
+  argTypes: {
+    topTitle: {
+      control: 'text',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    topTitleAngled: {
+      control: 'boolean',
+      description:
+        'Whether the top title should be angled. Only applies when `hotelTheme` is set to `Theme.scandic`.',
+      type: 'boolean',
+    },
+    heading: {
+      control: 'text',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    bodyText: {
+      control: 'text',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    theme: {
+      control: 'select',
+      options: Object.keys(infoCardConfig.variants.theme),
+      table: {
+        type: {
+          summary: Object.keys(infoCardConfig.variants.theme).join(' | '),
+        },
+      },
+    },
+    height: {
+      control: 'select',
+      options: Object.keys(infoCardConfig.variants.height),
+      table: {
+        type: {
+          summary: Object.keys(infoCardConfig.variants.height).join(' | '),
+        },
+      },
+    },
+    hotelTheme: {
+      control: 'select',
+      options: Object.keys(infoCardConfig.variants.hotelTheme),
+      description:
+        'The hotel theme to adjust button colors for better contrast.',
+      table: {
+        type: { summary: 'Theme', detail: Object.values(Theme).join(' | ') },
+      },
+    },
+    backgroundImage: {
+      control: 'object',
+      table: {
+        type: {
+          summary: 'InfoCardBackgroundImage',
+          detail:
+            '{ src: string, alt?: string, focalPoint?: { x: number, y: number }, dimensions?: { width: number, height: number, aspectRatio?: number } }',
+        },
+      },
+    },
+    primaryButton: {
+      control: 'object',
+      table: {
+        type: {
+          summary: 'InfoCardButton',
+          detail:
+            '{ href: string, text: string, openInNewTab?: boolean, scrollOnClick?: boolean, onClick?: MouseEventHandler }',
+        },
+      },
+    },
+    secondaryButton: {
+      control: 'object',
+      table: {
+        type: {
+          summary: 'InfoCardButton',
+          detail:
+            '{ href: string, text: string, openInNewTab?: boolean, scrollOnClick?: boolean, onClick?: MouseEventHandler }',
+        },
+      },
+    },
+  },
+  args: { ...DEFAULT_ARGS },
+  decorators: [
+    (Story, context) => {
+      if (context.name.toLowerCase().indexOf('all themes') >= 0) {
+        return (
+          <div
+            className={context.args.hotelTheme!}
+            style={{ display: 'grid', gap: '1rem' }}
+          >
+            {Object.keys(infoCardConfig.variants.theme).map((theme) => {
+              console.log(theme)
+              const args = {
+                ...context.args,
+                backgroundImage:
+                  theme === 'Image'
+                    ? {
+                        src: './img/img1.jpg',
+                        alt: 'Image alt text',
+                      }
+                    : undefined,
+              }
+              return (
+                <div style={{ display: 'grid', gap: '0.5rem' }}>
+                  <h3>{theme}</h3>
+                  <InfoCard
+                    {...args}
+                    theme={theme as keyof typeof infoCardConfig.variants.theme}
+                  />
+                </div>
+              )
+            })}
+          </div>
+        )
+      }
+
+      return (
+        <div style={{ display: 'flex' }}>
+          <Story />
+        </div>
+      )
+    },
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof InfoCard>
+
+export const Default: Story = {
+  args: {
+    ...meta.args,
+  },
+}
+
+export const Primary_1: Story = {
+  args: {
+    ...meta.args,
+    theme: 'Primary 1',
+  },
+}
+
+export const Primary_2: Story = {
+  args: {
+    ...meta.args,
+    theme: 'Primary 2',
+  },
+}
+
+export const Primary_3: Story = {
+  args: {
+    ...meta.args,
+    theme: 'Primary 3',
+  },
+}
+
+export const Accent: Story = {
+  args: {
+    ...meta.args,
+    theme: 'Accent',
+  },
+}
+
+export const White: Story = {
+  args: {
+    ...meta.args,
+    theme: 'White',
+  },
+}
+
+export const Image: Story = {
+  args: {
+    ...meta.args,
+    backgroundImage: {
+      src: './img/img1.jpg',
+      alt: 'Image alt text',
+    },
+    theme: 'Image',
+  },
+}
+
+export const AllThemesScandic: Story = {
+  args: {
+    ...meta.args,
+    hotelTheme: Theme.scandic,
+  },
+}
+
+export const AllThemesDowntownCamper: Story = {
+  args: {
+    ...meta.args,
+    hotelTheme: Theme.downtownCamper,
+  },
+}
+
+export const AllThemesHaymarket: Story = {
+  args: {
+    ...meta.args,
+    hotelTheme: Theme.haymarket,
+  },
+}
+
+export const AllThemesScandicGo: Story = {
+  args: {
+    ...meta.args,
+    hotelTheme: Theme.scandicGo,
+  },
+}
+
+export const AllThemesGrandHotel: Story = {
+  args: {
+    ...meta.args,
+    hotelTheme: Theme.grandHotel,
+  },
+}
+
+export const AllThemesHotelNorge: Story = {
+  args: {
+    ...meta.args,
+    hotelTheme: Theme.hotelNorge,
+  },
+}
+
+export const AllThemesMarski: Story = {
+  args: {
+    ...meta.args,
+    hotelTheme: Theme.marski,
+  },
+}
+
+export const AllThemesTheDock: Story = {
+  args: {
+    ...meta.args,
+    hotelTheme: Theme.theDock,
+  },
+}