feat(SW-3061): Added block for all campaigns

Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/AllCampaigns/allCampaigns.module.css

@@ -0,0 +1,35 @@
+.allCampaignsSection {
+  display: grid;
+  gap: var(--Space-x3);
+}
+
+.header {
+  display: grid;
+  gap: var(--Space-x15);
+}
+
+.heading {
+  color: var(--Text-Heading);
+}
+
+.cardsList {
+  list-style: none;
+  display: none;
+}
+
+@media screen and (min-width: 768px) {
+  .carousel {
+    display: none;
+  }
+  .cardsList {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--Space-x4) var(--Space-x1);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .cardsList {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}

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

@@ -0,0 +1,80 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { Carousel } from "@/components/Carousel"
+import { CarouselContent } from "@/components/Carousel/CarouselContent"
+import { CarouselDots } from "@/components/Carousel/CarouselDots"
+import { CarouselItem } from "@/components/Carousel/CarouselItem"
+import {
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/Carousel/CarouselNavigation"
+import ContentCard from "@/components/ContentCard"
+
+import styles from "./allCampaigns.module.css"
+
+import type { ImageVaultAsset } from "@scandic-hotels/trpc/types/imageVault"
+
+interface AllCampaignsProps {
+  heading: string
+  preamble?: string | null
+  cards: {
+    url: string
+    heading: string
+    text: string | null
+    image: ImageVaultAsset
+  }[]
+}
+
+export default function AllCampaigns({
+  heading,
+  preamble,
+  cards,
+}: AllCampaignsProps) {
+  if (!cards.length) {
+    return null
+  }
+
+  return (
+    <section className={styles.allCampaignsSection}>
+      <header className={styles.header}>
+        <Typography variant="Title/md">
+          <h3 className={styles.heading}>{heading}</h3>
+        </Typography>
+        {preamble ? (
+          <Typography variant="Body/Paragraph/mdRegular">
+            <p className={styles.preamble}>{preamble}</p>
+          </Typography>
+        ) : null}
+      </header>
+      <ul className={styles.cardsList}>
+        {cards.map(({ url, image, heading, text }) => (
+          <li key={url} className={styles.listItem}>
+            <ContentCard
+              heading={heading}
+              image={image}
+              bodyText={text || ""}
+              link={{ href: url }}
+            />
+          </li>
+        ))}
+      </ul>
+      <Carousel className={styles.carousel}>
+        <CarouselContent>
+          {cards.map(({ url, heading, text, image }) => (
+            <CarouselItem key={url}>
+              <ContentCard
+                heading={heading}
+                image={image}
+                bodyText={text || ""}
+                link={{ href: url }}
+              />
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious className={styles.navigationButton} />
+        <CarouselNext className={styles.navigationButton} />
+        <CarouselDots />
+      </Carousel>
+    </section>
+  )
+}