From 8b66c16e17db2beea1388bff0fa7ee841b1f3ac3 Mon Sep 17 00:00:00 2001 From: Bianca Widstam Date: Thu, 21 Nov 2024 07:28:39 +0000 Subject: [PATCH] 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 --- .../my-pages/@breadcrumbs/[...path]/page.tsx | 2 +- .../[contentType]/[uid]/@breadcrumbs/page.tsx | 2 +- .../(standard)/select-hotel/page.module.css | 12 +++- .../(standard)/select-hotel/page.tsx | 32 +++++++++- components/Breadcrumbs/index.tsx | 53 +--------------- .../BreadcrumbsSkeleton/index.tsx} | 3 +- .../Breadcrumbs/breadcrumbs.module.css | 4 +- .../Breadcrumbs/breadcrumbs.ts | 9 +++ .../TempDesignSystem/Breadcrumbs/index.tsx | 61 +++++++++++++++++++ i18n/dictionaries/da.json | 3 + i18n/dictionaries/de.json | 3 + i18n/dictionaries/en.json | 3 + i18n/dictionaries/fi.json | 3 + i18n/dictionaries/no.json | 3 + i18n/dictionaries/sv.json | 3 + 15 files changed, 137 insertions(+), 59 deletions(-) rename components/{Breadcrumbs/BreadcrumbsSkeleton.tsx => TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton/index.tsx} (89%) rename components/{ => TempDesignSystem}/Breadcrumbs/breadcrumbs.module.css (82%) create mode 100644 components/TempDesignSystem/Breadcrumbs/breadcrumbs.ts create mode 100644 components/TempDesignSystem/Breadcrumbs/index.tsx diff --git a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx b/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx index 6775fd188..048cf9e5f 100644 --- a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx +++ b/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" diff --git a/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx b/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx index ec8f14553..f8024a816 100644 --- a/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx +++ b/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" diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css index e42544196..cb7245753 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css +++ b/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; diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx index 62cab6b85..49893c54d 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx +++ b/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 ( <>
+ }> + +
{city.name} diff --git a/components/Breadcrumbs/index.tsx b/components/Breadcrumbs/index.tsx index a3244fab8..31a4d445a 100644 --- a/components/Breadcrumbs/index.tsx +++ b/components/Breadcrumbs/index.tsx @@ -1,60 +1,13 @@ import { serverClient } from "@/lib/trpc/server" -import { ChevronRightSmallIcon,HouseIcon } from "@/components/Icons" -import Link from "@/components/TempDesignSystem/Link" -import Footnote from "@/components/TempDesignSystem/Text/Footnote" - -import styles from "./breadcrumbs.module.css" +import BreadcrumbsComp from "@/components/TempDesignSystem/Breadcrumbs" export default async function Breadcrumbs() { const breadcrumbs = await serverClient().contentstack.breadcrumbs.get() + if (!breadcrumbs?.length) { return null } - const homeBreadcrumb = breadcrumbs.shift() - return ( - - ) + return } diff --git a/components/Breadcrumbs/BreadcrumbsSkeleton.tsx b/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton/index.tsx similarity index 89% rename from components/Breadcrumbs/BreadcrumbsSkeleton.tsx rename to components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton/index.tsx index 68004a81e..a72f1d1a2 100644 --- a/components/Breadcrumbs/BreadcrumbsSkeleton.tsx +++ b/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 (