f443bae46e
Feat/LOY-400 create spend points modal * feat(LOY-400): Added custom button to my pages overview and skeleton file to custom modal for my points. * feat(LOY-400): Added custom button to my pages overview and components for custom modal for my points. * feat(LOY-400): Changed some style and infogridcardover * feat(LOY-400):Removed custom card components and changed in infoCard: Added imagePosition top, added optional height prop. In Card: Changed Text-wrap styling, added min-width styling to buttons, added optional Icon prop, added optional height prop * feat(LOY-400):Added linkList, LinkListItem component and messageBanner component. Added granola illustration. * feat(LOY-400): Removed background in several illustrations. Added component for illustration. Fixed LinkedList and styling for UsePointsButton. * feat(LOY-400): Added modal to PointsToSpendCard and fixed UsePointsButton. * fix(LOY-400):added some styling * feat(LOY-400): Linked Modal to contentstack and fetch the data in cards with UsePointsModal for now * feat(LOY-400): changed link to aria-component, cleaned up a bit * feat(LOY-400): Changed height for larger modals in mobile, fixed zod schema for no illustration input, cleaned up * fix(LOY-400): fixed graphql after rebase * fix(LOY-400): mini fix * fix(LOY-400): fixed pr-comments * fix(LOY-400): fixed some PR-comments * fix(LOY-400): fixed a PR-comment * feat(LOY-400): added size prop to ilustration in LinkListItem to be able to use illustrations in IllustrationByIconName * fix(LOY-400): fixed pr-comments * Merged in feat/LOY-402-pre-ticked-book-reward-night-in-booking-flow (pull request #3210) Feat/LOY-402 pre ticked book reward night in booking flow * feat(LOY-402): Changed UsePointsModal structure to handle button actions in card. * feat(LOY-402): added functionality for book now button * feat(LOY-400): pr comment fix * feat(LOY-402): transformed the contentstack data * fix(LOY-402): fixed pr comments Approved-by: Chuma Mcphoy (We Ahead) Approved-by: Anton Gunnarsson Approved-by: Matilda Landström * Merged in feat/LOY-404-add-tracking-for-spend-points-modal (pull request #3229) Feat/LOY-404 add tracking for spend points modal * feat(LOY-402): Changed UsePointsModal structure to handle button actions in card. * feat(LOY-402): added functionality for book now button * feat(LOY-400): pr comment fix * feat(LOY-402): transformed the contentstack data * feat(LOY-404): added tracking * fix(LOY-404): fix for session storage removal of bookNowFromPointsModal * feat(LOY-404): added consts * fix(LOY-404): moved foxusWidget const * fix(LOY-404): moved BOOKING_WIDGET_STATE const * fix(LOY-404):fix Approved-by: Matilda Landström * fix(LOY-400): some fixes * feat(LOY-400): created linkList storybook Approved-by: Chuma Mcphoy (We Ahead) Approved-by: Matilda Landström
149 lines
4.1 KiB
TypeScript
149 lines
4.1 KiB
TypeScript
import { cx } from "class-variance-authority"
|
|
import Link from "next/link"
|
|
|
|
import Body from "@scandic-hotels/design-system/Body"
|
|
import Image from "@scandic-hotels/design-system/Image"
|
|
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
|
|
import Title from "@scandic-hotels/design-system/Title"
|
|
|
|
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
|
|
|
|
import {
|
|
getBodyFontColor,
|
|
getButtonTheme,
|
|
getScriptFontColor,
|
|
getTitleFontColor,
|
|
} 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)
|
|
const titleFontColor = getTitleFontColor(theme)
|
|
const scriptFontColor = getScriptFontColor(theme)
|
|
const bodyFontColor = getBodyFontColor(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}>
|
|
<BiroScript
|
|
className={styles.scriptedTitle}
|
|
type="two"
|
|
tilted="small"
|
|
color={scriptFontColor}
|
|
>
|
|
{scriptedTopTitle}
|
|
</BiroScript>
|
|
</section>
|
|
) : null}
|
|
<Title
|
|
as="h3"
|
|
level="h3"
|
|
textAlign="center"
|
|
textTransform="regular"
|
|
color={titleFontColor}
|
|
>
|
|
{heading}
|
|
</Title>
|
|
{bodyText ? (
|
|
<Body textAlign="center" color={bodyFontColor}>
|
|
{bodyText}
|
|
</Body>
|
|
) : null}
|
|
<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>
|
|
)
|
|
}
|