@hashicorp/react-components 0.0.0-nightly.c2272e8 → 0.0.0-nightly.d782725

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 (13) hide show
  1. package/package.json +1 -1
  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 +18 -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
  11. package/src/components/subnav/partials/TitleLink/mktg-logos/all-community-product-logos_on-dark.ts +2 -1
  12. package/src/components/subnav/partials/TitleLink/mktg-logos/all-community-product-logos_on-light.ts +2 -1
  13. package/src/lib/parse-url/index.test.ts +5 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hashicorp/react-components",
3
- "version": "0.0.0-nightly.c2272e8",
3
+ "version": "0.0.0-nightly.d782725",
4
4
  "main": "src/index.ts",
5
5
  "scripts": {
6
6
  "lint": "next-hashicorp lint",
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: 924px);
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: 924px);
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: 924px);
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,4 @@
1
+ import classNames from 'classnames'
1
2
  import Link from 'next/link'
2
3
  import * as NavPanel from '../components/panel'
3
4
  import Promo, { type PromoProps } from '../components/promo'
@@ -10,7 +11,7 @@ import * as NavigationMenu from '@radix-ui/react-navigation-menu'
10
11
  import s from './style.module.css'
11
12
 
12
13
  const PRODUCT_LOGO_MAP = new Map([
13
- ['Terraform', 'terraform-fill-color'],
14
+ ['Terraform', 'terraform-fill'],
14
15
  ['Packer', 'packer-fill-color'],
15
16
  ['Vault', 'vault-fill-color'],
16
17
  ['Boundary', 'boundary-fill-color'],
@@ -23,6 +24,7 @@ const PRODUCT_LOGO_MAP = new Map([
23
24
  ])
24
25
 
25
26
  const PRODUCT_LOGO_EXCEPTION_CLASSNAMES = {
27
+ Terraform: 'terraform',
26
28
  'HCP Vault Secrets': 'hcpVaultSecrets',
27
29
  'HCP Vault Radar': 'hcpVaultRadar',
28
30
  }
@@ -47,9 +49,15 @@ const ProductPanel = ({
47
49
  sidePanel,
48
50
  }: ProductsPanelProps) => {
49
51
  return (
50
- <NavPanel.Root className={s.productPanel}>
52
+ <NavPanel.Root
53
+ className={classNames(s.productPanel, {
54
+ [s.hasSide]: sidePanel,
55
+ [s.noSide]: !sidePanel,
56
+ })}
57
+ hasSidePanel={Boolean(sidePanel)}
58
+ >
51
59
  <div className={s.mainPanel}>
52
- <NavPanel.Column>
60
+ <NavPanel.Column hasSidePanel={Boolean(sidePanel)}>
53
61
  <ul className={s.productCategories}>
54
62
  {productCategories.map(({ title, products }) => {
55
63
  return (
@@ -69,7 +77,7 @@ const ProductPanel = ({
69
77
  })}
70
78
  </ul>
71
79
  </NavPanel.Column>
72
- {promo ? <Promo {...promo} /> : null}
80
+ {promo ? <Promo {...promo} hasSidePanel={Boolean(sidePanel)} /> : null}
73
81
  </div>
74
82
 
75
83
  {sidePanel ? (
@@ -87,7 +95,11 @@ const ProductPanel = ({
87
95
  {sidePanel.navItems.map(({ icon, title, description, url }) => {
88
96
  return (
89
97
  <li key={title}>
90
- <Link href={parseUrl(url).href} className={s.sidePanelItem}>
98
+ <Link
99
+ aria-label={`${title} - ${description}`}
100
+ href={parseUrl(url).href}
101
+ className={classNames(s.sidePanelItem, s.focusIndicator)}
102
+ >
91
103
  <div className={s.iconBackground}>
92
104
  <FlightIcon
93
105
  size={16}
@@ -122,6 +134,7 @@ function NavProduct({ url, product, description }: NavProductProps) {
122
134
  return (
123
135
  <NavigationMenu.Link asChild>
124
136
  <Link
137
+ aria-label={`${product} - ${description}`}
125
138
  href={parseUrl(url).href}
126
139
  onClickCapture={() => {
127
140
  trackNavClickEvent(product, url, 'products')
package/src/components/nav-panel/product-panel/style.module.css CHANGED
@@ -1,11 +1,24 @@
1
+ @custom-media --dev-dot-viewport (min-width: 924px);
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: row;
88
+ grid-template-columns: repeat(2, 300px);
89
+ grid-template-rows: repeat(2, 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: row;
99
+ grid-template-columns: repeat(2, 300px);
100
+ grid-template-rows: repeat(2, 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;
package/src/components/subnav/partials/TitleLink/mktg-logos/all-community-product-logos_on-dark.ts CHANGED
@@ -5,5 +5,6 @@ import packer from '@hashicorp/web-mktg-logos/src/packer/packer-community/packer
5
5
  import terraform from '@hashicorp/web-mktg-logos/src/terraform/terraform-community/terraform-community_on-dark.svg'
6
6
  import vagrant from '@hashicorp/web-mktg-logos/src/vagrant/vagrant-community/vagrant-community_on-dark.svg'
7
7
  import vault from '@hashicorp/web-mktg-logos/src/vault/vault-community/vault-community_on-dark.svg'
8
+ import waypoint from '@hashicorp/web-mktg-logos/src/waypoint/hashicorp-waypoint-attributed/hashicorp-waypoint_on-dark.svg'
8
9
 
9
- export { boundary, consul, nomad, packer, terraform, vagrant, vault }
10
+ export { boundary, consul, nomad, packer, terraform, vagrant, vault, waypoint }
package/src/components/subnav/partials/TitleLink/mktg-logos/all-community-product-logos_on-light.ts CHANGED
@@ -5,5 +5,6 @@ import packer from '@hashicorp/web-mktg-logos/src/packer/packer-community/packer
5
5
  import terraform from '@hashicorp/web-mktg-logos/src/terraform/terraform-community/terraform-community_on-light.svg'
6
6
  import vagrant from '@hashicorp/web-mktg-logos/src/vagrant/vagrant-community/vagrant-community_on-light.svg'
7
7
  import vault from '@hashicorp/web-mktg-logos/src/vault/vault-community/vault-community_on-light.svg'
8
+ import waypoint from '@hashicorp/web-mktg-logos/src/waypoint/hashicorp-waypoint-attributed/hashicorp-waypoint_on-light.svg'
8
9
 
9
- export { boundary, consul, nomad, packer, terraform, vagrant, vault }
10
+ export { boundary, consul, nomad, packer, terraform, vagrant, vault, waypoint }
package/src/lib/parse-url/index.test.ts CHANGED
@@ -27,4 +27,9 @@ describe('parseUrl', () => {
27
27
  )
28
28
  expect(url.href).toBe('/resources?type=case-study&products=terraform')
29
29
  })
30
+
31
+ it('leaves HashiCorp subdomain URLs intact', () => {
32
+ const url = parseUrl('https://developer.hashicorp.com/terraform')
33
+ expect(url.href).toBe('https://developer.hashicorp.com/terraform')
34
+ })
30
35
  })