Merged in feat/SW-903-breadcrumbs-select-hotel (pull request #924)

Feat/SW-903 breadcrumbs select hotel

* feat(SW-903): break out breadcrumbs component and add on select-hotel page

* feat(903): updated paths

* feat(903): fix padding and remove translations

* feat(903): fix type

* feat(903): refactor padding

* feat(903): refactor padding again

* feat(903): refactor

* feat(903): fix comments

* feat(903): rename content breadcrumbs back


Approved-by: Pontus Dreij
Approved-by: Erik Tiekstra

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx

@@ -1,7 +1,7 @@
 import { Suspense } from "react"
 
 import Breadcrumbs from "@/components/Breadcrumbs"
-import BreadcrumbsSkeleton from "@/components/Breadcrumbs/BreadcrumbsSkeleton"
+import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 import { setLang } from "@/i18n/serverContext"
 
 import { LangParams, PageArgs } from "@/types/params"

app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx

@@ -1,7 +1,7 @@
 import { Suspense } from "react"
 
 import Breadcrumbs from "@/components/Breadcrumbs"
-import BreadcrumbsSkeleton from "@/components/Breadcrumbs/BreadcrumbsSkeleton"
+import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 import { setLang } from "@/i18n/serverContext"
 
 import { LangParams, PageArgs } from "@/types/params"

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

@@ -14,6 +14,10 @@
   padding: var(--Spacing-x3) var(--Spacing-x2) 0 var(--Spacing-x2);
 }
 
+.header nav {
+  display: none;
+}
+
 .cityInformation {
   display: flex;
   flex-wrap: wrap;
@@ -65,13 +69,19 @@
       var(--Spacing-x5);
   }
 
