Merged in feat/LOY-421-Next-Stay (pull request #3026)

Feat(LOY-421): Next Stay * feat(LOY-421): Next stay WIP * fix(LOY-421): clean upp css and jsx * chore(LOY-421): css cleanup * fix(LOY-421): fix test * only show button if isWebAppOrigin is true * chore(LOY-421): update section header component * chore(LOY-421): remove redundant test case Approved-by: Matilda Landström
2025-11-05 09:09:57 +00:00
parent 3a38e99a71
commit 94f6af563d
9 changed files with 678 additions and 0 deletions
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/NextStay/nextStay.module.css
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/NextStay/nextStay.module.css
@@ -0,0 +1,167 @@
+.nextStayCard {
+  border-radius: var(--Corner-radius-lg);
+  border: 1px solid var(--Border-Default);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background: var(--Base-Surface-Primary-light-Normal);
+}
+
+.imageContainer {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16/9;
+  border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
+  background:
+    linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%),
+    lightgray 50% / cover no-repeat,
+    var(--Neutral-20);
+  overflow: hidden;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  position: relative;
+  z-index: 1;
+}
+
+.imageOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.1) 0%,
+    rgba(0, 0, 0, 0.3) 50%,
+    rgba(0, 0, 0, 0.6) 100%
+  );
+  display: flex;
+  padding: 1.5rem;
+  z-index: 2;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.overlayText {
+  color: white;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.content {
+  padding: var(--Space-x3);
+  display: grid;
+  grid-template-areas:
+    "header"
+    "."
+    "booking"
+    "."
+    "actions";
+  grid-template-rows:
+    auto var(--Space-x3)
+    auto var(--Space-x2)
+    auto;
+}
+
+.header {
+  grid-area: header;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x1);
+}
+
+.daysUntil,
+.address {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x15);
+}
+
+.daysUntil {
+  color: var(--Text-Heading);
+}
+
+.address {
+  color: var(--Text-Accent-Primary);
+}
+
+.daysUntilIcon,
+.addressIcon {
+  display: flex;
+  align-items: center;
+}
+
+.booking {
+  grid-area: booking;
+  display: grid;
+  gap: var(--Space-x1);
+}
+
+.bookingInfo {
+  display: flex;
+  justify-content: space-between;
+}
+
+.bookingInfo span:first-child {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x05);
+}
+
+.fromToDates {
+  display: flex;
+  gap: var(--Space-x05);
+}
+
+.actions {
+  grid-area: actions;
+}
+
+@media (min-width: 768px) {
+  .nextStayCard {
+    max-width: 100%;
+  }
+
+  .imageContainer {
+    aspect-ratio: 21/9;
+  }
+
+  .imageOverlay {
+    padding: 2rem;
+  }
+}
+
+@media (min-width: 1367px) {
+  .nextStayCard {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: stretch;
+  }
+
+  .imageContainer {
+    flex: 1;
+    aspect-ratio: 16/9;
+    width: 100%;
+    border-radius: var(--Corner-radius-lg) 0 0 var(--Corner-radius-lg);
+  }
+
+  .content {
+    width: 100%;
+    padding: var(--Space-x4);
+    grid-template-areas:
+      "header"
+      "."
+      "booking"
+      "."
+      "actions";
+    grid-template-rows:
+      auto var(--Space-x6)
+      auto var(--Space-x3)
+      auto;
+  }
+}