Merged in fix/SW-3325-hotelcard-mobile-show-alert-left-align (pull request #2725)

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

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 {

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) => (
-            <Alert
-              key={alert.id}
-              type={alert.type}
-              heading={alert.heading}
-              text={alert.text}
-            />
-          ))}
         </div>
       )}
     </div>

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;
   }

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({
     <DialogTrigger>
       <Button
         {...buttonProps}
-        wrapping
+        wrapping={wrapping}
         onPress={() =>
           trackOpenSidePeekEvent({
             name: SidePeekEnum.hotelDetails,