Merged in fix/BOOK-317-campaign-ui-fixes (pull request #3397)

fix(BOOK-317): small campaign ui fixes

* fix(BOOK-317): campaign ui fixes


Approved-by: Erik Tiekstra

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

@@ -8,7 +8,7 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/Carousel/CarouselNavigation"
-import ContentCard from "@/components/ContentCard"
+import { ContentCard } from "@/components/ContentCard"
 
 import styles from "./allCampaigns.module.css"
 

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

@@ -3,7 +3,7 @@
 import { useState } from "react"
 
 import { Carousel } from "@/components/Carousel"
-import ContentCard from "@/components/ContentCard"
+import { ContentCard } from "@/components/ContentCard"
 import { Section } from "@/components/Section"
 import SectionHeader from "@/components/Section/Header/Deprecated"
 import SectionLink from "@/components/Section/Link"

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

@@ -3,7 +3,7 @@
 import { useState } from "react"
 
 import { Carousel } from "@/components/Carousel"
-import ContentCard from "@/components/ContentCard"
+import { ContentCard } from "@/components/ContentCard"
 import { Section } from "@/components/Section"
 import { SectionHeader } from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
@@ -16,8 +16,10 @@ import type { VariantProps } from "class-variance-authority"
 
 import type { headingVariants } from "@/components/Section/Header/headingVariants"
 
-interface CarouselCardsProps
-  extends Pick<CarouselCardsBlock, "carousel_cards"> {
+interface CarouselCardsProps extends Pick<
+  CarouselCardsBlock,
+  "carousel_cards"
+> {
   headingLevel?: "h1" | "h2"
   headingTypography?: VariantProps<typeof headingVariants>["typography"]
 }

apps/scandic-web/components/Blocks/Essentials/essentials.module.css

@@ -48,6 +48,7 @@
 @media screen and (max-width: 949px) {
   .list {
     grid-template-columns: repeat(2, 1fr);
+    row-gap: var(--Space-x2);
 
     .listItem:nth-child(2n)::after {
       display: none;
@@ -58,6 +59,7 @@
 @media screen and (min-width: 950px) and (max-width: 1366px) {
   .list {
     grid-template-columns: repeat(4, 1fr);
+    row-gap: var(--Space-x3);
 
     &:not(.count3, .count5, .count6) .listItem:nth-child(4n)::after {
       display: none;

apps/scandic-web/components/ContentCard/contentCard.module.css

@@ -39,20 +39,14 @@
 
 .content {
   display: flex;
-  padding: var(--Space-x15);
   flex-direction: column;
   align-items: flex-start;
   gap: var(--Space-x15);
   align-self: stretch;
+  padding: var(--Space-x2) var(--Space-x2) var(--Space-x2) 0;
 }
 
 .link {
   text-decoration: none;
   color: inherit;
 }
-
-@media (min-width: 768px) {
-  .content {
-    padding: var(--Space-x2) var(--Space-x2) var(--Space-x2) 0;
-  }
-}

apps/scandic-web/components/ContentCard/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { cx } from "class-variance-authority"
 import NextLink from "next/link"
 import { useIntl } from "react-intl"
 
@@ -24,7 +25,7 @@ interface ContentCardProps {
   className?: string
 }
 
-export default function ContentCard({
+export function ContentCard({
   heading,
   image,
   bodyText,
@@ -34,7 +35,7 @@ export default function ContentCard({
 }: ContentCardProps) {
   const intl = useIntl()
   const card = (
-    <article className={`${styles.card} ${className}`}>
+    <article className={cx(styles.card, className)}>
       <div className={styles.imageContainer}>
         <Image
           src={image.url}

apps/scandic-web/components/ContentType/CampaignPage/index.tsx

@@ -30,11 +30,11 @@ export default async function CampaignPage() {
           <CampaignHero {...hero} />
           <div className={styles.intro}>
             <div className={styles.headingWrapper}>
-              <Typography variant="Title/lg">
+              <Typography variant="Title/md">
                 <h1 className={styles.heading}>{heading}</h1>
               </Typography>
               {subheading ? (
-                <Typography variant="Title/Subtitle/lg">
+                <Typography variant="Title/sm">
                   <p>{subheading}</p>
                 </Typography>
               ) : null}

apps/scandic-web/components/ContentType/HotelPage/Campaigns/CampaignCardList/index.tsx

@@ -2,7 +2,7 @@
 
 import { cx } from "class-variance-authority"
 
-import ContentCard from "@/components/ContentCard"
+import { ContentCard } from "@/components/ContentCard"
 
 import styles from "./campaignCardList.module.css"
 

apps/scandic-web/components/ContentType/HotelPage/Campaigns/campaigns.module.css

@@ -20,7 +20,7 @@
 }
 
 @media screen and (max-width: 767px) {
-  .cardList {
+  ul.cardList {
     display: none;
   }
 }

apps/scandic-web/components/ContentType/HotelPage/Campaigns/index.tsx

@@ -9,7 +9,7 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/Carousel/CarouselNavigation"
-import ContentCard from "@/components/ContentCard"
+import { ContentCard } from "@/components/ContentCard"
 import CampaignHero from "@/components/ContentType/CampaignPage/Hero"
 import CampaignCardList from "@/components/ContentType/HotelPage/Campaigns/CampaignCardList"
 import { getIntl } from "@/i18n"