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

Approved-by: Bianca Widstam

packages/design-system/lib/components/InfoCard/variants.ts

@@ -0,0 +1,70 @@
+import { cva } from 'class-variance-authority'
+
+import { DEFAULT_THEME, Theme } from '@scandic-hotels/common/utils/theme'
+import styles from './infoCard.module.css'
+
+const variantKeys = {
+  theme: {
+    'Primary 1': 'Primary 1',
+    'Primary 2': 'Primary 2',
+    'Primary 3': 'Primary 3',
+    Accent: 'Accent',
+    Image: 'Image',
+    White: 'White',
+  },
+  height: {
+    fixed: 'fixed',
+    dynamic: 'dynamic',
+  },
+} as const
+
+export const infoCardConfig = {
+  variants: {
+    theme: {
+      [variantKeys.theme['Primary 1']]: styles['theme-primary-1'],
+      [variantKeys.theme['Primary 2']]: styles['theme-primary-2'],
+      [variantKeys.theme['Primary 3']]: styles['theme-primary-3'],
+      [variantKeys.theme['Accent']]: styles['theme-accent'],
+      [variantKeys.theme['Image']]: styles['theme-image'],
+      [variantKeys.theme['White']]: styles['theme-white'],
+    },
+    height: {
+      [variantKeys.height.fixed]: styles['height-fixed'],
+      [variantKeys.height.dynamic]: styles['height-dynamic'],
+    },
+    // Only Theme.scandic can be used with the Angled variant.
+    // The topTitleAngled variant will be applied using the compoundVariants.
+    topTitleAngled: {
+      true: undefined,
+      false: undefined,
+    },
+    // The hotelTheme is not used to apply styles directly,
+    // but is needed for compound variants and to get the correct button color.
+    // The class name for the hotelTheme is applied on page level.
+    hotelTheme: {
+      [Theme.scandic]: undefined,
+      [Theme.downtownCamper]: undefined,
+      [Theme.haymarket]: undefined,
+      [Theme.scandicGo]: undefined,
+      [Theme.grandHotel]: undefined,
+      [Theme.hotelNorge]: undefined,
+      [Theme.marski]: undefined,
+      [Theme.theDock]: undefined,
+    },
+  },
+  compoundVariants: [
+    {
+      hotelTheme: Theme.scandic,
+      topTitleAngled: true,
+      class: styles['top-title-angled'],
+    },
+  ],
+  defaultVariants: {
+    theme: variantKeys.theme['Primary 1'],
+    height: variantKeys.height.fixed,
+    topTitleAngled: false,
+    hotelTheme: DEFAULT_THEME,
+  },
+}
+
+export const infoCardVariants = cva(styles.infoCard, infoCardConfig)