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

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

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>
)}