makes feature link optional

hashicorp · Dec 13, 2021 · b5a53f6 · b5a53f6
1 parent 1378acd
commit b5a53f6
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 8 deletions.
diff --git a/website/components/io-home-feature/index.tsx b/website/components/io-home-feature/index.tsx
@@ -1,10 +1,13 @@
 import * as React from 'react'
 import Image from 'next/image'
+import Link from 'next/link'
+import classNames from 'classnames'
+import { isInternalLink } from 'lib/utils'
 import { IconArrowRight16 } from '@hashicorp/flight-icons/svg-react/arrow-right-16'
 import s from './style.module.css'
 
 interface IoHomeFeatureProps {
-  link: string
+  link?: string
   image: {
     url: string
     alt: string
@@ -20,7 +23,7 @@ export default function IoHomeFeature({
   description,
 }: IoHomeFeatureProps): React.ReactElement {
   return (
-    <a href={link} className={s.feature}>
+    <IoHomeFeatureWrap href={link}>
       <div className={s.featureMedia}>
         <Image
           src={image.url}
@@ -33,13 +36,35 @@ export default function IoHomeFeature({
       <div className={s.featureContent}>
         <h3 className={s.featureHeading}>{heading}</h3>
         <p className={s.featureDescription}>{description}</p>
-        <span className={s.featureCta} aria-hidden={true}>
-          Learn more{' '}
-          <span>
-            <IconArrowRight16 />
+        {link ? (
+          <span className={s.featureCta} aria-hidden={true}>
+            Learn more{' '}
+            <span>
+              <IconArrowRight16 />
+            </span>
           </span>
-        </span>
+        ) : null}
       </div>
+    </IoHomeFeatureWrap>
+  )
+}
+
+function IoHomeFeatureWrap({ href, children }) {
+  if (!href) {
+    return <div className={s.feature}>{children}</div>
+  }
+
+  if (isInternalLink(href)) {
+    return (
+      <Link href={href}>
+        <a className={s.feature}>{children}</a>
+      </Link>
+    )
+  }
+
+  return (
+    <a className={s.feature} href={href}>
+      {children}
     </a>
   )
 }
diff --git a/website/components/io-home-feature/style.module.css b/website/components/io-home-feature/style.module.css
@@ -9,11 +9,14 @@
   color: var(--black);
   box-shadow: 0 2px 3px rgba(101, 106, 118, 0.1),
     0 8px 16px -10px rgba(101, 106, 118, 0.2);
-  transition: box-shadow ease-in-out 0.2s;
 
   @media (--medium-up) {
     flex-direction: row;
   }
+}
+
+.featureLink {
+  transition: box-shadow ease-in-out 0.2s;
 
   &:hover {
     box-shadow: 0 2px 3px rgba(101, 106, 118, 0.15),