Replace <StandaloneLink /> with anchor element in `<RelatedContent …

…/>` (#845)

🎟️ [Asana Task]()
🔍 [Preview Link](https://react-components-git-{branch-slug}-hashicorp.vercel.app)

---

<!-- Reminder: This is an open source project, make sure not to include any sensitive information in the pull request. -->

## Description
When `<RelatedContent />` was created, it used the `<StandaloneLink />` component for a CTA. However, the WPL spec for `<RelatedContent />` does not utilize `<StandaloneLink />` and instead uses its own, custom link.

This PR removes the `<StandaloneLink />` and adds an `anchor` element.


## Validation Steps
- Navigate to [the preview
](https://react-components-git-naupdate-relatedcontent-hashicorp.vercel.app/components/relatedcontent)
- Verify that the CTA link matches the spec for light and dark:

<img width="169" alt="Screen Shot 2022-12-09 at 11 33 52 AM" src="https://user-images.githubusercontent.com/39201593/206782866-d62702d8-a1c4-441d-9bcc-29deb271aa93.png">
<img width="163" alt="Screen Shot 2022-12-09 at 11 33 55 AM" src="https://user-images.githubusercontent.com/39201593/206782871-c8959d7b-2dcb-4e71-b475-cc30a17f0105.png">


### PR Checklist 🚀

Items in this checklist may not may not apply to your PR, but please consider each item carefully.

- [ ] Add Asana and Preview links above.
- [ ] Conduct thorough self-review.
- [ ] Add or update tests as appropriate.
- [ ] Conduct reasonable cross browser testing for both compatibility and responsive behavior (We have a [Sauce Labs](https://app.saucelabs.com/) account for this, if you don't have access, just ask!).
- [ ] Conduct reasonable accessibility review (use the [WAS](https://accessible.org/Web-Accessibility-Standards-WAS-2.pdf) as a guide or an [axe browser plugin](https://www.deque.com/axe/) until we establish more formal checks).
- [ ] Identify (in the description above) and document (add Asana tasks on [this board](https://app.asana.com/0/1100423001970639/list)) any technical debt that you're aware of, but are not addressing as part of this PR.

.changeset/three-ravens-trade.md

@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-related-content': minor
+---
+
+Replace StandaloneLink with custom link

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"
       }} 
     />

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 = ({
         ))}
       </div>
       <div className={s.cta} data-testid="wpl-cta-container">
-        <StandaloneLink appearance={appearance} href={cta.href}>
+        <Link href={cta.href} legacyBehavior>
           {cta.text}
-        </StandaloneLink>
+        </Link>
       </div>
     </div>
   )

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);
+    }
+  }
 }