From bda22f39ad1d3ea4bda6dbb82595f986799fa48c Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Thu, 27 Feb 2025 14:40:21 +0000 Subject: [PATCH] Merged in feat/SW-1740-final-design-subpages (pull request #1435) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit feat/SW-1740 final design subpages * feat(SW-1740): update design for subpages * feat(SW-1740): add padding * feat(SW-1740): use not pseudo class Approved-by: Erik Tiekstra Approved-by: Matilda Landström --- .../HotelSubpage/Sidebar/MeetingsSidebar.tsx | 36 +++--- .../HotelSubpage/Sidebar/ParkingSidebar.tsx | 56 ++++----- .../RestaurantSidebar.tsx | 14 ++- .../restaurantSiderbar.module.css | 15 --- .../HotelSubpage/Sidebar/WellnessSidebar.tsx | 106 ++++++++++-------- .../HotelSubpage/Sidebar/index.tsx | 2 +- .../HotelSubpage/Sidebar/sidebar.module.css | 23 +++- .../HotelSubpage/hotelSubpage.module.css | 30 ++++- .../ContentType/HotelSubpage/index.tsx | 43 ++++--- .../components/OpeningHours/index.tsx | 14 +-- 10 files changed, 190 insertions(+), 149 deletions(-) rename apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/{RestaurantSidebar => }/RestaurantSidebar.tsx (90%) delete mode 100644 apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar/restaurantSiderbar.module.css diff --git a/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/MeetingsSidebar.tsx b/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/MeetingsSidebar.tsx index 666603a56..792fdb188 100644 --- a/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/MeetingsSidebar.tsx +++ b/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/MeetingsSidebar.tsx @@ -22,23 +22,25 @@ export default async function MeetingsSidebar({ return ( ) diff --git a/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/ParkingSidebar.tsx b/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/ParkingSidebar.tsx index 659d92eff..4a6797b4a 100644 --- a/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/ParkingSidebar.tsx +++ b/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/ParkingSidebar.tsx @@ -1,7 +1,3 @@ -import NextLink from "next/link" - -import { OpenInNewIcon } from "@/components/Icons" -import Button from "@/components/TempDesignSystem/Button" import Link from "@/components/TempDesignSystem/Link" import Body from "@/components/TempDesignSystem/Text/Body" import Title from "@/components/TempDesignSystem/Text/Title" @@ -18,43 +14,29 @@ interface HotelSidebarProps { export default async function ParkingSidebar({ hotel }: HotelSidebarProps) { const intl = await getIntl() - const parking = hotel.parking - .map((parking) => ({ url: parking.externalParkingUrl, type: parking.type })) - .filter( - (parking): parking is { type: string; url: string } => !!parking.url - ) - return ( ) } diff --git a/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar/RestaurantSidebar.tsx b/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar.tsx similarity index 90% rename from apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar/RestaurantSidebar.tsx rename to apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar.tsx index 99b3c1585..d5fded8f1 100644 --- a/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar/RestaurantSidebar.tsx +++ b/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar.tsx @@ -6,7 +6,7 @@ import Body from "@/components/TempDesignSystem/Text/Body" import Title from "@/components/TempDesignSystem/Text/Title" import { getIntl } from "@/i18n" -import styles from "./restaurantSiderbar.module.css" +import styles from "./sidebar.module.css" import type { Hotel, Restaurant } from "@/types/hotel" @@ -42,11 +42,13 @@ export default async function RestaurantSidebar({ ) : null} {bookTableUrl && ( - +
+ +
)} {restaurant.menus.length ? (
diff --git a/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar/restaurantSiderbar.module.css b/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar/restaurantSiderbar.module.css deleted file mode 100644 index f3c2165cc..000000000 --- a/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar/restaurantSiderbar.module.css +++ /dev/null @@ -1,15 +0,0 @@ -.sidebar { - display: grid; - gap: var(--Spacing-x3); -} - -.content { - display: grid; - gap: var(--Spacing-x-one-and-half); -} - -.menuList { - display: grid; - gap: var(--Spacing-x-half); - list-style-type: none; -} diff --git a/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/WellnessSidebar.tsx b/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/WellnessSidebar.tsx index 6ba85bd49..79eaca3c5 100644 --- a/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/WellnessSidebar.tsx +++ b/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/WellnessSidebar.tsx @@ -19,59 +19,69 @@ export default async function WellnessSidebar({ hotel }: WellnessSidebarProps) { return ( ) } diff --git a/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/index.tsx b/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/index.tsx index a235e4b03..62e2cd9bb 100644 --- a/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/index.tsx @@ -1,6 +1,6 @@ -import RestaurantSidebar from "./RestaurantSidebar/RestaurantSidebar" import MeetingsSidebar from "./MeetingsSidebar" import ParkingSidebar from "./ParkingSidebar" +import RestaurantSidebar from "./RestaurantSidebar" import WellnessSidebar from "./WellnessSidebar" import type { MeetingRooms } from "@/types/components/hotelPage/meetingRooms" diff --git a/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/sidebar.module.css b/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/sidebar.module.css index e596ce352..69d9b40a0 100644 --- a/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/sidebar.module.css +++ b/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/sidebar.module.css @@ -1,13 +1,32 @@ .sidebar { display: grid; - gap: var(--Spacing-x2); + gap: var(--Spacing-x3); grid-column: 1; } +.content { + display: grid; + gap: var(--Spacing-x-one-and-half); +} + +.menuList { + display: grid; + gap: var(--Spacing-x-half); + list-style-type: none; +} + +.buttonContainer { + display: none; +} + @media (min-width: 1367px) { .sidebar { grid-column: 2; - grid-row: 1; + grid-row: 1 / span 2; align-items: start; } + + .buttonContainer { + display: block; + } } diff --git a/apps/scandic-web/components/ContentType/HotelSubpage/hotelSubpage.module.css b/apps/scandic-web/components/ContentType/HotelSubpage/hotelSubpage.module.css index 4f08446eb..93f7c4503 100644 --- a/apps/scandic-web/components/ContentType/HotelSubpage/hotelSubpage.module.css +++ b/apps/scandic-web/components/ContentType/HotelSubpage/hotelSubpage.module.css @@ -1,4 +1,4 @@ -.hotelSubpage { +.hotelSubpage:not(.hasStickyButton) { padding-bottom: var(--Spacing-x9); } @@ -19,7 +19,7 @@ .contentContainer { display: grid; - gap: var(--Spacing-x4); + gap: var(--Spacing-x3); align-items: start; width: 100%; max-width: var(--max-width-content); @@ -49,19 +49,43 @@ text-align: center; } +.buttonContainer { + position: sticky; + padding: var(--Spacing-x3) var(--Spacing-x2); + background-color: var(--Base-Surface-Secondary-light-Normal); + border-top: 1px solid var(--Base-Border-Subtle); + bottom: 0; +} + @media (min-width: 1367px) { + .hotelSubpage { + padding-bottom: var(--Spacing-x9); + } + .contentContainer { grid-template-columns: var(--max-width-text-block) 1fr; + grid-template-rows: auto 1fr; + row-gap: var(--Spacing-x2); + column-gap: var(--Spacing-x9); padding: var(--Spacing-x4) 0 0; } + .divider { + display: none; + } + .mainContent { padding: 0; - max-width: none; margin: 0; + gap: var(--Spacing-x3); + max-width: none; } .meetingsContent { grid-column: 1 / span 2; } + + .buttonContainer { + display: none; + } } diff --git a/apps/scandic-web/components/ContentType/HotelSubpage/index.tsx b/apps/scandic-web/components/ContentType/HotelSubpage/index.tsx index 6d35aaa1d..d0ae8a975 100644 --- a/apps/scandic-web/components/ContentType/HotelSubpage/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelSubpage/index.tsx @@ -10,6 +10,8 @@ import { import Breadcrumbs from "@/components/Breadcrumbs" import Hero from "@/components/Hero" import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton" +import Button from "@/components/TempDesignSystem/Button" +import Divider from "@/components/TempDesignSystem/Divider" import Preamble from "@/components/TempDesignSystem/Text/Preamble" import Title from "@/components/TempDesignSystem/Text/Title" import { getIntl } from "@/i18n" @@ -56,6 +58,10 @@ export default async function HotelSubpage({ meetingRooms = await getMeetingRooms({ hotelId: hotelId, language: lang }) } + const restaurantButton = restaurants.find( + (restaurant) => restaurant.nameInUrl === subpage + ) + const meetingBookingWidget = meetingRooms ? (
Booking Widget Placeholder @@ -64,7 +70,9 @@ export default async function HotelSubpage({ return ( <> -
+
}>
+ + {pageData.heading} + + + +
- - {pageData.heading} - {pageData.elevatorPitch}
@@ -103,21 +120,21 @@ export default async function HotelSubpage({ additionalData={additionalData} />
- {meetingRooms && (
)} - -
+ {restaurantButton?.bookTableUrl && ( + + )}
{/* Tracking */} diff --git a/apps/scandic-web/components/OpeningHours/index.tsx b/apps/scandic-web/components/OpeningHours/index.tsx index 4b07f3ba2..2a76c9e10 100644 --- a/apps/scandic-web/components/OpeningHours/index.tsx +++ b/apps/scandic-web/components/OpeningHours/index.tsx @@ -21,31 +21,31 @@ export default async function OpeningHours({ const weekdayDefinitions = [ { key: "monday", - label: intl.formatMessage({ id: "monday" }), + label: intl.formatMessage({ id: "Monday" }), }, { key: "tuesday", - label: intl.formatMessage({ id: "tuesday" }), + label: intl.formatMessage({ id: "Tuesday" }), }, { key: "wednesday", - label: intl.formatMessage({ id: "wednesday" }), + label: intl.formatMessage({ id: "Wednesday" }), }, { key: "thursday", - label: intl.formatMessage({ id: "thursday" }), + label: intl.formatMessage({ id: "Thursday" }), }, { key: "friday", - label: intl.formatMessage({ id: "friday" }), + label: intl.formatMessage({ id: "Friday" }), }, { key: "saturday", - label: intl.formatMessage({ id: "saturday" }), + label: intl.formatMessage({ id: "Saturday" }), }, { key: "sunday", - label: intl.formatMessage({ id: "sunday" }), + label: intl.formatMessage({ id: "Sunday" }), }, ] as const