@hashicorp/react-components 0.0.0-canary.3a0af3d → 0.0.0-canary.4d38b23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +8 -5
- package/src/components/consent-manager/README.md +1 -1
- package/src/components/consent-manager/loader/README.md +1 -1
- package/src/components/marketo-form/partials/fields/htmltext-field/style.module.css +16 -4
- package/src/components/marketo-form/utils.ts +4 -0
- package/src/components/nav-panel/components/link-list/index.tsx +88 -0
- package/src/components/nav-panel/components/link-list/style.module.css +57 -0
- package/src/components/nav-panel/components/panel/column/index.tsx +24 -0
- package/src/components/nav-panel/components/panel/column/style.module.css +24 -0
- package/src/components/nav-panel/components/panel/index.tsx +4 -0
- package/src/components/nav-panel/components/panel/root/index.tsx +20 -0
- package/src/components/nav-panel/components/panel/root/style.module.css +30 -0
- package/src/components/nav-panel/components/promo/index.tsx +86 -0
- package/src/components/nav-panel/components/promo/style.module.css +114 -0
- package/src/components/nav-panel/index.tsx +6 -0
- package/src/components/nav-panel/product-panel/index.tsx +171 -0
- package/src/components/nav-panel/product-panel/style.module.css +315 -0
- package/src/components/nav-panel/standard-panel/index.tsx +44 -0
- package/src/components/nav-panel/standard-panel/style.module.css +11 -0
- package/src/components/next-steps/index.tsx +4 -10
- package/src/components/subnav/index.tsx +6 -6
- package/src/components/subnav/partials/CtaLinks/index.tsx +1 -1
- package/src/components/subnav/partials/DropdownTrigger/index.tsx +1 -1
- package/src/components/subnav/partials/MenuItemsDefault/index.tsx +1 -1
- package/src/components/subnav/partials/MenuItemsOverflow/index.tsx +2 -2
- package/src/components/subnav/partials/TitleLink/index.tsx +9 -9
- package/src/components/subnav/partials/TitleLink/mktg-logos/all-community-product-logos_on-dark.ts +7 -7
- package/src/components/subnav/partials/TitleLink/mktg-logos/all-community-product-logos_on-light.ts +7 -7
- package/src/components/subnav/partials/TitleLink/mktg-logos/all-primary-logos_on-dark.ts +10 -10
- package/src/components/subnav/partials/TitleLink/mktg-logos/all-primary-logos_on-light.ts +10 -10
- package/src/lib/parse-url/index.test.ts +30 -0
- package/src/lib/parse-url/index.ts +32 -0
- package/src/lib/track-nav-click-event/index.ts +22 -0
- package/src/lib/v/index.ts +11 -0
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
import { CSSProperties } from 'react'
|
|
2
|
+
import classNames from 'classnames'
|
|
3
|
+
import Link from 'next/link'
|
|
4
|
+
import * as NavPanel from '../components/panel'
|
|
5
|
+
import Promo, { type PromoProps } from '../components/promo'
|
|
6
|
+
import { Products } from '@hashicorp/platform-product-meta'
|
|
7
|
+
import FlightIcon from '@hashicorp/react-design-system-components/src/components/flight-icon'
|
|
8
|
+
import { TextPlus } from '@hashicorp/react-design-system-components/src/components/text'
|
|
9
|
+
import { parseUrl } from '../../../lib/parse-url'
|
|
10
|
+
import { trackNavClickEvent } from '../../../lib/track-nav-click-event'
|
|
11
|
+
import * as NavigationMenu from '@radix-ui/react-navigation-menu'
|
|
12
|
+
import s from './style.module.css'
|
|
13
|
+
|
|
14
|
+
const PRODUCT_LOGO_MAP = new Map([
|
|
15
|
+
['Terraform', 'terraform-fill'],
|
|
16
|
+
['Packer', 'packer-fill-color'],
|
|
17
|
+
['Vault', 'vault-fill-color'],
|
|
18
|
+
['Boundary', 'boundary-fill-color'],
|
|
19
|
+
['Consul', 'consul-fill-color'],
|
|
20
|
+
['Nomad', 'nomad-fill-color'],
|
|
21
|
+
['Waypoint', 'waypoint-fill-color'],
|
|
22
|
+
['Vagrant', 'vagrant-fill-color'],
|
|
23
|
+
['HCP Vault Secrets', 'vault-secrets'],
|
|
24
|
+
['HCP Vault Radar', 'vault-radar'],
|
|
25
|
+
])
|
|
26
|
+
|
|
27
|
+
const PRODUCT_LOGO_EXCEPTION_CLASSNAMES = {
|
|
28
|
+
Terraform: 'terraform',
|
|
29
|
+
'HCP Vault Secrets': 'hcpVaultSecrets',
|
|
30
|
+
'HCP Vault Radar': 'hcpVaultRadar',
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export interface ProductsPanelProps {
|
|
34
|
+
productCategories: any
|
|
35
|
+
promo?: PromoProps
|
|
36
|
+
sidePanel?: {
|
|
37
|
+
label: string
|
|
38
|
+
navItems: {
|
|
39
|
+
icon: string
|
|
40
|
+
title: string
|
|
41
|
+
description: string
|
|
42
|
+
url: string
|
|
43
|
+
}[]
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
const ProductPanel = ({
|
|
48
|
+
productCategories,
|
|
49
|
+
promo,
|
|
50
|
+
sidePanel,
|
|
51
|
+
}: ProductsPanelProps) => {
|
|
52
|
+
return (
|
|
53
|
+
<NavPanel.Root
|
|
54
|
+
className={classNames(s.productPanel, {
|
|
55
|
+
[s.hasSide]: sidePanel,
|
|
56
|
+
[s.noSide]: !sidePanel,
|
|
57
|
+
})}
|
|
58
|
+
hasSidePanel={Boolean(sidePanel)}
|
|
59
|
+
>
|
|
60
|
+
<div className={s.mainPanel}>
|
|
61
|
+
<NavPanel.Column hasSidePanel={Boolean(sidePanel)}>
|
|
62
|
+
<ul className={s.productCategories}>
|
|
63
|
+
{productCategories.map(({ title, products }) => {
|
|
64
|
+
return (
|
|
65
|
+
<li key={title} className={s.productCategory}>
|
|
66
|
+
<TextPlus.Body className={s.eyebrow}>{title}</TextPlus.Body>
|
|
67
|
+
<ul
|
|
68
|
+
className={s.productList}
|
|
69
|
+
// Dynamically calculate row count based on number of items divided by expected columns
|
|
70
|
+
style={
|
|
71
|
+
{
|
|
72
|
+
'--row-count-above-mobile': Math.ceil(
|
|
73
|
+
products.length / 2
|
|
74
|
+
),
|
|
75
|
+
} as CSSProperties
|
|
76
|
+
}
|
|
77
|
+
>
|
|
78
|
+
{products.map((product) => {
|
|
79
|
+
return (
|
|
80
|
+
<li key={product.url}>
|
|
81
|
+
<NavProduct {...product} />
|
|
82
|
+
</li>
|
|
83
|
+
)
|
|
84
|
+
})}
|
|
85
|
+
</ul>
|
|
86
|
+
</li>
|
|
87
|
+
)
|
|
88
|
+
})}
|
|
89
|
+
</ul>
|
|
90
|
+
</NavPanel.Column>
|
|
91
|
+
{promo ? <Promo {...promo} hasSidePanel={Boolean(sidePanel)} /> : null}
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
{sidePanel ? (
|
|
95
|
+
<NavPanel.Column className={s.sidePanel}>
|
|
96
|
+
<TextPlus.Body size="200" weight="semibold">
|
|
97
|
+
{sidePanel.label}
|
|
98
|
+
</TextPlus.Body>
|
|
99
|
+
|
|
100
|
+
{/* ! TODO Replace the below list with the <LinkList /> component,
|
|
101
|
+
That component will require a refactor to support greater customization
|
|
102
|
+
Ticket:
|
|
103
|
+
https://app.asana.com/0/1206176289707208/1208162145034615/f
|
|
104
|
+
*/}
|
|
105
|
+
<ul className={s.sidePanelItems}>
|
|
106
|
+
{sidePanel.navItems.map(({ icon, title, description, url }) => {
|
|
107
|
+
return (
|
|
108
|
+
<li key={title}>
|
|
109
|
+
<Link href={parseUrl(url).href} className={s.sidePanelItem}>
|
|
110
|
+
<div className={s.iconBackground}>
|
|
111
|
+
<FlightIcon
|
|
112
|
+
size={16}
|
|
113
|
+
name={icon}
|
|
114
|
+
color="var(--token-color-foreground-faint)"
|
|
115
|
+
/>
|
|
116
|
+
</div>
|
|
117
|
+
<div className={s.sidePanelItemContent}>
|
|
118
|
+
<TextPlus.Body size="200" weight="semibold" tag="span">
|
|
119
|
+
{title}
|
|
120
|
+
</TextPlus.Body>
|
|
121
|
+
<span className={s.sidePanelItemDesc}>{description}</span>
|
|
122
|
+
</div>
|
|
123
|
+
</Link>
|
|
124
|
+
</li>
|
|
125
|
+
)
|
|
126
|
+
})}
|
|
127
|
+
</ul>
|
|
128
|
+
</NavPanel.Column>
|
|
129
|
+
) : null}
|
|
130
|
+
</NavPanel.Root>
|
|
131
|
+
)
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
export interface NavProductProps {
|
|
135
|
+
url: string
|
|
136
|
+
product: Products | string
|
|
137
|
+
description: string
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
function NavProduct({ url, product, description }: NavProductProps) {
|
|
141
|
+
return (
|
|
142
|
+
<NavigationMenu.Link asChild>
|
|
143
|
+
<Link
|
|
144
|
+
href={parseUrl(url).href}
|
|
145
|
+
onClickCapture={() => {
|
|
146
|
+
trackNavClickEvent(product, url, 'products')
|
|
147
|
+
}}
|
|
148
|
+
className={s.focusIndicator}
|
|
149
|
+
>
|
|
150
|
+
<div className={s.productWrapper}>
|
|
151
|
+
<div className={s.productLogo}>
|
|
152
|
+
<FlightIcon
|
|
153
|
+
name={PRODUCT_LOGO_MAP.get(product) ?? 'hashicorp-fill-color'}
|
|
154
|
+
className={
|
|
155
|
+
PRODUCT_LOGO_EXCEPTION_CLASSNAMES[product]
|
|
156
|
+
? s[PRODUCT_LOGO_EXCEPTION_CLASSNAMES[product]]
|
|
157
|
+
: undefined
|
|
158
|
+
}
|
|
159
|
+
/>
|
|
160
|
+
</div>
|
|
161
|
+
<div className={s.productTextContent}>
|
|
162
|
+
<span>{product}</span>
|
|
163
|
+
<span className={s.productDesc}>{description}</span>
|
|
164
|
+
</div>
|
|
165
|
+
</div>
|
|
166
|
+
</Link>
|
|
167
|
+
</NavigationMenu.Link>
|
|
168
|
+
)
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
export default ProductPanel
|
|
@@ -0,0 +1,315 @@
|
|
|
1
|
+
@custom-media --dev-dot-viewport (min-width: 1230px);
|
|
2
|
+
|
|
3
|
+
.productPanel {
|
|
4
|
+
height: 100%;
|
|
5
|
+
|
|
6
|
+
@media (--large) {
|
|
7
|
+
&.noSide {
|
|
8
|
+
display: grid;
|
|
9
|
+
grid-template-rows: 1fr;
|
|
10
|
+
grid-template-columns: max-content max-content;
|
|
11
|
+
padding: 0;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@media (--dev-dot-viewport) {
|
|
16
|
+
&.hasSide {
|
|
17
|
+
display: grid;
|
|
18
|
+
grid-template-rows: 1fr;
|
|
19
|
+
grid-template-columns: max-content max-content;
|
|
20
|
+
padding: 0;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.productCategories {
|
|
26
|
+
list-style: none;
|
|
27
|
+
padding: 0;
|
|
28
|
+
display: grid;
|
|
29
|
+
margin: var(--hdsplus-spacing-07) 0 0;
|
|
30
|
+
|
|
31
|
+
@media (--large) {
|
|
32
|
+
@nest .noSide & {
|
|
33
|
+
margin: 0;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@media (--dev-dot-viewport) {
|
|
38
|
+
@nest .hasSide & {
|
|
39
|
+
margin: 0;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.productCategory {
|
|
45
|
+
display: flex;
|
|
46
|
+
flex-direction: column;
|
|
47
|
+
min-width: 160px;
|
|
48
|
+
|
|
49
|
+
&:first-child {
|
|
50
|
+
border-bottom: 1px solid var(--token-color-border-primary);
|
|
51
|
+
margin-bottom: var(--hdsplus-spacing-05);
|
|
52
|
+
padding-bottom: var(--hdsplus-spacing-05);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.eyebrow {
|
|
57
|
+
padding-bottom: var(--hdsplus-spacing-04);
|
|
58
|
+
color: var(--token-color-foreground-strong);
|
|
59
|
+
font-weight: var(--font-weight-semi-bold);
|
|
60
|
+
|
|
61
|
+
@media (--large) {
|
|
62
|
+
@nest .noSide & {
|
|
63
|
+
padding-bottom: 0;
|
|
64
|
+
padding-left: var(--hdsplus-spacing-06);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
@media (--dev-dot-viewport) {
|
|
69
|
+
@nest .hasSide & {
|
|
70
|
+
padding-bottom: 0;
|
|
71
|
+
padding-left: var(--hdsplus-spacing-06);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.productList {
|
|
77
|
+
display: grid;
|
|
78
|
+
grid-template-columns: 1fr;
|
|
79
|
+
list-style: none;
|
|
80
|
+
margin: 0;
|
|
81
|
+
padding: 0;
|
|
82
|
+
|
|
83
|
+
@media (--large) {
|
|
84
|
+
@nest .noSide & {
|
|
85
|
+
padding: var(--hdsplus-spacing-06) var(--hdsplus-spacing-05)
|
|
86
|
+
var(--hdsplus-spacing-04);
|
|
87
|
+
grid-auto-flow: column;
|
|
88
|
+
grid-template-columns: repeat(2, 300px);
|
|
89
|
+
grid-template-rows: repeat(var(--row-count-above-mobile, 1), max-content);
|
|
90
|
+
gap: 0;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
@media (--dev-dot-viewport) {
|
|
95
|
+
@nest .hasSide & {
|
|
96
|
+
padding: var(--hdsplus-spacing-06) var(--hdsplus-spacing-05)
|
|
97
|
+
var(--hdsplus-spacing-04);
|
|
98
|
+
grid-auto-flow: column;
|
|
99
|
+
grid-template-columns: repeat(2, 300px);
|
|
100
|
+
grid-template-rows: repeat(var(--row-count-above-mobile, 1), max-content);
|
|
101
|
+
gap: 0;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
& li:last-child {
|
|
106
|
+
& .productWrapper {
|
|
107
|
+
margin-bottom: 0;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/* NavProduct styles */
|
|
113
|
+
|
|
114
|
+
.productWrapper {
|
|
115
|
+
display: flex;
|
|
116
|
+
margin-bottom: var(--hdsplus-spacing-05);
|
|
117
|
+
gap: var(--hdsplus-spacing-05);
|
|
118
|
+
|
|
119
|
+
@media (--large) {
|
|
120
|
+
@nest .noSide & {
|
|
121
|
+
padding: var(--hdsplus-spacing-03) var(--hdsplus-spacing-05);
|
|
122
|
+
margin-bottom: 0;
|
|
123
|
+
|
|
124
|
+
&:hover {
|
|
125
|
+
background-color: var(--token-color-surface-interactive-hover);
|
|
126
|
+
border-radius: var(--hdsplus-spacing-01);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
@media (--dev-dot-viewport) {
|
|
132
|
+
@nest .hasSide & {
|
|
133
|
+
padding: var(--hdsplus-spacing-03) var(--hdsplus-spacing-05);
|
|
134
|
+
margin-bottom: 0;
|
|
135
|
+
|
|
136
|
+
&:hover {
|
|
137
|
+
background-color: var(--token-color-surface-interactive-hover);
|
|
138
|
+
border-radius: var(--hdsplus-spacing-01);
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.productLogo {
|
|
145
|
+
margin-top: 3px;
|
|
146
|
+
|
|
147
|
+
& svg {
|
|
148
|
+
height: 42px;
|
|
149
|
+
width: 42px;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
@nest .noSide & {
|
|
153
|
+
& svg {
|
|
154
|
+
@media (--large) {
|
|
155
|
+
height: var(--hdsplus-spacing-08);
|
|
156
|
+
width: var(--hdsplus-spacing-08);
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
@nest .hasSide & {
|
|
162
|
+
& svg {
|
|
163
|
+
@media (--dev-dot-viewport) {
|
|
164
|
+
height: var(--hdsplus-spacing-08);
|
|
165
|
+
width: var(--hdsplus-spacing-08);
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.productTextContent {
|
|
172
|
+
display: flex;
|
|
173
|
+
flex-direction: column;
|
|
174
|
+
color: var(--token-color-foreground-strong);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.productDesc {
|
|
178
|
+
font-weight: 400;
|
|
179
|
+
font-size: 14px;
|
|
180
|
+
line-height: 20px;
|
|
181
|
+
letter-spacing: 0.0125em;
|
|
182
|
+
color: var(--token-color-foreground-faint);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.focusIndicator {
|
|
186
|
+
&:focus {
|
|
187
|
+
outline: 2px solid var(--token-color-focus-action-internal);
|
|
188
|
+
outline-style: auto;
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.mainPanel {
|
|
193
|
+
height: 100%;
|
|
194
|
+
display: flex;
|
|
195
|
+
justify-content: space-between;
|
|
196
|
+
flex-direction: column;
|
|
197
|
+
|
|
198
|
+
@media (--large) {
|
|
199
|
+
@nest .noSide & {
|
|
200
|
+
padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-09)
|
|
201
|
+
var(--hdsplus-spacing-04);
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
@media (--dev-dot-viewport) {
|
|
206
|
+
@nest .hasSide & {
|
|
207
|
+
padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-09)
|
|
208
|
+
var(--hdsplus-spacing-04);
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.sidePanel {
|
|
214
|
+
height: 100%;
|
|
215
|
+
background: var(--token-color-surface-faint);
|
|
216
|
+
display: flex;
|
|
217
|
+
flex-direction: column;
|
|
218
|
+
gap: var(--hdsplus-spacing-05);
|
|
219
|
+
margin: 0;
|
|
220
|
+
padding: var(--hdsplus-spacing-07) var(--hdsplus-spacing-04)
|
|
221
|
+
var(--hdsplus-spacing-09) var(--hdsplus-spacing-07);
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.sidePanelItems {
|
|
225
|
+
list-style: none;
|
|
226
|
+
margin: 0;
|
|
227
|
+
padding: 0;
|
|
228
|
+
display: grid;
|
|
229
|
+
grid-template-columns: 1fr;
|
|
230
|
+
gap: var(--hdsplus-spacing-07);
|
|
231
|
+
|
|
232
|
+
@media (--dev-dot-viewport) {
|
|
233
|
+
gap: var(--hdsplus-spacing-05);
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
/* Lifted from .productWrapper */
|
|
238
|
+
.sidePanelItem {
|
|
239
|
+
display: flex;
|
|
240
|
+
gap: var(--hdsplus-spacing-05);
|
|
241
|
+
|
|
242
|
+
@media (--dev-dot-viewport) {
|
|
243
|
+
padding: var(--hdsplus-spacing-03) var(--hdsplus-spacing-05);
|
|
244
|
+
|
|
245
|
+
&:hover {
|
|
246
|
+
background-color: var(--token-color-surface-interactive-hover);
|
|
247
|
+
border-radius: var(--hdsplus-spacing-01);
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
/* Lifted from:
|
|
253
|
+
packages/react-components/src/components/nav-panel/components/link-list/style.module.css */
|
|
254
|
+
.iconBackground {
|
|
255
|
+
background: var(--token-color-foreground-high-contrast);
|
|
256
|
+
height: var(--hdsplus-spacing-08);
|
|
257
|
+
width: var(--hdsplus-spacing-08);
|
|
258
|
+
display: flex;
|
|
259
|
+
align-items: center;
|
|
260
|
+
justify-content: center;
|
|
261
|
+
border-radius: 3px;
|
|
262
|
+
flex: none;
|
|
263
|
+
margin-top: 3px;
|
|
264
|
+
border: 1px solid var(--token-color-border-primary);
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
/* Lifted from .productTextContent */
|
|
268
|
+
.sidePanelItemContent {
|
|
269
|
+
display: flex;
|
|
270
|
+
flex-direction: column;
|
|
271
|
+
color: var(--token-color-foreground-strong);
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.sidePanelItemDesc {
|
|
275
|
+
font-weight: 400;
|
|
276
|
+
font-size: 13px;
|
|
277
|
+
line-height: 18px;
|
|
278
|
+
color: var(--token-color-foreground-primary);
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
/* Branding exception classnames */
|
|
282
|
+
|
|
283
|
+
/* Allows switching to a dark-mode-specific color for Terraform */
|
|
284
|
+
.terraform {
|
|
285
|
+
& use {
|
|
286
|
+
fill: var(--token-color-terraform-brand);
|
|
287
|
+
|
|
288
|
+
@nest [data-theme='dark'] & {
|
|
289
|
+
fill: var(--token-color-terraform-foreground);
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
& path {
|
|
294
|
+
fill: inherit;
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
/* Styles for HCP Vault mimic the spec for `product-square` icons,
|
|
299
|
+
while allowing the symbol inside the icon border to change color
|
|
300
|
+
based on the site's theme
|
|
301
|
+
*/
|
|
302
|
+
.hcpVaultSecrets,
|
|
303
|
+
.hcpVaultRadar {
|
|
304
|
+
padding: var(--hdsplus-spacing-01);
|
|
305
|
+
border: 2px solid var(--token-color-vault-brand);
|
|
306
|
+
border-radius: 3px;
|
|
307
|
+
|
|
308
|
+
& use {
|
|
309
|
+
fill: var(--token-color-foreground-strong);
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
& path {
|
|
313
|
+
fill: inherit;
|
|
314
|
+
}
|
|
315
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { trackNavClickEvent } from '../../../lib/track-nav-click-event'
|
|
2
|
+
import * as NavPanel from '../components/panel'
|
|
3
|
+
import LinkList, { type LinkListProps } from '../components/link-list'
|
|
4
|
+
import Promo, { type PromoProps } from '../components/promo'
|
|
5
|
+
import s from './style.module.css'
|
|
6
|
+
|
|
7
|
+
export interface NavItem {
|
|
8
|
+
navItems: LinkListProps['links']
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
interface StandardPanelProps {
|
|
12
|
+
navData: NavItem[]
|
|
13
|
+
promo?: PromoProps
|
|
14
|
+
sectionName?: string
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
const StandardPanel = ({
|
|
18
|
+
navData,
|
|
19
|
+
promo,
|
|
20
|
+
sectionName = '',
|
|
21
|
+
}: StandardPanelProps) => {
|
|
22
|
+
return (
|
|
23
|
+
<NavPanel.Root>
|
|
24
|
+
<div className={s.columns}>
|
|
25
|
+
{navData.map(({ navItems }, stableIdx) => {
|
|
26
|
+
return (
|
|
27
|
+
<NavPanel.Column key={stableIdx}>
|
|
28
|
+
<LinkList
|
|
29
|
+
links={navItems}
|
|
30
|
+
linkClickHandler={(text, href) => {
|
|
31
|
+
trackNavClickEvent(text, href, sectionName)
|
|
32
|
+
}}
|
|
33
|
+
/>
|
|
34
|
+
</NavPanel.Column>
|
|
35
|
+
)
|
|
36
|
+
})}
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
{promo ? <Promo {...promo} /> : null}
|
|
40
|
+
</NavPanel.Root>
|
|
41
|
+
)
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
export default StandardPanel
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* SPDX-License-Identifier: MPL-2.0
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
import
|
|
6
|
+
import { useState } from 'react'
|
|
7
7
|
import Badge from '@hashicorp/react-badge'
|
|
8
8
|
import classNames from 'classnames'
|
|
9
9
|
import ExpandableArrow from '@hashicorp/react-expandable-arrow'
|
|
@@ -23,16 +23,10 @@ export default function NextSteps({
|
|
|
23
23
|
steps,
|
|
24
24
|
cta,
|
|
25
25
|
}: NextStepsProps) {
|
|
26
|
-
const {
|
|
27
|
-
|
|
26
|
+
const { themeClass } = useProductMeta(theme)
|
|
28
27
|
return (
|
|
29
28
|
<section
|
|
30
|
-
className={classNames(
|
|
31
|
-
s.nextSteps,
|
|
32
|
-
s[appearance],
|
|
33
|
-
themeClass,
|
|
34
|
-
slug && s[slug]
|
|
35
|
-
)}
|
|
29
|
+
className={classNames(s.nextSteps, s[appearance], themeClass)}
|
|
36
30
|
data-testid="next-steps"
|
|
37
31
|
>
|
|
38
32
|
<div className={s.container}>
|
|
@@ -96,7 +90,7 @@ export default function NextSteps({
|
|
|
96
90
|
}
|
|
97
91
|
|
|
98
92
|
function Tile({ theme, variant, heading, badge, description, cta }) {
|
|
99
|
-
const [isHovered, setIsHovered] =
|
|
93
|
+
const [isHovered, setIsHovered] = useState(false)
|
|
100
94
|
return (
|
|
101
95
|
<Link href={cta.url} legacyBehavior>
|
|
102
96
|
<a
|
|
@@ -1,17 +1,14 @@
|
|
|
1
|
+
'use client'
|
|
2
|
+
|
|
1
3
|
/**
|
|
2
4
|
* Copyright (c) HashiCorp, Inc.
|
|
3
5
|
* SPDX-License-Identifier: MPL-2.0
|
|
4
6
|
*/
|
|
5
|
-
|
|
6
|
-
'use client'
|
|
7
|
-
|
|
8
7
|
import { useState } from 'react'
|
|
9
8
|
import classNames from 'classnames'
|
|
10
9
|
import useProductMeta, { Products } from '@hashicorp/platform-product-meta'
|
|
11
10
|
import { THEMES } from './subnav-consts'
|
|
12
11
|
import useNavRef from './helpers/useNavRef'
|
|
13
|
-
import s from './style.module.css'
|
|
14
|
-
import themeStyles from './theme.module.css'
|
|
15
12
|
|
|
16
13
|
import MenuItemsOverflow from './partials/MenuItemsOverflow'
|
|
17
14
|
import TitleLink from './partials/TitleLink'
|
|
@@ -20,6 +17,8 @@ import CtaLinks, { type CtaLinkProps } from './partials/CtaLinks'
|
|
|
20
17
|
import traverse, { isObject } from './helpers/traverse'
|
|
21
18
|
import { areBasePathsMatching } from './helpers/areBasePathsMatching'
|
|
22
19
|
import * as NavigationMenu from '@radix-ui/react-navigation-menu'
|
|
20
|
+
import themeStyles from './theme.module.css'
|
|
21
|
+
import s from './style.module.css'
|
|
23
22
|
|
|
24
23
|
const productAllowList = {
|
|
25
24
|
consul: 'consul',
|
|
@@ -76,7 +75,6 @@ function SubnavInner({
|
|
|
76
75
|
menuText = 'Menu',
|
|
77
76
|
activatePanel,
|
|
78
77
|
}: SubnavInnerProps) {
|
|
79
|
-
const { themeClass } = useProductMeta(product) // overrides --brand css vars
|
|
80
78
|
// Add _isActiveUrl to menuItems so we can highlight them appropriately
|
|
81
79
|
const menuItemsWithActive = traverse(menuItems, (_key, value: any) => {
|
|
82
80
|
const hasUrl = isObject(value) && value.url
|
|
@@ -88,6 +86,8 @@ function SubnavInner({
|
|
|
88
86
|
return value
|
|
89
87
|
})
|
|
90
88
|
|
|
89
|
+
const { themeClass } = useProductMeta(product)
|
|
90
|
+
|
|
91
91
|
/**
|
|
92
92
|
* Note on constrainWidth & g-grid-container
|
|
93
93
|
*
|
|
@@ -12,8 +12,8 @@ import type { ToggleButtonProps } from '@hashicorp/react-design-system-component
|
|
|
12
12
|
import * as Dropdown from '@hashicorp/react-design-system-components/src/components/dropdown'
|
|
13
13
|
import GithubStarsLink from './github-stars-link'
|
|
14
14
|
import classNames from 'classnames'
|
|
15
|
-
import s from './style.module.css'
|
|
16
15
|
import * as NavigationMenu from '@radix-ui/react-navigation-menu'
|
|
16
|
+
import s from './style.module.css'
|
|
17
17
|
|
|
18
18
|
type CtaLink = ButtonProps & { href: string; __typename?: string }
|
|
19
19
|
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
|
|
6
6
|
import FlightIcon from '@hashicorp/react-design-system-components/src/components/flight-icon'
|
|
7
7
|
import NavItemText from '../nav-item-text'
|
|
8
|
-
import s from './style.module.css'
|
|
9
8
|
import * as NavigationMenu from '@radix-ui/react-navigation-menu'
|
|
9
|
+
import s from './style.module.css'
|
|
10
10
|
|
|
11
11
|
interface DropdownTriggerProps {
|
|
12
12
|
text: string
|
|
@@ -7,8 +7,8 @@ import React from 'react'
|
|
|
7
7
|
import Link from 'next/link'
|
|
8
8
|
import NavItemText from '../nav-item-text'
|
|
9
9
|
import DropdownTrigger from '../DropdownTrigger'
|
|
10
|
-
import s from './style.module.css'
|
|
11
10
|
import * as NavigationMenu from '@radix-ui/react-navigation-menu'
|
|
11
|
+
import s from './style.module.css'
|
|
12
12
|
|
|
13
13
|
interface MenuItemsDefaultProps {
|
|
14
14
|
menuItems: (
|
|
@@ -4,14 +4,14 @@
|
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import React from 'react'
|
|
7
|
-
import { v } from '
|
|
7
|
+
import { v } from '../../../../lib/v'
|
|
8
8
|
import Link from 'next/link'
|
|
9
9
|
import type { Products } from '@hashicorp/platform-product-meta'
|
|
10
10
|
import CtaLinks, { type CtaLinkProps } from '../CtaLinks'
|
|
11
11
|
import DropdownTrigger from '../DropdownTrigger'
|
|
12
|
-
import s from './style.module.css'
|
|
13
12
|
import * as NavigationMenu from '@radix-ui/react-navigation-menu'
|
|
14
13
|
import classNames from 'classnames'
|
|
14
|
+
import s from './style.module.css'
|
|
15
15
|
|
|
16
16
|
interface MenuItemsOverflowProps {
|
|
17
17
|
menuItems: (
|