From ffee9757d2dc0520e43a46fa8536e534111c9abc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?= Date: Thu, 8 Jan 2026 08:55:49 +0000 Subject: [PATCH] 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 | 2 +- apps/scandic-web/components/Blocks/CardGallery/index.tsx | 2 +- .../scandic-web/components/Blocks/CarouselCards/index.tsx | 8 +++++--- .../components/Blocks/Essentials/essentials.module.css | 2 ++ .../components/ContentCard/contentCard.module.css | 8 +------- apps/scandic-web/components/ContentCard/index.tsx | 5 +++-- .../components/ContentType/CampaignPage/index.tsx | 4 ++-- .../HotelPage/Campaigns/CampaignCardList/index.tsx | 2 +- .../ContentType/HotelPage/Campaigns/campaigns.module.css | 2 +- .../components/ContentType/HotelPage/Campaigns/index.tsx | 2 +- 10 files changed, 18 insertions(+), 19 deletions(-) diff --git a/apps/scandic-web/components/Blocks/AllCampaigns/index.tsx b/apps/scandic-web/components/Blocks/AllCampaigns/index.tsx index c84a87f33..bf1157038 100644 --- a/apps/scandic-web/components/Blocks/AllCampaigns/index.tsx +++ b/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" diff --git a/apps/scandic-web/components/Blocks/CardGallery/index.tsx b/apps/scandic-web/components/Blocks/CardGallery/index.tsx index db7ad96f1..7102f7b34 100644 --- a/apps/scandic-web/components/Blocks/CardGallery/index.tsx +++ b/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" diff --git a/apps/scandic-web/components/Blocks/CarouselCards/index.tsx b/apps/scandic-web/components/Blocks/CarouselCards/index.tsx index 043060954..f34c22792 100644 --- a/apps/scandic-web/components/Blocks/CarouselCards/index.tsx +++ b/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 { +interface CarouselCardsProps extends Pick< + CarouselCardsBlock, + "carousel_cards" +> { headingLevel?: "h1" | "h2" headingTypography?: VariantProps["typography"] } diff --git a/apps/scandic-web/components/Blocks/Essentials/essentials.module.css b/apps/scandic-web/components/Blocks/Essentials/essentials.module.css index 0779471f8..b8d9c3cc7 100644 --- a/apps/scandic-web/components/Blocks/Essentials/essentials.module.css +++ b/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; diff --git a/apps/scandic-web/components/ContentCard/contentCard.module.css b/apps/scandic-web/components/ContentCard/contentCard.module.css index b605dd9ac..8f2cfbeb8 100644 --- a/apps/scandic-web/components/ContentCard/contentCard.module.css +++ b/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; - } -} diff --git a/apps/scandic-web/components/ContentCard/index.tsx b/apps/scandic-web/components/ContentCard/index.tsx index c35985cc8..ca878319f 100644 --- a/apps/scandic-web/components/ContentCard/index.tsx +++ b/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 = ( -
+
- +

{heading}

 {subheading ? ( - +

{subheading}

 ) : null} diff --git a/apps/scandic-web/components/ContentType/HotelPage/Campaigns/CampaignCardList/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/Campaigns/CampaignCardList/index.tsx index 3fe792b33..82513c8e5 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/Campaigns/CampaignCardList/index.tsx +++ b/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" diff --git a/apps/scandic-web/components/ContentType/HotelPage/Campaigns/campaigns.module.css b/apps/scandic-web/components/ContentType/HotelPage/Campaigns/campaigns.module.css index da5f62451..2a0ae0096 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/Campaigns/campaigns.module.css +++ b/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; } } diff --git a/apps/scandic-web/components/ContentType/HotelPage/Campaigns/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/Campaigns/index.tsx index 46b70accf..0d2977e15 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/Campaigns/index.tsx +++ b/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"