@hashicorp/react-components 0.0.0-canary.de73f6f → 0.0.0-canary.f1f8354
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.
- package/package.json +6 -3
- package/src/components/marketo-form/partials/fields/htmltext-field/style.module.css +16 -4
- package/src/components/nav-panel/components/link-list/index.tsx +2 -2
- package/src/components/nav-panel/components/promo/index.tsx +4 -4
- package/src/components/nav-panel/product-panel/index.tsx +2 -2
- package/src/components/nav-panel/standard-panel/index.tsx +1 -1
- package/src/components/subnav/partials/MenuItemsOverflow/index.tsx +1 -1
- package/src/components/subnav/partials/TitleLink/index.tsx +9 -9
- package/src/components/subnav/partials/TitleLink/mktg-logos/all-community-product-logos_on-dark.ts +7 -7
- package/src/components/subnav/partials/TitleLink/mktg-logos/all-community-product-logos_on-light.ts +7 -7
- package/src/components/subnav/partials/TitleLink/mktg-logos/all-primary-logos_on-dark.ts +10 -10
- package/src/components/subnav/partials/TitleLink/mktg-logos/all-primary-logos_on-light.ts +10 -10
- package/src/lib/parse-url/index.test.ts +30 -0
- package/src/lib/parse-url/index.ts +31 -0
- package/src/lib/track-nav-click-event/index.ts +22 -0
- package/src/lib/v/index.ts +9 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hashicorp/react-components",
|
|
3
|
-
"version": "0.0.0-canary.
|
|
3
|
+
"version": "0.0.0-canary.f1f8354",
|
|
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
|
-
"@
|
|
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
|
-
"@
|
|
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",
|
|
@@ -1,6 +1,18 @@
|
|
|
1
1
|
.htmltext {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
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
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import Link from 'next/link'
|
|
2
|
-
import { parseUrl } from '
|
|
3
|
-
import { v } from '
|
|
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'
|
|
@@ -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 {
|
|
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'
|
|
@@ -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 '
|
|
8
|
-
import { trackNavClickEvent } from '
|
|
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
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { trackNavClickEvent } from '
|
|
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'
|
|
@@ -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 '
|
|
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
|
|
17
|
-
import HashiCorpLogoOnDark from '@web
|
|
18
|
-
import HCPLogoOnLight from '@web
|
|
19
|
-
import HCPLogoOnDark from '@web
|
|
20
|
-
import WaypointLogoAttrOnLight from '@web
|
|
21
|
-
import WaypointLogoAttrOnDark from '@web
|
|
22
|
-
import HCPTerraformLogoOnLight from '@web
|
|
23
|
-
import HCPTerraformLogoOnDark from '@web
|
|
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
|
|
2
|
-
import consul from '@web
|
|
3
|
-
import nomad from '@web
|
|
4
|
-
import packer from '@web
|
|
5
|
-
import terraform from '@web
|
|
6
|
-
import vagrant from '@web
|
|
7
|
-
import vault from '@web
|
|
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
|
|
2
|
-
import consul from '@web
|
|
3
|
-
import nomad from '@web
|
|
4
|
-
import packer from '@web
|
|
5
|
-
import terraform from '@web
|
|
6
|
-
import vagrant from '@web
|
|
7
|
-
import vault from '@web
|
|
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 }
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import boundary from '@web
|
|
2
|
-
import consul from '@web
|
|
3
|
-
import nomad from '@web
|
|
4
|
-
import packer from '@web
|
|
5
|
-
import terraform from '@web
|
|
6
|
-
import vagrant from '@web
|
|
7
|
-
import vault from '@web
|
|
8
|
-
import waypoint from '@web
|
|
9
|
-
import hashiconf from '@web
|
|
10
|
-
import hashidays from '@web
|
|
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,
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import boundary from '@web
|
|
2
|
-
import consul from '@web
|
|
3
|
-
import nomad from '@web
|
|
4
|
-
import packer from '@web
|
|
5
|
-
import terraform from '@web
|
|
6
|
-
import vagrant from '@web
|
|
7
|
-
import vault from '@web
|
|
8
|
-
import waypoint from '@web
|
|
9
|
-
import hashiconf from '@web
|
|
10
|
-
import hashidays from '@web
|
|
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,
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { parseUrl } from '.'
|
|
2
|
+
|
|
3
|
+
describe('parseUrl', () => {
|
|
4
|
+
it('handles internal urls', () => {
|
|
5
|
+
const url = parseUrl('https://hashicorp.com/example')
|
|
6
|
+
expect(url.href).toBe('/example')
|
|
7
|
+
expect(url.linkType).toBe('inbound')
|
|
8
|
+
})
|
|
9
|
+
|
|
10
|
+
it('handles external urls', () => {
|
|
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('handles relative urls', () => {
|
|
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('handles search params', () => {
|
|
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
|
+
})
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
export function parseUrl(url: string): {
|
|
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
|
+
url.startsWith('https://hashicorp.com') ||
|
|
31
|
+
url.startsWith('https://www.hashicorp.com')
|
|
@@ -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
|
+
}
|