@hashicorp/react-components 0.0.0-nightly.f3bf415 → 0.0.0-nightly.fe5584d

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 (21) hide show
  1. package/package.json +6 -3
  2. package/src/components/marketo-form/partials/fields/htmltext-field/style.module.css +16 -4
  3. package/src/components/marketo-form/utils.ts +4 -0
  4. package/src/components/nav-panel/components/link-list/index.tsx +2 -2
  5. package/src/components/nav-panel/components/panel/column/index.tsx +4 -2
  6. package/src/components/nav-panel/components/panel/root/index.tsx +4 -2
  7. package/src/components/nav-panel/components/panel/root/style.module.css +1 -0
  8. package/src/components/nav-panel/components/promo/index.tsx +4 -4
  9. package/src/components/nav-panel/product-panel/index.tsx +78 -26
  10. package/src/components/nav-panel/product-panel/style.module.css +93 -0
  11. package/src/components/nav-panel/standard-panel/index.tsx +1 -1
  12. package/src/components/subnav/partials/MenuItemsOverflow/index.tsx +1 -1
  13. package/src/components/subnav/partials/TitleLink/index.tsx +9 -9
  14. package/src/components/subnav/partials/TitleLink/mktg-logos/all-community-product-logos_on-dark.ts +7 -7
  15. package/src/components/subnav/partials/TitleLink/mktg-logos/all-community-product-logos_on-light.ts +7 -7
  16. package/src/components/subnav/partials/TitleLink/mktg-logos/all-primary-logos_on-dark.ts +10 -10
  17. package/src/components/subnav/partials/TitleLink/mktg-logos/all-primary-logos_on-light.ts +10 -10
  18. package/src/lib/parse-url/index.test.ts +30 -0
  19. package/src/lib/parse-url/index.ts +30 -0
  20. package/src/lib/track-nav-click-event/index.ts +22 -0
  21. package/src/lib/v/index.ts +11 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hashicorp/react-components",
3
- "version": "0.0.0-nightly.f3bf415",
3
+ "version": "0.0.0-nightly.fe5584d",
4
4
  "main": "src/index.ts",
