9f7c20dae8
* Package updates * Fix up things that look broken * Add to utils * Lead now just sets font size, just use f3 where needed * Update package-lock.json * Update index.tsx * Delete bump-link.scss * Update trigger-error.js * Update components/GenericError.tsx Co-authored-by: Ash Guillaume <10384315+ashygee@users.noreply.github.com> * Update ArticlePage.tsx * Update ActionBar.tsx * Changes from meeting * Found a few more monos * Fix from a merge conflict * Missed a few f3s * Update SubLandingHero.tsx * Bye gradients * Match up breadcrumbs * Update SubLandingHero.tsx * Update lists.scss Co-authored-by: Ash Guillaume <10384315+ashygee@users.noreply.github.com>
39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import { ArticleGuide } from 'components/context/ProductSubLandingContext'
|
|
|
|
type Props = {
|
|
card: ArticleGuide
|
|
typeLabel: string
|
|
}
|
|
|
|
export const ArticleCard = ({ card, typeLabel }: Props) => {
|
|
return (
|
|
<div data-testid="article-card" className="d-flex col-12 col-md-4 pr-0 pr-md-6 pr-lg-8">
|
|
<a className="no-underline d-flex flex-column py-3 border-bottom" href={card.href}>
|
|
<h4
|
|
className="h4 color-text-primary mb-1"
|
|
dangerouslySetInnerHTML={{ __html: card.title }}
|
|
/>
|
|
<div className="h6 text-uppercase" data-testid="article-card-type">
|
|
{typeLabel}
|
|
</div>
|
|
<p className="color-text-secondary my-3">{card.intro}</p>
|
|
{card.topics.length > 0 && (
|
|
<div>
|
|
{card.topics.map((topic) => {
|
|
return (
|
|
<span
|
|
data-testid="article-card-topic"
|
|
key={topic}
|
|
className="IssueLabel color-bg-info-inverse color-text-inverse mr-1"
|
|
>
|
|
{topic}
|
|
</span>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</a>
|
|
</div>
|
|
)
|
|
}
|