Skip to content

Commit

Permalink
Add support for "new_tab" property
Browse files Browse the repository at this point in the history
  • Loading branch information
kudlajz committed Aug 1, 2024
1 parent f7f8c69 commit 8151424
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 8 deletions.
29 changes: 21 additions & 8 deletions src/components/CoverageCard/CoverageCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -26,10 +34,10 @@ export function CoverageCard({ className, coverage, layout, renderDate, withThum
vertical: autoLayout === 'vertical',
})}
>
{imageUrl && withThumbnail && <Thumbnail src={imageUrl} href={href} />}
{imageUrl && withThumbnail && <Thumbnail src={imageUrl} href={href} newTab={newTab} />}

<div className="prezly-slate-coverage-card-component__details">
<Title coverage={coverage} href={href} />
<Title coverage={coverage} href={href} newTab={newTab} />

<Description coverage={coverage} />

Expand All @@ -44,15 +52,16 @@ 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 (
<Tag
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"
Expand All @@ -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 ||
Expand All @@ -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>
);
Expand Down
1 change: 1 addition & 0 deletions src/elements/Coverage/Coverage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
Expand Down

0 comments on commit 8151424

Please sign in to comment.