Merged in fix/SW-1128-side-peek (pull request #1031)

Fix/SW-1128/SW-1124 side peek and gallery * fix(SW-1128): updated style and mobile design for sidepeek select hotel * fix(SW-1128): update link sidepeek * fix(SW-1124): fix padding gallery * fix(SW-1128): fix sidepeek mobile design * fix(SW-1128): fix mobile design * fix(SW-1128): fix gallery icon caption Approved-by: Niclas Edenvin
2024-12-05 07:39:06 +00:00
parent 94725297d7
commit bed674df87
16 changed files with 100 additions and 63 deletions
--- a/components/HotelReservation/Contact/contact.module.css
+++ b/components/HotelReservation/Contact/contact.module.css
@@ -4,6 +4,7 @@
  grid-template-rows: auto;
  gap: var(--Spacing-x2);
  font-family: var(--typography-Body-Regular-fontFamily);
+  margin-bottom: var(--Spacing-x3);
 }

 .address,
@@ -20,6 +21,7 @@
  list-style-type: none;
  display: flex;
  flex-direction: column;
+  min-width: 0;
 }

 .soMeIcons {
@@ -28,6 +30,19 @@
 }

 .ecoLabel {
+  width: 38px;
+  height: auto;
+}
+
+.ecoLabel img {
+  width: 100%;
+  height: auto;
+  flex-shrink: 0;
+  grid-column: 1 / 3;
+  grid-row: 4 / 4;
+}
+
+.ecoContainer {
  display: flex;
  align-items: center;
  column-gap: var(--Spacing-x-one-and-half);
@@ -38,10 +53,6 @@
  margin-bottom: var(--Spacing-x1);
 }

-.ecoLabel img {
-  flex-shrink: 0;
-}
-
 .ecoLabelText {
  display: flex;
  color: var(--UI-Text-Medium-contrast);
@@ -49,8 +60,8 @@
  justify-content: center;
 }

