feat(BOOK-743): Replaced deprecated Button component
Approved-by: Bianca Widstam
This commit is contained in:
Erik Tiekstra
@@ -1,196 +0,0 @@
|
||||
.container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border-radius: var(--Corner-radius-md);
|
||||
margin-right: var(--Space-x2);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
text-wrap: wrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
height: 320px; /* Fixed height from Figma */
|
||||
}
|
||||
|
||||
.dynamic {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.imageGradient::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;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 320px; /* Fixed height from Figma */
|
||||
}
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
padding: var(--Space-x4) var(--Space-x3);
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
.themeOne {
|
||||
background: var(--Primary-Light-Surface-Normal);
|
||||
.heading {
|
||||
color: var(--Primary-Light-On-Surface-Text);
|
||||
}
|
||||
.bodyText {
|
||||
color: var(--Primary-Light-On-Surface-Text);
|
||||
}
|
||||
|
||||
.scriptedTitle {
|
||||
color: var(--Primary-Light-On-Surface-Accent);
|
||||
}
|
||||
}
|
||||
|
||||
.themeTwo {
|
||||
background: var(--Secondary-Light-Surface-Normal);
|
||||
.heading {
|
||||
color: var(--Secondary-Light-On-Surface-Text);
|
||||
}
|
||||
.bodyText {
|
||||
color: var(--Secondary-Light-On-Surface-Text);
|
||||
}
|
||||
|
||||
.scriptedTitle {
|
||||
color: var(--Secondary-Light-On-Surface-Accent);
|
||||
}
|
||||
}
|
||||
|
||||
.themeThree {
|
||||
background: var(--Tertiary-Light-Surface-Normal);
|
||||
.heading {
|
||||
color: var(--Tertiary-Light-On-Surface-Text);
|
||||
}
|
||||
.bodyText {
|
||||
color: var(--Tertiary-Light-On-Surface-Text);
|
||||
}
|
||||
|
||||
.scriptedTitle {
|
||||
color: var(--Tertiary-Light-On-Surface-Accent);
|
||||
}
|
||||
}
|
||||
|
||||
.themePrimaryDark {
|
||||
background: var(--Primary-Dark-Surface-Normal);
|
||||
.heading {
|
||||
color: var(--Primary-Dark-On-Surface-Text);
|
||||
}
|
||||
.bodyText {
|
||||
color: var(--Primary-Dark-On-Surface-Text);
|
||||
}
|
||||
|
||||
.scriptedTitle {
|
||||
color: var(--Primary-Dark-On-Surface-Accent);
|
||||
}
|
||||
}
|
||||
|
||||
.themePrimaryDim {
|
||||
background: var(--Primary-Dim-Surface-Normal);
|
||||
.heading {
|
||||
color: var(--Primary-Dim-On-Surface-Text);
|
||||
}
|
||||
.bodyText {
|
||||
color: var(--Primary-Dim-On-Surface-Text);
|
||||
}
|
||||
|
||||
.scriptedTitle {
|
||||
color: var(--Primary-Dim-On-Surface-Accent);
|
||||
}
|
||||
}
|
||||
|
||||
.themePrimaryInverted {
|
||||
background: var(--Base-Surface-Primary-light-Normal);
|
||||
.heading {
|
||||
color: var(--Primary-Light-On-Surface-Text);
|
||||
}
|
||||
.bodyText {
|
||||
color: var(--Primary-Light-On-Surface-Text);
|
||||
}
|
||||
|
||||
.scriptedTitle {
|
||||
color: var(--Primary-Light-On-Surface-Accent);
|
||||
}
|
||||
}
|
||||
|
||||
.themePrimaryStrong {
|
||||
background: var(--Primary-Strong-Surface-Normal);
|
||||
.heading {
|
||||
color: var(--Primary-Strong-On-Surface-Text);
|
||||
}
|
||||
.bodyText {
|
||||
color: var(--Primary-Strong-On-Surface-Text);
|
||||
}
|
||||
|
||||
.scriptedTitle {
|
||||
color: var(--Primary-Strong-On-Surface-Accent);
|
||||
}
|
||||
}
|
||||
|
||||
.themeImage {
|
||||
.bodyText {
|
||||
color: var(--Base-Text-Inverted);
|
||||
}
|
||||
.heading {
|
||||
color: var(--Base-Text-Inverted);
|
||||
}
|
||||
.content {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.scriptedTitle {
|
||||
color: var(--Base-Text-Inverted);
|
||||
}
|
||||
}
|
||||
|
||||
.scriptContainer {
|
||||
display: grid;
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.scriptedTitle {
|
||||
padding: var(--Space-x1);
|
||||
margin: 0;
|
||||
transform: rotate(-3deg);
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.buttonContainer {
|
||||
display: grid;
|
||||
gap: var(--Space-x1);
|
||||
justify-content: center;
|
||||
}
|
||||
.button {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.buttonContainer {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
import type { ImageVaultAsset } from "@scandic-hotels/common/utils/imageVault"
|
||||
import type { VariantProps } from "class-variance-authority"
|
||||
import type { JSX } from "react"
|
||||
|
||||
import type { ApiImage } from "@/types/components/image"
|
||||
import type { cardVariants } from "./variants"
|
||||
|
||||
export interface CardProps
|
||||
extends React.HTMLAttributes<HTMLDivElement>,
|
||||
VariantProps<typeof cardVariants> {
|
||||
primaryButton?: {
|
||||
href: string
|
||||
title: string
|
||||
openInNewTab?: boolean
|
||||
forceReload?: boolean
|
||||
scrollOnClick?: boolean
|
||||
materialIcon?: JSX.Element
|
||||
} | null
|
||||
secondaryButton?: {
|
||||
href: string
|
||||
title: string
|
||||
openInNewTab?: boolean
|
||||
forceReload?: boolean
|
||||
scrollOnClick?: boolean
|
||||
materialIcon?: JSX.Element
|
||||
} | null
|
||||
scriptedTopTitle?: string | null
|
||||
heading?: string | null
|
||||
bodyText?: string | null
|
||||
imageGradient?: boolean
|
||||
onPrimaryButtonClick?: () => void
|
||||
onSecondaryButtonClick?: () => void
|
||||
backgroundImage?: ImageVaultAsset | ApiImage
|
||||
}
|
||||
@@ -1,129 +0,0 @@
|
||||
import { cx } from "class-variance-authority"
|
||||
import Link from "next/link"
|
||||
|
||||
import Image from "@scandic-hotels/design-system/Image"
|
||||
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { getButtonTheme } from "./utils"
|
||||
import { cardVariants } from "./variants"
|
||||
|
||||
import styles from "./card.module.css"
|
||||
|
||||
import type { CardProps } from "./card"
|
||||
|
||||
export default function Card({
|
||||
primaryButton,
|
||||
secondaryButton,
|
||||
scriptedTopTitle,
|
||||
heading,
|
||||
bodyText,
|
||||
className,
|
||||
theme,
|
||||
backgroundImage,
|
||||
imageGradient,
|
||||
onPrimaryButtonClick,
|
||||
onSecondaryButtonClick,
|
||||
height,
|
||||
}: CardProps) {
|
||||
const buttonTheme = getButtonTheme(theme)
|
||||
|
||||
return (
|
||||
<article
|
||||
className={cardVariants({
|
||||
theme,
|
||||
height,
|
||||
className,
|
||||
})}
|
||||
>
|
||||
{backgroundImage && (
|
||||
<div
|
||||
className={cx(styles.imageContainer, {
|
||||
[styles.imageGradient]: imageGradient,
|
||||
})}
|
||||
>
|
||||
<Image
|
||||
src={backgroundImage.url}
|
||||
className={styles.image}
|
||||
alt={backgroundImage.meta.alt || backgroundImage.title}
|
||||
fill
|
||||
sizes="(min-width: 1367px) 700px, 900px"
|
||||
focalPoint={backgroundImage.focalPoint}
|
||||
dimensions={backgroundImage.dimensions}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.content}>
|
||||
{scriptedTopTitle && (
|
||||
<section className={styles.scriptContainer}>
|
||||
<Typography variant="Title/Decorative/md">
|
||||
<span className={styles.scriptedTitle}>{scriptedTopTitle}</span>
|
||||
</Typography>
|
||||
</section>
|
||||
)}
|
||||
<Typography variant="Title/smLowCase" className={styles.heading}>
|
||||
<h3>{heading}</h3>
|
||||
</Typography>
|
||||
{bodyText && (
|
||||
<Typography
|
||||
variant="Body/Paragraph/mdRegular"
|
||||
className={styles.bodyText}
|
||||
>
|
||||
<p>{bodyText}</p>
|
||||
</Typography>
|
||||
)}
|
||||
<div className={styles.buttonContainer}>
|
||||
{primaryButton ? (
|
||||
<Button
|
||||
asChild
|
||||
theme={buttonTheme}
|
||||
size="small"
|
||||
className={styles.button}
|
||||
>
|
||||
{primaryButton.forceReload ? (
|
||||
<a
|
||||
href={primaryButton.href}
|
||||
target={primaryButton.openInNewTab ? "_blank" : undefined}
|
||||
onClick={onPrimaryButtonClick}
|
||||
>
|
||||
{primaryButton.title}
|
||||
{primaryButton.materialIcon}
|
||||
</a>
|
||||
) : (
|
||||
<Link
|
||||
href={primaryButton.href}
|
||||
target={primaryButton.openInNewTab ? "_blank" : undefined}
|
||||
onClick={onPrimaryButtonClick}
|
||||
scroll={primaryButton.scrollOnClick ?? true}
|
||||
>
|
||||
{primaryButton.title}
|
||||
{primaryButton.materialIcon}
|
||||
</Link>
|
||||
)}
|
||||
</Button>
|
||||
) : null}
|
||||
{secondaryButton ? (
|
||||
<Button
|
||||
asChild
|
||||
theme={buttonTheme}
|
||||
size="small"
|
||||
className={styles.button}
|
||||
intent="secondary"
|
||||
disabled
|
||||
>
|
||||
<Link
|
||||
href={secondaryButton.href}
|
||||
target={secondaryButton.openInNewTab ? "_blank" : undefined}
|
||||
onClick={onSecondaryButtonClick}
|
||||
scroll={secondaryButton.scrollOnClick ?? true}
|
||||
>
|
||||
{secondaryButton.title}
|
||||
{secondaryButton.materialIcon}
|
||||
</Link>
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
import type { ButtonProps } from "@scandic-hotels/design-system/OldDSButton"
|
||||
|
||||
import type { CardProps } from "@/components/TempDesignSystem/Card/card"
|
||||
|
||||
export function getButtonTheme(
|
||||
theme: CardProps["theme"]
|
||||
): ButtonProps["theme"] {
|
||||
switch (theme) {
|
||||
case "two":
|
||||
return "secondaryLight"
|
||||
case "three":
|
||||
return "tertiaryLight"
|
||||
case "primaryDark":
|
||||
return "primaryDark"
|
||||
case "primaryStrong":
|
||||
case "image":
|
||||
return "primaryStrong"
|
||||
case "one":
|
||||
case "primaryDim":
|
||||
case "primaryInverted":
|
||||
default:
|
||||
return "primaryLight"
|
||||
}
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
import { cva } from "class-variance-authority"
|
||||
|
||||
import styles from "./card.module.css"
|
||||
|
||||
export const cardVariants = cva(styles.container, {
|
||||
variants: {
|
||||
theme: {
|
||||
one: styles.themeOne,
|
||||
two: styles.themeTwo,
|
||||
three: styles.themeThree,
|
||||
|
||||
primaryDark: styles.themePrimaryDark,
|
||||
primaryDim: styles.themePrimaryDim,
|
||||
primaryInverted: styles.themePrimaryInverted,
|
||||
primaryStrong: styles.themePrimaryStrong,
|
||||
|
||||
image: styles.themeImage,
|
||||
},
|
||||
height: {
|
||||
fixed: styles.fixed,
|
||||
dynamic: styles.dynamic,
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
theme: "one",
|
||||
height: "fixed",
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user