Function ArticleList

components/landing/ArticleList.tsx:19–94

({
  title,
  viewAllHref,
  viewAllTitleText,
  articles,
}: ArticleListPropsT)

}

export const ArticleList = ({
  title,
  viewAllHref,
  viewAllTitleText,
  articles,
}: ArticleListPropsT) => {
  const { t } = useTranslation('product_landing')
  const { page } = useMainContext()
  return (
    <>
      {title && (
        <div className="mb-4 d-flex flex-items-baseline">
          <h2 className={cx('f4 text-semibold')}>{title}</h2>
          {viewAllHref && (
            <Link
              href={viewAllHref}
              className="ml-4"
              {...(viewAllTitleText ? { 'aria-label': `${page.title} - ${viewAllTitleText}` } : {})}
            >
              {t('view')} <ArrowRightIcon size={14} className="v-align-middle" />
            </Link>
          )}
        </div>
      )}

      <ActionList as="ul" data-testid="article-list" variant="full">
        {articles.map((link) => {
          return (
            <ActionList.Item
              as="li"
              key={link.href}
              className={cx('width-full border-top')}
              sx={{
                borderRadius: 0,
                ':hover': {
                  borderRadius: 0,
                },
              }}
            >
              <BumpLink
                as={Link}
                href={link.href}
                className="py-3"
                title={
                  !link.hideIntro && link.intro ? (
                    <h3 className="f4" data-testid="link-with-intro-title">
                      <span>{link.fullTitle ? link.fullTitle : link.title}</span>
                    </h3>
                  ) : (
                    <span className="f4 text-bold d-block" data-testid="link-with-intro-title">
                      {link.fullTitle ? link.fullTitle : link.title}
                    </span>
                  )
                }
              >
                {!link.hideIntro && link.intro && (
                  <TruncateLines as="p" maxLines={2} className="color-fg-muted mb-0 mt-1">
                    <span data-testid="link-with-intro-intro">{link.intro}</span>