feat: add basic styling to checkbox

app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.module.css

@@ -1,3 +1,10 @@
+.main {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(min-content, max-content));
+  padding: 32px 32px 0px 32px;
+  background-color: var(--Scandic-Brand-Warm-White);
+}
+
 .section {
   display: grid;
   gap: var(--Spacing-x4);

app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx

@@ -1,6 +1,7 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import HotelCard from "@/components/HotelReservation/HotelCard"
+import HotelFilter from "@/components/HotelReservation/SelectHotel/HotelFilter"
 
 import styles from "./page.module.css"
 
@@ -17,7 +18,8 @@ export default async function SelectHotelPage({
   const hotels = [attributes]
 
   return (
-    <main>
+    <main className={styles.main}>
+      <HotelFilter />
       <section className={styles.section}>
         {hotels.map((hotel) => (
           <HotelCard key={hotel.name} hotel={hotel} />

components/HotelReservation/HotelCard/index.tsx

@@ -2,7 +2,6 @@ import { ScandicLogoIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Chip from "@/components/TempDesignSystem/Chip"
-import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 

components/HotelReservation/SelectHotel/HotelFilter/hotelFilter.module.css

@@ -0,0 +1,39 @@
+.container {
+  min-width: 272px;
+}
+
+.facilities {
+  flex-direction: column;
+  font-family: var(--typography-Body-Bold-fontFamily);
+  margin: var(--Spacing-x3) 0;
+}
+
+.filter {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(min-content, max-content));
+  gap: var(--Spacing-x-one-and-half);
+  align-items: center;
+}
+
+.filter:first-child {
+  margin-top: var(--Spacing-x1);
+}
+
+.filter input[type="checkbox"] {
+  appearance: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0;
+  background-color: var(--Base-Surface-Primary-Normal);
+  border: 1px solid var(--Scandic-Brand-Pale-Peach);
+  border-radius: var(--Corner-radius-Small);
+  overflow: hidden;
+}
+
+.filter input[type="checkbox"]::before {
+  visibility: hidden;
+}
+
+.filter input[type="checkbox"]:checked::before {
+  visibility: visible;
+}

components/HotelReservation/SelectHotel/HotelFilter/index.tsx

@@ -0,0 +1,22 @@
+import { getIntl } from "@/i18n"
+
+import styles from "./hotelFilter.module.css"
+
+export default async function HotelFilter() {
+  const { formatMessage } = await getIntl()
+  return (
+    <aside className={styles.container}>
+      <div className={styles.facilities}>
+        {formatMessage({ id: "Room facilities" })}
+        <div className={styles.filter}>
+          <input id="balcony" name="balcony" type="checkbox" />
+          <label htmlFor="balcony">Balcony</label>
+        </div>
+      </div>
+      <div className={styles.facilities}>
+        {formatMessage({ id: "Hotel facilities" })}
+        <div className={styles.filter}></div>
+      </div>
+    </aside>
+  )
+}

i18n/dictionaries/da.json

@@ -123,5 +123,7 @@
   "You have no upcoming stays.": "Du har ingen kommende ophold.",
   "Your Challenges Conquer & Earn!": "Dine udfordringer Overvind og tjen!",
   "Your level": "Dit niveau",
-  "Zip code": "Postnummer"
+  "Zip code": "Postnummer",
+  "Room facilities": "Værelsesfaciliteter",
+  "Hotel facilities": "Hotel faciliteter"
 }

i18n/dictionaries/de.json

@@ -123,5 +123,7 @@
   "You have no upcoming stays.": "Sie haben keine bevorstehenden Aufenthalte.",
   "Your Challenges Conquer & Earn!": "Meistern Sie Ihre Herausforderungen und verdienen Sie Geld!",
   "Your level": "Dein level",
-  "Zip code": "PLZ"
+  "Zip code": "PLZ",
+  "Room facilities": "Zimmerausstattung",
+  "Hotel facilities": "Hotel-Infos"
 }

i18n/dictionaries/en.json

@@ -128,5 +128,7 @@
   "You have no upcoming stays.": "You have no upcoming stays.",
   "Your Challenges Conquer & Earn!": "Your Challenges Conquer & Earn!",
   "Your level": "Your level",
-  "Zip code": "Zip code"
+  "Zip code": "Zip code",
+  "Room facilities": "Room facilities",
+  "Hotel facilities": "Hotel facilities"
 }

i18n/dictionaries/fi.json

@@ -123,5 +123,7 @@
   "You have no upcoming stays.": "Sinulla ei ole tulevia oleskeluja.",
   "Your Challenges Conquer & Earn!": "Voita ja ansaitse haasteesi!",
   "Your level": "Tasosi",
-  "Zip code": "Postinumero"
+  "Zip code": "Postinumero",
+  "Room facilities": "Huoneen varustelu",
+  "Hotel facilities": "Hotellin palvelut"
 }

i18n/dictionaries/no.json

@@ -123,5 +123,7 @@
   "You have no upcoming stays.": "Du har ingen kommende opphold.",
   "Your Challenges Conquer & Earn!": "Dine utfordringer Erobre og tjen!",
   "Your level": "Ditt nivå",
-  "Zip code": "Post kode"
+  "Zip code": "Post kode",
+  "Room facilities": "Romfasiliteter",
+  "Hotel facilities": "Hotelfaciliteter"
 }

i18n/dictionaries/sv.json

@@ -126,5 +126,7 @@
   "You have no upcoming stays.": "Du har inga kommande vistelser.",
   "Your Challenges Conquer & Earn!": "Dina utmaningar Erövra och tjäna!",
   "Your level": "Din nivå",
-  "Zip code": "Postnummer"
+  "Zip code": "Postnummer",
+  "Room facilities": "Rumlfaciliteter",
+  "Hotel facilities": "Hotellfaciliteter"
 }