feat: add selected room card

components/HotelReservation/EnterDetails/SelectedRoom/index.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { EditIcon, ImageIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./selectedRoom.module.css"
+
+export default function SelectedRoom() {
+  const intl = useIntl()
+  return (
+    <article className={styles.container}>
+      <div className={styles.tempImage}>
+        <ImageIcon
+          color="baseButtonTertiaryOnFillNormal"
+          height={60}
+          width={60}
+        />
+      </div>
+      <div className={styles.content}>
+        <div className={styles.textContainer}>
+          <Footnote
+            className={styles.label}
+            color="uiTextPlaceholder"
+            textTransform="uppercase"
+          >
+            {intl.formatMessage({ id: "Your room" })}
+          </Footnote>
+          <div className={styles.text}>
+            {/**
+             * [TEMP]
+             * No translation on Subtitles as they will be derived
+             * from Room selection.
+             */}
+            <Subtitle
+              className={styles.room}
+              color="uiTextHighContrast"
+              type="two"
+            >
+              Cozy cabin
+            </Subtitle>
+            <Subtitle
+              className={styles.invertFontWeight}
+              color="uiTextMediumContrast"
+              type="two"
+            >
+              Free rebooking
+            </Subtitle>
+            <Subtitle
+              className={styles.invertFontWeight}
+              color="uiTextMediumContrast"
+              type="two"
+            >
+              Pay now
+            </Subtitle>
+          </div>
+        </div>
+        <Button
+          asChild
+          intent="tertiary"
+          size="small"
+          theme="base"
+          variant="icon"
+        >
+          <Link href="#">
+            <EditIcon color="baseButtonTertiaryOnFillNormal" />
+            {intl.formatMessage({ id: "Modify" })}
+          </Link>
+        </Button>
+      </div>
+    </article>
+  )
+}

components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css

@@ -0,0 +1,51 @@
+.container {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-Large);
+  display: grid;
+  grid-template-columns: 144px 1fr;
+  gap: var(--Spacing-x3);
+  padding: var(--Spacing-x2) var(--Spacing-x4) var(--Spacing-x2)
+    var(--Spacing-x2);
+}
+
+.tempImage {
+  align-items: center;
+  background-color: lightgray;
+  border-radius: var(--Corner-radius-Medium);
+  display: flex;
+  height: auto;
+  justify-content: center;
+  min-height: 80px;
+}
+
+.content {
+  align-items: center;
+  display: grid;
+  gap: var(--Spacing-x3);
+  grid-template-columns: 1fr auto;
+}
+
+.textContainer {
+  display: grid;
+}
+
+.label {
+  grid-column: 1 / -1;
+}
+
+.text {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--Spacing-x1);
+}
+
+p.invertFontWeight {
+  font-weight: 400;
+}
+
+.invertFontWeight:not(:last-of-type)::after,
+.room::after {
+  color: var(--UI-Text-Medium-contrast);
+  content: "∙";
+  padding-left: var(--Spacing-x1);
+}

components/HotelReservation/HotelSelectionHeader/hotelSelectionHeader.module.css

