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/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">