5
5
  "scripts": {
6
6
  "lint": "next-hashicorp lint",
@@ -12,9 +12,12 @@
12
12
  "@hashicorp/platform-product-meta": "^0.1.1",
13
13
  "@hashicorp/platform-util": "^0.2.0",
14
14
  "@hashicorp/react-design-system-components": "*",
15
- "@radix-ui/react-visually-hidden": "^1.0.3",
15
+ "@hashicorp/web-mktg-logos": "*",
16
+ "@radix-ui/react-navigation-menu": "^1.2.0",
17
+ "@radix-ui/react-visually-hidden": "^1.1.0",
18
+ "@vercel/analytics": "^1.3.1",
16
19
  "@vercel/fetch": "^7.0.0",
17
- "@web/mktg-logos": "*",
20
+ "@vercel/stega": "^0.1.2",
18
21
  "classnames": "^2.3.2",
19
22
  "js-cookie": "^3.0.5",
20
23
  "moize": "^6.1.3",
package/src/components/marketo-form/partials/fields/htmltext-field/style.module.css CHANGED
@@ -1,6 +1,18 @@
1
1
  .htmltext {
2
- composes: g-type-body-small from global;
3
- color: var(--wpl-neutral-500);
4
- margin-top: var(--wpl-spacing-02);
5
- margin-bottom: var(--wpl-spacing-05);
2
+ composes: g-type-body-small from global;
3
+ margin-top: var(--hdsplus-spacing-04);
4
+ margin-bottom: var(--hdsplus-spacing-07);
5
+ color: var(--token-color-foreground-faint);
6
+
7
+ & a {
8
+ color: var(--token-color-foreground-action);
9
+ text-decoration: underline;
10
+
11
+ &:focus-visible {
12
+ text-decoration: none;
13
+ border-radius: 2px;
14
+ outline: 2px solid var(--token-color-focus-action-internal);
15
+ outline-offset: 1px;
16
+ }
17
+ }
6
18
  }
package/src/components/marketo-form/utils.ts CHANGED
@@ -426,6 +426,10 @@ export const resolverErrors = (
426
426
  * @returns MarketoFormField[] with columnSplit property set
427
427
  */
428
428
  export function setFieldsColumnSplit(fieldsArr: MarketoFormField[]) {
429
+ if (!fieldsArr) {
430
+ return []
431
+ }
432
+
429
433
  return fieldsArr.map((f) => {
430
434
  const columnSplit = getFieldColumnSplit(fieldsArr, f)
431
435
  return { ...f, columnSplit }
package/src/components/nav-panel/components/link-list/index.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import Link from 'next/link'
2
- import { parseUrl } from '../../../../../../../apps/www/lib/parseUrl'
3
- import { v } from '@web/cms'
2
+ import { parseUrl } from '../../../../lib/parse-url'
3
+ import { v } from '../../../../lib/v'
4
4
  import FlightIcon from '@hashicorp/react-design-system-components/src/components/flight-icon'
5
5
  import * as NavigationMenu from '@radix-ui/react-navigation-menu'
6
6
  import s from './style.module.css'
package/src/components/nav-panel/components/panel/column/index.tsx CHANGED
@@ -1,9 +1,11 @@
1
+ import classNames from 'classnames'
1
2
  import s from './style.module.css'
2
3
 
3
4
  export interface NavColumnProps {
5
+ className?: string
4
6
  children: React.ReactNode
5
7
  }
6
8
 
7
- export default function Column({ children }: NavColumnProps) {
8
- return <div className={s.column}>{children}</div>
9
+ export default function Column({ className, children }: NavColumnProps) {
10
+ return <div className={classNames(s.column, className)}>{children}</div>
9
11
  }
package/src/components/nav-panel/components/panel/root/index.tsx CHANGED
@@ -1,9 +1,11 @@
1
+ import classNames from 'classnames'
1
2
  import s from './style.module.css'
2
3
 
3
4
  interface RootProps {
5
+ className?: string
4
6
  children: React.ReactNode
5
7
  }
6
8
 
7
- export default function Root({ children }: RootProps) {
8
- return <div className={s.root}>{children}</div>
9
+ export default function Root({ className, children }: RootProps) {
10
+ return <div className={classNames(s.root, className)}>{children}</div>
9
11
  }
package/src/components/nav-panel/components/panel/root/style.module.css CHANGED
@@ -10,6 +10,7 @@
10
10
  justify-content: flex-start;
11
11
  height: 100%;
12
12
  min-height: fit-content;
13
+ padding: var(--hdsplus-spacing-05) var(--hdsplus-spacing-04);
13
14
  gap: var(--hdsplus-spacing-04);
14
15
  }
15
16
  }
package/src/components/nav-panel/components/promo/index.tsx CHANGED
@@ -1,9 +1,9 @@
1
1
  import { useCallback } from 'react'
2
- import { trackNavClickEvent } from '../../../../../../../apps/www/layouts/standard/nav'
3
- import { v } from '@web/cms'
4
- import Link from 'next/link'
5
2
  import classNames from 'classnames'
6
- import { parseUrl } from '../../../../../../../apps/www/lib/parseUrl'
3
+ import { v } from '../../../../lib/v'
4
+ import Link from 'next/link'
5
+ import { parseUrl } from '../../../../lib/parse-url'
6
+ import { trackNavClickEvent } from '../../../../lib/track-nav-click-event'
7
7
  import FlightIcon from '@hashicorp/react-design-system-components/src/components/flight-icon'
8
8
  import * as NavigationMenu from '@radix-ui/react-navigation-menu'
9
9
  import s from './style.module.css'
package/src/components/nav-panel/product-panel/index.tsx CHANGED
@@ -4,8 +4,8 @@ import Promo, { type PromoProps } from '../components/promo'
4
4
  import { Products } from '@hashicorp/platform-product-meta'
5
5
  import FlightIcon from '@hashicorp/react-design-system-components/src/components/flight-icon'
6
6
  import { TextPlus } from '@hashicorp/react-design-system-components/src/components/text'
7
- import { parseUrl } from '../../../../../../apps/www/lib/parseUrl'
8
- import { trackNavClickEvent } from '../../../../../../apps/www/layouts/standard/nav'
7
+ import { parseUrl } from '../../../lib/parse-url'
8
+ import { trackNavClickEvent } from '../../../lib/track-nav-click-event'
9
9
  import * as NavigationMenu from '@radix-ui/react-navigation-menu'
10
10
  import s from './style.module.css'
11
11
 
@@ -20,35 +20,87 @@ const PRODUCT_LOGO_MAP = new Map([
20
20
  ['Vagrant', 'vagrant-fill-color'],
21
21
  ])
22
22
 
23
- interface ProductsPanelProps {
23
+ export interface ProductsPanelProps {
24
24
  productCategories: any
25
25
  promo?: PromoProps
26
+ sidePanel?: {
27
+ label: string
28
+ navItems: {
29
+ icon: string
30
+ title: string
31
+ description: string
32
+ url: string
33
+ }[]
34
+ }
26
35
  }
27
36
 
28
- const ProductPanel = ({ productCategories, promo }: ProductsPanelProps) => {
37
+ const ProductPanel = ({
38
+ productCategories,
39
+ promo,
40
+ sidePanel,
41
+ }: ProductsPanelProps) => {
29
42
  return (
30
- <NavPanel.Root>
31
- <NavPanel.Column>
32
- <ul className={s.productCategories}>
33
- {productCategories.map(({ title, products }) => {
34
- return (
35
- <li key={title} className={s.productCategory}>
36
- <TextPlus.Body className={s.eyebrow}>{title}</TextPlus.Body>
37
- <ul className={s.productList}>
38
- {products.map((product) => {
39
- return (
40
- <li key={product.url}>
41
- <NavProduct {...product} />
42
- </li>
43
- )
44
- })}
45
- </ul>
46
- </li>
47
- )
48
- })}
49
- </ul>
50
- </NavPanel.Column>
51
- {promo ? <Promo {...promo} /> : null}
43
+ <NavPanel.Root className={s.productPanel}>
44
+ <div className={s.mainPanel}>
45
+ <NavPanel.Column>
46
+ <ul className={s.productCategories}>
47
+ {productCategories.map(({ title, products }) => {
48
+ return (
49
+ <li key={title} className={s.productCategory}>
50
+ <TextPlus.Body className={s.eyebrow}>{title}</TextPlus.Body>
51
+ <ul className={s.productList}>
52
+ {products.map((product) => {
53
+ return (
54
+ <li key={product.url}>
55
+ <NavProduct {...product} />
56
+ </li>
57
+ )
58
+ })}
59
+ </ul>
60
+ </li>
61
+ )
62
+ })}
63
+ </ul>
64
+ </NavPanel.Column>
65
+ {promo ? <Promo {...promo} /> : null}
66
+ </div>
67
+
68
+ {sidePanel ? (
69
+ <NavPanel.Column className={s.sidePanel}>
70
+ <TextPlus.Body size="200" weight="semibold">
71
+ {sidePanel.label}
72
+ </TextPlus.Body>
73
+
74
+ {/* ! TODO Replace the below list with the <LinkList /> component,
75
+ That component will require a refactor to support greater customization
76
+ Ticket:
77
+ https://app.asana.com/0/1206176289707208/1208162145034615/f
78
+ */}
79
+ <ul className={s.sidePanelItems}>
80
+ {sidePanel.navItems.map(({ icon, title, description, url }) => {
81
+ return (
82
+ <li key={title}>
83
+ <Link href={parseUrl(url).href} className={s.sidePanelItem}>
84
+ <div className={s.iconBackground}>
85
+ <FlightIcon
86
+ size={16}
87
+ name={icon}
88
+ color="var(--token-color-foreground-faint)"
89
+ />
90
+ </div>
91
+ <div className={s.sidePanelItemContent}>
92
+ <TextPlus.Body size="200" weight="semibold" tag="span">
93
+ {title}
94
+ </TextPlus.Body>
95
+ <span className={s.sidePanelItemDesc}>{description}</span>
96
+ </div>
97
+ </Link>
98
+ </li>
99
+ )
100
+ })}
101
+ </ul>
102
+ </NavPanel.Column>
103
+ ) : null}
52
104
  </NavPanel.Root>
53
105
  )
54
106
  }
package/src/components/nav-panel/product-panel/style.module.css CHANGED
@@ -1,3 +1,14 @@
1
+ .productPanel {
2
+ height: 100%;
3
+
4
+ @media (--large) {
5
+ display: grid;
6
+ grid-template-rows: 1fr;
7
+ grid-template-columns: max-content max-content;
8
+ padding: 0;
9
+ }
10
+ }
11
+
1
12
  .productCategories {
2
13
  list-style: none;
3
14
  padding: 0;
@@ -98,3 +109,85 @@
98
109
  outline-style: auto;
99
110
  }
100
111
  }
112
+
113
+ .mainPanel {
114
+ height: 100%;
115
+ display: flex;
116
+ justify-content: space-between;
117
+ flex-direction: column;
118
+
119
+ @media (--large) {
120
+ padding: var(--hdsplus-spacing-05) 0 var(--hdsplus-spacing-05)
121
+ var(--hdsplus-spacing-04);
122
+ }
123
+ }
124
+
125
+ .sidePanel {
126
+ height: 100%;
127
+ background: var(--token-color-surface-faint);
128
+ display: flex;
129
+ flex-direction: column;
130
+ gap: var(--hdsplus-spacing-05);
131
+ margin: 0;
132
+ padding: var(--hdsplus-spacing-05) var(--hdsplus-spacing-07)
133
+ var(--hdsplus-spacing-09) var(--hdsplus-spacing-07);
134
+ }
135
+
136
+ .sidePanelItems {
137
+ list-style: none;
138
+ margin: 0;
139
+ padding: 0;
140
+ display: grid;
141
+ grid-template-columns: 1fr;
142
+ gap: var(--hdsplus-spacing-07);
143
+
144
+ @media (--large) {
145
+ gap: var(--hdsplus-spacing-05);
146
+ }
147
+ }
148
+
149
+ /* Lifted from .productWrapper */
150
+ .sidePanelItem {
151
+ display: flex;
152
+ margin-bottom: var(--hdsplus-spacing-05);
153
+ gap: var(--hdsplus-spacing-05);
154
+
155
+ @media (--large) {
156
+ padding: var(--hdsplus-spacing-03) var(--hdsplus-spacing-05);
157
+ margin-bottom: 0;
158
+
159
+ &:hover {
160
+ background-color: var(--token-color-surface-interactive-hover);
161
+ border-radius: var(--hdsplus-spacing-01);
162
+ }
163
+ }
164
+ }
165
+
166
+ /* Lifted from:
167
+ packages/react-components/src/components/nav-panel/components/link-list/style.module.css */
168
+ .iconBackground {
169
+ background: var(--token-color-foreground-high-contrast);
170
+ height: var(--hdsplus-spacing-08);
171
+ width: var(--hdsplus-spacing-08);
172
+ display: flex;
173
+ align-items: center;
174
+ justify-content: center;
175
+ border-radius: 3px;
176
+ flex: none;
177
+ margin-top: 3px;
178
+ border: 1px solid var(--token-color-border-primary);
179
+ }
180
+
181
+ /* Lifted from .productTextContent */
182
+ .sidePanelItemContent {
183
+ display: flex;
184
+ flex-direction: column;
185
+ color: var(--token-color-foreground-strong);
186
+ }
187
+
188
+ .sidePanelItemDesc {
189
+ font-weight: 400;
190
+ font-size: 13px;
191
+ line-height: 18px;
192
+ color: var(--token-color-foreground-primary);
193
+ }
package/src/components/nav-panel/standard-panel/index.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { trackNavClickEvent } from '../../../../../../apps/www/layouts/standard/nav'
1
+ import { trackNavClickEvent } from '../../../lib/track-nav-click-event'
2
2
  import * as NavPanel from '../components/panel'
3
3
  import LinkList, { type LinkListProps } from '../components/link-list'
4
4
  import Promo, { type PromoProps } from '../components/promo'
package/src/components/subnav/partials/MenuItemsOverflow/index.tsx CHANGED
@@ -4,7 +4,7 @@
4
4
  */
5
5
 
6
6
  import React from 'react'
7
- import { v } from '@web/cms'
7
+ import { v } from '../../../../lib/v'
8
8
  import Link from 'next/link'
9
9
  import type { Products } from '@hashicorp/platform-product-meta'
10
10
  import CtaLinks, { type CtaLinkProps } from '../CtaLinks'
package/src/components/subnav/partials/TitleLink/index.tsx CHANGED
@@ -7,20 +7,20 @@ import { forwardRef } from 'react'
7
7
  import { camelCase } from 'camel-case'
8
8
  import Link from 'next/link'
9
9
  import Image from 'next/image'
10
- import { v } from '@web/cms'
10
+ import { v } from '../../../../lib/v'
11
11
  import classNames from 'classnames'
12
12
  import * as CommunityProductLogosOnDark from './mktg-logos/all-community-product-logos_on-dark'
13
13
  import * as CommunityProductLogosOnLight from './mktg-logos/all-community-product-logos_on-light'
14
14
  import * as PrimaryLogosOnDark from './mktg-logos/all-primary-logos_on-dark'
15
15
  import * as PrimaryLogosOnLight from './mktg-logos/all-primary-logos_on-light'
16
- import HashiCorpLogoOnLight from '@web/mktg-logos/src/hashicorp/hashicorp-horizontal_on-light.svg'
17
- import HashiCorpLogoOnDark from '@web/mktg-logos/src/hashicorp/hashicorp-horizontal_on-dark.svg'
18
- import HCPLogoOnLight from '@web/mktg-logos/src/hcp/hcp-horizontal_on-light.svg'
19
- import HCPLogoOnDark from '@web/mktg-logos/src/hcp/hcp-horizontal_on-dark.svg'
20
- import WaypointLogoAttrOnLight from '@web/mktg-logos/src/waypoint/hashicorp-waypoint-attributed/hashicorp-waypoint_on-light.svg'
21
- import WaypointLogoAttrOnDark from '@web/mktg-logos/src/waypoint/hashicorp-waypoint-attributed/hashicorp-waypoint_on-dark.svg'
22
- import HCPTerraformLogoOnLight from '@web/mktg-logos/src/terraform/hcp-terraform/hcp-terraform_on-light.svg'
23
- import HCPTerraformLogoOnDark from '@web/mktg-logos/src/terraform/hcp-terraform/hcp-terraform_on-dark.svg'
16
+ import HashiCorpLogoOnLight from '@hashicorp/web-mktg-logos/src/hashicorp/hashicorp-horizontal_on-light.svg'
17
+ import HashiCorpLogoOnDark from '@hashicorp/web-mktg-logos/src/hashicorp/hashicorp-horizontal_on-dark.svg'
18
+ import HCPLogoOnLight from '@hashicorp/web-mktg-logos/src/hcp/hcp-horizontal_on-light.svg'
19
+ import HCPLogoOnDark from '@hashicorp/web-mktg-logos/src/hcp/hcp-horizontal_on-dark.svg'
20
+ import WaypointLogoAttrOnLight from '@hashicorp/web-mktg-logos/src/waypoint/hashicorp-waypoint-attributed/hashicorp-waypoint_on-light.svg'
21
+ import WaypointLogoAttrOnDark from '@hashicorp/web-mktg-logos/src/waypoint/hashicorp-waypoint-attributed/hashicorp-waypoint_on-dark.svg'
22
+ import HCPTerraformLogoOnLight from '@hashicorp/web-mktg-logos/src/terraform/hcp-terraform/hcp-terraform_on-light.svg'
23
+ import HCPTerraformLogoOnDark from '@hashicorp/web-mktg-logos/src/terraform/hcp-terraform/hcp-terraform_on-dark.svg'
24
24
  import s from './style.module.css'
25
25
 
26
26
  const logoDict = {
package/src/components/subnav/partials/TitleLink/mktg-logos/all-community-product-logos_on-dark.ts CHANGED
@@ -1,9 +1,9 @@
1
- import boundary from '@web/mktg-logos/src/boundary/boundary-community/boundary-community_on-dark.svg'
2
- import consul from '@web/mktg-logos/src/consul/consul-community/consul-community_on-dark.svg'
3
- import nomad from '@web/mktg-logos/src/nomad/nomad-community/nomad-community_on-dark.svg'
4
- import packer from '@web/mktg-logos/src/packer/packer-community/packer-community_on-dark.svg'
5
- import terraform from '@web/mktg-logos/src/terraform/terraform-community/terraform-community_on-dark.svg'
6
- import vagrant from '@web/mktg-logos/src/vagrant/vagrant-community/vagrant-community_on-dark.svg'
7
- import vault from '@web/mktg-logos/src/vault/vault-community/vault-community_on-dark.svg'
1
+ import boundary from '@hashicorp/web-mktg-logos/src/boundary/boundary-community/boundary-community_on-dark.svg'
2
+ import consul from '@hashicorp/web-mktg-logos/src/consul/consul-community/consul-community_on-dark.svg'
3
+ import nomad from '@hashicorp/web-mktg-logos/src/nomad/nomad-community/nomad-community_on-dark.svg'
4
+ import packer from '@hashicorp/web-mktg-logos/src/packer/packer-community/packer-community_on-dark.svg'
5
+ import terraform from '@hashicorp/web-mktg-logos/src/terraform/terraform-community/terraform-community_on-dark.svg'
6
+ import vagrant from '@hashicorp/web-mktg-logos/src/vagrant/vagrant-community/vagrant-community_on-dark.svg'
7
+ import vault from '@hashicorp/web-mktg-logos/src/vault/vault-community/vault-community_on-dark.svg'
8
8
 
9
9
  export { boundary, consul, nomad, packer, terraform, vagrant, vault }
package/src/components/subnav/partials/TitleLink/mktg-logos/all-community-product-logos_on-light.ts CHANGED
@@ -1,9 +1,9 @@
1
- import boundary from '@web/mktg-logos/src/boundary/boundary-community/boundary-community_on-light.svg'
2
- import consul from '@web/mktg-logos/src/consul/consul-community/consul-community_on-light.svg'
3
- import nomad from '@web/mktg-logos/src/nomad/nomad-community/nomad-community_on-light.svg'
4
- import packer from '@web/mktg-logos/src/packer/packer-community/packer-community_on-light.svg'
5
- import terraform from '@web/mktg-logos/src/terraform/terraform-community/terraform-community_on-light.svg'
6
- import vagrant from '@web/mktg-logos/src/vagrant/vagrant-community/vagrant-community_on-light.svg'
7
- import vault from '@web/mktg-logos/src/vault/vault-community/vault-community_on-light.svg'
1
+ import boundary from '@hashicorp/web-mktg-logos/src/boundary/boundary-community/boundary-community_on-light.svg'
2
+ import consul from '@hashicorp/web-mktg-logos/src/consul/consul-community/consul-community_on-light.svg'
3
+ import nomad from '@hashicorp/web-mktg-logos/src/nomad/nomad-community/nomad-community_on-light.svg'
4
+ import packer from '@hashicorp/web-mktg-logos/src/packer/packer-community/packer-community_on-light.svg'
5
+ import terraform from '@hashicorp/web-mktg-logos/src/terraform/terraform-community/terraform-community_on-light.svg'
6
+ import vagrant from '@hashicorp/web-mktg-logos/src/vagrant/vagrant-community/vagrant-community_on-light.svg'
7
+ import vault from '@hashicorp/web-mktg-logos/src/vault/vault-community/vault-community_on-light.svg'
8
8
 
9
9
  export { boundary, consul, nomad, packer, terraform, vagrant, vault }
package/src/components/subnav/partials/TitleLink/mktg-logos/all-primary-logos_on-dark.ts CHANGED
@@ -1,13 +1,13 @@
1
- import boundary from '@web/mktg-logos/src/boundary/boundary/boundary_on-dark.svg'
2
- import consul from '@web/mktg-logos/src/consul/consul/consul_on-dark.svg'
3
- import nomad from '@web/mktg-logos/src/nomad/nomad/nomad_on-dark.svg'
4
- import packer from '@web/mktg-logos/src/packer/packer/packer_on-dark.svg'
5
- import terraform from '@web/mktg-logos/src/terraform/terraform/terraform_on-dark.svg'
6
- import vagrant from '@web/mktg-logos/src/vagrant/vagrant/vagrant_on-dark.svg'
7
- import vault from '@web/mktg-logos/src/vault/vault/vault_on-dark.svg'
8
- import waypoint from '@web/mktg-logos/src/waypoint/waypoint/waypoint_on-dark.svg'
9
- import hashiconf from '@web/mktg-logos/src/conferences/hashiconf_on-dark.svg'
10
- import hashidays from '@web/mktg-logos/src/conferences/hashidays_on-dark.svg'
1
+ import boundary from '@hashicorp/web-mktg-logos/src/boundary/boundary/boundary_on-dark.svg'
2
+ import consul from '@hashicorp/web-mktg-logos/src/consul/consul/consul_on-dark.svg'
3
+ import nomad from '@hashicorp/web-mktg-logos/src/nomad/nomad/nomad_on-dark.svg'
4
+ import packer from '@hashicorp/web-mktg-logos/src/packer/packer/packer_on-dark.svg'
5
+ import terraform from '@hashicorp/web-mktg-logos/src/terraform/terraform/terraform_on-dark.svg'
6
+ import vagrant from '@hashicorp/web-mktg-logos/src/vagrant/vagrant/vagrant_on-dark.svg'
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'
9
+ import hashiconf from '@hashicorp/web-mktg-logos/src/conferences/hashiconf_on-dark.svg'
10
+ import hashidays from '@hashicorp/web-mktg-logos/src/conferences/hashidays_on-dark.svg'
11
11
 
12
12
  export {
13
13
  boundary,
package/src/components/subnav/partials/TitleLink/mktg-logos/all-primary-logos_on-light.ts CHANGED
@@ -1,13 +1,13 @@
1
- import boundary from '@web/mktg-logos/src/boundary/boundary/boundary_on-light.svg'
2
- import consul from '@web/mktg-logos/src/consul/consul/consul_on-light.svg'
3
- import nomad from '@web/mktg-logos/src/nomad/nomad/nomad_on-light.svg'
4
- import packer from '@web/mktg-logos/src/packer/packer/packer_on-light.svg'
5
- import terraform from '@web/mktg-logos/src/terraform/terraform/terraform_on-light.svg'
6
- import vagrant from '@web/mktg-logos/src/vagrant/vagrant/vagrant_on-light.svg'
7
- import vault from '@web/mktg-logos/src/vault/vault/vault_on-light.svg'
8
- import waypoint from '@web/mktg-logos/src/waypoint/waypoint/waypoint_on-light.svg'
9
- import hashiconf from '@web/mktg-logos/src/conferences/hashiconf_on-light.svg'
10
- import hashidays from '@web/mktg-logos/src/conferences/hashidays_on-light.svg'
1
+ import boundary from '@hashicorp/web-mktg-logos/src/boundary/boundary/boundary_on-light.svg'
2
+ import consul from '@hashicorp/web-mktg-logos/src/consul/consul/consul_on-light.svg'
3
+ import nomad from '@hashicorp/web-mktg-logos/src/nomad/nomad/nomad_on-light.svg'
4
+ import packer from '@hashicorp/web-mktg-logos/src/packer/packer/packer_on-light.svg'
5
+ import terraform from '@hashicorp/web-mktg-logos/src/terraform/terraform/terraform_on-light.svg'
6
+ import vagrant from '@hashicorp/web-mktg-logos/src/vagrant/vagrant/vagrant_on-light.svg'
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'
9
+ import hashiconf from '@hashicorp/web-mktg-logos/src/conferences/hashiconf_on-light.svg'
10
+ import hashidays from '@hashicorp/web-mktg-logos/src/conferences/hashidays_on-light.svg'
11
11
 
12
12
  export {
13
13
  boundary,
package/src/lib/parse-url/index.test.ts ADDED
@@ -0,0 +1,30 @@
1
+ import { parseUrl } from '.'
2
+
3
+ describe('parseUrl', () => {
4
+ it('detects hashicorp.com URLs as internal', () => {
5
+ const url = parseUrl('https://hashicorp.com/example')
6
+ expect(url.href).toBe('/example')
7
+ expect(url.linkType).toBe('inbound')
8
+ })
9
+
10
+ it('detects URLs not containing hashicorp.com as external', () => {
11
+ const externalUrl = 'https://google.com/example'
12
+ const url = parseUrl(externalUrl)
13
+ expect(url.href).toBe(externalUrl)
14
+ expect(url.linkType).toBe('outbound')
15
+ })
16
+
17
+ it('detects relative URLs as internal', () => {
18
+ const relativeUrl = '/resources'
19
+ const url = parseUrl(relativeUrl)
20
+ expect(url.href).toBe(relativeUrl)
21
+ expect(url.linkType).toBe('inbound')
22
+ })
23
+
24
+ it('leaves URL search params intact', () => {
25
+ const url = parseUrl(
26
+ 'https://hashicorp.com/resources?type=case-study&products=terraform'
27
+ )
28
+ expect(url.href).toBe('/resources?type=case-study&products=terraform')
29
+ })
30
+ })
package/src/lib/parse-url/index.ts ADDED
@@ -0,0 +1,30 @@
1
+ export function parseUrl(url: string | undefined): {
2
+ linkType: 'inbound' | 'outbound'
3
+ href: string
4
+ } {
5
+ if (!url) {
6
+ throw new Error('url is required')
7
+ }
8
+
9
+ if (isRelative(url) || isAnchor(url)) {
10
+ return { linkType: 'inbound', href: url }
11
+ }
12
+
13
+ if (isInternal(url)) {
14
+ try {
15
+ const { pathname, search } = new URL(url)
16
+ const href = pathname + search
17
+ return { linkType: 'inbound', href }
18
+ } catch (error) {
19
+ throw new Error(`Invalid href: ${url}`)
20
+ }
21
+ }
22
+
23
+ return { linkType: 'outbound', href: url }
24
+ }
25
+
26
+ const isRelative = (url) => url.startsWith('/')
27
+ const isAnchor = (url) => url.startsWith('#')
28
+
29
+ export const isInternal = (url) =>
30
+ new URL(url).hostname.includes('hashicorp.com')
package/src/lib/track-nav-click-event/index.ts ADDED
@@ -0,0 +1,22 @@
1
+ import va from '@vercel/analytics'
2
+
3
+ /**
4
+ * Pushes a 'Nav link click' custom event to Vercel Analytics.
5
+ * A wrapper around the Vercel Analytics track method.
6
+ *
7
+ * @param {string} name - The name of the nav link
8
+ * @param {string} href - The href for the nav link
9
+ * @param {string} [section] - The name of the section of the nav. Top-level links do not have a section.
10
+ */
11
+
12
+ export const trackNavClickEvent = (
13
+ name: string,
14
+ href: string,
15
+ section: string
16
+ ) => {
17
+ va.track('Nav link click', {
18
+ name,
19
+ href,
20
+ section,
21
+ })
22
+ }
package/src/lib/v/index.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { vercelStegaSplit } from '@vercel/stega'
2
+
3
+ /**
4
+ * Takes in a Vercel Visual Editing string and returns the string without
5
+ * hidden data.
6
+ */
7
+ export function v<VercelVEString extends string>(
8
+ s: VercelVEString
9
+ ): VercelVEString {
10
+ return vercelStegaSplit(s).cleaned as VercelVEString
11
+ }