@@ -1,10 +1,13 @@
 .hotelSelectionHeader {
-  display: flex;
-  flex-direction: column;
   background-color: var(--Base-Surface-Subtle-Normal);
   padding: var(--Spacing-x3) var(--Spacing-x2);
-  justify-content: center;
+}
+
+.hotelSelectionHeaderWrapper {
+  display: flex;
+  flex-direction: column;
   gap: var(--Spacing-x3);
+  justify-content: center;
 }
 
 .titleContainer {
@@ -33,9 +36,15 @@
 
 @media (min-width: 768px) {
   .hotelSelectionHeader {
-    flex-direction: row;
     padding: var(--Spacing-x4) var(--Spacing-x5);
+  }
+
+  .hotelSelectionHeaderWrapper {
+    flex-direction: row;
     gap: var(--Spacing-x6);
+    max-width: var(--max-width-navigation);
+    margin: 0 auto;
+    width: 100%;
   }
 
   .titleContainer > h1 {

components/HotelReservation/HotelSelectionHeader/index.tsx

@@ -19,35 +19,35 @@ export default function HotelSelectionHeader({
 
   return (
     <header className={styles.hotelSelectionHeader}>
-      <div className={styles.titleContainer}>
-        <Title as="h3" level="h1">
-          {hotel.name}
-        </Title>
-        <address className={styles.address}>
-          <Caption color="textMediumContrast">
-            {hotel.address.streetAddress}, {hotel.address.city}
-          </Caption>
-          <div>
-            <Divider variant="vertical" color="subtle" />
-          </div>
-          <Caption color="textMediumContrast">
-            {intl.formatMessage(
-              {
-                id: "Distance to city centre",
-              },
-              { number: hotel.location.distanceToCentre }
-            )}
-          </Caption>
-        </address>
-      </div>
-      <div className={styles.dividerContainer}>
-        <Divider variant="vertical" color="subtle" />
-      </div>
-      <div className={styles.descriptionContainer}>
-        <Body color="textHighContrast">
-          {hotel.hotelContent.texts.descriptions.short}
-        </Body>
-        <HotelDetailSidePeek />
+      <div className={styles.hotelSelectionHeaderWrapper}>
+        <div className={styles.titleContainer}>
+          <Title as="h3" level="h1">
+            {hotel.name}
+          </Title>
+          <address className={styles.address}>
+            <Caption color="textMediumContrast">
+              {hotel.address.streetAddress}, {hotel.address.city}
+            </Caption>
+            <div>
+              <Divider variant="vertical" color="subtle" />
+            </div>
+            <Caption color="textMediumContrast">
+              {intl.formatMessage(
+                { id: "Distance to city centre" },
+                { number: hotel.location.distanceToCentre }
+              )}
+            </Caption>
+          </address>
+        </div>
+        <div className={styles.dividerContainer}>
+          <Divider variant="vertical" color="subtle" />
+        </div>
+        <div className={styles.descriptionContainer}>
+          <Body color="textHighContrast">
+            {hotel.hotelContent.texts.descriptions.short}
+          </Body>
+          <HotelDetailSidePeek />
+        </div>
       </div>
     </header>
   )

components/HotelReservation/SelectRate/Payment/index.tsx

@@ -129,7 +129,7 @@ export default function Payment({ hotel }: PaymentProps) {
               name="payment-method"
               id="card"
               value="card"
-              checked={selectedPaymentMethod === "card"}
+              defaultChecked={selectedPaymentMethod === "card"}
             />
             <label htmlFor="card">card</label>
           </button>
@@ -145,7 +145,7 @@ export default function Payment({ hotel }: PaymentProps) {
                   name="payment-method"
                   id={paymentOption}
                   value={paymentOption}
-                  checked={selectedPaymentMethod === paymentOption}
+                  defaultChecked={selectedPaymentMethod === paymentOption}
                 />
                 <label htmlFor={paymentOption}>{paymentOption}</label>
               </button>

components/HotelReservation/SelectRate/SectionAccordion/sectionAccordion.module.css

@@ -40,7 +40,7 @@
 .iconWrapper {
   position: relative;
   top: var(--Spacing-x1);
-  z-index: 10;
+  z-index: 2;
 }
 
 .circle {

components/Icons/icon.module.css

@@ -66,3 +66,8 @@
 .blue * {
   fill: var(--UI-Input-Controls-Fill-Selected);
 }
+
+.baseButtonTertiaryOnFillNormal,
+.baseButtonTertiaryOnFillNormal * {
+  fill: var(--Base-Button-Tertiary-On-Fill-Normal);
+}

components/Icons/variants.ts

@@ -5,19 +5,20 @@ import styles from "./icon.module.css"
 const config = {
   variants: {
     color: {
+      baseButtonTertiaryOnFillNormal: styles.baseButtonTertiaryOnFillNormal,
       baseIconLowContrast: styles.baseIconLowContrast,
       black: styles.black,
+      blue: styles.blue,
       burgundy: styles.burgundy,
+      green: styles.green,
       grey80: styles.grey80,
       pale: styles.pale,
       peach80: styles.peach80,
       primaryLightOnSurfaceAccent: styles.plosa,
       red: styles.red,
-      green: styles.green,
       white: styles.white,
       uiTextHighContrast: styles.uiTextHighContrast,
       uiTextMediumContrast: styles.uiTextMediumContrast,
-      blue: styles.blue,
     },
   },
   defaultVariants: {

components/Lightbox/FullView.tsx

@@ -49,10 +49,10 @@ export default function FullView({
             className={styles.fullViewImage}
           >
             <Image
-              src={image.url}
               alt={image.alt}
-              layout="fill"
-              objectFit="cover"
+              fill
+              src={image.url}
+              style={{ objectFit: "cover" }}
             />
 
             <div className={styles.fullViewFooter}>

components/TempDesignSystem/Button/button.module.css

@@ -64,10 +64,10 @@ a.default {
   justify-content: center;
 }
 
-.icon {
+.btn.icon:is(.small, .medium, .large) {
   align-items: center;
   display: flex;
-  gap: var(--Spacing-x-half);
+  gap: var(--Spacing-x1);
   justify-content: center;
 }
 
@@ -76,7 +76,8 @@ a.default {
   font-size: var(--typography-Caption-Bold-fontSize);
   line-height: var(--typography-Caption-Bold-lineHeight);
   gap: var(--Spacing-x-quarter);
-  padding: calc(var(--Spacing-x1) + 2px) var(--Spacing-x2); /* Special case padding to adjust the missing border */
+  padding: calc(var(--Spacing-x1) + 2px) var(--Spacing-x2);
+  /* Special case padding to adjust the missing border */
 }
 
 .btn.small.secondary {
@@ -85,7 +86,8 @@ a.default {
 
 .btn.medium {
   gap: var(--Spacing-x-half);
-  padding: calc(var(--Spacing-x-one-and-half) + 2px) var(--Spacing-x2); /* Special case padding to adjust the missing border */
+  padding: calc(var(--Spacing-x-one-and-half) + 2px) var(--Spacing-x2);
+  /* Special case padding to adjust the missing border */
 }
 
 .medium.secondary {
@@ -94,7 +96,8 @@ a.default {
 
 .btn.large {
   gap: var(--Spacing-x-half);
-  padding: calc(var(--Spacing-x2) + 2px) var(--Spacing-x3); /* Special case padding to adjust the missing border */
+  padding: calc(var(--Spacing-x2) + 2px) var(--Spacing-x3);
+  /* Special case padding to adjust the missing border */
 }
 
 .large.secondary {

components/TempDesignSystem/Text/Subtitle/subtitle.module.css

@@ -10,7 +10,7 @@
     0.3vw + 15px,
     var(--typography-Subtitle-1-Desktop-fontSize)
   );
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: var(--typography-Subtitle-1-letterSpacing);
   line-height: var(--typography-Subtitle-1-lineHeight);
 }
@@ -22,7 +22,7 @@
     0.3vw + 15px,
     var(--typography-Subtitle-2-Desktop-fontSize)
   );
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: var(--typography-Subtitle-2-letterSpacing);
   line-height: var(--typography-Subtitle-2-lineHeight);
 }
@@ -62,3 +62,7 @@
 .uiTextHighContrast {
   color: var(--UI-Text-High-contrast);
 }
+
+.uiTextMediumContrast {
+  color: var(--UI-Text-Medium-contrast);
+}

components/TempDesignSystem/Text/Subtitle/variants.ts

@@ -9,6 +9,7 @@ const config = {
       burgundy: styles.burgundy,
       pale: styles.pale,
       uiTextHighContrast: styles.uiTextHighContrast,
+      uiTextMediumContrast: styles.uiTextMediumContrast,
     },
     textAlign: {
       center: styles.center,