Merge develop

components/TempDesignSystem/Card/card.module.css

@@ -1,10 +1,11 @@
 .container {
-  align-items: center;
+  position: relative;
   display: flex;
-  border-radius: var(--Corner-radius-Medium);
+  align-items: center;
   flex-direction: column;
-  height: 320px; /* Fixed height from Figma */
   justify-content: center;
+  border-radius: var(--Corner-radius-Medium);
+  height: 320px; /* Fixed height from Figma */
   margin-right: var(--Spacing-x2);
   text-align: center;
   width: 100%;
@@ -12,11 +13,29 @@
   overflow: hidden;
 }
 
+.imageWrapper {
+  display: flex;
+}
+
+.imageWrapper::after {
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.36) 50%,
+    rgba(0, 0, 0, 0.75) 100%
+  );
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
 .image {
   object-fit: cover;
-  overflow: hidden;
   width: 100%;
-  height: auto;
+  height: 100%;
   min-height: 320px; /* Fixed height from Figma */
 }
 
@@ -78,9 +97,10 @@
 .themeImage {
   --font-color: var(--Base-Text-Inverted);
   --script-color: var(--Base-Text-Inverted);
+}
 
-  border: 1px; /* px from Figma */
-  border-color: var(--Base-Border-Subtle);
+.themeImage .content {
+  position: absolute;
 }
 
 .scriptContainer {
@@ -88,7 +108,7 @@
   gap: var(--Spacing-x1);
 }
 
-span.scriptedTitle {
+.scriptedTitle {
   color: var(--script-color);
   padding: var(--Spacing-x1);
   margin: 0;
@@ -98,7 +118,7 @@ span.scriptedTitle {
   color: var(--font-color);
 }
 
-p.bodyText {
+.bodyText {
   color: var(--font-color);
 }
 

components/TempDesignSystem/Card/card.ts

@@ -11,16 +11,18 @@ export interface CardProps
     href: string
     title: string
     openInNewTab?: boolean
-    isExternal: boolean
-  }
+    isExternal?: boolean
+  } | null
   secondaryButton?: {
     href: string
     title: string
     openInNewTab?: boolean
-    isExternal: boolean
-  }
+    isExternal?: boolean
+  } | null
   scriptedTopTitle?: string | null
   heading?: string | null
   bodyText?: string | null
   backgroundImage?: ImageVaultAsset
+  onPrimaryButtonClick?: () => void
+  onSecondaryButtonClick?: () => void
 }

components/TempDesignSystem/Card/index.tsx

