From 8a53e97e5fe02ee5a1c8a3193568032b8e453a32 Mon Sep 17 00:00:00 2001 From: Bianca Widstam Date: Thu, 28 Aug 2025 12:04:43 +0000 Subject: [PATCH] Merged in fix/SW-3325-hotelcard-mobile-show-alert-left-align (pull request #2725) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix(SW-3325): show alert in hotel card mobile and left align text * fix(SW-3325): show alert in hotel card mobile and left align text Approved-by: Joakim Jäderberg --- .../hotelDescription.module.css | 9 ++--- .../HotelInfoCard/HotelDescription/index.tsx | 10 +---- .../HotelInfoCard/hotelInfoCard.module.css | 38 ++++++------------- .../SidePeeks/HotelDetailsSidePeek/index.tsx | 4 +- 4 files changed, 19 insertions(+), 42 deletions(-) diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/hotelDescription.module.css b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/hotelDescription.module.css index b8dd42ba5..ab25649ad 100644 --- a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/hotelDescription.module.css +++ b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/hotelDescription.module.css @@ -1,11 +1,11 @@ .hotelDescription { overflow: hidden; + text-align: left; } .descriptionWrapper { display: flex; flex-direction: column; - align-items: center; } .collapsed { @@ -13,17 +13,19 @@ -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; + margin: var(--Space-x15) 0; } .expanded { display: block; max-height: none; + margin: var(--Space-x15) 0; } .expandedContent { display: flex; flex-direction: column; - align-items: center; + align-items: flex-start; margin-top: var(--Space-x2); } @@ -34,7 +36,6 @@ .showMoreButton { display: flex; - align-items: flex-end; background-color: transparent; border-width: 0; padding: 0; @@ -55,11 +56,9 @@ .facilityList { display: flex; - align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: var(--Space-x15); - padding-bottom: var(--Space-x2); } .facilitiesItem { diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/index.tsx index aa81038d9..309c9b6a8 100644 --- a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/index.tsx @@ -4,7 +4,6 @@ import { useState } from "react" import { Button as ButtonRAC } from "react-aria-components" import { useIntl } from "react-intl" -import { Alert } from "@scandic-hotels/design-system/Alert" import { FacilityToIcon } from "@scandic-hotels/design-system/FacilityToIcon" import { Typography } from "@scandic-hotels/design-system/Typography" @@ -84,15 +83,8 @@ export default function HotelDescription({ defaultMessage: "See all amenities", })} buttonVariant="primary" + wrapping={false} /> - {hotel.specialAlerts.map((alert) => ( - - ))} )} diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css index af8af740a..780e109fd 100644 --- a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css +++ b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css @@ -45,17 +45,19 @@ .hotelAddressDescription { display: flex; flex-direction: column; - gap: var(--Space-x2); + gap: var(--Space-x15); align-items: center; text-align: center; } -.hotelAlert { +.facilities { display: none; } -.facilities { - display: none; +.hotelAlert { + max-width: var(--max-width-page); + margin: 0 auto; + padding-top: var(--Space-x15); } @media screen and (min-width: 768px) { @@ -72,13 +74,6 @@ display: block; } - .hotelAlert { - display: block; - max-width: var(--max-width-page); - margin: 0 auto; - padding-top: var(--Space-x15); - } - .facilities { display: flex; flex-direction: column; @@ -89,11 +84,11 @@ .facilityList { display: flex; + flex-direction: column; align-items: flex-start; justify-content: center; flex-wrap: wrap; - gap: var(--Space-x15); - padding-bottom: var(--Space-x1); + gap: var(--Space-x1); } .facilitiesItem { @@ -107,8 +102,8 @@ } .hotelContent { + flex-direction: row; gap: var(--Space-x6); - align-items: normal; } .hotelInformation { @@ -121,6 +116,7 @@ .hotelAddressDescription { align-items: normal; text-align: left; + gap: var(--Space-x2); } .wrapper { @@ -128,22 +124,10 @@ flex-direction: row; } - .facilities { - padding: var(--Space-x3) var(--Space-x3) var(--Space-x05); - } - - .facilityList { - gap: var(--Space-x1); - padding-bottom: var(--Space-x05); - flex-direction: column; - } .facilityTitle { display: none; } - .hotelContent { - flex-direction: row; - align-items: center; - } + .imageWrapper { align-self: center; } diff --git a/apps/scandic-web/components/SidePeeks/HotelDetailsSidePeek/index.tsx b/apps/scandic-web/components/SidePeeks/HotelDetailsSidePeek/index.tsx index 685da518f..f07ce1149 100644 --- a/apps/scandic-web/components/SidePeeks/HotelDetailsSidePeek/index.tsx +++ b/apps/scandic-web/components/SidePeeks/HotelDetailsSidePeek/index.tsx @@ -24,6 +24,7 @@ interface HotelDetailsSidePeekProps { additionalHotelData: AdditionalData | undefined triggerLabel: string buttonVariant: "primary" | "secondary" + wrapping?: boolean } const buttonPropsMap: Record< @@ -52,6 +53,7 @@ export default function HotelDetailsSidePeek({ restaurants, additionalHotelData, triggerLabel, + wrapping = true, buttonVariant, }: HotelDetailsSidePeekProps) { const buttonProps = buttonPropsMap[buttonVariant] @@ -60,7 +62,7 @@ export default function HotelDetailsSidePeek({