@hashicorp/react-components 0.0.0-nightly.7a813d9 → 0.0.0-nightly.7f05885

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 (9) hide show
  1. package/package.json +1 -1
  2. package/src/components/nav-panel/components/panel/column/style.module.css +2 -2
  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 +3 -2
  5. package/src/components/nav-panel/product-panel/index.tsx +9 -3
  6. package/src/components/nav-panel/product-panel/style.module.css +41 -22
  7. package/src/components/nav-panel/standard-panel/style.module.css +1 -1
  8. package/src/components/subnav/partials/TitleLink/mktg-logos/all-primary-logos_on-dark.ts +1 -1
  9. package/src/components/subnav/partials/TitleLink/mktg-logos/all-primary-logos_on-light.ts +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hashicorp/react-components",
3
- "version": "0.0.0-nightly.7a813d9",
3
+ "version": "0.0.0-nightly.7f05885",
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: 924px);
2
2
 
3
3
  .column {
4
4
  position: relative;
@@ -7,7 +7,7 @@
7
7
  justify-content: flex-start;
8
8
  min-width: 190px;
9
9
  padding: 0;
10
- margin: 0 var(--hdsplus-spacing-05);
10
+ margin: 0 var(--hdsplus-spacing-07);
11
11
  border-radius: var(--hdsplus-spacing-03);
12
12
 
13
13
  @media (--large) {
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: 924px);
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: 924px);
2
2
 