@@ -21,24 +21,28 @@ export default function Card({
   className,
   theme,
   backgroundImage,
+  onPrimaryButtonClick,
+  onSecondaryButtonClick,
 }: CardProps) {
   const { buttonTheme, primaryLinkColor, secondaryLinkColor } = getTheme(theme)
 
   return (
     <article
       className={cardVariants({
-        className,
         theme,
+        className,
       })}
     >
       {backgroundImage && (
-        <Image
-          src={backgroundImage.url}
-          className={styles.image}
-          alt={backgroundImage.meta.alt || backgroundImage.title}
-          width={420}
-          height={320}
-        />
+        <div className={styles.imageWrapper}>
+          <Image
+            src={backgroundImage.url}
+            className={styles.image}
+            alt={backgroundImage.meta.alt || backgroundImage.title}
+            width={backgroundImage.dimensions.width || 420}
+            height={backgroundImage.dimensions.height || 320}
+          />
+        </div>
       )}
       <div className={styles.content}>
         {scriptedTopTitle ? (
@@ -73,6 +77,7 @@ export default function Card({
                 href={primaryButton.href}
                 target={primaryButton.openInNewTab ? "_blank" : undefined}
                 color={primaryLinkColor}
+                onClick={onPrimaryButtonClick}
               >
                 {primaryButton.title}
               </Link>
@@ -90,6 +95,7 @@ export default function Card({
                 href={secondaryButton.href}
                 target={secondaryButton.openInNewTab ? "_blank" : undefined}
                 color={secondaryLinkColor}
+                onClick={onSecondaryButtonClick}
               >
                 {secondaryButton.title}
               </Link>

components/TempDesignSystem/Link/link.module.css

@@ -196,3 +196,25 @@
   letter-spacing: var(--typography-Caption-Bold-letterSpacing);
   line-height: var(--typography-Caption-Bold-lineHeight);
 }
+
+.menu {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-decoration: none;
+  width: 100%;
+  padding: var(--Spacing-x1);
+  gap: var(--Spacing-x-one-and-half);
+  color: var(--Base-Text-High-contrast);
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: var(--typography-Body-Bold-fontWeight);
+  line-height: var(--typography-Body-Bold-lineHeight);
+  letter-spacing: var(--typography-Body-Bold-letterSpacing);
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.menu:hover {
+  color: var(--Base-Text-High-contrast);
+  background-color: var(--Base-Surface-Primary-light-Hover-alt);
+}

components/TempDesignSystem/Link/variants.ts

@@ -31,6 +31,7 @@ export const linkVariants = cva(styles.link, {
       icon: styles.icon,
       underscored: styles.underscored,
       myPageMobileDropdown: styles.myPageMobileDropdown,
+      menu: styles.menu,
       shortcut: styles.shortcut,
       sidebar: styles.sidebar,
       tab: styles.tab,
@@ -40,6 +41,7 @@ export const linkVariants = cva(styles.link, {
     color: "black",
     variant: "default",
     textDecoration: "none",
+    size: "regular",
   },
   compoundVariants: [
     {

components/TempDesignSystem/LinkChips/Chip/chip.module.css

@@ -0,0 +1,14 @@
+.linkChip {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-half);
+  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  border-radius: var(--Corner-radius-Small);
+  background-color: var(--Base-Button-Inverted-Fill-Normal);
+  transition: background-color 0.3s;
+  text-decoration: none;
+}
+
+.linkChip:hover {
+  background-color: var(--Base-Button-Inverted-Fill-Hover-alt);
+}

components/TempDesignSystem/LinkChips/Chip/chip.ts

@@ -0,0 +1,4 @@
+export interface LinkChipProps {
+  url: string
+  title: string
+}

components/TempDesignSystem/LinkChips/Chip/index.tsx

@@ -0,0 +1,19 @@
+import Link from "next/link"
+
+import { ChevronRightSmallIcon } from "@/components/Icons"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import styles from "./chip.module.css"
+
+import type { LinkChipProps } from "./chip"
+
+export default function LinkChip({ url, title }: LinkChipProps) {
+  return (
+    <Caption textTransform="bold" color="burgundy" asChild>
+      <Link href={url} className={styles.linkChip}>
+        {title}
+        <ChevronRightSmallIcon color="burgundy" width={20} height={20} />
+      </Link>
+    </Caption>
+  )
+}

components/TempDesignSystem/LinkChips/index.tsx

@@ -0,0 +1,21 @@
+import LinkChip from "./Chip"
+
+import styles from "./linkChips.module.css"
+
+import type { LinkChipsProps } from "./linkChips"
+
+export default function LinkChips({ chips }: LinkChipsProps) {
+  if (!chips.length) {
+    return null
+  }
+
+  return (
+    <ul className={styles.linkChips}>
+      {chips.map(({ url, title }) => (
+        <li key={`link-chip-${title}`}>
+          <LinkChip url={url} title={title} />
+        </li>
+      ))}
+    </ul>
+  )
+}

components/TempDesignSystem/LinkChips/linkChips.module.css

@@ -0,0 +1,8 @@
+.linkChips {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--Spacing-x1);
+}

components/TempDesignSystem/LinkChips/linkChips.ts

@@ -0,0 +1,5 @@
+import type { LinkChipProps } from "./Chip/chip"
+
+export interface LinkChipsProps {
+  chips: LinkChipProps[]
+}

components/TempDesignSystem/ShowMoreButton/button.module.css

@@ -0,0 +1,4 @@
+.container {
+  display: flex;
+  justify-content: center;
+}

components/TempDesignSystem/ShowMoreButton/index.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { ChevronDownIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+
+import styles from "./button.module.css"
+
+import type { ShowMoreButtonParams } from "@/types/components/myPages/stays/button"
+
+export default function ShowMoreButton({
+  disabled,
+  loadMoreData,
+}: ShowMoreButtonParams) {
+  const { formatMessage } = useIntl()
+  return (
+    <div className={styles.container}>
+      <Button
+        disabled={disabled}
+        onClick={loadMoreData}
+        variant="icon"
+        type="button"
+        theme="base"
+        intent="text"
+      >
+        <ChevronDownIcon />
+        {formatMessage({ id: "Show more" })}
+      </Button>
+    </div>
+  )
+}

components/TempDesignSystem/TeaserCard/index.tsx

@@ -7,32 +7,32 @@ import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 
 import Subtitle from "../Text/Subtitle"
-import { contentCardVariants } from "./variants"
+import { teaserCardVariants } from "./variants"
 
-import styles from "./contentCard.module.css"
+import styles from "./teaserCard.module.css"
 
-import type { ContentCardProps } from "@/types/components/contentCard"
+import type { TeaserCardProps } from "@/types/components/teaserCard"
 
-export default function ContentCard({
+export default function TeaserCard({
   title,
   description,
   primaryButton,
   secondaryButton,
   sidePeekButton,
-  backgroundImage,
+  image,
   style = "default",
   alwaysStack = false,
   className,
-}: ContentCardProps) {
-  const cardClasses = contentCardVariants({ style, alwaysStack, className })
+}: TeaserCardProps) {
+  const cardClasses = teaserCardVariants({ style, alwaysStack, className })
 
   return (
-    <div className={cardClasses}>
-      {backgroundImage && (
+    <article className={cardClasses}>
+      {image && (
         <div className={styles.imageContainer}>
           <Image
-            src={backgroundImage.url}
-            alt={backgroundImage.meta?.alt || ""}
+            src={image.url}
+            alt={image.meta?.alt || ""}
             className={styles.backgroundImage}
             width={399}
             height={201}
@@ -70,6 +70,7 @@ export default function ContentCard({
                 <Link
                   href={primaryButton.href}
                   target={primaryButton.openInNewTab ? "_blank" : undefined}
+                  color="none"
                 >
                   {primaryButton.title}
                 </Link>
@@ -93,6 +94,6 @@ export default function ContentCard({
           </div>
         )}
       </div>
-    </div>
+    </article>
   )
 }

components/TempDesignSystem/TeaserCard/variants.ts

@@ -1,8 +1,8 @@
 import { cva } from "class-variance-authority"
 
-import styles from "./contentCard.module.css"
+import styles from "./teaserCard.module.css"
 
-export const contentCardVariants = cva(styles.card, {
+export const teaserCardVariants = cva(styles.card, {
   variants: {
     style: {
       default: styles.default,

components/TempDesignSystem/Text/Caption/caption.module.css

@@ -1,4 +1,4 @@
-.caption {
+p.caption {
   margin: 0;
   padding: 0;
 }