Merge f32c90b into 8b2bc61

hashicorp · Oct 14, 2022 · a8677c0 · a8677c0
2 parents 8b2bc61 + f32c90b
commit a8677c0
Show file tree

Hide file tree

Showing 15 changed files with 262 additions and 124 deletions.
diff --git a/.changeset/spotty-rats-fetch.md b/.changeset/spotty-rats-fetch.md
@@ -0,0 +1,7 @@
+---
+'@hashicorp/react-actions': minor
+'@hashicorp/react-intro': minor
+'@hashicorp/react-next-steps': minor
+---
+
+Enables StandaloneLink support in Actions. Updates NextSteps and Intro components to accommodate changes in Actions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/actions/docs.mdx b/packages/actions/docs.mdx
@@ -7,13 +7,11 @@ componentName: 'Actions'
   ctas={[
     {
       title: 'View tutorials',
-      url: '/tutorials',
-      variant: 'primary'
+      href: '/tutorials',
     },
     {
       title: 'View documentation',
-      url: '/docs',
-      variant: 'tertiary-neutral'
+      href: '/docs',
     }
   ]}
 />`}
@@ -26,21 +24,51 @@ componentName: 'Actions'
 </h3>
 
 <div style={{padding: "24px", border: "1px solid var(--gray-6)"}}>
-
-<Actions
-  ctas={[
-    {
-      title: 'View tutorials',
-      url: '/tutorials',
-      variant: 'primary',
-    },
-    {
-      title: 'View documentation',
-      url: '/docs',
-      variant: 'tertiary-neutral',
-    },
-  ]}
-/>
+  <div style={{ paddingBottom: "24px"}}>
+    <Actions
+      ctas={[
+        {
+          title: 'View tutorials',
+          href: '/tutorials',
+        },
+        {
+          title: 'View documentation',
+          href: '/docs',
+        },
+      ]}
+    />
+  </div>
+  <div style={{ paddingBottom: "24px"}}>
+    <Actions
+      ctas={[
+        {
+          title: 'View tutorials',
+          href: '/tutorials',
+        },
+        {
+          title: 'View documentation',
+          href: '/docs',
+          type: 'standalone-link'
+        },
+      ]}
+    />
+  </div>
+  <div>
+    <Actions
+      ctas={[
+        {
+          title: 'View tutorials',
+          href: '/tutorials',
+          type: 'standalone-link'
+        },
+        {
+          title: 'View documentation',
+          href: '/docs',
+          type: 'standalone-link'
+        },
+      ]}
+    />
+  </div>
 
 </div>
 
@@ -50,21 +78,54 @@ componentName: 'Actions'
 
 <div style={{padding: "24px", background: "black"}}>
 
-<Actions
-  appearance="dark"
-  ctas={[
-    {
-      title: 'View tutorials',
-      url: '/tutorials',
-      variant: 'primary',
-    },
-    {
-      title: 'View documentation',
-      url: '/docs',
-      variant: 'tertiary-neutral',
-    },
-  ]}
-/>
+  <div style={{ paddingBottom: "24px"}}>
+    <Actions
+      appearance={'dark'}
+      ctas={[
+        {
+          title: 'View tutorials',
+          href: '/tutorials',
+        },
+        {
+          title: 'View documentation',
+          href: '/docs',
+        },
+      ]}
+    />
+  </div>
+  <div style={{ paddingBottom: "24px"}}>
+    <Actions
+      appearance={'dark'}
+      ctas={[
+        {
+          title: 'View tutorials',
+          href: '/tutorials',
+        },
+        {
+          title: 'View documentation',
+          href: '/docs',
+          type: 'standalone-link'
+        },
+      ]}
+    />
+  </div>
+  <div>
+    <Actions
+      appearance={'dark'}
+      ctas={[
+        {
+          title: 'View tutorials',
+          href: '/tutorials',
+          type: 'standalone-link'
+        },
+        {
+          title: 'View documentation',
+          href: '/docs',
+          type: 'standalone-link'
+        },
+      ]}
+    />
+  </div>
 
 </div>
 

diff --git a/packages/actions/index.test.js b/packages/actions/index.test.js
@@ -8,13 +8,11 @@ describe('<Actions />', () => {
         ctas={[
           {
             title: 'View tutorials',
-            url: '/tutorials',
-            variant: 'primary',
+            href: '/tutorials',
           },
           {
             title: 'View documentation',
-            url: '/docs',
-            variant: 'tertiary-neutral',
+            href: '/docs',
           },
         ]}
       />
@@ -24,4 +22,61 @@ describe('<Actions />', () => {
     expect(element).toHaveTextContent('View tutorials')
     expect(element).toHaveTextContent('View documentation')
   })
+  it('should render a Button and StandaloneLink CTA', () => {
+    render(
+      <Actions
+        ctas={[
+          {
+            title: 'View tutorials',
+            href: '/tutorials',
+          },
+          {
+            title: 'View documentation',
+            href: '/docs',
+            type: 'standalone-link',
+          },
+        ]}
+      />
+    )
+    expect(screen.getByTestId('button-0')).toBeVisible()
+    expect(screen.getByTestId('standaloneLink-1')).toBeVisible()
+  })
+  it('should render two StandaloneLink CTAs', () => {
+    render(
+      <Actions
+        ctas={[
+          {
+            title: 'View tutorials',
+            href: '/tutorials',
+            type: 'standalone-link',
+          },
+          {
+            title: 'View documentation',
+            href: '/docs',
+            type: 'standalone-link',
+          },
+        ]}
+      />
+    )
+    expect(screen.getByTestId('standaloneLink-0')).toBeVisible()
+    expect(screen.getByTestId('standaloneLink-1')).toBeVisible()
+  })
+  it('should render two Button CTAs', () => {
+    render(
+      <Actions
+        ctas={[
+          {
+            title: 'View tutorials',
+            href: '/tutorials',
+          },
+          {
+            title: 'View documentation',
+            href: '/docs',
+          },
+        ]}
+      />
+    )
+    expect(screen.getByTestId('button-0')).toBeVisible()
+    expect(screen.getByTestId('button-1')).toBeVisible()
+  })
 })
diff --git a/packages/actions/index.tsx b/packages/actions/index.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames'
 import Button from '@hashicorp/react-button'
+import StandaloneLink from '@hashicorp/react-standalone-link'
 import type { ActionsProps } from './types'
 import s from './style.module.css'
 
@@ -18,23 +19,44 @@ export default function Actions({
   return (
     <div className={classNames(s.actions, s[layout])} data-testid="actions">
       {ctas.map((cta, index) => {
-        return (
-          <Button
-            key={index}
-            title={cta.title}
-            linkType={
-              cta.variant === 'tertiary-neutral' ? 'inbound' : undefined
-            }
-            url={cta.url}
-            onClick={cta.onClick}
-            size={size}
-            theme={{
-              brand: theme,
-              variant: cta.variant || 'primary',
-              background: appearance === 'dark' ? 'dark' : undefined,
-            }}
-          />
-        )
+        // The first CTA and second CTA should always
+        // have the `primary` and `secondary` variations respectively.
+
+        const variant = index === 0 ? 'primary' : 'secondary'
+        const isStandaloneLink = cta?.type === 'standalone-link'
+
+        if (isStandaloneLink) {
+          return (
+            <StandaloneLink
+              // eslint-disable-next-line react/no-array-index-key
+              key={index}
+              href={cta.href}
+              theme={variant}
+              appearance={appearance}
+              onClick={cta?.onClick}
+              data-testid={`standaloneLink-${index}`}
+            >
+              {cta.title}
+            </StandaloneLink>
+          )
+        } else {
+          return (
+            <Button
+              // eslint-disable-next-line react/no-array-index-key
+              key={index}
+              title={cta.title}
+              url={cta.href}
+              onClick={cta.onClick}
+              size={size}
+              theme={{
+                brand: theme,
+                variant: variant,
+                background: appearance === 'dark' ? 'dark' : undefined,
+              }}
+              data-testid={`button-${index}`}
+            />
+          )
+        }
       })}
     </div>
   )

diff --git a/packages/actions/package.json b/packages/actions/package.json
@@ -7,6 +7,7 @@
   "dependencies": {
     "@hashicorp/platform-product-meta": "^0.1.0",
     "@hashicorp/react-button": "^6.2.0",
+    "@hashicorp/react-standalone-link": "^0.1.1",
     "classnames": "^2.3.1"
   },
   "peerDependencies": {