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.module.css
+++ b/packages/design-system/lib/components/InfoCard/infoCard.module.css
@@ -0,0 +1,130 @@
+.infoCard {
+  --background-color: var(--Surface-Brand-Primary-1-Default);
+  --topTitle-color: var(--Text-Brand-OnPrimary-1-Accent);
+  --heading-color: var(--Text-Brand-OnPrimary-1-Heading);
+  --text-color: var(--Text-Brand-OnPrimary-1-Default);
+  position: relative;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--Corner-radius-md);
+  text-align: center;
+  width: 100%;
+  text-wrap: balance;
+  overflow: hidden;
+  background-color: var(--background-color);
+  z-index: 0;
+}
+
+.height-fixed {
+  height: 320px;
+}
+
+.height-dynamic {
+  height: 100%;
+}
+
+.theme-primary-1 {
+  --background-color: var(--Surface-Brand-Primary-1-Default);
+  --topTitle-color: var(--Text-Brand-OnPrimary-1-Accent);
+  --heading-color: var(--Text-Brand-OnPrimary-1-Heading);
+  --text-color: var(--Text-Brand-OnPrimary-1-Default);
+}
+.theme-primary-2 {
+  --background-color: var(--Surface-Brand-Primary-2-Default);
+  --topTitle-color: var(--Text-Brand-OnPrimary-2-Accent);
+  --heading-color: var(--Text-Brand-OnPrimary-2-Heading);
+  --text-color: var(--Text-Brand-OnPrimary-2-Default);
+}
+.theme-primary-3 {
+  --background-color: var(--Surface-Brand-Primary-3-Default);
+  --topTitle-color: var(--Text-Brand-OnPrimary-3-Accent);
+  --heading-color: var(--Text-Brand-OnPrimary-3-Heading);
+  --text-color: var(--Text-Brand-OnPrimary-3-Default);
+}
+.theme-accent {
+  --background-color: var(--Surface-Brand-Accent-Default);
+  --topTitle-color: var(--Text-Brand-OnAccent-Accent);
+  --heading-color: var(--Text-Brand-OnAccent-Heading);
+  --text-color: var(--Text-Brand-OnAccent-Default);
+}
+.theme-white {
+  --background-color: var(--Surface-Primary-Default);
+  --topTitle-color: var(--Text-Accent-Primary);
+  --heading-color: var(--Text-Heading);
+  --text-color: var(--Text-Default);
+}
+.theme-image {
+  --background-color: transparent;
+  --topTitle-color: var(--Text-Inverted);
+  --heading-color: var(--Text-Inverted);
+  --text-color: var(--Text-Inverted);
+}
+
+.titleWrapper {
+  display: grid;
+  gap: var(--Space-x1);
+  justify-items: center;
+}
+
+.topTitle {
+  color: var(--topTitle-color);
+}
+
+.top-title-angled .topTitle {
+  transform: rotate(-3deg);
+  transform-origin: left;
+}
+
+.heading {
+  color: var(--heading-color);
+}
+
+.bodyText {
+  color: var(--text-color);
+}
+
+.backgroundImageWrapper {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  z-index: -1;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0.36) 50%,
+      rgba(0, 0, 0, 0.75) 100%
+    );
+  }
+}
+
+.backgroundImage {
+  object-fit: cover;
+  width: 100%;
+  height: min(100%, 320px);
+}
+
+.content {
+  display: grid;
+  max-width: 800px;
+  padding: var(--Space-x4) var(--Space-x3);
+  gap: var(--Space-x2);
+}
+
+.buttonContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--Space-x1);
+  align-items: center;
+  justify-content: center;
+
+  .primaryButton,
+  .secondaryButton {
+    flex-shrink: 0;
+  }
+}