@hashicorp/react-components 0.0.0-canary.23632af → 0.0.0-canary.32bcc38

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 +1 -1
  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 +1 -1
  5. package/src/components/nav-panel/product-panel/index.tsx +13 -14
  6. package/src/components/nav-panel/product-panel/style.module.css +21 -5
  7. package/src/components/subnav/partials/TitleLink/mktg-logos/all-community-product-logos_on-dark.ts +2 -1
  8. package/src/components/subnav/partials/TitleLink/mktg-logos/all-community-product-logos_on-light.ts +2 -1
  9. 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-canary.23632af",
3
+ "version": "0.0.0-canary.32bcc38",
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;
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;
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'
@@ -33,6 +32,7 @@ const PRODUCT_LOGO_EXCEPTION_CLASSNAMES = {
33
32
  export interface ProductsPanelProps {
34
33
  productCategories: any
35
34
  promo?: PromoProps
35
+ noMarginOnMobile?: boolean
36
36
  sidePanel?: {
37
37
  label: string
38
38
  navItems: {
@@ -47,6 +47,7 @@ export interface ProductsPanelProps {
47
47
  const ProductPanel = ({
48
48
  productCategories,
49
49
  promo,
50
+ noMarginOnMobile = false,
50
51
  sidePanel,
51
52
  }: ProductsPanelProps) => {
52
53
  return (
@@ -58,23 +59,16 @@ const ProductPanel = ({
58
59
  hasSidePanel={Boolean(sidePanel)}
59
60
  >
60
61
  <div className={s.mainPanel}>
61
- <NavPanel.Column hasSidePanel={Boolean(sidePanel)}>
62
+ <NavPanel.Column
63
+ className={noMarginOnMobile && s.noMarginOnMobile}
64
+ hasSidePanel={Boolean(sidePanel)}
65
+ >
62
66
  <ul className={s.productCategories}>
63
67
  {productCategories.map(({ title, products }) => {
64
68
  return (
65
69
  <li key={title} className={s.productCategory}>
66
70
  <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
- >
71
+ <ul className={s.productList}>
78
72
  {products.map((product) => {
79
73
  return (
80
74
  <li key={product.url}>
@@ -106,7 +100,11 @@ const ProductPanel = ({
106
100
  {sidePanel.navItems.map(({ icon, title, description, url }) => {
107
101
  return (
108
102
  <li key={title}>
109
- <Link href={parseUrl(url).href} className={s.sidePanelItem}>
103
+ <Link
104
+ aria-label={`${title} - ${description}`}
105
+ href={parseUrl(url).href}
106
+ className={classNames(s.sidePanelItem, s.focusIndicator)}
107
+ >
110
108
  <div className={s.iconBackground}>
111
109
  <FlightIcon
112
110
  size={16}
@@ -141,6 +139,7 @@ function NavProduct({ url, product, description }: NavProductProps) {
141
139
  return (
142
140
  <NavigationMenu.Link asChild>
143
141
  <Link
142
+ aria-label={`${product} - ${description}`}
144
143
  href={parseUrl(url).href}
145
144
  onClickCapture={() => {
146
145
  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%;
@@ -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
  }
@@ -210,6 +210,22 @@
210
210
  }
211
211
  }
212
212
 
213
+ .noMarginOnMobile {
214
+ margin: 0;
215
+
216
+ @media (--large) {
217
+ @nest .noSide & {
218
+ margin: 0 var(--hdsplus-spacing-07);
219
+ }
220
+ }
221
+
222
+ @media (--dev-dot-viewport) {
223
+ @nest .hasSide & {
224
+ margin: 0 var(--hdsplus-spacing-07);
225
+ }
226
+ }
227
+ }
228
+
213
229
  .sidePanel {
214
230
  height: 100%;
215
231
  background: var(--token-color-surface-faint);
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
  })