fix(SW-1608): Hotel listing synced with design

Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/hotelListingItem.module.css

@@ -1,35 +1,38 @@
 .container {
-  background-color: var(--Base-Surface-Primary-light-Normal);
+  background-color: var(--Surface-Primary-Default);
-  border: 1px solid var(--Base-Border-Subtle);
+  border: 1px solid var(--Border-Default);
   border-radius: var(--Corner-radius-md);
   overflow: hidden;
+  color: var(--Text-Default);
 }
 
 .image {
   width: 100%;
-  max-height: 200px;
+  height: 200px;
   object-fit: cover;
 }
 
 .content {
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  gap: var(--Space-x2);
-  gap: var(--Spacing-x2);
+  padding: var(--Space-x2) var(--Space-x3);
-  padding: var(--Spacing-x2) var(--Spacing-x3);
 }
 
 .intro {
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  gap: var(--Space-x05);
-  gap: var(--Spacing-x-half);
-}
-
-.dividerContainer {
-  padding: 0 var(--Spacing-x1);
 }
 
 .captions {
   display: flex;
+  gap: var(--Space-x1);
+  color: var(--Text-Tertiary);
+}
+
+@media screen and (max-width: 767px) {
+  .ctaDivider {
+    display: none;
+  }
 }
 
 @media screen and (min-width: 768px) {
@@ -39,11 +42,11 @@
   }
 
   .image {
-    max-height: none;
     height: 100%;
   }
 
   .button {
     width: min(100%, 200px);
+    justify-self: end;
   }
 }

apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx

@@ -1,13 +1,9 @@
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import ButtonLink from "@/components/ButtonLink"
 import Image from "@/components/Image"
-import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
-import Link from "@/components/TempDesignSystem/Link"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 import { getSingleDecimal } from "@/utils/numberFormatting"
 
@@ -37,56 +33,58 @@ export default async function HotelListingItem({
       <Image
         src={image.src}
         alt={image.alt}
-        width={300}
+        width={400}
-        height={200}
+        height={300}
+        sizes="(min-width: 768px) 400px, 100vw"
         className={styles.image}
       />
       <section className={styles.content}>
         <div className={styles.intro}>
           <HotelLogoIcon hotelId={hotel.operaId} hotelType={hotel.hotelType} />
-          <Subtitle asChild>
+          <Typography variant="Title/Subtitle/lg">
-            <Title as="h3">{hotel.name}</Title>
+            <h4>{hotel.name}</h4>
-          </Subtitle>
+          </Typography>
-          <div className={styles.captions}>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
-            <Caption color="uiTextPlaceholder">
+            <div className={styles.captions}>
-              {hotel.address.streetAddress}
+              <span>{hotel.address.streetAddress}</span>
-            </Caption>
+              <Divider variant="vertical" color="Border/Divider/Default" />
-            <div className={styles.dividerContainer}>
+              <span>
-              <Divider variant="vertical" color="beige" />
+                {intl.formatMessage(
+                  {
+                    defaultMessage: "{number} km to city center",
+                  },
+                  {
+                    number: getSingleDecimal(
+                      hotel.location.distanceToCentre / 1000
+                    ),
+                  }
+                )}
+              </span>
             </div>
-            <Caption color="uiTextPlaceholder">
+          </Typography>
-              {intl.formatMessage(
-                {
-                  defaultMessage: "{number} km to city center",
-                },
-                {
-                  number: getSingleDecimal(
-                    hotel.location.distanceToCentre / 1000
-                  ),
-                }
-              )}
-            </Caption>
-          </div>
         </div>
-        <Body>{description}</Body>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>{description}</p>
+        </Typography>
 
-        {cta.url && (
+        {cta.url ? (
-          <Button
+          <>
-            intent="primary"
+            <Divider
-            theme="base"
+              className={styles.ctaDivider}
-            size="small"
+              variant="horizontal"
-            className={styles.button}
+              color="borderDividerSubtle"
-            asChild
+            />
-          >
+            <ButtonLink
-            <Link
+              variant="Primary"
+              size="Small"
               href={cta.url}
-              color="white"
               target={cta.openInNewTab ? "_blank" : "_self"}
+              className={styles.button}
             >
               {cta.text}
-            </Link>
+            </ButtonLink>
-          </Button>
+          </>
-        )}
+        ) : null}
       </section>
     </article>
   )

apps/scandic-web/components/Blocks/HotelListing/hotelListing.module.css

@@ -0,0 +1,3 @@
+.heading {
+  color: var(--Text-Heading);
+}

apps/scandic-web/components/Blocks/HotelListing/index.tsx

@@ -1,10 +1,13 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { getHotelsByCSFilter } from "@/lib/trpc/memoizedRequests"
 
 import SectionContainer from "@/components/Section/Container"
-import Title from "@/components/TempDesignSystem/Text/Title"
 
 import HotelListingItem from "./HotelListingItem"
 
+import styles from "./hotelListing.module.css"
+
 import type { HotelListingProps } from "@/types/components/blocks/hotelListing"
 
 export default async function HotelListing({
@@ -24,9 +27,9 @@ export default async function HotelListing({
 
   return (
     <SectionContainer>
-      <Title level="h4" as="h3" textTransform="capitalize">
+      <Typography variant="Title/sm">
-        {heading}
+        <h3 className={styles.heading}>{heading}</h3>
-      </Title>
+      </Typography>
       {hotels.map(({ url, hotel, additionalData }) => (
         <HotelListingItem
           key={hotel.name}