3
3
  .promo {
4
4
  display: flex;
@@ -9,7 +9,8 @@
9
9
  var(--hdsplus-spacing-06) var(--hdsplus-spacing-08);
10
10
  flex-direction: row;
11
11
  gap: var(--hdsplus-spacing-04);
12
- margin: var(--hdsplus-spacing-05);
12
+ margin: var(--hdsplus-spacing-07);
13
+ margin-bottom: var(--hdsplus-spacing-09);
13
14
 
14
15
  @media (--large) {
15
16
  &.noSide {
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'
@@ -8,10 +9,9 @@ import { parseUrl } from '../../../lib/parse-url'
8
9
  import { trackNavClickEvent } from '../../../lib/track-nav-click-event'
9
10
  import * as NavigationMenu from '@radix-ui/react-navigation-menu'
10
11
  import s from './style.module.css'
11
- import classNames from 'classnames'
12
12
 
13
13
  const PRODUCT_LOGO_MAP = new Map([
14
- ['Terraform', 'terraform-fill-color'],
14
+ ['Terraform', 'terraform-fill'],
15
15
  ['Packer', 'packer-fill-color'],
16
16
  ['Vault', 'vault-fill-color'],
17
17
  ['Boundary', 'boundary-fill-color'],
@@ -24,6 +24,7 @@ const PRODUCT_LOGO_MAP = new Map([
24
24
  ])
25
25
 
26
26
  const PRODUCT_LOGO_EXCEPTION_CLASSNAMES = {
27
+ Terraform: 'terraform',
27
28
  'HCP Vault Secrets': 'hcpVaultSecrets',
28
29
  'HCP Vault Radar': 'hcpVaultRadar',
29
30
  }
@@ -94,7 +95,11 @@ const ProductPanel = ({
94
95
  {sidePanel.navItems.map(({ icon, title, description, url }) => {
95
96
  return (
96
97
  <li key={title}>
97
- <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
+ >
98
103
  <div className={s.iconBackground}>
99
104
  <FlightIcon
100
105
  size={16}
@@ -129,6 +134,7 @@ function NavProduct({ url, product, description }: NavProductProps) {
129
134
  return (
130
135
  <NavigationMenu.Link asChild>
131
136
  <Link
137
+ aria-label={`${product} - ${description}`}
132
138
  href={parseUrl(url).href}
133
139
  onClickCapture={() => {
134
140
  trackNavClickEvent(product, url, 'products')
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: 924px);
2
2
 
3
3
  .productPanel {
4
4
  height: 100%;
@@ -26,7 +26,7 @@
26
26
  list-style: none;
27
27
  padding: 0;
28
28
  display: grid;
29
- margin: var(--hdsplus-spacing-06) 0 0;
29
+ margin: var(--hdsplus-spacing-07) 0 0;
30
30
 
31
31
  @media (--large) {
32
32
  @nest .noSide & {
@@ -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,28 @@
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: row;
88
+ grid-template-columns: repeat(2, 300px);
89
+ grid-template-rows: repeat(2, 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: 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;
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
- margin-bottom: 0;
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
- margin-bottom: 0;
134
+ margin-bottom: 0;
129
135
 
130
136
  &:hover {
131
137
  background-color: var(--token-color-surface-interactive-hover);
@@ -191,15 +197,15 @@
191
197
 
192
198
  @media (--large) {
193
199
  @nest .noSide & {
194
- padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-05)
195
- var(--hdsplus-spacing-04);
200
+ padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-09)
201
+ var(--hdsplus-spacing-04);
196
202
  }
197
203
  }
198
204
 
199
205
  @media (--dev-dot-viewport) {
200
206
  @nest .hasSide & {
201
- padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-05)
202
- var(--hdsplus-spacing-04);
207
+ padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-09)
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);
@@ -276,6 +280,21 @@ packages/react-components/src/components/nav-panel/components/link-list/style.mo
276
280
 
277
281
  /* Branding exception classnames */
278
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
+
279
298
  /* Styles for HCP Vault mimic the spec for `product-square` icons,
280
299
  while allowing the symbol inside the icon border to change color
281
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-primary-logos_on-dark.ts CHANGED
@@ -5,7 +5,7 @@ import packer from '@hashicorp/web-mktg-logos/src/packer/packer/packer_on-dark.s
5
5
  import terraform from '@hashicorp/web-mktg-logos/src/terraform/terraform/terraform_on-dark.svg'
6
6
  import vagrant from '@hashicorp/web-mktg-logos/src/vagrant/vagrant/vagrant_on-dark.svg'
7
7
  import vault from '@hashicorp/web-mktg-logos/src/vault/vault/vault_on-dark.svg'
8
- import waypoint from '@hashicorp/web-mktg-logos/src/waypoint/waypoint/waypoint_on-dark.svg'
8
+ import waypoint from '@hashicorp/web-mktg-logos/src/waypoint/hashicorp-waypoint-attributed/hashicorp-waypoint_on-dark.svg'
9
9
  import hashiconf from '@hashicorp/web-mktg-logos/src/conferences/hashiconf_on-dark.svg'
10
10
  import hashidays from '@hashicorp/web-mktg-logos/src/conferences/hashidays_on-dark.svg'
11
11
 
package/src/components/subnav/partials/TitleLink/mktg-logos/all-primary-logos_on-light.ts CHANGED
@@ -5,7 +5,7 @@ import packer from '@hashicorp/web-mktg-logos/src/packer/packer/packer_on-light.
5
5
  import terraform from '@hashicorp/web-mktg-logos/src/terraform/terraform/terraform_on-light.svg'
6
6
  import vagrant from '@hashicorp/web-mktg-logos/src/vagrant/vagrant/vagrant_on-light.svg'
7
7
  import vault from '@hashicorp/web-mktg-logos/src/vault/vault/vault_on-light.svg'
8
- import waypoint from '@hashicorp/web-mktg-logos/src/waypoint/waypoint/waypoint_on-light.svg'
8
+ import waypoint from '@hashicorp/web-mktg-logos/src/waypoint/hashicorp-waypoint-attributed/hashicorp-waypoint_on-light.svg'
9
9
  import hashiconf from '@hashicorp/web-mktg-logos/src/conferences/hashiconf_on-light.svg'
10
10
  import hashidays from '@hashicorp/web-mktg-logos/src/conferences/hashidays_on-light.svg'
11
11