@hashicorp/react-components 1.2.4 → 1.2.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.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/nav-panel/product-panel/index.tsx +1 -1
  3. package/src/components/nav-panel/product-panel/style.module.css +31 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hashicorp/react-components",
3
- "version": "1.2.4",
3
+ "version": "1.2.5",
4
4
  "main": "src/index.ts",
5
5
  "scripts": {
6
6
  "lint": "npm run lint:js",
package/src/components/nav-panel/product-panel/index.tsx CHANGED
@@ -82,7 +82,7 @@ const ProductPanel = ({
82
82
  isPromoOnTop={isPromoOnTop}
83
83
  />
84
84
  ) : null}
85
- <NavPanel.Column isDevPortal={isDevPortal}>
85
+ <NavPanel.Column className={s.productColumn} isDevPortal={isDevPortal}>
86
86
  <ul className={s.productCategories}>
87
87
  {productCategories.map(({ group, title, products }) => {
88
88
  return (
package/src/components/nav-panel/product-panel/style.module.css CHANGED
@@ -14,7 +14,7 @@
14
14
  @nest &.isDevPortal {
15
15
  justify-content: flex-start;
16
16
 
17
- @media (--dev-dot-tablet-down) {
17
+ @media (--dev-dot-show-mobile-menu) {
18
18
  padding-top: 24px;
19
19
  }
20
20
  }
@@ -44,6 +44,10 @@
44
44
  display: grid;
45
45
  margin: var(--mds-spacing-07) 0 0;
46
46
 
47
+ @nest .isDevPortal & {
48
+ margin: 0;
49
+ }
50
+
47
51
  @nest .topPromo & {
48
52
  margin-bottom: var(--mds-spacing-07);
49
53
  }
@@ -241,6 +245,12 @@
241
245
  }
242
246
  }
243
247
 
248
+ .productColumn {
249
+ @nest .isDevPortal & {
250
+ margin: 0;
251
+ }
252
+ }
253
+
244
254
  .mainPanel {
245
255
  height: 100%;
246
256
  display: flex;
@@ -248,19 +258,21 @@
248
258
  flex-direction: column;
249
259
 
250
260
  @nest .isDevPortal & {
251
- background: none;
252
- padding-top: 0;
253
- gap: 0;
254
-
255
- @media (--dev-dot-tablet) {
261
+ @media (--dev-dot-show-mobile-menu) {
256
262
  display: flex;
257
263
  flex-direction: column-reverse;
258
264
  }
265
+
266
+ @media (--dev-dot-mobile) {
267
+ flex-direction: column;
268
+ }
259
269
  }
260
270
 
261
271
  /* Product Grid Section Sides */
262
272
  @nest .isDevPortal & > div:first-child {
263
- margin: 0 var(--mds-spacing-10);
273
+ @media (--dev-dot-show-mobile-menu) {
274
+ margin: 0 var(--mds-spacing-10);
275
+ }
264
276
 
265
277
  @media (--dev-dot-mobile) {
266
278
  margin: 0 var(--mds-spacing-07);
@@ -269,10 +281,15 @@
269
281
 
270
282
  /* Promo Banner within Product */
271
283
  @nest .isDevPortal & > div:nth-child(2) {
272
- @media (--dev-dot-tablet) {
284
+ @media (--dev-dot-show-mobile-menu) {
273
285
  margin-top: 0;
274
286
  margin-bottom: var(--mds-spacing-08);
275
287
  }
288
+
289
+ @media (--dev-dot-mobile) {
290
+ margin: var(--mds-spacing-07);
291
+ margin-bottom: var(--mds-spacing-09);
292
+ }
276
293
  }
277
294
 
278
295
  @nest .topPromo & {
@@ -308,6 +325,12 @@
308
325
  gap: var(--mds-spacing-05);
309
326
  margin: 0;
310
327
  padding: var(--mds-spacing-07) var(--mds-spacing-04) var(--mds-spacing-09) var(--mds-spacing-07);
328
+
329
+ @nest .isDevPortal & {
330
+ background: none;
331
+ padding-top: 0;
332
+ gap: 0;
333
+ }
311
334
  }
312
335
 
313
336
  .sidePanelItems {