-.googleMaps {
-  text-decoration: none;
+.link {
+  text-decoration: underline;
  font-family: var(--typography-Body-Regular-fontFamily);
-  color: var(--Base-Text-Medium-contrast);
+  color: var(--Base-Text-High-contrast);
 }
--- a/components/HotelReservation/Contact/index.tsx
+++ b/components/HotelReservation/Contact/index.tsx
@@ -24,31 +24,27 @@ export default function Contact({ hotel }: ContactProps) {
            <Body textTransform="bold">
              {intl.formatMessage({ id: "Address" })}
            </Body>
-            <Body>
-              {`${hotel.address.streetAddress}, ${hotel.address.city}`}
-            </Body>
+            <Body>{`${hotel.address.streetAddress}, `}</Body>
+            <Body>{hotel.address.city}</Body>
          </li>
          <li>
            <Body textTransform="bold">
              {intl.formatMessage({ id: "Driving directions" })}
            </Body>
-            <a
+            <Link
              href={`https://www.google.com/maps/dir/?api=1&destination=${hotel.location.latitude},${hotel.location.longitude}`}
-              className={styles.googleMaps}
-              target="_blank"
            >
-              Google Maps
-            </a>
+              <span className={styles.link}>Google Maps</span>
+            </Link>
          </li>
          <li>
            <Body textTransform="bold">
              {intl.formatMessage({ id: "Contact us" })}
            </Body>
-            <Link
-              href={`tel:${hotel.contactInformation.phoneNumber}`}
-              color="peach80"
-            >
-              {hotel.contactInformation.phoneNumber}
+            <Link href={`tel:${hotel.contactInformation.phoneNumber}`}>
+              <span className={styles.link}>
+                {hotel.contactInformation.phoneNumber}
+              </span>
            </Link>
          </li>
          <li>
@@ -76,23 +72,24 @@ export default function Contact({ hotel }: ContactProps) {
            <Body textTransform="bold">
              {intl.formatMessage({ id: "Email" })}
            </Body>
-            <Link
-              href={`mailto:${hotel.contactInformation.email}`}
-              color="peach80"
-            >
-              {hotel.contactInformation.email}
+            <Link href={`mailto:${hotel.contactInformation.email}`}>
+              <span className={styles.link}>
+                {hotel.contactInformation.email}
+              </span>
            </Link>
          </li>
        </ul>
      </address>
      {hotel.hotelFacts.ecoLabels?.nordicEcoLabel ? (
-        <div className={styles.ecoLabel}>
-          <Image
-            height={38}
-            width={43}
-            alt={intl.formatMessage({ id: "Nordic Swan Ecolabel" })}
-            src={`/_static/img/icons/swan-eco/swan_eco_dark_${lang}.png`}
-          />
+        <div className={styles.ecoContainer}>
+          <div className={styles.ecoLabel}>
+            <Image
+              height={38}
+              width={38}
+              alt={intl.formatMessage({ id: "Nordic Swan Ecolabel" })}
+              src={`/_static/img/icons/swan-eco/swan_eco_dark_${lang}.png`}
+            />
+          </div>
          <div className={styles.ecoLabelText}>
            <span>{intl.formatMessage({ id: "Nordic Swan Ecolabel" })}</span>
            <span>
--- a/components/ImageGallery/index.tsx
+++ b/components/ImageGallery/index.tsx
@@ -6,7 +6,8 @@ import { useIntl } from "react-intl"
 import { GalleryIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import Lightbox from "@/components/Lightbox"
-import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+
+import Caption from "../TempDesignSystem/Text/Caption"

 import styles from "./imageGallery.module.css"

@@ -44,9 +45,9 @@ function ImageGallery({
        />
        <div className={styles.imageCount}>
          <GalleryIcon color="white" />
-          <Footnote color="white" type="label">
+          <Caption color="white" type="label">
            {images.length}
-          </Footnote>
+          </Caption>
        </div>
      </div>
      <Lightbox
--- a/components/Lightbox/Lightbox.module.css
+++ b/components/Lightbox/Lightbox.module.css
@@ -122,6 +122,7 @@
  grid-template-columns: 1fr 1fr;
  gap: var(--Spacing-x1);
  max-height: none;
+  padding: var(--Spacing-x3) 0;
 }

 .thumbnailContainer {
--- a/components/SidePeeks/HotelSidePeek/Accordions/Accessibility.tsx
+++ b/components/SidePeeks/HotelSidePeek/Accordions/Accessibility.tsx
@@ -14,6 +14,7 @@ export default function Accessibility({
    <AccordionItem
      title={intl.formatMessage({ id: "Accessibility" })}
      icon={IconName.Accessibility}
+      variant="sidepeek"
    >
      <Body>{accessibilityElevatorPitchText}</Body>
    </AccordionItem>
--- a/components/SidePeeks/HotelSidePeek/Accordions/CheckInCheckOut.tsx
+++ b/components/SidePeeks/HotelSidePeek/Accordions/CheckInCheckOut.tsx
@@ -13,6 +13,7 @@ export default function CheckinCheckOut({ checkin }: CheckInCheckOutProps) {
    <AccordionItem
      title={intl.formatMessage({ id: "Check-in/Check-out" })}
      icon={IconName.Calendar}
+      variant="sidepeek"
    >
      <Body textTransform="bold">{intl.formatMessage({ id: "Hours" })}</Body>
      <Body>{`${intl.formatMessage({ id: "Check in from" })}: ${checkin.checkInTime}`}</Body>
--- a/components/SidePeeks/HotelSidePeek/Accordions/MeetingsAndConferences.tsx
+++ b/components/SidePeeks/HotelSidePeek/Accordions/MeetingsAndConferences.tsx
@@ -14,6 +14,7 @@ export default function MeetingsAndConferences({
    <AccordionItem
      title={intl.formatMessage({ id: "Meetings & Conferences" })}
      icon={IconName.Business}
+      variant="sidepeek"
    >
      <Body>{meetingDescription}</Body>
    </AccordionItem>
--- a/components/SidePeeks/HotelSidePeek/Accordions/Parking.tsx
+++ b/components/SidePeeks/HotelSidePeek/Accordions/Parking.tsx
@@ -16,6 +16,7 @@ export default function Parking({ parking }: ParkingProps) {
      title={intl.formatMessage({ id: "Parking" })}
      icon={IconName.Parking}
      className={styles.parking}
+      variant="sidepeek"
    >
      {parking.map((p) => (
        <div key={p.name}>
--- a/components/SidePeeks/HotelSidePeek/Accordions/Restaurant.tsx
+++ b/components/SidePeeks/HotelSidePeek/Accordions/Restaurant.tsx
@@ -15,6 +15,7 @@ export default function Restaurant({
    <AccordionItem
      title={intl.formatMessage({ id: "Restaurant" }, { count: 1 })}
      icon={IconName.Restaurant}
+      variant="sidepeek"
    >
      <Body>{restaurantsContentDescriptionMedium}</Body>
    </AccordionItem>
--- a/components/SidePeeks/HotelSidePeek/Accordions/sidePeekAccordion.module.css
+++ b/components/SidePeeks/HotelSidePeek/Accordions/sidePeekAccordion.module.css
@@ -10,6 +10,7 @@
  align-items: center;
  gap: var(--Spacing-x1);
  padding-left: var(--Spacing-x1);
+  justify-items: flex-start;
 }

 .list li svg {
--- a/components/SidePeeks/HotelSidePeek/hotelSidePeek.module.css
+++ b/components/SidePeeks/HotelSidePeek/hotelSidePeek.module.css
@@ -9,13 +9,24 @@
  gap: var(--Spacing-x2);
 }

-.amenity {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  border-bottom: 1px solid var(--Base-Border-Subtle);
-  /* padding set to align with AccordionItem which has a different composition */
-  padding: calc(var(--Spacing-x1) + var(--Spacing-x-one-and-half))
-    var(--Spacing-x3);
+.content:last-child {
+  gap: 0;
+}
+
+.content > p {
+  margin-bottom: var(--Spacing-x-one-and-half);
+}
+
+.content > ul > li:first-child {
+  border-top: 1px solid var(--Base-Border-Subtle);
+}
+
+.amenity > p {
+  border-top: 1px solid var(--Base-Border-Subtle);
+  padding: calc(var(--Spacing-x-one-and-half) + var(--Spacing-x1))
+    var(--Spacing-x1);
  display: flex;
+  align-items: center;
  gap: var(--Spacing-x1);
 }

--- a/components/SidePeeks/HotelSidePeek/index.tsx
+++ b/components/SidePeeks/HotelSidePeek/index.tsx
@@ -71,24 +71,21 @@ export default function HotelSidePeek({
              }
            />
          )}
+        </Accordion>
+        <div className={styles.amenity}>
          {amenitiesList.map((amenity) => {
            const Icon = mapFacilityToIcon(amenity.id)
            return (
-              <div key={amenity.id} className={styles.amenity}>
+              <Subtitle type="two" key={amenity.id} color="uiTextHighContrast">
                {Icon && (
-                  <Icon width={24} height={24} color="uiTextMediumContrast" />
+                  <Icon width={24} height={24} color="uiTextHighContrast" />
                )}
-                <Body
-                  asChild
-                  className={!Icon ? styles.noIcon : undefined}
-                  color="uiTextMediumContrast"
-                >
-                  <span>{amenity.name}</span>
-                </Body>
-              </div>
+                {amenity.name}
+              </Subtitle>
            )
          })}
-        </Accordion>
+        </div>
+
        {/*     TODO: handle linking to Hotel Page */}
        {/*     {showCTA && ( 
          <Button theme="base" intent="secondary" size="large">
--- a/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css
+++ b/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css
@@ -6,6 +6,10 @@
  padding: var(--Spacing-x1);
 }

+.accordionItem.sidepeek {
+  padding: var(--Spacing-x1) 0;
+}
+
 .summary {
  position: relative;
  display: flex;
@@ -18,7 +22,7 @@
  font-weight: var(--typography-Body-Bold-fontWeight);
  transition: background-color 0.3s;
 }
-.summary:hover {
+.summary.card:hover {
  background-color: var(--Base-Surface-Primary-light-Hover-alt);
 }
 .accordionItem.light .summary:hover {
@@ -33,6 +37,11 @@
  border-radius: var(--Corner-radius-Medium);
 }

+.accordionItem.sidepeek .summary {
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x1);
+  align-items: center;
+}
+
 .title {
  flex-grow: 1;
 }
--- a/components/TempDesignSystem/Accordion/AccordionItem/index.tsx
+++ b/components/TempDesignSystem/Accordion/AccordionItem/index.tsx
@@ -50,16 +50,10 @@ export default function AccordionItem({
    <li className={accordionItemVariants({ className, variant, theme })}>
      <details ref={detailsRef} onToggle={toggleAccordion}>
        <summary className={styles.summary}>
-          {IconComp && <IconComp className={styles.icon} color="burgundy" />}
-          {variant === "card" ? (
-            <Body
-              textTransform="bold"
-              color="baseTextHighContrast"
-              className={styles.title}
-            >
-              {title}
-            </Body>
-          ) : (
+          {IconComp && (
+            <IconComp className={styles.icon} color="baseTextHighcontrast" />
+          )}
+          {variant === "sidepeek" ? (
            <Subtitle
              className={styles.title}
              type="two"
@@ -67,6 +61,14 @@ export default function AccordionItem({
            >
              {title}
            </Subtitle>
+          ) : (
+            <Body
+              textTransform="bold"
+              color="baseTextHighContrast"
+              className={styles.title}
+            >
+              {title}
+            </Body>
          )}
          <ChevronDownIcon
            className={styles.chevron}
--- a/components/TempDesignSystem/Accordion/AccordionItem/variants.ts
+++ b/components/TempDesignSystem/Accordion/AccordionItem/variants.ts
@@ -6,6 +6,7 @@ export const accordionItemVariants = cva(styles.accordionItem, {
  variants: {
    variant: {
      card: styles.card,
+      sidepeek: styles.sidepeek,
    },
    theme: {
      default: styles.default,
--- a/components/TempDesignSystem/Accordion/variants.ts
+++ b/components/TempDesignSystem/Accordion/variants.ts
@@ -6,6 +6,7 @@ export const accordionVariants = cva(styles.accordion, {
  variants: {
    variant: {
      card: styles.card,
+      sidepeek: styles.sidepeek,
    },
    theme: {
      default: styles.default,