Skip to content

Commit d5d0671

Browse files
nanderecknandereck
authored
Merge 806e335 into 59dbec9 
2 parents 59dbec9 + 806e335 commit d5d0671

File tree

10 files changed

+244
-81
lines changed

10 files changed

+244
-81
lines changed

‎.changeset/tidy-emus-hammer.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@hashicorp/react-actions': major
3+
'@hashicorp/react-intro': major
4+
'@hashicorp/react-next-steps': major
5+
---
6+
7+
Enable StandaloneLink support for Actions and update tests for Intro and NextSteps

‎package-lock.json

Lines changed: 5 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/actions/docs.mdx

Lines changed: 95 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,11 @@ componentName: 'Actions'
77
ctas={[
88
{
99
title: 'View tutorials',
10-
url: '/tutorials',
11-
variant: 'primary'
10+
href: '/tutorials',
1211
},
1312
{
1413
title: 'View documentation',
15-
url: '/docs',
16-
variant: 'tertiary-neutral'
14+
href: '/docs',
1715
}
1816
]}
1917
/>`}
@@ -26,21 +24,51 @@ componentName: 'Actions'
2624
</h3>
2725

2826
<div style={{padding: "24px", border: "1px solid var(--gray-6)"}}>
29-
30-
<Actions
31-
ctas={[
32-
{
33-
title: 'View tutorials',
34-
url: '/tutorials',
35-
variant: 'primary',
36-
},
37-
{
38-
title: 'View documentation',
39-
url: '/docs',
40-
variant: 'tertiary-neutral',
41-
},
42-
]}
43-
/>
27+
<div style={{ paddingBottom: "24px"}}>
28+
<Actions
29+
ctas={[
30+
{
31+
title: 'View tutorials',
32+
href: '/tutorials',
33+
},
34+
{
35+
title: 'View documentation',
36+
href: '/docs',
37+
},
38+
]}
39+
/>
40+
</div>
41+
<div style={{ paddingBottom: "24px"}}>
42+
<Actions
43+
ctas={[
44+
{
45+
title: 'View tutorials',
46+
href: '/tutorials',
47+
},
48+
{
49+
title: 'View documentation',
50+
href: '/docs',
51+
type: 'standalone-link'
52+
},
53+
]}
54+
/>
55+
</div>
56+
<div>
57+
<Actions
58+
ctas={[
59+
{
60+
title: 'View tutorials',
61+
href: '/tutorials',
62+
type: 'standalone-link'
63+
},
64+
{
65+
title: 'View documentation',
66+
href: '/docs',
67+
type: 'standalone-link'
68+
},
69+
]}
70+
/>
71+
</div>
4472

4573
</div>
4674

@@ -50,21 +78,54 @@ componentName: 'Actions'
5078

5179
<div style={{padding: "24px", background: "black"}}>
5280

53-
<Actions
54-
appearance="dark"
55-
ctas={[
56-
{
57-
title: 'View tutorials',
58-
url: '/tutorials',
59-
variant: 'primary',
60-
},
61-
{
62-
title: 'View documentation',
63-
url: '/docs',
64-
variant: 'tertiary-neutral',
65-
},
66-
]}
67-
/>
81+
<div style={{ paddingBottom: "24px"}}>
82+
<Actions
83+
appearance={'dark'}
84+
ctas={[
85+
{
86+
title: 'View tutorials',
87+
href: '/tutorials',
88+
},
89+
{
90+
title: 'View documentation',
91+
href: '/docs',
92+
},
93+
]}
94+
/>
95+
</div>
96+
<div style={{ paddingBottom: "24px"}}>
97+
<Actions
98+
appearance={'dark'}
99+
ctas={[
100+
{
101+
title: 'View tutorials',
102+
href: '/tutorials',
103+
},
104+
{
105+
title: 'View documentation',
106+
href: '/docs',
107+
type: 'standalone-link'
108+
},
109+
]}
110+
/>
111+
</div>
112+
<div>
113+
<Actions
114+
appearance={'dark'}
115+
ctas={[
116+
{
117+
title: 'View tutorials',
118+
href: '/tutorials',
119+
type: 'standalone-link'
120+
},
121+
{
122+
title: 'View documentation',
123+
href: '/docs',
124+
type: 'standalone-link'
125+
},
126+
]}
127+
/>
128+
</div>
68129

69130
</div>
70131

‎packages/actions/index.test.js

Lines changed: 59 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,11 @@ describe('<Actions />', () => {
88
ctas={[
99
{
1010
title: 'View tutorials',
11-
url: '/tutorials',
12-
variant: 'primary',
11+
href: '/tutorials',
1312
},
1413
{
1514
title: 'View documentation',
16-
url: '/docs',
17-
variant: 'tertiary-neutral',
15+
href: '/docs',
1816
},
1917
]}
2018
/>
@@ -24,4 +22,61 @@ describe('<Actions />', () => {
2422
expect(element).toHaveTextContent('View tutorials')
2523
expect(element).toHaveTextContent('View documentation')
2624
})
25+
it('should render a Button and StandaloneLink CTA', () => {
26+
render(
27+
<Actions
28+
ctas={[
29+
{
30+
title: 'View tutorials',
31+
href: '/tutorials',
32+
},
33+
{
34+
title: 'View documentation',
35+
href: '/docs',
36+
type: 'standalone-link',
37+
},
38+
]}
39+
/>
40+
)
41+
expect(screen.getByTestId('button-0')).toBeVisible()
42+
expect(screen.getByTestId('standaloneLink-1')).toBeVisible()
43+
})
44+
it('should render two StandaloneLink CTAs', () => {
45+
render(
46+
<Actions
47+
ctas={[
48+
{
49+
title: 'View tutorials',
50+
href: '/tutorials',
51+
type: 'standalone-link',
52+
},
53+
{
54+
title: 'View documentation',
55+
href: '/docs',
56+
type: 'standalone-link',
57+
},
58+
]}
59+
/>
60+
)
61+
expect(screen.getByTestId('standaloneLink-0')).toBeVisible()
62+
expect(screen.getByTestId('standaloneLink-1')).toBeVisible()
63+
})
64+
it('should render two Button CTAs', () => {
65+
render(
66+
<Actions
67+
ctas={[
68+
{
69+
title: 'View tutorials',
70+
href: '/tutorials',
71+
},
72+
{
73+
title: 'View documentation',
74+
href: '/docs',
75+
},
76+
]}
77+
/>
78+
)
79+
expect(screen.getByTestId('button-0')).toBeVisible()
80+
expect(screen.getByTestId('button-1')).toBeVisible()
81+
})
2782
})

‎packages/actions/index.tsx

Lines changed: 39 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import classNames from 'classnames'
22
import Button from '@hashicorp/react-button'
3+
import StandaloneLink from '@hashicorp/react-standalone-link'
34
import type { ActionsProps } from './types'
45
import s from './style.module.css'
56

@@ -18,23 +19,44 @@ export default function Actions({
1819
return (
1920
<div className={classNames(s.actions, s[layout])} data-testid="actions">
2021
{ctas.map((cta, index) => {
21-
return (
22-
<Button
23-
key={index}
24-
title={cta.title}
25-
linkType={
26-
cta.variant === 'tertiary-neutral' ? 'inbound' : undefined
27-
}
28-
url={cta.url}
29-
onClick={cta.onClick}
30-
size={size}
31-
theme={{
32-
brand: theme,
33-
variant: cta.variant || 'primary',
34-
background: appearance === 'dark' ? 'dark' : undefined,
35-
}}
36-
/>
37-
)
22+
// The first CTA and second CTA should always
23+
// have the `primary` and `secondary` variations respectively.
24+
25+
const variant = index === 0 ? 'primary' : 'secondary'
26+
const isStandaloneLink = cta?.type === 'standalone-link'
27+
28+
if (isStandaloneLink) {
29+
return (
30+
<StandaloneLink
31+
// eslint-disable-next-line react/no-array-index-key
32+
key={index}
33+
href={cta.href}
34+
theme={variant}
35+
appearance={appearance}
36+
onClick={cta?.onClick}
37+
data-testid={`standaloneLink-${index}`}
38+
>
39+
{cta.title}
40+
</StandaloneLink>
41+
)
42+
} else {
43+
return (
44+
<Button
45+
// eslint-disable-next-line react/no-array-index-key
46+
key={index}
47+
title={cta.title}
48+
url={cta.href}
49+
onClick={cta.onClick}
50+
size={size}
51+
theme={{
52+
brand: theme,
53+
variant: variant,
54+
background: appearance === 'dark' ? 'dark' : undefined,
55+
}}
56+
data-testid={`button-${index}`}
57+
/>
58+
)
59+
}
3860
})}
3961
</div>
4062
)

‎packages/actions/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"dependencies": {
88
"@hashicorp/platform-product-meta": "^0.1.0",
99
"@hashicorp/react-button": "^6.2.0",
10+
"@hashicorp/react-standalone-link": "^0.1.1",
1011
"classnames": "^2.3.1"
1112
},
1213
"peerDependencies": {

0 commit comments

Comments
 (0)