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

feat(SW-219): add support for content card in cards grid in content pages

Browse Source
This commit is contained in:
Chuma McPhoy
2024-09-12 18:01:32 +02:00
parent 3eb7e5f653
commit 24dc404370
7 changed files with 93 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
components/Content/Blocks/CardsGrid/index.tsx
View File

@@ -1,6 +1,7 @@
import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import Card from "@/components/TempDesignSystem/Card"
import ContentCard from "@/components/TempDesignSystem/ContentCard"
import Grids from "@/components/TempDesignSystem/Grids"
import LoyaltyCard from "@/components/TempDesignSystem/LoyaltyCard"
@@ -22,17 +23,32 @@ export default function CardsGrid({
{cards_grid.cards.map((card) => {
switch (card.__typename) {
case CardsGridEnum.Card: {
return (
<Card
theme={cards_grid.theme || "one"}
key={card.system.uid}
scriptedTopTitle={card.scripted_top_title}
heading={card.heading}
bodyText={card.body_text}
secondaryButton={card.secondaryButton}
primaryButton={card.primaryButton}
/>
)
if (card.isContentCard) {
return (
<ContentCard
key={card.system.uid}
title={card.heading || ""}
description={card.body_text || ""}
primaryButton={card.primaryButton}
secondaryButton={card.secondaryButton}
sidePeekButton={card.sidePeekButton}
backgroundImage={card.background_image}
style="default"
/>
)
} else {
return (
<Card
theme={cards_grid.theme || "one"}
key={card.system.uid}
scriptedTopTitle={card.scripted_top_title}
heading={card.heading}
bodyText={card.body_text}
secondaryButton={card.secondaryButton}
primaryButton={card.primaryButton}
/>
)
}
}
case CardsGridEnum.LoyaltyCard:
return (

31
components/ContentType/HotelPage/index.tsx
View File

@@ -1,8 +1,6 @@
import { env } from "@/env/server"
import { serverClient } from "@/lib/trpc/server"
import ContentCard from "@/components/TempDesignSystem/ContentCard"
import { MOCK_FACILITIES } from "./Facilities/mockData"
import { setActivityCard } from "./Facilities/utils"
import DynamicMap from "./Map/DynamicMap"
@@ -67,35 +65,6 @@ export default async function HotelPage() {
</div>
<Rooms rooms={roomCategories} />
<Facilities facilities={facilities} />
{/* NOTE: These are added here for testing. Remove before PR */}
{/* Example of ContentCard with Button CTA's */}
<ContentCard
title="Special Offer"
description="Mattis sit duis pulvinar ultricies auctor euismod. Augue mattis mauris at est iaculis pulvinar pulvinar."
alwaysStack={true}
primaryCTA={{
label: "Book Now",
href: "/booking",
}}
secondaryCTA={{
label: "Learn More",
href: "/offers",
openInNewTab: true,
}}
backgroundImage="https://www.scandichotels.com/imageVault/publishedmedia/sixadhu91jy67aal2pla/Scandic_Downtown_Camper_cocktail_lounge_bar_the_ne.jpg"
/>
{/* Example of ContentCard with SidePeek */}
<ContentCard
title="Explore Facilities"
description="Mattis sit duis pulvinar ultricies auctor euismod. Augue mattis mauris at est iaculis pulvinar pulvinar."
sidePeekCTA={{
label: "View Facilities",
onClick: true,
}}
style="default"
backgroundImage="https://www.scandichotels.com/imageVault/publishedmedia/sixadhu91jy67aal2pla/Scandic_Downtown_Camper_cocktail_lounge_bar_the_ne.jpg"
/>
</main>
{googleMapsApiKey ? (
<>

34
components/TempDesignSystem/ContentCard/index.tsx
View File

@@ -16,9 +16,9 @@ import type { ContentCardProps } from "@/types/components/contentCard"
export default function ContentCard({
title,
description,
primaryCTA,
secondaryCTA,
sidePeekCTA,
primaryButton,
secondaryButton,
sidePeekButton,
backgroundImage,
style = "default",
alwaysStack = false,
@@ -31,8 +31,8 @@ export default function ContentCard({
{backgroundImage && (
<div className={styles.imageContainer}>
<Image
src={backgroundImage}
alt=""
src={backgroundImage.url}
alt={backgroundImage.meta?.alt || ""}
className={styles.backgroundImage}
width={399}
height={201}
@@ -44,21 +44,23 @@ export default function ContentCard({
{title}
</Subtitle>
<Body color="black">{description}</Body>
{sidePeekCTA ? (
{!!sidePeekButton ? (
<Button
// onClick={sidePeekCTA.onClick}
// onClick={() => {
// // TODO: Implement sidePeek functionality once SW-341 is merged.
// }}
theme="base"
variant="icon"
intent="text"
size="small"
className={styles.sidePeekCTA}
>
{sidePeekCTA.label}
{sidePeekButton.title}
<ChevronRightIcon />
</Button>
) : (
<div className={styles.ctaContainer}>
{primaryCTA && (
{primaryButton && (
<Button
asChild
intent="primary"
@@ -66,14 +68,14 @@ export default function ContentCard({
className={styles.ctaButton}
>
<Link
href={primaryCTA.href}
target={primaryCTA.openInNewTab ? "_blank" : undefined}
href={primaryButton.href}
target={primaryButton.openInNewTab ? "_blank" : undefined}
>
{primaryCTA.label}
{primaryButton.title}
</Link>
</Button>
)}
{secondaryCTA && (
{secondaryButton && (
<Button
asChild
intent="secondary"
@@ -81,10 +83,10 @@ export default function ContentCard({
className={styles.ctaButton}
>
<Link
href={secondaryCTA.href}
target={secondaryCTA.openInNewTab ? "_blank" : undefined}
href={secondaryButton.href}
target={secondaryButton.openInNewTab ? "_blank" : undefined}
>
{secondaryCTA.label}
{secondaryButton.title}
</Link>
</Button>
)}