@hashicorp/react-components 0.0.0-nightly.a075e59 → 0.0.0-nightly.a1aa23a

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 -14
  6. package/src/components/nav-panel/product-panel/style.module.css +23 -8
  7. package/src/components/nav-panel/standard-panel/style.module.css +1 -1
  8. package/src/components/subnav/partials/TitleLink/mktg-logos/all-community-product-logos_on-dark.ts +2 -1
  9. package/src/components/subnav/partials/TitleLink/mktg-logos/all-community-product-logos_on-light.ts +2 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hashicorp/react-components",
3
- "version": "0.0.0-nightly.a075e59",
3
+ "version": "0.0.0-nightly.a1aa23a",
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: 1230px);
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: 1230px);
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: 1230px);
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,4 +1,3 @@
1
- import { CSSProperties } from 'react'
2
1
  import classNames from 'classnames'
3
2
  import Link from 'next/link'
4
3
  import * as NavPanel from '../components/panel'
@@ -12,7 +11,7 @@ import * as NavigationMenu from '@radix-ui/react-navigation-menu'
12
11
  import s from './style.module.css'
13
12
 
14
13
  const PRODUCT_LOGO_MAP = new Map([
15
- ['Terraform', 'terraform-fill-color'],
14
+ ['Terraform', 'terraform-fill'],
16
15
  ['Packer', 'packer-fill-color'],
17
16
  ['Vault', 'vault-fill-color'],
18
17
  ['Boundary', 'boundary-fill-color'],
@@ -25,6 +24,7 @@ const PRODUCT_LOGO_MAP = new Map([
25
24
  ])
26
25
 
27
26
  const PRODUCT_LOGO_EXCEPTION_CLASSNAMES = {
27
+ Terraform: 'terraform',
28
28
  'HCP Vault Secrets': 'hcpVaultSecrets',
29
29
  'HCP Vault Radar': 'hcpVaultRadar',
30
30
  }
@@ -63,17 +63,7 @@ const ProductPanel = ({
63
63
  return (
64
64
  <li key={title} className={s.productCategory}>
65
65
  <TextPlus.Body className={s.eyebrow}>{title}</TextPlus.Body>
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
+ <ul className={s.productList}>
77
67
  {products.map((product) => {
78
68
  return (
79
69
  <li key={product.url}>
@@ -105,7 +95,11 @@ const ProductPanel = ({
105
95
  {sidePanel.navItems.map(({ icon, title, description, url }) => {
106
96
  return (
107
97
  <li key={title}>
108
- <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
+ >
109
103
  <div className={s.iconBackground}>
110
104
  <FlightIcon
111
105
  size={16}
@@ -140,6 +134,7 @@ function NavProduct({ url, product, description }: NavProductProps) {
140
134
  return (
141
135
  <NavigationMenu.Link asChild>
142
136
  <Link
137
+ aria-label={`${product} - ${description}`}
143
138
  href={parseUrl(url).href}
144
139
  onClickCapture={() => {
145
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: 1230px);
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 & {
@@ -84,9 +84,9 @@
84
84
  @nest .noSide & {
85
85
  padding: var(--hdsplus-spacing-06) var(--hdsplus-spacing-05)
86
86
  var(--hdsplus-spacing-04);
87
- grid-auto-flow: column;
87
+ grid-auto-flow: row;
88
88
  grid-template-columns: repeat(2, 300px);
89
- grid-template-rows: repeat(var(--row-count-above-mobile, 1), max-content);
89
+ grid-template-rows: repeat(2, max-content);
90
90
  gap: 0;
91
91
  }
92
92
  }
@@ -95,9 +95,9 @@
95
95
  @nest .hasSide & {
96
96
  padding: var(--hdsplus-spacing-06) var(--hdsplus-spacing-05)
97
97
  var(--hdsplus-spacing-04);
98
- grid-auto-flow: column;
98
+ grid-auto-flow: row;
99
99
  grid-template-columns: repeat(2, 300px);
100
- grid-template-rows: repeat(var(--row-count-above-mobile, 1), max-content);
100
+ grid-template-rows: repeat(2, max-content);
101
101
  gap: 0;
102
102
  }
103
103
  }
@@ -197,14 +197,14 @@
197
197
 
198
198
  @media (--large) {
199
199
  @nest .noSide & {
200
- padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-05)
200
+ padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-09)
201
201
  var(--hdsplus-spacing-04);
202
202
  }
203
203
  }
204
204
 
205
205
  @media (--dev-dot-viewport) {
206
206
  @nest .hasSide & {
207
- padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-05)
207
+ padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-09)
208
208
  var(--hdsplus-spacing-04);
209
209
  }
210
210
  }
@@ -280,6 +280,21 @@ packages/react-components/src/components/nav-panel/components/link-list/style.mo
280
280
 
281
281
  /* Branding exception classnames */
282
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
+
283
298
  /* Styles for HCP Vault mimic the spec for `product-square` icons,
284
299
  while allowing the symbol inside the icon border to change color
285
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 }