chore(BOOK-754): Moved ContentCard to design system and added stories

Approved-by: Bianca Widstam
Approved-by: Anton Gunnarsson

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

@@ -1,3 +1,4 @@
+import { ContentCard } from "@scandic-hotels/design-system/ContentCard"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { Carousel } from "@/components/Carousel"
@@ -8,7 +9,6 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/Carousel/CarouselNavigation"
-import { ContentCard } from "@/components/ContentCard"
 
 import styles from "./allCampaigns.module.css"
 

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

@@ -2,8 +2,9 @@
 
 import { useState } from "react"
 
+import { ContentCard } from "@scandic-hotels/design-system/ContentCard"
+
 import { Carousel } from "@/components/Carousel"
-import { ContentCard } from "@/components/ContentCard"
 import { Section } from "@/components/Section"
 import { SectionHeader } from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"

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

@@ -2,8 +2,9 @@
 
 import { useState } from "react"
 
+import { ContentCard } from "@scandic-hotels/design-system/ContentCard"
+
 import { Carousel } from "@/components/Carousel"
-import { ContentCard } from "@/components/ContentCard"
 import { Section } from "@/components/Section"
 import { SectionHeader } from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"

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

@@ -1,52 +0,0 @@
-.card {
-  display: grid;
-
-  &:hover {
-    .imageContainer,
-    .image {
-      border-radius: var(--Corner-radius-lg);
-    }
-    .image {
-      transform: scale(1.05);
-    }
-  }
-}
-
-.imageContainer {
-  position: relative;
-  width: 100%;
-  height: 250px;
-  border-radius: var(--Corner-radius-md);
-  overflow: hidden;
-  transition: border-radius 0.3s ease-in-out;
-}
-
-.image {
-  border-radius: var(--Corner-radius-md);
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition:
-    transform 0.3s ease-in-out,
-    border-radius 0.3s ease-in-out;
-}
-
-.promoTag {
-  position: absolute;
-  top: 14px;
-  left: 14px;
-}
-
-.content {
-  display: flex;
-  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;
-}

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

@@ -1,90 +0,0 @@
-"use client"
-
-import { cx } from "class-variance-authority"
-import NextLink from "next/link"
-import { useIntl } from "react-intl"
-
-import { ChipStatic } from "@scandic-hotels/design-system/ChipStatic"
-import Image from "@scandic-hotels/design-system/Image"
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
-import styles from "./contentCard.module.css"
-
-import type { ImageVaultAsset } from "@scandic-hotels/common/utils/imageVault"
-
-interface ContentCardProps {
-  link?: {
-    href: string
-    openInNewTab?: boolean
-    isExternal?: boolean
-  }
-  heading: string
-  image: ImageVaultAsset
-  bodyText: string
-  promoText?: string
-  className?: string
-}
-
-export function ContentCard({
-  heading,
-  image,
-  bodyText,
-  promoText,
-  className = "",
-  link,
-}: ContentCardProps) {
-  const intl = useIntl()
-  const card = (
-    <article className={cx(styles.card, className)}>
-      <div className={styles.imageContainer}>
-        <Image
-          src={image.url}
-          alt={image.meta.alt || image.meta.caption || ""}
-          className={styles.image}
-          fill
-          sizes="(min-width: 768px) 413px, 100vw"
-          focalPoint={image.focalPoint}
-          dimensions={image.dimensions}
-        />
-        {promoText ? (
-          <ChipStatic
-            color="Neutral"
-            size="sm"
-            lowerCase
-            className={styles.promoTag}
-          >
-            {promoText}
-          </ChipStatic>
-        ) : null}
-      </div>
-      <div className={styles.content}>
-        <Typography variant="Title/Subtitle/md">
-          <h4>{heading}</h4>
-        </Typography>
-        <Typography variant="Body/Paragraph/mdRegular">
-          <p>{bodyText}</p>
-        </Typography>
-      </div>
-    </article>
-  )
-
-  if (!link) return card
-
-  const linkProps = {
-    className: styles.link,
-    ...(link.openInNewTab && {
-      target: "_blank",
-      rel: "noopener noreferrer",
-      title: intl.formatMessage({
-        id: "common.linkOpenInNewTab",
-        defaultMessage: "Opens in a new tab/window",
-      }),
-    }),
-  }
-
-  return (
-    <NextLink href={link.href} {...linkProps}>
-      {card}
-    </NextLink>
-  )
-}

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 "@scandic-hotels/design-system/ContentCard"
 
 import styles from "./campaignCardList.module.css"
 

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

@@ -1,4 +1,5 @@
 import { getTheme } from "@scandic-hotels/common/utils/theme/serverContext"
+import { ContentCard } from "@scandic-hotels/design-system/ContentCard"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { Carousel } from "@/components/Carousel"
@@ -9,7 +10,6 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/Carousel/CarouselNavigation"
-import { ContentCard } from "@/components/ContentCard"
 import CampaignHero from "@/components/ContentType/CampaignPage/Hero"
 import CampaignCardList from "@/components/ContentType/HotelPage/Campaigns/CampaignCardList"
 import { getIntl } from "@/i18n"