chore(ExpandableArrow): implement within NextSteps and `StandaloneL…

…ink` (#806) * chore: update to use ExpandableArrow * chore: bump package * changeset * fix import
hashicorp · Nov 8, 2022 · 96c4ecf · 96c4ecf · vercel · Nov 8, 2022
1 parent 509c472
commit 96c4ecf
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 118 deletions.
diff --git a/.changeset/tidy-jeans-decide.md b/.changeset/tidy-jeans-decide.md
@@ -0,0 +1,6 @@
+---
+'@hashicorp/react-next-steps': minor
+'@hashicorp/react-standalone-link': minor
+---
+
+Replace custom SVG with ExpandableArrow component
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/next-steps/index.tsx b/packages/next-steps/index.tsx
@@ -1,8 +1,10 @@
+import * as React from 'react'
 import Link from 'next/link'
 import classNames from 'classnames'
 import type { NextStepsProps } from './types'
 import useProductMeta from '@hashicorp/platform-product-meta'
 import Intro from '@hashicorp/react-intro'
+import ExpandableArrow from '@hashicorp/react-expandable-arrow'
 import s from './style.module.css'
 
 export default function NextSteps({
@@ -53,40 +55,15 @@ export default function NextSteps({
                   isFeatured && s.stepsListItemFeature
                 )}
               >
-                <Link href={step.cta.url}>
-                  <a className={classNames(s.tile, s[variant])}>
-                    <h3 className={s.tileHeading}>{step.heading}</h3>
-                    {step.description ? (
-                      <p className={s.tileDescription}>{step.description}</p>
-                    ) : null}
-                    <span className={s.tileCta}>
-                      <span className={s.tileCtaLabel}>{step.cta.title}</span>
-                      <span className={s.tileCtaIcon}>
-                        <svg
-                          className={s.tileCtaIconArrow}
-                          width="9"
-                          height="10"
-                          viewBox="0 0 9 10"
-                          fill="none"
-                          xmlns="http://www.w3.org/2000/svg"
-                          focusable={false}
-                        >
-                          <path
-                            d="M4 1L8 5L4 9"
-                            stroke="currentColor"
-                            strokeWidth={1.8}
-                          />
-                          <path
-                            className={s.tileCtaIconLine}
-                            d="M8 5H0"
-                            stroke="currentColor"
-                            strokeWidth={1.8}
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </a>
-                </Link>
+                <Tile
+                  variant={variant}
+                  cta={{
+                    title: step.cta.title,
+                    url: step.cta.url,
+                  }}
+                  heading={step.heading}
+                  description={step.description}
+                />
               </li>
             )
           })}
@@ -95,3 +72,31 @@ export default function NextSteps({
     </section>
   )
 }
+
+function Tile({ variant, heading, description, cta }) {
+  const [isHovered, setIsHovered] = React.useState(false)
+  return (
+    <Link href={cta.url}>
+      <a
+        className={classNames(s.tile, s[variant])}
+        onMouseOver={() => {
+          setIsHovered(true)
+        }}
+        onMouseOut={() => {
+          setIsHovered(false)
+        }}
+      >
+        <h3 className={s.tileHeading}>{heading}</h3>
+        {description ? (
+          <p className={s.tileDescription}>{description}</p>
+        ) : null}
+        <span className={s.tileCta}>
+          <span className={s.tileCtaLabel}>{cta.title}</span>
+          <span className={s.tileCtaIcon}>
+            <ExpandableArrow expanded={isHovered} />
+          </span>
+        </span>
+      </a>
+    </Link>
+  )
+}
diff --git a/packages/next-steps/package.json b/packages/next-steps/package.json
@@ -7,6 +7,7 @@
   "dependencies": {
     "@hashicorp/platform-product-meta": "^0.1.0",
     "@hashicorp/react-actions": "^0.4.0",
+    "@hashicorp/react-expandable-arrow": "^0.0.2",
     "@hashicorp/react-intro": "^0.5.0",
     "classnames": "^2.3.1"
   },

diff --git a/packages/next-steps/style.module.css b/packages/next-steps/style.module.css
@@ -207,31 +207,3 @@
 .tileCtaIcon {
   flex-shrink: 0;
 }
