@hashicorp/react-components 1.1.4 → 1.1.7
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 +1 -1
- package/src/components/nav-panel/components/panel/column/style.module.css +1 -1
- package/src/components/nav-panel/components/promo/style.module.css +2 -1
- package/src/components/nav-panel/product-panel/index.tsx +2 -1
- package/src/components/nav-panel/product-panel/style.module.css +24 -5
- package/src/components/nav-panel/standard-panel/style.module.css +1 -1
package/package.json
CHANGED
|
@@ -9,7 +9,8 @@
|
|
|
9
9
|
var(--hdsplus-spacing-06) var(--hdsplus-spacing-08);
|
|
10
10
|
flex-direction: row;
|
|
11
11
|
gap: var(--hdsplus-spacing-04);
|
|
12
|
-
margin: var(--hdsplus-spacing-
|
|
12
|
+
margin: var(--hdsplus-spacing-07);
|
|
13
|
+
margin-bottom: var(--hdsplus-spacing-09);
|
|
13
14
|
|
|
14
15
|
@media (--large) {
|
|
15
16
|
&.noSide {
|
|
@@ -12,7 +12,7 @@ import * as NavigationMenu from '@radix-ui/react-navigation-menu'
|
|
|
12
12
|
import s from './style.module.css'
|
|
13
13
|
|
|
14
14
|
const PRODUCT_LOGO_MAP = new Map([
|
|
15
|
-
['Terraform', 'terraform-fill
|
|
15
|
+
['Terraform', 'terraform-fill'],
|
|
16
16
|
['Packer', 'packer-fill-color'],
|
|
17
17
|
['Vault', 'vault-fill-color'],
|
|
18
18
|
['Boundary', 'boundary-fill-color'],
|
|
@@ -25,6 +25,7 @@ const PRODUCT_LOGO_MAP = new Map([
|
|
|
25
25
|
])
|
|
26
26
|
|
|
27
27
|
const PRODUCT_LOGO_EXCEPTION_CLASSNAMES = {
|
|
28
|
+
Terraform: 'terraform',
|
|
28
29
|
'HCP Vault Secrets': 'hcpVaultSecrets',
|
|
29
30
|
'HCP Vault Radar': 'hcpVaultRadar',
|
|
30
31
|
}
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
list-style: none;
|
|
27
27
|
padding: 0;
|
|
28
28
|
display: grid;
|
|
29
|
-
margin: var(--hdsplus-spacing-
|
|
29
|
+
margin: var(--hdsplus-spacing-07) 0 0;
|
|
30
30
|
|
|
31
31
|
@media (--large) {
|
|
32
32
|
@nest .noSide & {
|
|
@@ -101,6 +101,12 @@
|
|
|
101
101
|
gap: 0;
|
|
102
102
|
}
|
|
103
103
|
}
|
|
104
|
+
|
|
105
|
+
& li:last-child {
|
|
106
|
+
& .productWrapper {
|
|
107
|
+
margin-bottom: 0;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
104
110
|
}
|
|
105
111
|
|
|
106
112
|
/* NavProduct styles */
|
|
@@ -191,14 +197,14 @@
|
|
|
191
197
|
|
|
192
198
|
@media (--large) {
|
|
193
199
|
@nest .noSide & {
|
|
194
|
-
padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-
|
|
200
|
+
padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-09)
|
|
195
201
|
var(--hdsplus-spacing-04);
|
|
196
202
|
}
|
|
197
203
|
}
|
|
198
204
|
|
|
199
205
|
@media (--dev-dot-viewport) {
|
|
200
206
|
@nest .hasSide & {
|
|
201
|
-
padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-
|
|
207
|
+
padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-09)
|
|
202
208
|
var(--hdsplus-spacing-04);
|
|
203
209
|
}
|
|
204
210
|
}
|
|
@@ -231,12 +237,10 @@
|
|
|
231
237
|
/* Lifted from .productWrapper */
|
|
232
238
|
.sidePanelItem {
|
|
233
239
|
display: flex;
|
|
234
|
-
margin-bottom: var(--hdsplus-spacing-05);
|
|
235
240
|
gap: var(--hdsplus-spacing-05);
|
|
236
241
|
|
|
237
242
|
@media (--dev-dot-viewport) {
|
|
238
243
|
padding: var(--hdsplus-spacing-03) var(--hdsplus-spacing-05);
|
|
239
|
-
margin-bottom: 0;
|
|
240
244
|
|
|
241
245
|
&:hover {
|
|
242
246
|
background-color: var(--token-color-surface-interactive-hover);
|
|
@@ -276,6 +280,21 @@ packages/react-components/src/components/nav-panel/components/link-list/style.mo
|
|
|
276
280
|
|
|
277
281
|
/* Branding exception classnames */
|
|
278
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
|
+
|
|
279
298
|
/* Styles for HCP Vault mimic the spec for `product-square` icons,
|
|
280
299
|
while allowing the symbol inside the icon border to change color
|
|
281
300
|
based on the site's theme
|