diff --git a/src/components/CoverageCard/CoverageCard.tsx b/src/components/CoverageCard/CoverageCard.tsx index 79c876c..dc57679 100644 --- a/src/components/CoverageCard/CoverageCard.tsx +++ b/src/components/CoverageCard/CoverageCard.tsx @@ -10,11 +10,19 @@ interface Props { className?: string; coverage: CoverageEntry; layout: 'vertical' | 'horizontal'; + newTab: boolean; renderDate: (date: string) => ReactNode; withThumbnail: boolean; } -export function CoverageCard({ className, coverage, layout, renderDate, withThumbnail }: Props) { +export function CoverageCard({ + className, + coverage, + layout, + newTab, + renderDate, + withThumbnail, +}: Props) { const imageUrl = getCoverageImageUrl(coverage); const href = coverage.attachment_oembed?.url || coverage.url; const autoLayout = withThumbnail && imageUrl ? layout : 'horizontal'; @@ -26,10 +34,10 @@ export function CoverageCard({ className, coverage, layout, renderDate, withThum vertical: autoLayout === 'vertical', })} > - {imageUrl && withThumbnail && } + {imageUrl && withThumbnail && }
- + <Title coverage={coverage} href={href} newTab={newTab} /> <Description coverage={coverage} /> @@ -44,8 +52,8 @@ export function CoverageCard({ className, coverage, layout, renderDate, withThum ); } -function Thumbnail(props: { href: string | null; src: string }) { - const { href, src } = props; +function Thumbnail(props: { href: string | null; newTab: boolean; src: string }) { + const { href, newTab, src } = props; const Tag = href ? 'a' : 'div'; return ( @@ -53,6 +61,7 @@ function Thumbnail(props: { href: string | null; src: string }) { href={href || undefined} className="prezly-slate-coverage-card-component__thumbnail" style={{ backgroundImage: `url("${src}")` }} + target={newTab ? '_blank' : undefined} > <img className="prezly-slate-coverage-card-component__thumbnail-image" @@ -63,8 +72,8 @@ function Thumbnail(props: { href: string | null; src: string }) { ); } -function Title(props: { coverage: CoverageEntry; href: string | null }) { - const { coverage, href } = props; +function Title(props: { coverage: CoverageEntry; href: string | null; newTab: boolean }) { + const { coverage, href, newTab } = props; const title = coverage.headline || coverage.attachment_oembed?.title || @@ -73,7 +82,11 @@ function Title(props: { coverage: CoverageEntry; href: string | null }) { const Tag = href ? 'a' : 'div'; return ( - <Tag className="prezly-slate-coverage-card-component__title" href={href || undefined}> + <Tag + className="prezly-slate-coverage-card-component__title" + href={href || undefined} + target={newTab ? '_blank' : undefined} + > {title} </Tag> ); diff --git a/src/elements/Coverage/Coverage.tsx b/src/elements/Coverage/Coverage.tsx index 79c29cb..0fc7d2b 100644 --- a/src/elements/Coverage/Coverage.tsx +++ b/src/elements/Coverage/Coverage.tsx @@ -19,6 +19,7 @@ export function Coverage({ coverage, node, renderDate }: Props) { className="prezly-slate-coverage" coverage={coverage} layout={node.layout} + newTab={node.new_tab} renderDate={renderDate} withThumbnail={node.show_thumbnail} />