Merged in feat/SW-1276-implement-design (pull request #1348)

Feat/SW-1276 implement design * feat(SW-1276) UI implementation Desktop part 1 for MyStay * feat(SW-1276) UI implementation Desktop part 2 for MyStay * feat(SW-1276) UI implementation Mobile part 1 for MyStay * refactor: move files from MyStay/MyStay to MyStay * feat(SW-1276) Sidepeek implementation * feat(SW-1276): Refactoring * feat(SW-1276) UI implementation Mobile part 2 for MyStay * feat(SW-1276): translations * feat(SW-1276) fixed skeleton * feat(SW-1276): Added missing translations * feat(SW-1276): Removed console log * feat(SW-1276) fixed translations * feat(SW-1276): Added translations * feat(SW-1276) fix dynamic ID:s * feat(SW-1276) removed createElement * feat(SW-1276): Fixed build errors * feat(SW-1276): Updated label * feat(SW-1276): Rewrite SummaryCard Approved-by: Niclas Edenvin
2025-02-18 14:20:54 +00:00
parent 90fee1b0c4
commit 8616e4ab76
56 changed files with 4163 additions and 227 deletions
--- a/components/HotelReservation/MyStay/Ancillaries/ancillaries.module.css
+++ b/components/HotelReservation/MyStay/Ancillaries/ancillaries.module.css
@@ -0,0 +1,87 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
+.title {
+  display: flex;
+  justify-content: space-between;
+}
+
+.modalContent {
+  width: 100%;
+}
+
+.tabs {
+  display: flex;
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x3) 0;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(251px, 1fr));
+  gap: var(--Spacing-x2);
+  max-height: 417px;
+  overflow-y: auto;
+  padding-right: var(--Spacing-x1);
+  margin-top: var(--Spacing-x2);
+}
+
+.chip {
+  border-radius: 28px;
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  border: none;
+  cursor: pointer;
+  background: var(--Base-Surface-Subtle-Normal);
+}
+
+.chip.selected {
+  background: var(--Base-Text-High-contrast);
+}
+
+.ancillaries {
+  display: none;
+}
+
+.modal {
+  display: none;
+}
+
+.carouselContainer {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 80%;
+  gap: var(--Spacing-x2);
+}
+
+@media screen and (min-width: 768px) {
+  .modalContent {
+    width: 600px;
+  }
+
+  .carouselContainer {
+    grid-auto-columns: calc((100% - var(--Spacing-x3)) / 2);
+  }
+}
+
+@media screen and (min-width: 1052px) {
+  .mobileAncillaries {
+    display: none;
+  }
+  .modalContent {
+    width: 833px;
+  }
+
+  .ancillaries {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(251px, 1fr));
+    gap: var(--Spacing-x2);
+  }
+
+  .modal {
+    display: block;
+  }
+}