@hashicorp/react-components 0.0.0-nightly.2c654ea → 0.0.0-nightly.4224c7b

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 +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 +7 -13
  6. package/src/components/nav-panel/product-panel/style.module.css +8 -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
  10. 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.2c654ea",
3
+ "version": "0.0.0-nightly.4224c7b",
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'
@@ -64,17 +63,7 @@ const ProductPanel = ({
64
63
  return (
65
64
  <li key={title} className={s.productCategory}>
66
65
  <TextPlus.Body className={s.eyebrow}>{title}</TextPlus.Body>
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
- >
66
+ <ul className={s.productList}>
78
67
  {products.map((product) => {
79
68
  return (
80
69
  <li key={product.url}>
@@ -106,7 +95,11 @@ const ProductPanel = ({
106
95
  {sidePanel.navItems.map(({ icon, title, description, url }) => {
107
96
  return (
108
97
  <li key={title}>
109
- <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
+ >
110
103
  <div className={s.iconBackground}>
111
104
  <FlightIcon
112
105
  size={16}
@@ -141,6 +134,7 @@ function NavProduct({ url, product, description }: NavProductProps) {
141
134
  return (
142
135
  <NavigationMenu.Link asChild>
143
136
  <Link
137
+ aria-label={`${product} - ${description}`}
144
138
  href={parseUrl(url).href}
145
139
  onClickCapture={() => {
146
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
  }
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
  })