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

Approved-by: Bianca Widstam
2025-11-04 07:39:33 +00:00
parent 10bf4d08d9
commit 4491d1de8e
27 changed files with 1119 additions and 663 deletions
--- a/packages/design-system/lib/components/InfoCard/utils.ts
+++ b/packages/design-system/lib/components/InfoCard/utils.ts
@@ -0,0 +1,166 @@
+import type { VariantProps } from 'class-variance-authority'
+
+import { Theme } from '@scandic-hotels/common/utils/theme'
+import type { variants as buttonVariants } from '../Button/variants'
+import type { infoCardVariants } from './variants'
+
+type ButtonVariants = VariantProps<typeof buttonVariants>
+type InfoCardButtonProps = {
+  primaryButton: {
+    variant: ButtonVariants['variant']
+    color: ButtonVariants['color']
+  }
+  secondaryButton: {
+    variant: ButtonVariants['variant']
+    color: ButtonVariants['color']
+  }
+}
+
+const PRIMARY = { variant: 'Primary', color: 'Primary' } as const
+const PRIMARY_INVERTED = { variant: 'Primary', color: 'Inverted' } as const
+const SECONDARY = { variant: 'Secondary', color: 'Primary' } as const
+const SECONDARY_INVERTED = { variant: 'Secondary', color: 'Inverted' } as const
+const TERTIARY = { variant: 'Tertiary', color: 'Primary' } as const
+
+// Determine button variant and color based on card theme and hotel theme.
+// This is done to avoid low contrast issues and conflicting colors in
+// certain combinations and according to design guidelines.
+export function getButtonProps(
+  cardTheme: VariantProps<typeof infoCardVariants>['theme'],
+  hotelTheme: Theme | null = Theme.scandic
+): InfoCardButtonProps {
+  let buttonProps: InfoCardButtonProps = {
+    primaryButton: TERTIARY,
+    secondaryButton: SECONDARY,
+  }
+
+  // Image theme always uses inverted buttons, regardless of hotel theme
+  if (cardTheme === 'Image') {
+    return {
+      primaryButton: PRIMARY_INVERTED,
+      secondaryButton: SECONDARY_INVERTED,
+    }
+  }
+
+  switch (hotelTheme) {
+    case Theme.scandic:
+      if (cardTheme === 'Primary 2' || cardTheme === 'Primary 3') {
+        buttonProps = {
+          primaryButton: PRIMARY_INVERTED,
+          secondaryButton: SECONDARY_INVERTED,
+        }
+      }
+      break
+    case Theme.downtownCamper:
+      if (
+        cardTheme === 'Primary 1' ||
+        cardTheme === 'Primary 2' ||
+        cardTheme === 'Primary 3' ||
+        cardTheme === 'Accent'
+      ) {
+        buttonProps = {
+          primaryButton: PRIMARY_INVERTED,
+          secondaryButton: SECONDARY_INVERTED,
+        }
+      }
+      break
+    case Theme.haymarket:
+      if (cardTheme === 'Primary 1' || cardTheme === 'White') {
+        buttonProps = {
+          primaryButton: PRIMARY,
+          secondaryButton: SECONDARY,
+        }
+      } else if (
+        cardTheme === 'Primary 2' ||
+        cardTheme === 'Primary 3' ||
+        cardTheme === 'Accent'
+      ) {
+        buttonProps = {
+          primaryButton: PRIMARY_INVERTED,
+          secondaryButton: SECONDARY_INVERTED,
+        }
+      }
+      break
+    case Theme.scandicGo:
+      if (cardTheme === 'Primary 1' || cardTheme === 'Primary 2') {
+        buttonProps = {
+          primaryButton: PRIMARY_INVERTED,
+          secondaryButton: SECONDARY_INVERTED,
+        }
+      }
+      break
+    case Theme.grandHotel:
+      if (
+        cardTheme === 'Primary 2' ||
+        cardTheme === 'Primary 3' ||
+        cardTheme === 'Accent' ||
+        cardTheme === 'White'
+      ) {
+        buttonProps = {
+          primaryButton: PRIMARY,
+          secondaryButton: SECONDARY,
+        }
+      } else if (cardTheme === 'Primary 1') {
+        buttonProps = {
+          primaryButton: PRIMARY_INVERTED,
+          secondaryButton: SECONDARY_INVERTED,
+        }
+      }
+      break
+    case Theme.hotelNorge:
+      if (
+        cardTheme === 'Primary 1' ||
+        cardTheme === 'Primary 2' ||
+        cardTheme === 'Primary 3'
+      ) {
+        buttonProps = {
+          primaryButton: PRIMARY_INVERTED,
+          secondaryButton: SECONDARY_INVERTED,
+        }
+      }
+      break
+    case Theme.marski:
+      if (cardTheme === 'Primary 1') {
+        buttonProps = {
+          primaryButton: TERTIARY,
+          secondaryButton: SECONDARY_INVERTED,
+        }
+      } else if (cardTheme === 'White') {
+        buttonProps = {
+          primaryButton: PRIMARY,
+          secondaryButton: SECONDARY,
+        }
+      } else if (
+        cardTheme === 'Primary 2' ||
+        cardTheme === 'Primary 3' ||
+        cardTheme === 'Accent'
+      ) {
+        buttonProps = {
+          primaryButton: PRIMARY_INVERTED,
+          secondaryButton: SECONDARY_INVERTED,
+        }
+      }
+      break
+    case Theme.theDock:
+      if (
+        cardTheme === 'Primary 1' ||
+        cardTheme === 'Accent' ||
+        cardTheme === 'White'
+      ) {
+        buttonProps = {
+          primaryButton: PRIMARY,
+          secondaryButton: SECONDARY,
+        }
+      } else if (cardTheme === 'Primary 2' || cardTheme === 'Primary 3') {
+        buttonProps = {
+          primaryButton: PRIMARY_INVERTED,
+          secondaryButton: SECONDARY_INVERTED,
+        }
+      }
+      break
+    default:
+      break
+  }
+
+  return buttonProps
+}