scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-391): Added sidepeek functionality to teasercard

Browse Source
This commit is contained in:
Erik Tiekstra
2024-10-10 08:13:50 +02:00
parent a5d9eb43c9
commit 9620071c78
21 changed files with 311 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/globals.css
View File

@@ -115,6 +115,7 @@
--header-z-index: 10;
--menu-overlay-z-index: 10;
--dialog-z-index: 9;
--sidepeek-z-index: 11;
}
* {

7
components/Blocks/CardsGrid.tsx
View File

@@ -7,11 +7,15 @@ import TeaserCard from "@/components/TempDesignSystem/TeaserCard"
import type { CardsGridProps } from "@/types/components/blocks/cardsGrid"
import { CardsGridEnum } from "@/types/enums/cardsGrid"
import { CardsGridLayoutEnum } from "@/types/trpc/routers/contentstack/blocks"
export default function CardsGrid({
cards_grid,
firstItem = false,
}: CardsGridProps) {
const columns =
cards_grid.layout === CardsGridLayoutEnum.THREE_COLUMNS ? 3 : 2
return (
<SectionContainer>
<SectionHeader
@@ -19,7 +23,7 @@ export default function CardsGrid({
preamble={cards_grid.preamble}
topTitle={firstItem}
/>
<Grids.Stackable>
<Grids.Stackable columns={columns}>
{cards_grid.cards.map((card) => {
switch (card.__typename) {
case CardsGridEnum.cards.Card:
@@ -43,6 +47,7 @@ export default function CardsGrid({
primaryButton={card.primaryButton}
secondaryButton={card.secondaryButton}
sidePeekButton={card.sidePeekButton}
sidePeekContent={card.sidePeekContent}
image={card.image}
/>
)

4
components/BookingWidget/Client.tsx
View File

@@ -7,7 +7,7 @@ import { dt } from "@/lib/dt"
import Form from "@/components/Forms/BookingWidget"
import { bookingWidgetSchema } from "@/components/Forms/BookingWidget/schema"
import { CloseLarge } from "@/components/Icons"
import { CloseLargeIcon } from "@/components/Icons"
import { debounce } from "@/utils/debounce"
import MobileToggleButton from "./MobileToggleButton"
@@ -98,7 +98,7 @@ export default function BookingWidgetClient({
onClick={closeMobileSearch}
type="button"
>
<CloseLarge />
<CloseLargeIcon />
</button>
<Form locations={locations} type={type} />
</section>

4
components/DatePicker/Screen/Mobile.tsx
View File

@@ -6,7 +6,7 @@ import { useIntl } from "react-intl"
import { Lang } from "@/constants/languages"
import { dt } from "@/lib/dt"
import { CloseLarge } from "@/components/Icons"
import { CloseLargeIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -127,7 +127,7 @@ export default function DatePickerMobile({
))}
</select>
<button className={styles.close} onClick={close} type="button">
<CloseLarge />
<CloseLargeIcon />
</button>
</header>
{children}

4
components/Icons/get-icon-by-icon-name.ts
View File

@@ -21,7 +21,7 @@ import {
ChevronRightIcon,
ChevronRightSmallIcon,
CloseIcon,
CloseLarge,
CloseLargeIcon,
CoffeeIcon,
ConciergeIcon,
CrossCircle,
@@ -103,7 +103,7 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
case IconName.Close:
return CloseIcon
case IconName.CloseLarge:
return CloseLarge
return CloseLargeIcon
case IconName.Coffee:
return CoffeeIcon
case IconName.Concierge:

2
components/Icons/index.tsx
View File

@@ -16,7 +16,7 @@ export { default as ChevronLeftIcon } from "./ChevronLeft"
export { default as ChevronRightIcon } from "./ChevronRight"
export { default as ChevronRightSmallIcon } from "./ChevronRightSmall"
export { default as CloseIcon } from "./Close"
export { default as CloseLarge } from "./CloseLarge"
export { default as CloseLargeIcon } from "./CloseLarge"
export { default as CoffeeIcon } from "./Coffee"
export { default as ConciergeIcon } from "./Concierge"
export { default as CreditCard } from "./CreditCard"

11
components/TempDesignSystem/SidePeek/index.tsx
View File

@@ -10,7 +10,7 @@ import {
} from "react-aria-components"
import { useIntl } from "react-intl"
import { CloseIcon } from "@/components/Icons"
import { CloseLargeIcon } from "@/components/Icons"
import { SidePeekContext } from "@/components/SidePeekProvider"
import Button from "../Button"
@@ -52,13 +52,16 @@ function SidePeek({
</div>
)
}
return (
<div ref={setRef}>
<DialogTrigger>
<ModalOverlay
UNSTABLE_portalContainer={rootDiv}
className={styles.overlay}
isOpen={isOpen || contentKey === context?.activeSidePeek}
isOpen={
isOpen || (!!contentKey && contentKey === context?.activeSidePeek)
}
onOpenChange={onClose}
isDismissable
>
@@ -80,9 +83,9 @@ function SidePeek({
aria-label={intl.formatMessage({ id: "Close" })}
className={styles.closeButton}
intent="text"
onPress={onClose}
onClick={onClose}
>
<CloseIcon color="burgundy" height={32} width={32} />
<CloseLargeIcon color="burgundy" />
</Button>
</header>
<div className={styles.sidePeekContent}>{children}</div>

5
components/TempDesignSystem/SidePeek/sidePeek.module.css
View File

@@ -22,12 +22,13 @@
}
.overlay {
position: absolute;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
z-index: var(--sidepeek-z-index);
background-color: var(--UI-Opacity-Almost-Black-30);
}
.modal {

2
components/TempDesignSystem/SidePeek/sidePeek.ts
View File

@@ -1,5 +1,5 @@
export interface SidePeekProps {
contentKey: string
contentKey?: string
title: string
isOpen?: boolean
handleClose?: (isOpen: boolean) => void

82
components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx Normal file
View File

@@ -0,0 +1,82 @@
"use client"
import { useState } from "react"
import { ChevronRightIcon } from "@/components/Icons"
import JsonToHtml from "@/components/JsonToHtml"
import Button from "@/components/TempDesignSystem/Button"
import Link from "../../Link"
import SidePeek from "../../SidePeek"
import styles from "./sidepeek.module.css"
import { TeaserCardSidepeekProps } from "@/types/components/teaserCard"
export default function TeaserCardSidepeek({
button,
data,
}: TeaserCardSidepeekProps) {
const [sidePeekIsOpen, setSidePeekIsOpen] = useState(false)
const { heading, content, primary_button, secondary_button } = data
return (
<>
<Button
onClick={() => setSidePeekIsOpen(true)}
theme="base"
variant="icon"
intent="text"
size="small"
wrapping
>
{button.call_to_action_text}
<ChevronRightIcon />
</Button>
<SidePeek
title={heading}
isOpen={sidePeekIsOpen}
handleClose={() => setSidePeekIsOpen(false)}
>
<JsonToHtml
nodes={content.json.children}
embeds={content.embedded_itemsConnection.edges}
/>
<div className={styles.ctaContainer}>
{primary_button && (
<Button
asChild
theme="base"
intent="primary"
size="small"
className={styles.ctaButton}
>
<Link
href={primary_button.href}
target={primary_button.openInNewTab ? "_blank" : undefined}
color="none"
>
{primary_button.title}
</Link>
</Button>
)}
{secondary_button && (
<Button
asChild
intent="secondary"
size="small"
className={styles.ctaButton}
>
<Link
href={secondary_button.href}
target={secondary_button.openInNewTab ? "_blank" : undefined}
>
{secondary_button.title}
</Link>
</Button>
)}
</div>
</SidePeek>
</>
)
}

4
components/TempDesignSystem/TeaserCard/Sidepeek/sidepeek.module.css Normal file
View File

@@ -0,0 +1,4 @@
.ctaContainer {
display: grid;
gap: var(--Spacing-x2);
}

23
components/TempDesignSystem/TeaserCard/index.tsx
View File

@@ -1,10 +1,10 @@
import { ChevronRightIcon } from "@/components/Icons"
import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "../Text/Subtitle"
import TeaserCardSidepeek from "./Sidepeek"
import { teaserCardVariants } from "./variants"
import styles from "./teaserCard.module.css"
@@ -17,6 +17,7 @@ export default function TeaserCard({
primaryButton,
secondaryButton,
sidePeekButton,
sidePeekContent,
image,
style = "default",
alwaysStack = false,
@@ -41,21 +42,11 @@ export default function TeaserCard({
<Subtitle textAlign="left" type="two" color="black">
{title}
</Subtitle>
<Body color="black">{description}</Body>
{!!sidePeekButton ? (
<Button
// onClick={() => {
// // TODO: Implement sidePeek functionality once SW-341 is merged.
// }}
theme="base"
variant="icon"
intent="text"
size="small"
className={styles.sidePeekCTA}
>
{sidePeekButton.title}
<ChevronRightIcon />
</Button>
<Body color="black" className={styles.body}>
{description}
</Body>
{sidePeekButton && sidePeekContent ? (
<TeaserCardSidepeek button={sidePeekButton} data={sidePeekContent} />
) : (
<div className={styles.ctaContainer}>
{primaryButton && (

17
components/TempDesignSystem/TeaserCard/teaserCard.module.css
View File

@@ -54,6 +54,17 @@
width: 100%;
}
.body {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
/* line-height variables are in %, so using the value in rem instead */
max-height: calc(3 * 1.5rem);
}
@media (min-width: 1367px) {
.card:not(.alwaysStack) .ctaContainer {
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
@@ -63,9 +74,3 @@
grid-template-columns: 1fr;
}
}
.sidePeekCTA {
/* TODO: Create ticket to remove padding on "link" buttons,
align w. design on this. */
padding: 0 !important;
}

4
components/TempDesignSystem/Toasts/index.tsx
View File

@@ -2,7 +2,7 @@ import { ExternalToast, toast as sonnerToast, Toaster } from "sonner"
import {
CheckCircleIcon,
CloseLarge,
CloseLargeIcon,
CrossCircle,
InfoCircleIcon,
WarningTriangle,
@@ -42,7 +42,7 @@ export function Toast({ message, onClose, variant }: ToastsProps) {
</div>
<Body className={styles.message}>{message}</Body>
<Button onClick={onClose} variant="icon" intent="text">
<CloseLarge />
<CloseLargeIcon />
</Button>
</div>
)

58
lib/graphql/Fragments/Blocks/TeaserCard.graphql
View File

@@ -28,6 +28,7 @@ fragment TeaserCardBlock on TeaserCard {
...LoyaltyPageLink
...ContentPageLink
...AccountPageLink
...HotelPageLink
}
}
}
@@ -55,6 +56,63 @@ fragment TeaserCardBlock on TeaserCard {
sidepeek_button {
call_to_action_text
}
sidepeek_content {
heading
content {
embedded_itemsConnection {
edges {
node {
__typename
...AccountPageLink
...ContentPageLink
...HotelPageLink
...LoyaltyPageLink
}
}
}
json
}
has_primary_button
primary_button {
is_contentstack_link
cta_text
open_in_new_tab
external_link {
title
href
}
linkConnection {
edges {
node {
__typename
...LoyaltyPageLink
...ContentPageLink
...HotelPageLink
}
}
}
}
has_secondary_button
secondary_button {
is_contentstack_link
cta_text
open_in_new_tab
external_link {
title
href
}
linkConnection {
edges {
node {
__typename
...LoyaltyPageLink
...ContentPageLink
...HotelPageLink
}
}
}
}
}
system {
...System
}

25
lib/graphql/Query/ContentPage/ContentPage.graphql
View File

@@ -23,16 +23,6 @@ query GetContentPage($locale: String!, $uid: String!) {
preamble
...NavigationLinks
}
blocks {
__typename
...CardsGrid_ContentPage
...Content_ContentPage
...DynamicContent_ContentPage
...Shortcuts_ContentPage
...Table_ContentPage
...TextCols_ContentPage
...UspGrid_ContentPage
}
sidebar {
__typename
...ContentSidebar_ContentPage
@@ -47,6 +37,21 @@ query GetContentPage($locale: String!, $uid: String!) {
}
}
query GetContentPageBlocks($locale: String!, $uid: String!) {
content_page(uid: $uid, locale: $locale) {
blocks {
__typename
...CardsGrid_ContentPage
...Content_ContentPage
...DynamicContent_ContentPage
...Shortcuts_ContentPage
...Table_ContentPage
...TextCols_ContentPage
...UspGrid_ContentPage
}
}
}
query GetContentPageRefs($locale: String!, $uid: String!) {
content_page(locale: $locale, uid: $uid) {
header {

47
server/routers/contentstack/contentPage/query.ts
View File

@@ -1,5 +1,8 @@
import { Lang } from "@/constants/languages"
import { GetContentPage } from "@/lib/graphql/Query/ContentPage/ContentPage.graphql"
import {
GetContentPage,
GetContentPageBlocks,
} from "@/lib/graphql/Query/ContentPage/ContentPage.graphql"
import { request } from "@/lib/graphql/request"
import { contentstackExtendedProcedureUID, router } from "@/server/trpc"
@@ -40,18 +43,38 @@ export const contentPageQueryRouter = router({
})
)
const response = await request<GetContentPageSchema>(
GetContentPage,
{ locale: lang, uid },
{
cache: "force-cache",
next: {
tags,
},
}
)
const [mainResponse, blocksResponse] = await Promise.all([
request<GetContentPageSchema>(
GetContentPage,
{ locale: lang, uid },
{
cache: "force-cache",
next: {
tags,
},
}
),
request<GetContentPageSchema>(
GetContentPageBlocks,
{ locale: lang, uid },
{
cache: "force-cache",
next: {
tags,
},
}
),
])
const contentPage = contentPageSchema.safeParse(response.data)
const responseData = {
...mainResponse.data,
content_page: {
...mainResponse.data.content_page,
blocks: blocksResponse.data.content_page.blocks,
},
}
const contentPage = contentPageSchema.safeParse(responseData)
if (!contentPage.success) {
console.error(

56
server/routers/contentstack/schemas/blocks/cardsGrid.ts
View File

@@ -1,12 +1,17 @@
import { z } from "zod"
import * as pageLinks from "@/server/routers/contentstack/schemas/pageLinks"
import { tempImageVaultAssetSchema } from "../imageVault"
import { systemSchema } from "../system"
import { buttonSchema } from "./utils/buttonLinkSchema"
import { linkConnectionRefsSchema } from "./utils/linkConnection"
import { imageSchema } from "./image"
import { imageContainerSchema } from "./imageContainer"
import { BlocksEnums } from "@/types/enums/blocks"
import { CardsGridEnum } from "@/types/enums/cardsGrid"
import { CardsGridLayoutEnum } from "@/types/trpc/routers/contentstack/blocks"
export const cardBlockSchema = z.object({
__typename: z.literal(CardsGridEnum.cards.Card),
@@ -49,17 +54,57 @@ export const teaserCardBlockSchema = z.object({
has_primary_button: z.boolean().default(false),
has_secondary_button: z.boolean().default(false),
has_sidepeek_button: z.boolean().default(false),
side_peek_button: z
sidepeek_button: z
.object({
title: z.string().optional().default(""),
call_to_action_text: z.string().optional().default(""),
})
.optional(),
sidepeek_content: z
.object({
heading: z.string(),
content: z.object({
json: z.any(),
embedded_itemsConnection: z.object({
edges: z.array(
z.object({
node: z
.discriminatedUnion("__typename", [
imageContainerSchema,
imageSchema,
pageLinks.accountPageSchema,
pageLinks.contentPageSchema,
pageLinks.hotelPageSchema,
pageLinks.loyaltyPageSchema,
])
.transform((data) => {
const link = pageLinks.transform(data)
if (link) {
return link
}
return data
}),
})
),
}),
}),
has_primary_button: z.boolean().default(false),
primary_button: buttonSchema,
has_secondary_button: z.boolean().default(false),
secondary_button: buttonSchema,
})
.optional(),
// sidepeek_content: z
// .object({
// heading: z.string(),
// })
// .optional(),
system: systemSchema,
})
export function transformTeaserCardBlock(
card: typeof teaserCardBlockSchema._type
) {
console.log({ has_sidepeek_button: card.sidepeek_content })
return {
__typename: card.__typename,
body_text: card.body_text,
@@ -68,8 +113,9 @@ export function transformTeaserCardBlock(
secondaryButton: card.has_secondary_button
? card.secondary_button
: undefined,
sidePeekButton: card.has_sidepeek_button
? card.side_peek_button
sidePeekButton: card.has_sidepeek_button ? card.sidepeek_button : undefined,
sidePeekContent: card.has_sidepeek_button
? card.sidepeek_content
: undefined,
image: card.image,
system: card.system,
@@ -105,7 +151,7 @@ export const cardsGridSchema = z.object({
})
),
}),
layout: z.enum(["twoColumnGrid", "threeColumnGrid", "twoPlusOne"]),
layout: z.nativeEnum(CardsGridLayoutEnum),
preamble: z.string().optional().default(""),
theme: z.enum(["one", "two", "three"]).nullable(),
title: z.string().optional().default(""),

1
server/routers/contentstack/schemas/blocks/utils/buttonLinkSchema.ts
View File

@@ -20,6 +20,7 @@ export const buttonSchema = z
pageLinks.accountPageSchema,
pageLinks.contentPageSchema,
pageLinks.loyaltyPageSchema,
pageLinks.hotelPageSchema,
])
.transform((data) => {
const link = pageLinks.transform(data)

11
types/components/teaserCard.ts
View File

@@ -2,11 +2,12 @@ import { VariantProps } from "class-variance-authority"
import { teaserCardVariants } from "@/components/TempDesignSystem/TeaserCard/variants"
import { ImageVaultAsset } from "@/types/components/imageVault"
import type { ImageVaultAsset } from "@/types/components/imageVault"
import type { CardProps } from "@/components/TempDesignSystem/Card/card"
import type { TeaserCard } from "../trpc/routers/contentstack/blocks"
interface SidePeekButton {
title: string
call_to_action_text: string
}
export interface TeaserCardProps
@@ -16,6 +17,12 @@ export interface TeaserCardProps
primaryButton?: CardProps["primaryButton"]
secondaryButton?: CardProps["secondaryButton"]
sidePeekButton?: SidePeekButton
sidePeekContent?: TeaserCard["sidepeek_content"]
image?: ImageVaultAsset
className?: string
}
export interface TeaserCardSidepeekProps {
button: SidePeekButton
data: NonNullable<TeaserCard["sidepeek_content"]>
}

12
types/trpc/routers/contentstack/blocks.ts
View File

@@ -1,6 +1,9 @@
import { z } from "zod"
import { cardsGridSchema } from "@/server/routers/contentstack/schemas/blocks/cardsGrid"
import {
cardsGridSchema,
teaserCardBlockSchema,
} from "@/server/routers/contentstack/schemas/blocks/cardsGrid"
import { contentSchema } from "@/server/routers/contentstack/schemas/blocks/content"
import { dynamicContentSchema } from "@/server/routers/contentstack/schemas/blocks/dynamicContent"
import { shortcutsSchema } from "@/server/routers/contentstack/schemas/blocks/shortcuts"
@@ -8,6 +11,13 @@ import { tableSchema } from "@/server/routers/contentstack/schemas/blocks/table"
import { textColsSchema } from "@/server/routers/contentstack/schemas/blocks/textCols"
import { uspGridSchema } from "@/server/routers/contentstack/schemas/blocks/uspGrid"
export enum CardsGridLayoutEnum {
TWO_COLUMNS = "twoColumnGrid",
THREE_COLUMNS = "threeColumnGrid",
TWO_PLUS_ONE = "twoPlusOne",
}
export interface TeaserCard extends z.output<typeof teaserCardBlockSchema> {}
export interface CardsGrid extends z.output<typeof cardsGridSchema> {}
export interface Content extends z.output<typeof contentSchema> {}
export interface DynamicContent extends z.output<typeof dynamicContentSchema> {}