+  .header nav {
+    display: block;
+    max-width: var(--max-width-navigation);
+    padding-left: 0;
+  }
+
   .sorter {
     display: block;
     width: 339px;
   }
 
   .title {
-    margin: 0 auto;
+    margin: var(--Spacing-x3) auto 0;
     display: flex;
     max-width: var(--max-width-navigation);
     align-items: center;

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

@@ -1,6 +1,10 @@
 import { notFound } from "next/navigation"
+import { Suspense } from "react"
 
-import { selectHotelMap } from "@/constants/routes/hotelReservation"
+import {
+  selectHotel,
+  selectHotelMap,
+} from "@/constants/routes/hotelReservation"
 import { getLocations } from "@/lib/trpc/memoizedRequests"
 
 import {
@@ -19,6 +23,8 @@ import {
 import { ChevronRightIcon } from "@/components/Icons"
 import StaticMap from "@/components/Maps/StaticMap"
 import Alert from "@/components/TempDesignSystem/Alert"
+import Breadcrumbs from "@/components/TempDesignSystem/Breadcrumbs"
+import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -65,12 +71,36 @@ export default async function SelectHotelPage({
   })
 
   const filterList = getFiltersFromHotels(hotels)
+  const breadcrumbs = [
+    {
+      title: intl.formatMessage({ id: "Home" }),
+      href: `/${params.lang}`,
+      uid: "home-page",
+    },
+    {
+      title: intl.formatMessage({ id: "Hotel reservation" }),
+      href: `/${params.lang}/hotelreservation`,
+      uid: "hotel-reservation",
+    },
+    {
+      title: intl.formatMessage({ id: "Select hotel" }),
+      href: `${selectHotel(params.lang)}/?${selectHotelParams}`,
+      uid: "select-hotel",
+    },
+    {
+      title: city.name,
+      uid: city.id,
+    },
+  ]
 
   const isAllUnavailable = hotels.every((hotel) => hotel.price === undefined)
 
   return (
     <>
       <header className={styles.header}>
+        <Suspense fallback={<BreadcrumbsSkeleton />}>
+          <Breadcrumbs breadcrumbs={breadcrumbs} />
+        </Suspense>
         <div className={styles.title}>
           <div className={styles.cityInformation}>
             <Subtitle>{city.name}</Subtitle>

components/Breadcrumbs/index.tsx

@@ -1,60 +1,13 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import { ChevronRightSmallIcon,HouseIcon } from "@/components/Icons"
+import BreadcrumbsComp from "@/components/TempDesignSystem/Breadcrumbs"
-import Link from "@/components/TempDesignSystem/Link"
-import Footnote from "@/components/TempDesignSystem/Text/Footnote"
-
-import styles from "./breadcrumbs.module.css"
 
 export default async function Breadcrumbs() {
   const breadcrumbs = await serverClient().contentstack.breadcrumbs.get()
+
   if (!breadcrumbs?.length) {
     return null
   }
 
-  const homeBreadcrumb = breadcrumbs.shift()
+  return <BreadcrumbsComp breadcrumbs={breadcrumbs} />
-  return (
-    <nav className={styles.breadcrumbs}>
-      <ul className={styles.list}>
-        {homeBreadcrumb ? (
-          <li className={styles.listItem}>
-            <Link
-              className={styles.homeLink}
-              color="peach80"
-              href={homeBreadcrumb.href!}
-              variant="breadcrumb"
-            >
-              <HouseIcon width={16} height={16} color="peach80" />
-            </Link>
-            <ChevronRightSmallIcon aria-hidden="true" color="peach80" />
-          </li>
-        ) : null}
-
-        {breadcrumbs.map((breadcrumb) => {
-          if (breadcrumb.href) {
-            return (
-              <li key={breadcrumb.uid} className={styles.listItem}>
-                <Link
-                  color="peach80"
-                  href={breadcrumb.href}
-                  variant="breadcrumb"
-                >
-                  {breadcrumb.title}
-                </Link>
-                <ChevronRightSmallIcon aria-hidden="true" color="peach80" />
-              </li>
-            )
-          }
-
-          return (
-            <li key={breadcrumb.uid} className={styles.listItem}>
-              <Footnote color="burgundy" type="bold">
-                {breadcrumb.title}
-              </Footnote>
-            </li>
-          )
-        })}
-      </ul>
-    </nav>
-  )
 }

components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton/index.tsx

@@ -1,8 +1,7 @@
 import { ChevronRightIcon, HouseIcon } from "@/components/Icons"
+import styles from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 
-import styles from "./breadcrumbs.module.css"
-
 export default function BreadcrumbsSkeleton() {
   return (
     <nav className={styles.breadcrumbs}>

components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css

@@ -1,8 +1,6 @@
 .breadcrumbs {
   display: block;
-  padding-left: var(--Spacing-x2);
+  padding: var(--Spacing-x2) var(--Spacing-x2) 0;
-  padding-right: var(--Spacing-x2);
-  padding-top: var(--Spacing-x2);
   max-width: var(--max-width);
   margin: 0 auto;
   width: 100%;

components/TempDesignSystem/Breadcrumbs/breadcrumbs.ts

@@ -0,0 +1,9 @@
+type Breadcrumb = {
+  title: string
+  uid: string
+  href?: string
+}
+
+export interface BreadcrumbsProps {
+  breadcrumbs: Breadcrumb[]
+}

components/TempDesignSystem/Breadcrumbs/index.tsx

@@ -0,0 +1,61 @@
+import { HouseIcon } from "@/components/Icons"
+import ChevronRightSmallIcon from "@/components/Icons/ChevronRightSmall"
+import Link from "@/components/TempDesignSystem/Link"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+
+import styles from "./breadcrumbs.module.css"
+
+import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
+
+export default function Breadcrumbs({ breadcrumbs }: BreadcrumbsProps) {
+  if (!breadcrumbs?.length) {
+    return null
+  }
+
+  const homeBreadcrumb = breadcrumbs.shift()
+  return (
+    <nav className={styles.breadcrumbs}>
+      <ul className={styles.list}>
+        {homeBreadcrumb ? (
+          <li className={styles.listItem}>
+            <Link
+              className={styles.homeLink}
+              color="peach80"
+              href={homeBreadcrumb.href!}
+              variant="breadcrumb"
+              aria-label={homeBreadcrumb.title}
+            >
+              <HouseIcon width={16} height={16} color="peach80" />
+            </Link>
+            <ChevronRightSmallIcon aria-hidden="true" color="peach80" />
+          </li>
+        ) : null}
+
+        {breadcrumbs.map((breadcrumb) => {
+          if (breadcrumb.href) {
+            return (
+              <li key={breadcrumb.uid} className={styles.listItem}>
+                <Link
+                  color="peach80"
+                  href={breadcrumb.href}
+                  variant="breadcrumb"
+                >
+                  {breadcrumb.title}
+                </Link>
+                <ChevronRightSmallIcon aria-hidden="true" color="peach80" />
+              </li>
+            )
+          }
+
+          return (
+            <li key={breadcrumb.uid} className={styles.listItem}>
+              <Footnote color="burgundy" type="bold">
+                {breadcrumb.title}
+              </Footnote>
+            </li>
+          )
+        })}
+      </ul>
+    </nav>
+  )
+}

i18n/dictionaries/da.json

@@ -150,9 +150,11 @@
   "Gym": "Fitnesscenter",
   "Hi": "Hei",
   "Highest level": "Højeste niveau",
+  "Home": "Hjem",
   "Hospital": "Hospital",
   "Hotel": "Hotel",
   "Hotel facilities": "Hotel faciliteter",
+  "Hotel reservation": "Hotel reservation",
   "Hotel surroundings": "Hotel omgivelser",
   "Hotel(s)": "{amount} {amount, plural, one {hotel} other {hoteller}}",
   "Hotels": "Hoteller",
@@ -325,6 +327,7 @@
   "Select country of residence": "Vælg bopælsland",
   "Select date of birth": "Vælg fødselsdato",
   "Select dates": "Vælg datoer",
+  "Select hotel": "Vælg hotel",
   "Select language": "Vælg sprog",
   "Select payment method": "Vælg betalingsmetode",
   "Select your language": "Vælg dit sprog",

i18n/dictionaries/de.json

@@ -150,9 +150,11 @@
   "Gym": "Fitnessstudio",
   "Hi": "Hallo",
   "Highest level": "Höchstes Level",
+  "Home": "Heim",
   "Hospital": "Krankenhaus",
   "Hotel": "Hotel",
   "Hotel facilities": "Hotel-Infos",
+  "Hotel reservation": "Hotelreservierung",
   "Hotel surroundings": "Umgebung des Hotels",
   "Hotel(s)": "{amount} {amount, plural, one {hotel} other {hotels}}",
   "Hotels": "Hotels",
@@ -324,6 +326,7 @@
   "Select country of residence": "Wählen Sie das Land Ihres Wohnsitzes aus",
   "Select date of birth": "Geburtsdatum auswählen",
   "Select dates": "Datum auswählen",
+  "Select hotel": "Hotel auswählen",
   "Select language": "Sprache auswählen",
   "Select payment method": "Zahlungsart auswählen",
   "Select your language": "Wählen Sie Ihre Sprache",

i18n/dictionaries/en.json

@@ -162,9 +162,11 @@
   "Gym": "Gym",
   "Hi": "Hi",
   "Highest level": "Highest level",
+  "Home": "Home",
   "Hospital": "Hospital",
   "Hotel": "Hotel",
   "Hotel facilities": "Hotel facilities",
+  "Hotel reservation": "Hotel reservation",
   "Hotel surroundings": "Hotel surroundings",
   "Hotel(s)": "{amount} {amount, plural, one {hotel} other {hotels}}",
   "Hotels": "Hotels",
@@ -354,6 +356,7 @@
   "Select country of residence": "Select country of residence",
   "Select date of birth": "Select date of birth",
   "Select dates": "Select dates",
+  "Select hotel": "Select hotel",
   "Select language": "Select language",
   "Select payment method": "Select payment method",
   "Select your language": "Select your language",

i18n/dictionaries/fi.json

@@ -150,9 +150,11 @@
   "Gym": "Kuntosali",
   "Hi": "Hi",
   "Highest level": "Korkein taso",
+  "Home": "Kotiin",
   "Hospital": "Sairaala",
   "Hotel": "Hotelli",
   "Hotel facilities": "Hotellin palvelut",
+  "Hotel reservation": "Hotellivaraukset",
   "Hotel surroundings": "Hotellin ympäristö",
   "Hotel(s)": "{amount} {amount, plural, one {hotelli} other {hotellit}}",
   "Hotels": "Hotellit",
@@ -326,6 +328,7 @@
   "Select country of residence": "Valitse asuinmaa",
   "Select date of birth": "Valitse syntymäaika",
   "Select dates": "Valitse päivämäärät",
+  "Select hotel": "Valitse hotelli",
   "Select language": "Valitse kieli",
   "Select payment method": "Valitse maksutapa",
   "Select your language": "Valitse kieli",

i18n/dictionaries/no.json

@@ -149,9 +149,11 @@
   "Gym": "Treningsstudio",
   "Hi": "Hei",
   "Highest level": "Høyeste nivå",
+  "Home": "Hjem",
   "Hospital": "Sykehus",
   "Hotel": "Hotel",
   "Hotel facilities": "Hotelfaciliteter",
+  "Hotel reservation": "Hotellreservasjon",
   "Hotel surroundings": "Hotellomgivelser",
   "Hotel(s)": "{amount} {amount, plural, one {hotell} other {hoteller}}",
   "Hotels": "Hoteller",
@@ -323,6 +325,7 @@
   "Select country of residence": "Velg bostedsland",
   "Select date of birth": "Velg fødselsdato",
   "Select dates": "Velg datoer",
+  "Select hotel": "Velg hotell",
   "Select language": "Velg språk",
   "Select payment method": "Velg betalingsmetode",
   "Select your language": "Velg språk",

i18n/dictionaries/sv.json

@@ -149,9 +149,11 @@
   "Gym": "Gym",
   "Hi": "Hej",
   "Highest level": "Högsta nivå",
+  "Home": "Hem",
   "Hospital": "Sjukhus",
   "Hotel": "Hotell",
   "Hotel facilities": "Hotellfaciliteter",
+  "Hotel reservation": "Hotellbokning",
   "Hotel surroundings": "Hotellomgivning",
   "Hotel(s)": "{amount} hotell",
   "Hotels": "Hotell",
@@ -323,6 +325,7 @@
   "Select country of residence": "Välj bosättningsland",
   "Select date of birth": "Välj födelsedatum",
   "Select dates": "Välj datum",
+  "Select hotel": "Välj hotell",
   "Select language": "Välj språk",
   "Select payment method": "Välj betalningsmetod",
   "Select your language": "Välj ditt språk",