@hashicorp/react-components 0.0.0-nightly.97eb452 → 0.0.0-nightly.9b938f4
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 +1 -1
- package/src/components/card/resource-card/index.tsx +3 -0
- package/src/components/marketo-form/types.ts +5 -11
- package/src/components/nav-panel/components/link-list/index.tsx +8 -3
- package/src/components/nav-panel/components/promo/index.tsx +5 -2
- package/src/components/nav-panel/product-panel/index.tsx +10 -5
- package/src/components/nav-panel/standard-panel/index.tsx +3 -0
- package/src/components/subnav/index.tsx +5 -0
- package/src/components/subnav/partials/MenuItemsDefault/index.tsx +14 -5
- package/src/components/subnav/partials/MenuItemsOverflow/index.tsx +11 -2
- package/src/components/subnav/partials/TitleLink/index.tsx +4 -2
- package/src/components/subnav/style.module.css +1 -1
- package/src/lib/get-localized-link-props/index.test.ts +30 -0
- package/src/lib/get-localized-link-props/index.ts +45 -0
- package/src/lib/parse-url/index.test.ts +30 -1
- package/src/lib/parse-url/index.ts +73 -8
- package/src/lib/supported-locales/index.ts +1 -0
package/package.json
CHANGED
|
@@ -13,6 +13,7 @@ export interface ResourceCardProps {
|
|
|
13
13
|
link: string
|
|
14
14
|
productBadges?: CardProps['productBadges']
|
|
15
15
|
thumbnail: ThumbnailProps
|
|
16
|
+
isExternal?: CardProps['isExternal']
|
|
16
17
|
}
|
|
17
18
|
|
|
18
19
|
export function ResourceCard({
|
|
@@ -22,6 +23,7 @@ export function ResourceCard({
|
|
|
22
23
|
link,
|
|
23
24
|
productBadges,
|
|
24
25
|
thumbnail,
|
|
26
|
+
isExternal,
|
|
25
27
|
}: ResourceCardProps) {
|
|
26
28
|
const meta: string[] = date ? [date, category] : [category]
|
|
27
29
|
|
|
@@ -32,6 +34,7 @@ export function ResourceCard({
|
|
|
32
34
|
meta={meta}
|
|
33
35
|
productBadges={productBadges}
|
|
34
36
|
thumbnail={thumbnail}
|
|
37
|
+
isExternal={isExternal}
|
|
35
38
|
/>
|
|
36
39
|
)
|
|
37
40
|
}
|
|
@@ -15,6 +15,7 @@ export type MarketoFormDatatype =
|
|
|
15
15
|
| 'hidden'
|
|
16
16
|
| 'htmltext'
|
|
17
17
|
| 'radioButtons'
|
|
18
|
+
| 'fieldset'
|
|
18
19
|
|
|
19
20
|
export interface Autofill {
|
|
20
21
|
value: string
|
|
@@ -41,7 +42,7 @@ export interface MarketoBaseFormField {
|
|
|
41
42
|
columnNumber: number
|
|
42
43
|
defaultValue?: string
|
|
43
44
|
label?: string
|
|
44
|
-
required
|
|
45
|
+
required?: boolean
|
|
45
46
|
validationMessage?: string
|
|
46
47
|
autoFill?: Autofill
|
|
47
48
|
visibilityRules?: VisibilityRules
|
|
@@ -106,12 +107,9 @@ export interface MarketoFormHiddenField extends MarketoBaseFormField {
|
|
|
106
107
|
dataType: 'hidden'
|
|
107
108
|
}
|
|
108
109
|
|
|
109
|
-
export interface MarketoFormHtmltextField {
|
|
110
|
-
id: string
|
|
111
|
-
labelWidth: number
|
|
110
|
+
export interface MarketoFormHtmltextField extends MarketoBaseFormField {
|
|
112
111
|
dataType: 'htmltext'
|
|
113
|
-
|
|
114
|
-
columnNumber: number
|
|
112
|
+
labelWidth: number
|
|
115
113
|
visibilityRules?: VisibilityRules
|
|
116
114
|
text: string
|
|
117
115
|
}
|
|
@@ -125,12 +123,8 @@ export interface MarketoFormRadioButtonsField extends MarketoBaseFormField {
|
|
|
125
123
|
}
|
|
126
124
|
}
|
|
127
125
|
|
|
128
|
-
export interface MarketoFormFieldset {
|
|
129
|
-
id: string
|
|
130
|
-
label?: string
|
|
126
|
+
export interface MarketoFormFieldset extends MarketoBaseFormField {
|
|
131
127
|
dataType: 'fieldset'
|
|
132
|
-
rowNumber: number
|
|
133
|
-
columnNumber: number
|
|
134
128
|
visibilityRules?: VisibilityRules
|
|
135
129
|
fields: Array<string>
|
|
136
130
|
}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import Link from 'next/link'
|
|
2
|
-
import { parseUrl } from '../../../../lib/parse-url'
|
|
3
2
|
import { vercelSplit } from '../../../../lib/v'
|
|
3
|
+
import { getLocalizedLinkProps } from '../../../../lib/get-localized-link-props'
|
|
4
4
|
import FlightIcon from '@hashicorp/react-hds/src/components/flight-icon'
|
|
5
5
|
import * as NavigationMenu from '@radix-ui/react-navigation-menu'
|
|
6
6
|
import s from './style.module.css'
|
|
7
7
|
|
|
8
8
|
export interface LinkListProps {
|
|
9
|
+
locale?: string
|
|
9
10
|
links: {
|
|
10
11
|
title: string
|
|
11
12
|
url: string
|
|
@@ -37,7 +38,11 @@ const GRADIENT_VALUE_MAP = new Map([
|
|
|
37
38
|
],
|
|
38
39
|
])
|
|
39
40
|
|
|
40
|
-
export default function LinkList({
|
|
41
|
+
export default function LinkList({
|
|
42
|
+
locale,
|
|
43
|
+
links,
|
|
44
|
+
linkClickHandler,
|
|
45
|
+
}: LinkListProps) {
|
|
41
46
|
return (
|
|
42
47
|
<ul className={s.linkList}>
|
|
43
48
|
{links.map((link) => {
|
|
@@ -54,7 +59,7 @@ export default function LinkList({ links, linkClickHandler }: LinkListProps) {
|
|
|
54
59
|
<NavigationMenu.Link asChild>
|
|
55
60
|
<Link
|
|
56
61
|
className={s.link}
|
|
57
|
-
|
|
62
|
+
{...getLocalizedLinkProps(link.url, locale)}
|
|
58
63
|
onClickCapture={() => {
|
|
59
64
|
linkClickHandler && linkClickHandler(link.title, link.url)
|
|
60
65
|
}}
|
|
@@ -2,13 +2,14 @@ import { useCallback } from 'react'
|
|
|
2
2
|
import classNames from 'classnames'
|
|
3
3
|
import { vercelSplit } from '../../../../lib/v'
|
|
4
4
|
import Link from 'next/link'
|
|
5
|
-
import {
|
|
5
|
+
import { getLocalizedLinkProps } from '../../../../lib/get-localized-link-props'
|
|
6
6
|
import { trackNavClickEvent } from '../../../../lib/track-nav-click-event'
|
|
7
7
|
import FlightIcon from '@hashicorp/react-hds/src/components/flight-icon'
|
|
8
8
|
import * as NavigationMenu from '@radix-ui/react-navigation-menu'
|
|
9
9
|
import s from './style.module.css'
|
|
10
10
|
|
|
11
11
|
export interface PromoProps {
|
|
12
|
+
locale?: string
|
|
12
13
|
title: string
|
|
13
14
|
description: string
|
|
14
15
|
linkUrl: string
|
|
@@ -20,6 +21,7 @@ export interface PromoProps {
|
|
|
20
21
|
}
|
|
21
22
|
|
|
22
23
|
export default function Promo({
|
|
24
|
+
locale,
|
|
23
25
|
title,
|
|
24
26
|
description,
|
|
25
27
|
linkUrl,
|
|
@@ -72,7 +74,8 @@ export default function Promo({
|
|
|
72
74
|
</div>
|
|
73
75
|
<NavigationMenu.Link asChild>
|
|
74
76
|
<Link
|
|
75
|
-
|
|
77
|
+
locale={locale ? locale : undefined}
|
|
78
|
+
{...getLocalizedLinkProps(linkUrl, locale)}
|
|
76
79
|
className={s.link}
|
|
77
80
|
onClickCapture={() => handleClick(title, linkUrl, linkTitle, slug)}
|
|
78
81
|
>
|
|
@@ -2,10 +2,10 @@ import classNames from 'classnames'
|
|
|
2
2
|
import Link from 'next/link'
|
|
3
3
|
import * as NavPanel from '../components/panel'
|
|
4
4
|
import Promo, { type PromoProps } from '../components/promo'
|
|
5
|
+
import { getLocalizedLinkProps } from '../../../lib/get-localized-link-props'
|
|
5
6
|
import { Products } from '@hashicorp/platform-product-meta'
|
|
6
7
|
import FlightIcon from '@hashicorp/react-hds/src/components/flight-icon'
|
|
7
8
|
import { TextPlus } from '@hashicorp/react-hds/src/components/text'
|
|
8
|
-
import { parseUrl } from '../../../lib/parse-url'
|
|
9
9
|
import { trackNavClickEvent } from '../../../lib/track-nav-click-event'
|
|
10
10
|
import * as NavigationMenu from '@radix-ui/react-navigation-menu'
|
|
11
11
|
import s from './style.module.css'
|
|
@@ -30,6 +30,7 @@ const PRODUCT_LOGO_EXCEPTION_CLASSNAMES = {
|
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
export interface ProductsPanelProps {
|
|
33
|
+
locale: string
|
|
33
34
|
productCategories: any
|
|
34
35
|
promo?: PromoProps
|
|
35
36
|
sidePanel?: {
|
|
@@ -44,6 +45,7 @@ export interface ProductsPanelProps {
|
|
|
44
45
|
}
|
|
45
46
|
|
|
46
47
|
const ProductPanel = ({
|
|
48
|
+
locale,
|
|
47
49
|
productCategories,
|
|
48
50
|
promo,
|
|
49
51
|
sidePanel,
|
|
@@ -67,7 +69,7 @@ const ProductPanel = ({
|
|
|
67
69
|
{products.map((product) => {
|
|
68
70
|
return (
|
|
69
71
|
<li key={product.url}>
|
|
70
|
-
<NavProduct {...product} />
|
|
72
|
+
<NavProduct locale={locale} {...product} />
|
|
71
73
|
</li>
|
|
72
74
|
)
|
|
73
75
|
})}
|
|
@@ -97,7 +99,8 @@ const ProductPanel = ({
|
|
|
97
99
|
<li key={title}>
|
|
98
100
|
<Link
|
|
99
101
|
aria-label={`${title} - ${description}`}
|
|
100
|
-
|
|
102
|
+
{...getLocalizedLinkProps(url, locale)}
|
|
103
|
+
locale={locale ? locale : undefined}
|
|
101
104
|
className={classNames(s.sidePanelItem, s.focusIndicator)}
|
|
102
105
|
>
|
|
103
106
|
<div className={s.iconBackground}>
|
|
@@ -125,17 +128,19 @@ const ProductPanel = ({
|
|
|
125
128
|
}
|
|
126
129
|
|
|
127
130
|
export interface NavProductProps {
|
|
131
|
+
locale?: string
|
|
128
132
|
url: string
|
|
129
133
|
product: Products | string
|
|
130
134
|
description: string
|
|
131
135
|
}
|
|
132
136
|
|
|
133
|
-
function NavProduct({ url, product, description }: NavProductProps) {
|
|
137
|
+
function NavProduct({ locale, url, product, description }: NavProductProps) {
|
|
134
138
|
return (
|
|
135
139
|
<NavigationMenu.Link asChild>
|
|
136
140
|
<Link
|
|
137
141
|
aria-label={`${product} - ${description}`}
|
|
138
|
-
|
|
142
|
+
{...getLocalizedLinkProps(url, locale)}
|
|
143
|
+
locale={locale ? locale : undefined}
|
|
139
144
|
onClickCapture={() => {
|
|
140
145
|
trackNavClickEvent(product, url, 'products')
|
|
141
146
|
}}
|
|
@@ -12,12 +12,14 @@ interface StandardPanelProps {
|
|
|
12
12
|
navData: NavItem[]
|
|
13
13
|
promo?: PromoProps
|
|
14
14
|
sectionName?: string
|
|
15
|
+
locale?: any
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
const StandardPanel = ({
|
|
18
19
|
navData,
|
|
19
20
|
promo,
|
|
20
21
|
sectionName = '',
|
|
22
|
+
locale,
|
|
21
23
|
}: StandardPanelProps) => {
|
|
22
24
|
return (
|
|
23
25
|
<NavPanel.Root>
|
|
@@ -26,6 +28,7 @@ const StandardPanel = ({
|
|
|
26
28
|
return (
|
|
27
29
|
<NavPanel.Column key={stableIdx}>
|
|
28
30
|
<LinkList
|
|
31
|
+
locale={locale}
|
|
29
32
|
links={navItems}
|
|
30
33
|
linkClickHandler={(text, href) => {
|
|
31
34
|
trackNavClickEvent(text, href, sectionName)
|
|
@@ -46,6 +46,7 @@ type SubnavDropdown = {
|
|
|
46
46
|
type MenuItem = SubnavLink | SubnavDropdown | 'divider'
|
|
47
47
|
|
|
48
48
|
export interface SubnavInnerProps {
|
|
49
|
+
locale?: string
|
|
49
50
|
hasOverflow?: boolean
|
|
50
51
|
titleLink: { text: string; url: string }
|
|
51
52
|
product?: Products
|
|
@@ -61,6 +62,7 @@ export interface SubnavInnerProps {
|
|
|
61
62
|
}
|
|
62
63
|
|
|
63
64
|
function SubnavInner({
|
|
65
|
+
locale,
|
|
64
66
|
hasOverflow,
|
|
65
67
|
titleLink,
|
|
66
68
|
product,
|
|
@@ -109,17 +111,20 @@ function SubnavInner({
|
|
|
109
111
|
>
|
|
110
112
|
<NavigationMenu.Link asChild>
|
|
111
113
|
<TitleLink
|
|
114
|
+
locale={locale}
|
|
112
115
|
text={titleLink.text}
|
|
113
116
|
url={titleLink.url}
|
|
114
117
|
product={product}
|
|
115
118
|
theme={theme}
|
|
116
119
|
/>
|
|
117
120
|
</NavigationMenu.Link>
|
|
121
|
+
|
|
118
122
|
{!hasOverflow && (
|
|
119
123
|
<div className={s.subNavRight}>
|
|
120
124
|
<MenuItemsDefault
|
|
121
125
|
menuItems={menuItemsWithActive}
|
|
122
126
|
activatePanel={activatePanel}
|
|
127
|
+
locale={locale}
|
|
123
128
|
/>
|
|
124
129
|
{ctaLinks?.length > 0 && (
|
|
125
130
|
<CtaLinks
|
|
@@ -10,6 +10,7 @@ import DropdownTrigger from '../DropdownTrigger'
|
|
|
10
10
|
import * as NavigationMenu from '@radix-ui/react-navigation-menu'
|
|
11
11
|
import s from './style.module.css'
|
|
12
12
|
import FlightIcon from '@hashicorp/react-hds/src/components/flight-icon'
|
|
13
|
+
import { getLocalizedLinkProps } from '../../../../lib/get-localized-link-props'
|
|
13
14
|
|
|
14
15
|
interface MenuItemsDefaultProps {
|
|
15
16
|
menuItems: (
|
|
@@ -27,10 +28,11 @@ interface MenuItemsDefaultProps {
|
|
|
27
28
|
| 'divider'
|
|
28
29
|
)[]
|
|
29
30
|
activatePanel: (panel: string) => void
|
|
31
|
+
locale?: string
|
|
30
32
|
}
|
|
31
33
|
|
|
32
34
|
function MenuItemsDefault(props: MenuItemsDefaultProps) {
|
|
33
|
-
const { menuItems, activatePanel } = props
|
|
35
|
+
const { menuItems, activatePanel, locale } = props
|
|
34
36
|
return (
|
|
35
37
|
<NavigationMenu.List className={s.root}>
|
|
36
38
|
{menuItems.map((menuItem, stableIdx) => {
|
|
@@ -47,6 +49,7 @@ function MenuItemsDefault(props: MenuItemsDefaultProps) {
|
|
|
47
49
|
text={text}
|
|
48
50
|
submenu={submenu}
|
|
49
51
|
activatePanel={activatePanel}
|
|
52
|
+
locale={locale}
|
|
50
53
|
/>
|
|
51
54
|
) : (
|
|
52
55
|
<NavLink
|
|
@@ -56,6 +59,7 @@ function MenuItemsDefault(props: MenuItemsDefaultProps) {
|
|
|
56
59
|
text={text}
|
|
57
60
|
url={url}
|
|
58
61
|
isActive={_isActiveUrl}
|
|
62
|
+
locale={locale}
|
|
59
63
|
/>
|
|
60
64
|
)
|
|
61
65
|
})}
|
|
@@ -75,14 +79,15 @@ interface NavLinkProps {
|
|
|
75
79
|
text: string
|
|
76
80
|
url: string
|
|
77
81
|
isActive: boolean
|
|
82
|
+
locale?: string
|
|
78
83
|
}
|
|
79
84
|
|
|
80
85
|
function NavLink(props: NavLinkProps) {
|
|
81
|
-
const { text, url, isActive } = props
|
|
86
|
+
const { text, url, isActive, locale } = props
|
|
82
87
|
return (
|
|
83
88
|
<NavigationMenu.Item className={s.listItem}>
|
|
84
89
|
<NavigationMenu.Link asChild>
|
|
85
|
-
<Link className={s.navLink}
|
|
90
|
+
<Link className={s.navLink} {...getLocalizedLinkProps(url, locale)}>
|
|
86
91
|
<NavItemText isActive={isActive} text={text} />
|
|
87
92
|
</Link>
|
|
88
93
|
</NavigationMenu.Link>
|
|
@@ -94,6 +99,7 @@ interface NavLinkWithDropdownProps {
|
|
|
94
99
|
text: string
|
|
95
100
|
submenu: { icon: string; text: string; url: string; _isActiveUrl: string }[]
|
|
96
101
|
activatePanel: (panel: string) => void
|
|
102
|
+
locale?: string
|
|
97
103
|
}
|
|
98
104
|
|
|
99
105
|
interface NavLinkWithDropdownState {
|
|
@@ -105,7 +111,7 @@ class NavLinkWithDropdown extends React.Component<
|
|
|
105
111
|
NavLinkWithDropdownState
|
|
106
112
|
> {
|
|
107
113
|
render() {
|
|
108
|
-
const { text, submenu, activatePanel } = this.props
|
|
114
|
+
const { text, submenu, activatePanel, locale } = this.props
|
|
109
115
|
const hasActiveChild = submenu.some((s) => s._isActiveUrl)
|
|
110
116
|
|
|
111
117
|
const handleFocusOutside = () => {
|
|
@@ -139,7 +145,10 @@ class NavLinkWithDropdown extends React.Component<
|
|
|
139
145
|
// eslint-disable-next-line react/no-array-index-key
|
|
140
146
|
<NavigationMenu.Item key={stableIdx}>
|
|
141
147
|
<NavigationMenu.Link asChild>
|
|
142
|
-
<Link
|
|
148
|
+
<Link
|
|
149
|
+
className={s.submenuItem}
|
|
150
|
+
{...getLocalizedLinkProps(url, locale)}
|
|
151
|
+
>
|
|
143
152
|
{icon ? <FlightIcon name={icon} /> : null}
|
|
144
153
|
{text}
|
|
145
154
|
</Link>
|
|
@@ -13,6 +13,7 @@ import * as NavigationMenu from '@radix-ui/react-navigation-menu'
|
|
|
13
13
|
import classNames from 'classnames'
|
|
14
14
|
import s from './style.module.css'
|
|
15
15
|
import FlightIcon from '@hashicorp/react-hds/src/components/flight-icon'
|
|
16
|
+
import { getLocalizedLinkProps } from '../../../../lib/get-localized-link-props'
|
|
16
17
|
|
|
17
18
|
interface MenuItemsOverflowProps {
|
|
18
19
|
menuItems: (
|
|
@@ -29,6 +30,7 @@ interface MenuItemsOverflowProps {
|
|
|
29
30
|
menuText: string
|
|
30
31
|
constrainWidth?: boolean
|
|
31
32
|
activatePanel: (panel: string) => void
|
|
33
|
+
locale?: string
|
|
32
34
|
}
|
|
33
35
|
|
|
34
36
|
interface MenuItemsOverflowState {
|
|
@@ -48,6 +50,7 @@ class MenuItemsOverflow extends React.Component<
|
|
|
48
50
|
menuText,
|
|
49
51
|
constrainWidth,
|
|
50
52
|
activatePanel,
|
|
53
|
+
locale,
|
|
51
54
|
} = this.props
|
|
52
55
|
|
|
53
56
|
const handleFocusOutside = () => {
|
|
@@ -91,6 +94,7 @@ class MenuItemsOverflow extends React.Component<
|
|
|
91
94
|
url={subItem.url}
|
|
92
95
|
text={subItem.text}
|
|
93
96
|
icon={subItem.icon}
|
|
97
|
+
locale={locale}
|
|
94
98
|
/>
|
|
95
99
|
))}
|
|
96
100
|
<hr className={s.divider} />
|
|
@@ -125,13 +129,18 @@ interface SubmenuItemProps {
|
|
|
125
129
|
icon?: string
|
|
126
130
|
url: string
|
|
127
131
|
text: string
|
|
132
|
+
locale?: string
|
|
128
133
|
}
|
|
129
134
|
|
|
130
|
-
function SubmenuItem({ icon, url, text }: SubmenuItemProps) {
|
|
135
|
+
function SubmenuItem({ icon, url, text, locale }: SubmenuItemProps) {
|
|
131
136
|
return (
|
|
132
137
|
<li>
|
|
133
138
|
<NavigationMenu.Link asChild>
|
|
134
|
-
<Link
|
|
139
|
+
<Link
|
|
140
|
+
className={s.submenuItem}
|
|
141
|
+
title={vercelSplit(text)}
|
|
142
|
+
{...getLocalizedLinkProps(url, locale)}
|
|
143
|
+
>
|
|
135
144
|
{icon ? <FlightIcon name={icon} /> : null}
|
|
136
145
|
{text}
|
|
137
146
|
</Link>
|
|
@@ -22,6 +22,7 @@ import WaypointLogoAttrOnDark from '@hashicorp/web-mktg-logos/src/waypoint/hashi
|
|
|
22
22
|
import HCPTerraformLogoOnLight from '@hashicorp/web-mktg-logos/src/terraform/hcp-terraform/hcp-terraform_on-light.svg'
|
|
23
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
|
+
import { getLocalizedLinkProps } from '../../../../lib/get-localized-link-props'
|
|
25
26
|
|
|
26
27
|
const logoDict = {
|
|
27
28
|
light: {
|
|
@@ -41,6 +42,7 @@ const logoDict = {
|
|
|
41
42
|
}
|
|
42
43
|
|
|
43
44
|
interface TitleLinkProps {
|
|
45
|
+
locale?: string
|
|
44
46
|
text: string
|
|
45
47
|
url: string
|
|
46
48
|
product?: string
|
|
@@ -80,7 +82,7 @@ function getLogo(
|
|
|
80
82
|
}
|
|
81
83
|
|
|
82
84
|
const TitleLink = forwardRef<HTMLAnchorElement, TitleLinkProps>(
|
|
83
|
-
({ text, url, product, theme }, ref) => {
|
|
85
|
+
({ text, url, product, theme, locale }, ref) => {
|
|
84
86
|
const parsedText = vercelSplit(text)
|
|
85
87
|
const Logo = getLogo(parsedText, theme)
|
|
86
88
|
|
|
@@ -91,9 +93,9 @@ const TitleLink = forwardRef<HTMLAnchorElement, TitleLinkProps>(
|
|
|
91
93
|
s[`brand-${product}`],
|
|
92
94
|
s[camelCase(parsedText)]
|
|
93
95
|
)}
|
|
94
|
-
href={url}
|
|
95
96
|
title={parsedText}
|
|
96
97
|
ref={ref}
|
|
98
|
+
{...getLocalizedLinkProps(url, locale)}
|
|
97
99
|
>
|
|
98
100
|
{Logo ? (
|
|
99
101
|
<Image
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { getLocalizedLinkProps } from '.'
|
|
2
|
+
|
|
3
|
+
describe('getLocalizedLinkProps', () => {
|
|
4
|
+
it('does not format localized homepage', () => {
|
|
5
|
+
const localizedLinkProps = getLocalizedLinkProps('/en', 'ja')
|
|
6
|
+
expect(localizedLinkProps.href).toBe('/en')
|
|
7
|
+
expect(localizedLinkProps.hrefLang).toBe('en')
|
|
8
|
+
})
|
|
9
|
+
|
|
10
|
+
it('does not format localized path hrefs', () => {
|
|
11
|
+
const localizedLinkProps = getLocalizedLinkProps('/ja/solutions', 'de')
|
|
12
|
+
expect(localizedLinkProps.href).toBe('/ja/solutions')
|
|
13
|
+
expect(localizedLinkProps.hrefLang).toBe('ja')
|
|
14
|
+
})
|
|
15
|
+
|
|
16
|
+
it('does format paths that start with a locale string', () => {
|
|
17
|
+
const localizedLinkProps = getLocalizedLinkProps(
|
|
18
|
+
'/deconstructing-cloud',
|
|
19
|
+
'en'
|
|
20
|
+
)
|
|
21
|
+
expect(localizedLinkProps.href).toBe('/en/deconstructing-cloud')
|
|
22
|
+
expect(localizedLinkProps.hrefLang).toBe('en')
|
|
23
|
+
})
|
|
24
|
+
|
|
25
|
+
it('does not format external paths', () => {
|
|
26
|
+
const localizedLinkProps = getLocalizedLinkProps('https://google.com', 'ja')
|
|
27
|
+
expect(localizedLinkProps.href).toBe('https://google.com')
|
|
28
|
+
expect(localizedLinkProps.hrefLang).toBe(undefined)
|
|
29
|
+
})
|
|
30
|
+
})
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { parseUrl } from '../parse-url'
|
|
2
|
+
import { allSupportedLocales } from '../supported-locales'
|
|
3
|
+
|
|
4
|
+
export const getLocalizedLinkProps = (
|
|
5
|
+
url: string,
|
|
6
|
+
locale?: string
|
|
7
|
+
): {
|
|
8
|
+
href: string
|
|
9
|
+
hrefLang: string | undefined
|
|
10
|
+
} => {
|
|
11
|
+
const parsedHref = parseUrl(url).href
|
|
12
|
+
|
|
13
|
+
// example: /en
|
|
14
|
+
const hrefIsLocalizedHomepage = allSupportedLocales.includes(
|
|
15
|
+
parsedHref.substring(1)
|
|
16
|
+
)
|
|
17
|
+
|
|
18
|
+
// true example: /en/solutions
|
|
19
|
+
// false example: /entry-point
|
|
20
|
+
const hrefIsLocalized =
|
|
21
|
+
allSupportedLocales.includes(parsedHref.substring(1, 3)) &&
|
|
22
|
+
parsedHref[3] === '/'
|
|
23
|
+
|
|
24
|
+
// If the href is already localized:
|
|
25
|
+
// - do not format the href
|
|
26
|
+
// - use the locale from the href for the hrefLang
|
|
27
|
+
if (hrefIsLocalizedHomepage || hrefIsLocalized) {
|
|
28
|
+
return {
|
|
29
|
+
href: parsedHref,
|
|
30
|
+
hrefLang: parsedHref.substring(1, 3),
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
if (parsedHref.startsWith('/') && locale) {
|
|
35
|
+
return {
|
|
36
|
+
href: `/${locale}${parsedHref}`,
|
|
37
|
+
hrefLang: locale,
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
return {
|
|
42
|
+
href: parsedHref,
|
|
43
|
+
hrefLang: undefined,
|
|
44
|
+
}
|
|
45
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { parseUrl } from '.'
|
|
1
|
+
import { parseUrl, hasHashiCorpDestination } from '.'
|
|
2
2
|
|
|
3
3
|
describe('parseUrl', () => {
|
|
4
4
|
it('detects hashicorp.com URLs as internal', () => {
|
|
@@ -7,6 +7,12 @@ describe('parseUrl', () => {
|
|
|
7
7
|
expect(url.linkType).toBe('inbound')
|
|
8
8
|
})
|
|
9
9
|
|
|
10
|
+
it('detects www.hashicorp.com URLs as internal', () => {
|
|
11
|
+
const url = parseUrl('https://hashicorp.com/foo')
|
|
12
|
+
expect(url.href).toBe('/foo')
|
|
13
|
+
expect(url.linkType).toBe('inbound')
|
|
14
|
+
})
|
|
15
|
+
|
|
10
16
|
it('detects URLs not containing hashicorp.com as external', () => {
|
|
11
17
|
const externalUrl = 'https://google.com/example'
|
|
12
18
|
const url = parseUrl(externalUrl)
|
|
@@ -38,3 +44,26 @@ describe('parseUrl', () => {
|
|
|
38
44
|
expect(url.href).toBe('https://developer.hashicorp.com/terraform')
|
|
39
45
|
})
|
|
40
46
|
})
|
|
47
|
+
|
|
48
|
+
describe('hasHashiCorpDestination', () => {
|
|
49
|
+
it('returns true for supported hashicorp domains', () => {
|
|
50
|
+
const isHashiCorpDestination = hasHashiCorpDestination(
|
|
51
|
+
'https://portal.cloud.hashicorp.com/foo'
|
|
52
|
+
)
|
|
53
|
+
expect(isHashiCorpDestination).toBe(true)
|
|
54
|
+
})
|
|
55
|
+
it('returns false for external domains', () => {
|
|
56
|
+
const isHashiCorpDestination = hasHashiCorpDestination(
|
|
57
|
+
'https://foo.com/bar'
|
|
58
|
+
)
|
|
59
|
+
expect(isHashiCorpDestination).toBe(false)
|
|
60
|
+
})
|
|
61
|
+
it('returns true for relative links', () => {
|
|
62
|
+
const isHashiCorpDestination = hasHashiCorpDestination('/bar')
|
|
63
|
+
expect(isHashiCorpDestination).toBe(true)
|
|
64
|
+
})
|
|
65
|
+
it('returns true for hashes', () => {
|
|
66
|
+
const isHashiCorpDestination = hasHashiCorpDestination('#someHash')
|
|
67
|
+
expect(isHashiCorpDestination).toBe(true)
|
|
68
|
+
})
|
|
69
|
+
})
|
|
@@ -1,10 +1,47 @@
|
|
|
1
|
+
export const hashicorpDestinations: string[] = [
|
|
2
|
+
'app.terraform.io',
|
|
3
|
+
'boundaryproject.io',
|
|
4
|
+
'cloud.hashicorp.com',
|
|
5
|
+
'consul.io',
|
|
6
|
+
'developer.hashicorp.com',
|
|
7
|
+
'hashicorp.com',
|
|
8
|
+
'nomadproject.io',
|
|
9
|
+
'packer.io',
|
|
10
|
+
'portal.cloud.hashicorp.com',
|
|
11
|
+
'registry.terraform.io',
|
|
12
|
+
'terraform.io',
|
|
13
|
+
'vagrantup.com',
|
|
14
|
+
'vaultproject.io',
|
|
15
|
+
'waypointproject.io',
|
|
16
|
+
] as const
|
|
17
|
+
|
|
18
|
+
const containsHashiCorpDestination = (str: string): boolean =>
|
|
19
|
+
hashicorpDestinations.some(function (destination) {
|
|
20
|
+
return str.indexOf(destination) >= 0
|
|
21
|
+
})
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* This function determines if a `url` is a HashiCorp link (relative URLs, hashes,
|
|
25
|
+
* or a url with a HashiCorp domain) or a non-HashiCorp link.
|
|
26
|
+
*
|
|
27
|
+
* @param {string | undefined} url - The URL to be parsed. It may be a relative URL, an anchor, or a full external/internal URL.
|
|
28
|
+
*
|
|
29
|
+
* @returns {{ linkType: 'inbound' | 'outbound', href: string }}
|
|
30
|
+
* An object with two properties:
|
|
31
|
+
* - `linkType`: Indicates whether the URL is 'inbound' or 'outbound'. Can be used to conditionally
|
|
32
|
+
* render the value of the target attribute.
|
|
33
|
+
* - `href`: The parsed href (may include pathname, search, and hash for internal URLs).
|
|
34
|
+
*
|
|
35
|
+
* @throws {Error} Throws an error if the URL is undefined or invalid.
|
|
36
|
+
*/
|
|
37
|
+
|
|
1
38
|
export function parseUrl(url: string | undefined): {
|
|
2
|
-
linkType: 'inbound' | 'outbound'
|
|
39
|
+
linkType: 'inbound' | 'outbound' | ''
|
|
3
40
|
href: string
|
|
4
41
|
} {
|
|
5
42
|
if (!url) {
|
|
6
|
-
console.log('url
|
|
7
|
-
return { linkType: '
|
|
43
|
+
console.log('No url to parse, returning empty string')
|
|
44
|
+
return { linkType: '', href: '' }
|
|
8
45
|
}
|
|
9
46
|
|
|
10
47
|
if (isRelative(url) || isAnchor(url)) {
|
|
@@ -18,17 +55,45 @@ export function parseUrl(url: string | undefined): {
|
|
|
18
55
|
return { linkType: 'inbound', href }
|
|
19
56
|
} catch (error) {
|
|
20
57
|
console.log(`Invalid href: ${url}`)
|
|
21
|
-
return { linkType: '
|
|
58
|
+
return { linkType: '', href: '' }
|
|
22
59
|
}
|
|
23
60
|
}
|
|
24
61
|
|
|
25
62
|
return { linkType: 'outbound', href: url }
|
|
26
63
|
}
|
|
27
64
|
|
|
28
|
-
const isRelative = (url) => url.startsWith('/')
|
|
29
|
-
const isAnchor = (url) => url.startsWith('#')
|
|
65
|
+
const isRelative = (url: string) => url.startsWith('/')
|
|
66
|
+
const isAnchor = (url: string) => url.startsWith('#')
|
|
67
|
+
|
|
68
|
+
/**
|
|
69
|
+
* Determines whether the provided url uses hashicorp.com or www.hashicorp.com as the hostname.
|
|
70
|
+
*
|
|
71
|
+
* @param {string} url - The URL to check.
|
|
72
|
+
* @returns {boolean} - Returns true if the link uses a HashiCorp domain, otherwise false.
|
|
73
|
+
*/
|
|
30
74
|
|
|
31
|
-
export const isInternal = (url) => {
|
|
75
|
+
export const isInternal = (url: string): boolean => {
|
|
32
76
|
const hostname = new URL(url).hostname
|
|
33
|
-
return hostname === 'hashicorp.com'
|
|
77
|
+
return hostname === 'hashicorp.com' || hostname === 'www.hashicorp.com'
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/**
|
|
81
|
+
* Determines whether the provided url uses a HashiCorp hostname. This is used in several
|
|
82
|
+
* components to open a new tab for non-HashiCorp links.
|
|
83
|
+
*
|
|
84
|
+
* @param {string} url - The URL to check.
|
|
85
|
+
* @returns {boolean} - Returns true if the link uses a HashiCorp domain, otherwise false.
|
|
86
|
+
*/
|
|
87
|
+
|
|
88
|
+
export const hasHashiCorpDestination = (url: string): boolean => {
|
|
89
|
+
// Fast return in case a relative URL or anchor is passed in
|
|
90
|
+
if (isRelative(url) || isAnchor(url)) return true
|
|
91
|
+
try {
|
|
92
|
+
const hostname = new URL(url).hostname
|
|
93
|
+
const isHashiCorpDestination = containsHashiCorpDestination(hostname)
|
|
94
|
+
return isHashiCorpDestination
|
|
95
|
+
} catch (e) {
|
|
96
|
+
console.error('Error: `url` is not a valid URL', e)
|
|
97
|
+
return false
|
|
98
|
+
}
|
|
34
99
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export const allSupportedLocales = ['en', 'de', 'es', 'fr', 'ja', 'ko', 'pt']
|