@hashicorp/react-components 1.1.3 → 1.1.5
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/panel/root/style.module.css +1 -1
- package/src/components/nav-panel/components/promo/style.module.css +1 -1
- package/src/components/nav-panel/product-panel/index.tsx +13 -2
- package/src/components/nav-panel/product-panel/style.module.css +23 -19
package/package.json
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { CSSProperties } from 'react'
|
|
2
|
+
import classNames from 'classnames'
|
|
1
3
|
import Link from 'next/link'
|
|
2
4
|
import * as NavPanel from '../components/panel'
|
|
3
5
|
import Promo, { type PromoProps } from '../components/promo'
|
|
@@ -8,7 +10,6 @@ import { parseUrl } from '../../../lib/parse-url'
|
|
|
8
10
|
import { trackNavClickEvent } from '../../../lib/track-nav-click-event'
|
|
9
11
|
import * as NavigationMenu from '@radix-ui/react-navigation-menu'
|
|
10
12
|
import s from './style.module.css'
|
|
11
|
-
import classNames from 'classnames'
|
|
12
13
|
|
|
13
14
|
const PRODUCT_LOGO_MAP = new Map([
|
|
14
15
|
['Terraform', 'terraform-fill-color'],
|
|
@@ -62,7 +63,17 @@ const ProductPanel = ({
|
|
|
62
63
|
return (
|
|
63
64
|
<li key={title} className={s.productCategory}>
|
|
64
65
|
<TextPlus.Body className={s.eyebrow}>{title}</TextPlus.Body>
|
|
65
|
-
<ul
|
|
66
|
+
<ul
|
|
67
|
+
className={s.productList}
|
|
68
|
+
// Dynamically calculate row count based on number of items divided by expected columns
|
|
69
|
+
style={
|
|
70
|
+
{
|
|
71
|
+
'--row-count-above-mobile': Math.ceil(
|
|
72
|
+
products.length / 2
|
|
73
|
+
),
|
|
74
|
+
} as CSSProperties
|
|
75
|
+
}
|
|
76
|
+
>
|
|
66
77
|
{products.map((product) => {
|
|
67
78
|
return (
|
|
68
79
|
<li key={product.url}>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@custom-media --dev-dot-viewport (min-width:
|
|
1
|
+
@custom-media --dev-dot-viewport (min-width: 1230px);
|
|
2
2
|
|
|
3
3
|
.productPanel {
|
|
4
4
|
height: 100%;
|
|
@@ -61,14 +61,14 @@
|
|
|
61
61
|
@media (--large) {
|
|
62
62
|
@nest .noSide & {
|
|
63
63
|
padding-bottom: 0;
|
|
64
|
-
|
|
64
|
+
padding-left: var(--hdsplus-spacing-06);
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
@media (--dev-dot-viewport) {
|
|
69
69
|
@nest .hasSide & {
|
|
70
70
|
padding-bottom: 0;
|
|
71
|
-
|
|
71
|
+
padding-left: var(--hdsplus-spacing-06);
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
}
|
|
@@ -83,22 +83,28 @@
|
|
|
83
83
|
@media (--large) {
|
|
84
84
|
@nest .noSide & {
|
|
85
85
|
padding: var(--hdsplus-spacing-06) var(--hdsplus-spacing-05)
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
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
91
|
}
|
|
92
92
|
}
|
|
93
93
|
|
|
94
94
|
@media (--dev-dot-viewport) {
|
|
95
95
|
@nest .hasSide & {
|
|
96
96
|
padding: var(--hdsplus-spacing-06) var(--hdsplus-spacing-05)
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
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;
|
|
102
108
|
}
|
|
103
109
|
}
|
|
104
110
|
}
|
|
@@ -113,7 +119,7 @@
|
|
|
113
119
|
@media (--large) {
|
|
114
120
|
@nest .noSide & {
|
|
115
121
|
padding: var(--hdsplus-spacing-03) var(--hdsplus-spacing-05);
|
|
116
|
-
|
|
122
|
+
margin-bottom: 0;
|
|
117
123
|
|
|
118
124
|
&:hover {
|
|
119
125
|
background-color: var(--token-color-surface-interactive-hover);
|
|
@@ -125,7 +131,7 @@
|
|
|
125
131
|
@media (--dev-dot-viewport) {
|
|
126
132
|
@nest .hasSide & {
|
|
127
133
|
padding: var(--hdsplus-spacing-03) var(--hdsplus-spacing-05);
|
|
128
|
-
|
|
134
|
+
margin-bottom: 0;
|
|
129
135
|
|
|
130
136
|
&:hover {
|
|
131
137
|
background-color: var(--token-color-surface-interactive-hover);
|
|
@@ -192,14 +198,14 @@
|
|
|
192
198
|
@media (--large) {
|
|
193
199
|
@nest .noSide & {
|
|
194
200
|
padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-05)
|
|
195
|
-
|
|
201
|
+
var(--hdsplus-spacing-04);
|
|
196
202
|
}
|
|
197
203
|
}
|
|
198
204
|
|
|
199
205
|
@media (--dev-dot-viewport) {
|
|
200
206
|
@nest .hasSide & {
|
|
201
207
|
padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-05)
|
|
202
|
-
|
|
208
|
+
var(--hdsplus-spacing-04);
|
|
203
209
|
}
|
|
204
210
|
}
|
|
205
211
|
}
|
|
@@ -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);
|