@hashicorp/react-components 1.1.3 → 1.1.4

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 (6) hide show
  1. package/package.json +1 -1
  2. package/src/components/nav-panel/components/panel/column/style.module.css +1 -1
  3. package/src/components/nav-panel/components/panel/root/style.module.css +1 -1
  4. package/src/components/nav-panel/components/promo/style.module.css +1 -1
  5. package/src/components/nav-panel/product-panel/index.tsx +13 -2
  6. package/src/components/nav-panel/product-panel/style.module.css +17 -17
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hashicorp/react-components",
3
- "version": "1.1.3",
3
+ "version": "1.1.4",
4
4
  "main": "src/index.ts",
5
5
  "scripts": {
6
6
  "lint": "next-hashicorp lint",
package/src/components/nav-panel/components/panel/column/style.module.css CHANGED
@@ -1,4 +1,4 @@
1
- @custom-media --dev-dot-viewport (min-width: 1210px);
1
+ @custom-media --dev-dot-viewport (min-width: 1230px);
2
2
 
3
3
  .column {
4
4
  position: relative;
package/src/components/nav-panel/components/panel/root/style.module.css CHANGED
@@ -1,4 +1,4 @@
1
- @custom-media --dev-dot-viewport (min-width: 1210px);
1
+ @custom-media --dev-dot-viewport (min-width: 1230px);
2
2
 
3
3
  .root {
4
4
  width: 100%;
package/src/components/nav-panel/components/promo/style.module.css CHANGED
@@ -1,4 +1,4 @@
1
- @custom-media --dev-dot-viewport (min-width: 1210px);
1
+ @custom-media --dev-dot-viewport (min-width: 1230px);
2
2
 
3
3
  .promo {
4
4
  display: flex;
package/src/components/nav-panel/product-panel/index.tsx 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 className={s.productList}>
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}>
package/src/components/nav-panel/product-panel/style.module.css CHANGED
@@ -1,4 +1,4 @@
1
- @custom-media --dev-dot-viewport (min-width: 1210px);
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
- padding-left: var(--hdsplus-spacing-06);
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
- padding-left: var(--hdsplus-spacing-06);
71
+ padding-left: var(--hdsplus-spacing-06);
72
72
  }
73
73
  }
74
74
  }
@@ -83,22 +83,22 @@
83
83
  @media (--large) {
84
84
  @nest .noSide & {
85
85
  padding: var(--hdsplus-spacing-06) var(--hdsplus-spacing-05)
86
- var(--hdsplus-spacing-04);
87
- grid-auto-flow: row;
88
- grid-template-columns: repeat(2, 300px);
89
- grid-template-rows: repeat(2, max-content);
90
- gap: 0;
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
- var(--hdsplus-spacing-04);
98
- grid-auto-flow: row;
99
- grid-template-columns: repeat(2, 300px);
100
- grid-template-rows: repeat(2, max-content);
101
- gap: 0;
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
102
  }
103
103
  }
104
104
  }
@@ -113,7 +113,7 @@
113
113
  @media (--large) {
114
114
  @nest .noSide & {
115
115
  padding: var(--hdsplus-spacing-03) var(--hdsplus-spacing-05);
116
- margin-bottom: 0;
116
+ margin-bottom: 0;
117
117
 
118
118
  &:hover {
119
119
  background-color: var(--token-color-surface-interactive-hover);
@@ -125,7 +125,7 @@
125
125
  @media (--dev-dot-viewport) {
126
126
  @nest .hasSide & {
127
127
  padding: var(--hdsplus-spacing-03) var(--hdsplus-spacing-05);
128
- margin-bottom: 0;
128
+ margin-bottom: 0;
129
129
 
130
130
  &:hover {
131
131
  background-color: var(--token-color-surface-interactive-hover);
@@ -192,14 +192,14 @@
192
192
  @media (--large) {
193
193
  @nest .noSide & {
194
194
  padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-05)
195
- var(--hdsplus-spacing-04);
195
+ var(--hdsplus-spacing-04);
196
196
  }
197
197
  }
198
198
 
199
199
  @media (--dev-dot-viewport) {
200
200
  @nest .hasSide & {
201
201
  padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-05)
202
- var(--hdsplus-spacing-04);
202
+ var(--hdsplus-spacing-04);
203
203
  }
204
204
  }
205
205
  }