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/InfoCard.tsx
+++ b/packages/design-system/lib/components/InfoCard/InfoCard.tsx
@@ -0,0 +1,100 @@
+import ButtonLink from '../ButtonLink'
+import Image from '../Image'
+import { Typography } from '../Typography'
+
+import { getButtonProps } from './utils'
+
+import { infoCardVariants } from './variants'
+
+import styles from './infoCard.module.css'
+
+import ImageFallback from '../ImageFallback'
+import type { InfoCardProps } from './types'
+
+export function InfoCard({
+  primaryButton,
+  secondaryButton,
+  topTitle,
+  heading,
+  bodyText,
+  className,
+  theme,
+  height,
+  backgroundImage,
+  topTitleAngled,
+  hotelTheme,
+}: InfoCardProps) {
+  const classNames = infoCardVariants({
+    theme,
+    hotelTheme,
+    topTitleAngled,
+    height,
+    className,
+  })
+  const buttonProps = getButtonProps(theme, hotelTheme)
+
+  return (
+    <div className={classNames}>
+      {theme === 'Image' ? (
+        <div className={styles.backgroundImageWrapper}>
+          {backgroundImage ? (
+            <Image
+              src={backgroundImage.src}
+              className={styles.backgroundImage}
+              alt={backgroundImage.alt ?? ''}
+              fill
+              sizes="(min-width: 1367px) 700px, 900px"
+              focalPoint={backgroundImage.focalPoint}
+              dimensions={backgroundImage.dimensions}
+            />
+          ) : (
+            <ImageFallback className={styles.backgroundImage} />
+          )}
+        </div>
+      ) : null}
+      <div className={styles.content}>
+        <div className={styles.titleWrapper}>
+          {topTitle ? (
+            <Typography variant="Title/Decorative/md">
+              <span className={styles.topTitle}>{topTitle}</span>
+            </Typography>
+          ) : null}
+          <Typography variant="Title/smLowCase">
+            <h3 className={styles.heading}>{heading}</h3>
+          </Typography>
+        </div>
+        {bodyText ? (
+          <Typography variant="Body/Paragraph/mdRegular">
+            <p className={styles.bodyText}>{bodyText}</p>
+          </Typography>
+        ) : null}
+        <div className={styles.buttonContainer}>
+          {primaryButton ? (
+            <ButtonLink
+              size="Small"
+              href={primaryButton.href}
+              typography="Body/Supporting text (caption)/smBold"
+              onClick={primaryButton.onClick}
+              scroll={primaryButton.scrollOnClick ?? false}
+              {...buttonProps.primaryButton}
+            >
+              {primaryButton.text}
+            </ButtonLink>
+          ) : null}
+          {secondaryButton ? (
+            <ButtonLink
+              size="Small"
+              href={secondaryButton.href}
+              typography="Body/Supporting text (caption)/smBold"
+              onClick={secondaryButton.onClick}
+              scroll={secondaryButton.scrollOnClick ?? false}
+              {...buttonProps.secondaryButton}
+            >
+              {secondaryButton.text}
+            </ButtonLink>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}