Merged in feat/LOY-400-create-spend-points-modal (pull request #3131)
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
This commit is contained in:
Emma Zettervall
@@ -8,7 +8,7 @@
|
||||
margin-right: var(--Space-x2);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
text-wrap: balance;
|
||||
text-wrap: wrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -101,6 +101,9 @@
|
||||
gap: var(--Space-x1);
|
||||
justify-content: center;
|
||||
}
|
||||
.button {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.buttonContainer {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
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"
|
||||
@@ -11,15 +12,17 @@ export interface CardProps
|
||||
href: string
|
||||
title: string
|
||||
openInNewTab?: boolean
|
||||
isExternal?: boolean
|
||||
forceReload?: boolean
|
||||
scrollOnClick?: boolean
|
||||
materialIcon?: JSX.Element
|
||||
} | null
|
||||
secondaryButton?: {
|
||||
href: string
|
||||
title: string
|
||||
openInNewTab?: boolean
|
||||
isExternal?: boolean
|
||||
forceReload?: boolean
|
||||
scrollOnClick?: boolean
|
||||
materialIcon?: JSX.Element
|
||||
} | null
|
||||
scriptedTopTitle?: string | null
|
||||
heading?: string | null
|
||||
|
||||
@@ -93,15 +93,32 @@ export default function Card({
|
||||
) : null}
|
||||
<div className={styles.buttonContainer}>
|
||||
{primaryButton ? (
|
||||
<Button asChild theme={buttonTheme} size="small">
|
||||
<Link
|
||||
href={primaryButton.href}
|
||||
target={primaryButton.openInNewTab ? "_blank" : undefined}
|
||||
onClick={onPrimaryButtonClick}
|
||||
scroll={primaryButton.scrollOnClick ?? true}
|
||||
>
|
||||
{primaryButton.title}
|
||||
</Link>
|
||||
<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 ? (
|
||||
@@ -109,6 +126,7 @@ export default function Card({
|
||||
asChild
|
||||
theme={buttonTheme}
|
||||
size="small"
|
||||
className={styles.button}
|
||||
intent="secondary"
|
||||
disabled
|
||||
>
|
||||
@@ -119,6 +137,7 @@ export default function Card({
|
||||
scroll={secondaryButton.scrollOnClick ?? true}
|
||||
>
|
||||
{secondaryButton.title}
|
||||
{secondaryButton.materialIcon}
|
||||
</Link>
|
||||
</Button>
|
||||
) : null}
|
||||
|
||||
Reference in New Issue
Block a user