-
-.tileCtaIconArrow {
-  --translate-x: -4px;
-
-  transform: translateX(var(--translate-x));
-  transition-duration: var(--transition-duration);
-  transition-timing-function: var(--transition-timing-function);
-  transition-property: transform;
-  color: inherit;
-
-  @nest .tile:hover & {
-    --translate-x: 0;
-  }
-}
-
-.tileCtaIconLine {
-  --stroke-dashoffset: 10;
-
-  transition-duration: var(--transition-duration);
-  transition-timing-function: var(--transition-timing-function);
-  transition-property: stroke-dashoffset;
-  stroke-dasharray: 10;
-  stroke-dashoffset: var(--stroke-dashoffset);
-
-  @nest .tile:hover & {
-    --stroke-dashoffset: 1;
-  }
-}
diff --git a/packages/standalone-link/index.tsx b/packages/standalone-link/index.tsx
@@ -1,6 +1,8 @@
+import * as React from 'react'
 import type { StandaloneLinkProps } from './types'
 import Link from 'next/link'
 import classNames from 'classnames'
+import ExpandableArrow from '@hashicorp/react-expandable-arrow'
 import s from './style.module.css'
 
 export default function StandaloneLink({
@@ -10,33 +12,25 @@ export default function StandaloneLink({
   theme = 'primary',
   ...restProps
 }: StandaloneLinkProps) {
+  const [isHovered, setIsHovered] = React.useState(false)
+  const { onMouseOver, onMouseOut } = restProps
   return (
     <Link href={href}>
-      <a className={classNames(s.root, s[appearance], s[theme])} {...restProps}>
+      <a
+        className={classNames(s.root, s[appearance], s[theme])}
+        onMouseOver={(event) => {
+          setIsHovered(true)
+          onMouseOver?.(event)
+        }}
+        onMouseOut={(event) => {
+          setIsHovered(false)
+          onMouseOut?.(event)
+        }}
+        {...restProps}
+      >
         <span className={s.label}>{children}</span>
         <span className={s.icon}>
-          <svg
-            className={s.arrow}
-            width="9"
-            height="10"
-            viewBox="0 0 9 10"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            focusable={false}
-          >
-            <path
-              className={s.chevron}
-              d="M4 1L8 5L4 9"
-              stroke="currentColor"
-              strokeWidth={1.8}
-            />
-            <path
-              className={s.line}
-              d="M8 5H0"
-              stroke="currentColor"
-              strokeWidth={1.8}
-            />
-          </svg>
+          <ExpandableArrow expanded={isHovered} />
         </span>
       </a>
     </Link>

diff --git a/packages/standalone-link/package.json b/packages/standalone-link/package.json
@@ -5,12 +5,13 @@
   "author": "HashiCorp",
   "license": "MPL-2.0",
   "dependencies": {
+    "@hashicorp/react-expandable-arrow": "^0.0.2",
     "classnames": "^2.3.1"
   },
   "peerDependencies": {
     "@hashicorp/mktg-global-styles": ">=3.x",
-    "react": ">=16.x",
-    "next": ">=11.x"
+    "next": ">=11.x",
+    "react": ">=16.x"
   },
   "repository": {
     "type": "git",

diff --git a/packages/standalone-link/style.module.css b/packages/standalone-link/style.module.css
@@ -82,37 +82,6 @@
   }
 }
 
-/*
- * Arrow icon
- */
-
 .icon {
   flex-shrink: 0;
 }
-
-.arrow {
-  --translate-x: -4px;
-
-  transform: translateX(var(--translate-x));
-  transition-duration: var(--transition-duration);
-  transition-timing-function: var(--transition-timing-function);
-  transition-property: fill, transform;
-
-  @nest .root:hover & {
-    --translate-x: 0;
-  }
-}
-
-.line {
-  --stroke-dashoffset: 10;
-
-  transition-duration: var(--transition-duration);
-  transition-timing-function: var(--transition-timing-function);
-  transition-property: opacity, transform, stroke-dashoffset;
-  stroke-dasharray: 10;
-  stroke-dashoffset: var(--stroke-dashoffset);
-
-  @nest .root:hover & {
-    --stroke-dashoffset: 1;
-  }
-}