diff --git a/.changeset/three-ravens-trade.md b/.changeset/three-ravens-trade.md new file mode 100644 index 000000000..66b531d7a --- /dev/null +++ b/.changeset/three-ravens-trade.md @@ -0,0 +1,5 @@ +--- +'@hashicorp/react-related-content': minor +--- + +Replace StandaloneLink with custom link diff --git a/packages/related-content/docs.mdx b/packages/related-content/docs.mdx index fb334d7b7..6764a1bd4 100644 --- a/packages/related-content/docs.mdx +++ b/packages/related-content/docs.mdx @@ -39,7 +39,7 @@ A full-page-width component that displays text and cards. Used for displaying re ] } cta={{ - text: "Sign up now", + text: "View all resources", href: "/components/relatedcontent" }} /> diff --git a/packages/related-content/index.tsx b/packages/related-content/index.tsx index 23901f5ad..0f42a5037 100644 --- a/packages/related-content/index.tsx +++ b/packages/related-content/index.tsx @@ -1,7 +1,7 @@ -import type { RelatedContentProps } from './types' -import classNames from 'classnames' import Card from '@hashicorp/react-card' -import StandaloneLink from '@hashicorp/react-standalone-link' +import classNames from 'classnames' +import Link from 'next/link' +import type { RelatedContentProps } from './types' import s from './style.module.css' const RelatedContent = ({ @@ -35,9 +35,9 @@ const RelatedContent = ({ ))}
- + {cta.text} - +
) diff --git a/packages/related-content/style.module.css b/packages/related-content/style.module.css index 31785593d..f5a86a1f5 100644 --- a/packages/related-content/style.module.css +++ b/packages/related-content/style.module.css @@ -67,4 +67,18 @@ .cta { grid-column: 1 / -1; + + & a { + font-weight: 500; + font-size: 17px; + line-height: 20px; + letter-spacing: 0.0125em; + text-decoration: underline; + text-underline-offset: 3px; + display: inline; + + @nest .dark & { + color: var(--wpl-neutral-300); + } + } }