@hashicorp/react-components 0.0.0-nightly.0cf11a1 → 0.0.0-nightly.250c263

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 (10) hide show
  1. package/package.json +2 -2
  2. package/src/components/nav-panel/components/panel/column/index.tsx +15 -2
  3. package/src/components/nav-panel/components/panel/column/style.module.css +12 -2
  4. package/src/components/nav-panel/components/panel/root/index.tsx +11 -2
  5. package/src/components/nav-panel/components/panel/root/style.module.css +19 -5
  6. package/src/components/nav-panel/components/promo/index.tsx +8 -1
  7. package/src/components/nav-panel/components/promo/style.module.css +28 -6
  8. package/src/components/nav-panel/product-panel/index.tsx +24 -5
  9. package/src/components/nav-panel/product-panel/style.module.css +126 -28
  10. package/src/components/nav-panel/standard-panel/style.module.css +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hashicorp/react-components",
3
- "version": "0.0.0-nightly.0cf11a1",
3
+ "version": "0.0.0-nightly.250c263",
4
4
  "main": "src/index.ts",
5
5
  "scripts": {
6
6
  "lint": "next-hashicorp lint",
@@ -24,7 +24,7 @@
24
24
  "react-hook-form": "^7.43.5"
25
25
  },
26
26
  "devDependencies": {
27
- "@hashicorp/platform-cli": "^2.6.0",
27
+ "@hashicorp/platform-cli": "^2.8.0",
28
28
  "@hashicorp/platform-types": "^0.4.0",
29
29
  "@testing-library/jest-dom": "^6.4.2",
30
30
  "@vitejs/plugin-react": "^4.2.1",
package/src/components/nav-panel/components/panel/column/index.tsx CHANGED
@@ -4,8 +4,21 @@ import s from './style.module.css'
4
4
  export interface NavColumnProps {
5
5
  className?: string
6
6
  children: React.ReactNode
7
+ hasSidePanel?: boolean
7
8
  }
8
9
 
9
- export default function Column({ className, children }: NavColumnProps) {
10
- return <div className={classNames(s.column, className)}>{children}</div>
10
+ export default function Column({
11
+ className,
12
+ children,
13
+ hasSidePanel,
14
+ }: NavColumnProps) {
15
+ return (
16
+ <div
17
+ className={classNames(s.column, className, {
18
+ [s.hasSide]: hasSidePanel,
19
+ })}
20
+ >
21
+ {children}
22
+ </div>
23
+ )
11
24
  }
package/src/components/nav-panel/components/panel/column/style.module.css CHANGED
@@ -1,3 +1,5 @@
1
+ @custom-media --dev-dot-viewport (min-width: 1230px);
2
+
1
3
  .column {
2
4
  position: relative;
3
5
  display: flex;
@@ -5,10 +7,18 @@
5
7
  justify-content: flex-start;
6
8
  min-width: 190px;
7
9
  padding: 0;
8
- margin: 0 var(--hdsplus-spacing-05);
10
+ margin: 0 var(--hdsplus-spacing-07);
9
11
  border-radius: var(--hdsplus-spacing-03);
10
12
 
11
13
  @media (--large) {
12
- margin: 0;
14
+ &:not(.hasSide) {
15
+ margin: 0;
16
+ }
17
+ }
18
+
19
+ @media (--dev-dot-viewport) {
20
+ &.hasSide {
21
+ margin: 0;
22
+ }
13
23
  }
14
24
  }
package/src/components/nav-panel/components/panel/root/index.tsx CHANGED
@@ -4,8 +4,17 @@ import s from './style.module.css'
4
4
  interface RootProps {
5
5
  className?: string
6
6
  children: React.ReactNode
7
+ hasSidePanel?: boolean
7
8
  }
8
9
 
9
- export default function Root({ className, children }: RootProps) {
10
- return <div className={classNames(s.root, className)}>{children}</div>
10
+ export default function Root({ className, children, hasSidePanel }: RootProps) {
11
+ return (
12
+ <div
13
+ className={classNames(s.root, className, {
14
+ [s.hasSide]: hasSidePanel,
15
+ })}
16
+ >
17
+ {children}
18
+ </div>
19
+ )
11
20
  }
package/src/components/nav-panel/components/panel/root/style.module.css CHANGED
@@ -1,3 +1,5 @@
1
+ @custom-media --dev-dot-viewport (min-width: 1230px);
2
+
1
3
  .root {
2
4
  width: 100%;
3
5
  display: flex;
@@ -7,10 +9,22 @@
7
9
  min-height: calc(100dvh - var(--hdsplus-spacing-12));
8
10
 
9
11
  @media (--large) {
10
- justify-content: flex-start;
11
- height: 100%;
12
- min-height: fit-content;
13
- padding: var(--hdsplus-spacing-05) var(--hdsplus-spacing-04);
14
- gap: var(--hdsplus-spacing-04);
12
+ &:not(.hasSide) {
13
+ justify-content: flex-start;
14
+ height: 100%;
15
+ min-height: fit-content;
16
+ padding: var(--hdsplus-spacing-05) var(--hdsplus-spacing-04);
17
+ gap: var(--hdsplus-spacing-04);
18
+ }
19
+ }
20
+
21
+ @media (--dev-dot-viewport) {
22
+ &.hasSide {
23
+ justify-content: flex-start;
24
+ height: 100%;
25
+ min-height: fit-content;
26
+ padding: var(--hdsplus-spacing-05) var(--hdsplus-spacing-04);
27
+ gap: var(--hdsplus-spacing-04);
28
+ }
15
29
  }
16
30
  }
package/src/components/nav-panel/components/promo/index.tsx CHANGED
@@ -16,6 +16,7 @@ export interface PromoProps {
16
16
  slug?: string
17
17
  icon?: string
18
18
  theme: string
19
+ hasSidePanel?: boolean
19
20
  }
20
21
 
21
22
  export default function Promo({
@@ -26,6 +27,7 @@ export default function Promo({
26
27
  slug,
27
28
  icon,
28
29
  theme,
30
+ hasSidePanel,
29
31
  }: PromoProps) {
30
32
  const handleClick = useCallback((title, linkUrl, linkTitle, slug) => {
31
33
  if (window && window.analytics) {
@@ -40,7 +42,12 @@ export default function Promo({
40
42
  }, [])
41
43
 
42
44
  return (
43
- <div className={s.promo}>
45
+ <div
46
+ className={classNames(s.promo, {
47
+ [s.hasSide]: hasSidePanel,
48
+ [s.noSide]: !hasSidePanel,
49
+ })}
50
+ >
44
51
  {icon && (
45
52
  <div
46
53
  className={classNames(s.icon, {
package/src/components/nav-panel/components/promo/style.module.css CHANGED
@@ -1,3 +1,5 @@
1
+ @custom-media --dev-dot-viewport (min-width: 1230px);
2
+
1
3
  .promo {
2
4
  display: flex;
3
5
  border-radius: var(--hdsplus-spacing-01);
@@ -7,12 +9,23 @@
7
9
  var(--hdsplus-spacing-06) var(--hdsplus-spacing-08);
8
10
  flex-direction: row;
9
11
  gap: var(--hdsplus-spacing-04);
10
- margin: var(--hdsplus-spacing-05);
12
+ margin: var(--hdsplus-spacing-07);
13
+ margin-bottom: var(--hdsplus-spacing-09);
11
14
 
12
15
  @media (--large) {
13
- margin: 0;
14
- width: min-content;
15
- min-width: 100%;
16
+ &.noSide {
17
+ margin: 0;
18
+ width: min-content;
19
+ min-width: 100%;
20
+ }
21
+ }
22
+
23
+ @media (--dev-dot-viewport) {
24
+ &.hasSide {
25
+ margin: 0;
26
+ width: min-content;
27
+ min-width: 100%;
28
+ }
16
29
  }
17
30
  }
18
31
 
@@ -38,8 +51,17 @@
38
51
  display: none;
39
52
 
40
53
  @media (--large) {
41
- display: block;
42
- margin-top: 3px;
54
+ @nest .noSide & {
55
+ display: block;
56
+ margin-top: 3px;
57
+ }
58
+ }
59
+
60
+ @media (--dev-dot-viewport) {
61
+ @nest .hasSide & {
62
+ display: block;
63
+ margin-top: 3px;
64
+ }
43
65
  }
44
66
  }
45
67
 
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'
@@ -10,7 +12,7 @@ import * as NavigationMenu from '@radix-ui/react-navigation-menu'
10
12
  import s from './style.module.css'
11
13
 
12
14
  const PRODUCT_LOGO_MAP = new Map([
13
- ['Terraform', 'terraform-fill-color'],
15
+ ['Terraform', 'terraform-fill'],
14
16
  ['Packer', 'packer-fill-color'],
15
17
  ['Vault', 'vault-fill-color'],
16
18
  ['Boundary', 'boundary-fill-color'],
@@ -23,6 +25,7 @@ const PRODUCT_LOGO_MAP = new Map([
23
25
  ])
24
26
 
25
27
  const PRODUCT_LOGO_EXCEPTION_CLASSNAMES = {
28
+ Terraform: 'terraform',
26
29
  'HCP Vault Secrets': 'hcpVaultSecrets',
27
30
  'HCP Vault Radar': 'hcpVaultRadar',
28
31
  }
@@ -47,15 +50,31 @@ const ProductPanel = ({
47
50
  sidePanel,
48
51
  }: ProductsPanelProps) => {
49
52
  return (
50
- <NavPanel.Root className={s.productPanel}>
53
+ <NavPanel.Root
54
+ className={classNames(s.productPanel, {
55
+ [s.hasSide]: sidePanel,
56
+ [s.noSide]: !sidePanel,
57
+ })}
58
+ hasSidePanel={Boolean(sidePanel)}
59
+ >
51
60
  <div className={s.mainPanel}>
52
- <NavPanel.Column>
61
+ <NavPanel.Column hasSidePanel={Boolean(sidePanel)}>
53
62
  <ul className={s.productCategories}>
54
63
  {productCategories.map(({ title, products }) => {
55
64
  return (
56
65
  <li key={title} className={s.productCategory}>
57
66
  <TextPlus.Body className={s.eyebrow}>{title}</TextPlus.Body>
58
- <ul className={s.productList}>
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
+ >
59
78
  {products.map((product) => {
60
79
  return (
61
80
  <li key={product.url}>
@@ -69,7 +88,7 @@ const ProductPanel = ({
69
88
  })}
70
89
  </ul>
71
90
  </NavPanel.Column>
72
- {promo ? <Promo {...promo} /> : null}
91
+ {promo ? <Promo {...promo} hasSidePanel={Boolean(sidePanel)} /> : null}
73
92
  </div>
74
93
 
75
94
  {sidePanel ? (
package/src/components/nav-panel/product-panel/style.module.css CHANGED
@@ -1,11 +1,24 @@
1
+ @custom-media --dev-dot-viewport (min-width: 1230px);
2
+
1
3
  .productPanel {
2
4
  height: 100%;
3
5
 
4
6
  @media (--large) {
5
- display: grid;
6
- grid-template-rows: 1fr;
7
- grid-template-columns: max-content max-content;
8
- padding: 0;
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
+ }
9
22
  }
10
23
  }
11
24
 
@@ -13,10 +26,18 @@
13
26
  list-style: none;
14
27
  padding: 0;
15
28
  display: grid;
16
- margin: var(--hdsplus-spacing-06) 0 0;
29
+ margin: var(--hdsplus-spacing-07) 0 0;
17
30
 
18
31
  @media (--large) {
19
- margin: 0;
32
+ @nest .noSide & {
33
+ margin: 0;
34
+ }
35
+ }
36
+
37
+ @media (--dev-dot-viewport) {
38
+ @nest .hasSide & {
39
+ margin: 0;
40
+ }
20
41
  }
21
42
  }
22
43
 
@@ -38,8 +59,17 @@
38
59
  font-weight: var(--font-weight-semi-bold);
39
60
 
40
61
  @media (--large) {
41
- padding-bottom: 0;
42
- padding-left: var(--hdsplus-spacing-06);
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
+ }
43
73
  }
44
74
  }
45
75
 
@@ -51,12 +81,31 @@
51
81
  padding: 0;
52
82
 
53
83
  @media (--large) {
54
- padding: var(--hdsplus-spacing-06) var(--hdsplus-spacing-05)
55
- var(--hdsplus-spacing-04);
56
- grid-auto-flow: row;
57
- grid-template-columns: repeat(2, 300px);
58
- grid-template-rows: repeat(2, max-content);
59
- gap: 0;
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
+ }
60
109
  }
61
110
  }
62
111
 
@@ -68,12 +117,26 @@
68
117
  gap: var(--hdsplus-spacing-05);
69
118
 
70
119
  @media (--large) {
71
- padding: var(--hdsplus-spacing-03) var(--hdsplus-spacing-05);
72
- margin-bottom: 0;
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
+ }
73
130
 
74
- &:hover {
75
- background-color: var(--token-color-surface-interactive-hover);
76
- border-radius: var(--hdsplus-spacing-01);
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
+ }
77
140
  }
78
141
  }
79
142
  }
@@ -84,10 +147,23 @@
84
147
  & svg {
85
148
  height: 42px;
86
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
+ }
87
160
 
88
- @media (--large) {
89
- height: var(--hdsplus-spacing-08);
90
- width: var(--hdsplus-spacing-08);
161
+ @nest .hasSide & {
162
+ & svg {
163
+ @media (--dev-dot-viewport) {
164
+ height: var(--hdsplus-spacing-08);
165
+ width: var(--hdsplus-spacing-08);
166
+ }
91
167
  }
92
168
  }
93
169
  }
@@ -120,8 +196,17 @@
120
196
  flex-direction: column;
121
197
 
122
198
  @media (--large) {
123
- padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-05)
124
- var(--hdsplus-spacing-04);
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
+ }
125
210
  }
126
211
  }
127
212
 
@@ -144,7 +229,7 @@
144
229
  grid-template-columns: 1fr;
145
230
  gap: var(--hdsplus-spacing-07);
146
231
 
147
- @media (--large) {
232
+ @media (--dev-dot-viewport) {
148
233
  gap: var(--hdsplus-spacing-05);
149
234
  }
150
235
  }
@@ -152,12 +237,10 @@
152
237
  /* Lifted from .productWrapper */
153
238
  .sidePanelItem {
154
239
  display: flex;
155
- margin-bottom: var(--hdsplus-spacing-05);
156
240
  gap: var(--hdsplus-spacing-05);
157
241
 
158
- @media (--large) {
242
+ @media (--dev-dot-viewport) {
159
243
  padding: var(--hdsplus-spacing-03) var(--hdsplus-spacing-05);
160
- margin-bottom: 0;
161
244
 
162
245
  &:hover {
163
246
  background-color: var(--token-color-surface-interactive-hover);
@@ -197,6 +280,21 @@ packages/react-components/src/components/nav-panel/components/link-list/style.mo
197
280
 
198
281
  /* Branding exception classnames */
199
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
+
200
298
  /* Styles for HCP Vault mimic the spec for `product-square` icons,
201
299
  while allowing the symbol inside the icon border to change color
202
300
  based on the site's theme
package/src/components/nav-panel/standard-panel/style.module.css CHANGED
@@ -2,7 +2,7 @@
2
2
  display: flex;
3
3
  gap: var(--hdsplus-spacing-03);
4
4
  flex-direction: column;
5
- margin-top: var(--hdsplus-spacing-06);
5
+ margin-top: var(--hdsplus-spacing-07);
6
6
 
7
7
  @media (--large) {
8
8
  flex-direction: row;