@hashicorp/react-components 0.0.0-nightly.f535c63 → 0.0.0-nightly.fa9fc02
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 +2 -2
- package/src/components/actions/index.tsx +2 -2
- package/src/components/call-to-action/index.tsx +3 -3
- package/src/components/card/index.test.tsx +1 -1
- package/src/components/card/newsroom-card/index.test.tsx +1 -1
- package/src/components/card/partner-card/index.tsx +3 -3
- package/src/components/card/person-card/index.tsx +1 -1
- package/src/components/card/primitives.tsx +14 -14
- package/src/components/card/resource-card/index.test.tsx +1 -1
- package/src/components/card/unified-card/index.spec.tsx +40 -0
- package/src/components/card/unified-card/index.tsx +1 -1
- package/src/components/marketo-form/contexts/FormMetadata.ts +2 -0
- package/src/components/marketo-form/form/index.tsx +3 -1
- package/src/components/marketo-form/partials/fields/checkbox-field/index.tsx +1 -1
- package/src/components/marketo-form/partials/fields/email-field/index.tsx +1 -1
- package/src/components/marketo-form/partials/fields/form-page-url-field/index.tsx +2 -0
- package/src/components/marketo-form/partials/fields/hidden-field/index.tsx +1 -0
- package/src/components/marketo-form/partials/fields/radio-buttons-field/index.tsx +1 -1
- package/src/components/marketo-form/partials/fields/select-field/index.tsx +1 -1
- package/src/components/marketo-form/partials/fields/telephone-field/index.tsx +1 -1
- package/src/components/marketo-form/partials/fields/text-field/index.tsx +1 -1
- package/src/components/marketo-form/partials/fields/textarea-field/index.tsx +1 -1
- package/src/components/nav-panel/components/link-list/index.tsx +1 -1
- package/src/components/nav-panel/components/promo/index.tsx +1 -1
- package/src/components/nav-panel/product-panel/index.tsx +2 -2
- package/src/components/next-steps/index.tsx +2 -1
- package/src/components/product-badge/index.tsx +1 -1
- package/src/components/subnav/index.tsx +5 -1
- package/src/components/subnav/partials/CtaLinks/index.tsx +4 -4
- package/src/components/subnav/partials/DropdownTrigger/index.tsx +1 -1
- package/src/components/subnav/partials/MenuItemsDefault/index.tsx +1 -1
- package/src/components/subnav/partials/MenuItemsOverflow/index.tsx +1 -1
- package/src/lib/parse-url/index.test.ts +5 -0
- package/src/lib/parse-url/index.ts +2 -2
- package/src/components/consent-manager/README.md +0 -73
- package/src/components/consent-manager/components/banner/banner.module.css +0 -23
- package/src/components/consent-manager/components/banner/banner.test.tsx +0 -31
- package/src/components/consent-manager/components/banner/banner.tsx +0 -73
- package/src/components/consent-manager/components/dialog/dialog.module.css +0 -145
- package/src/components/consent-manager/components/dialog/dialog.test.tsx +0 -194
- package/src/components/consent-manager/components/dialog/dialog.tsx +0 -339
- package/src/components/consent-manager/img/icn_close.tsx +0 -19
- package/src/components/consent-manager/index.test.tsx +0 -334
- package/src/components/consent-manager/index.tsx +0 -186
- package/src/components/consent-manager/loader/README.md +0 -29
- package/src/components/consent-manager/loader/categories.ts +0 -22
- package/src/components/consent-manager/loader/index.tsx +0 -94
- package/src/components/consent-manager/loader/presets/enterprise.ts +0 -12
- package/src/components/consent-manager/loader/presets/oss.ts +0 -10
- package/src/components/consent-manager/loader/services.ts +0 -45
- package/src/components/consent-manager/scripts/custom.tsx +0 -59
- package/src/components/consent-manager/scripts/segment.tsx +0 -87
- package/src/components/consent-manager/style.module.css +0 -9
- package/src/components/consent-manager/types.ts +0 -55
- package/src/components/consent-manager/util/cookies.test.ts +0 -75
- package/src/components/consent-manager/util/cookies.ts +0 -70
- package/src/components/consent-manager/util/integrations.test.ts +0 -115
- package/src/components/consent-manager/util/integrations.ts +0 -110
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hashicorp/react-components",
|
|
3
|
-
"version": "0.0.0-nightly.
|
|
3
|
+
"version": "0.0.0-nightly.fa9fc02",
|
|
4
4
|
"main": "src/index.ts",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"lint": "next-hashicorp lint",
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"@hashicorp/flight-icons": "^3.7.0",
|
|
12
12
|
"@hashicorp/platform-product-meta": "^0.1.1",
|
|
13
13
|
"@hashicorp/platform-util": "^0.2.0",
|
|
14
|
-
"@hashicorp/react-
|
|
14
|
+
"@hashicorp/react-hds": "*",
|
|
15
15
|
"@hashicorp/web-mktg-logos": "*",
|
|
16
16
|
"@radix-ui/react-navigation-menu": "^1.2.0",
|
|
17
17
|
"@radix-ui/react-visually-hidden": "^1.1.0",
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import classNames from 'classnames'
|
|
7
|
-
import Button from '@hashicorp/react-
|
|
8
|
-
import StandaloneLink from '@hashicorp/react-
|
|
7
|
+
import Button from '@hashicorp/react-hds/src/components/button'
|
|
8
|
+
import StandaloneLink from '@hashicorp/react-hds/src/components/standalone-link'
|
|
9
9
|
import { IconArrowRight16 } from '@hashicorp/flight-icons/svg-react/arrow-right-16'
|
|
10
10
|
import { IconArrowRight24 } from '@hashicorp/flight-icons/svg-react/arrow-right-24'
|
|
11
11
|
import type { ActionsProps } from './types'
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import type { ComponentProps, ReactNode } from 'react'
|
|
7
|
-
import Button from '@hashicorp/react-
|
|
8
|
-
import ButtonSet from '@hashicorp/react-
|
|
9
|
-
import StandaloneLink from '@hashicorp/react-
|
|
7
|
+
import Button from '@hashicorp/react-hds/src/components/button'
|
|
8
|
+
import ButtonSet from '@hashicorp/react-hds/src/components/button-set'
|
|
9
|
+
import StandaloneLink from '@hashicorp/react-hds/src/components/standalone-link'
|
|
10
10
|
import { IconArrowRight24 } from '@hashicorp/flight-icons/svg-react/arrow-right-24'
|
|
11
11
|
import { IconExternalLink24 } from '@hashicorp/flight-icons/svg-react/external-link-24'
|
|
12
12
|
import { IconDownload24 } from '@hashicorp/flight-icons/svg-react/download-24'
|
|
@@ -56,7 +56,7 @@ describe('<Card />', () => {
|
|
|
56
56
|
const metaElement = screen.getByTestId('wpl-card-meta')
|
|
57
57
|
|
|
58
58
|
cardMeta.forEach((item) => {
|
|
59
|
-
expect(metaElement).
|
|
59
|
+
expect(metaElement).toHaveTextContent(item)
|
|
60
60
|
})
|
|
61
61
|
expect(metaElement).toContainElement(screen.getByText('|'))
|
|
62
62
|
})
|
|
@@ -26,7 +26,7 @@ describe('<NewsroomCard />', () => {
|
|
|
26
26
|
const metaElement = screen.getByTestId('wpl-card-meta')
|
|
27
27
|
|
|
28
28
|
expectedMeta.forEach((item) => {
|
|
29
|
-
expect(metaElement).
|
|
29
|
+
expect(metaElement).toHaveTextContent(item)
|
|
30
30
|
})
|
|
31
31
|
|
|
32
32
|
expect(metaElement).toContainElement(screen.queryByText('|'))
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import Image, { type ImageProps } from 'next/image'
|
|
7
|
-
import Badge from '@hashicorp/react-
|
|
8
|
-
import FlightIcon from '@hashicorp/react-
|
|
9
|
-
import { TextPlus } from '@hashicorp/react-
|
|
7
|
+
import Badge from '@hashicorp/react-hds/src/components/badge'
|
|
8
|
+
import FlightIcon from '@hashicorp/react-hds/src/components/flight-icon'
|
|
9
|
+
import { TextPlus } from '@hashicorp/react-hds/src/components/text'
|
|
10
10
|
import * as CardPrimitives from '../primitives'
|
|
11
11
|
import type { CardProps } from '../types'
|
|
12
12
|
import s from './style.module.css'
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import { memo, type ReactNode } from 'react'
|
|
7
|
-
import { TextPlus } from '@hashicorp/react-
|
|
7
|
+
import { TextPlus } from '@hashicorp/react-hds/src/components/text'
|
|
8
8
|
import { IconGithub16 } from '@hashicorp/flight-icons/svg-react/github-16'
|
|
9
9
|
import { IconTwitter16 } from '@hashicorp/flight-icons/svg-react/twitter-16'
|
|
10
10
|
import { IconLinkedin16 } from '@hashicorp/flight-icons/svg-react/linkedin-16'
|
|
@@ -7,8 +7,8 @@ import * as React from 'react'
|
|
|
7
7
|
import classNames from 'classnames'
|
|
8
8
|
import Image from 'next/image'
|
|
9
9
|
import Link from 'next/link'
|
|
10
|
-
import HDSCard from '@hashicorp/react-
|
|
11
|
-
import { TextPlus } from '@hashicorp/react-
|
|
10
|
+
import HDSCard from '@hashicorp/react-hds/src/components/card'
|
|
11
|
+
import { TextPlus } from '@hashicorp/react-hds/src/components/text'
|
|
12
12
|
import { IconArrowRight24 } from '@hashicorp/flight-icons/svg-react/arrow-right-24'
|
|
13
13
|
import ProductBadge from '../product-badge'
|
|
14
14
|
import type {
|
|
@@ -101,23 +101,23 @@ function LogoThumbnail({ src, alt }: ThumbnailProps) {
|
|
|
101
101
|
|
|
102
102
|
function Meta({ items }: MetaProps) {
|
|
103
103
|
return (
|
|
104
|
-
<
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
104
|
+
<div className={s.meta} data-testid="wpl-card-meta">
|
|
105
|
+
<TextPlus.Label>
|
|
106
|
+
{items.map((item, stableIdx) => {
|
|
107
|
+
const isLastItem = stableIdx === items.length - 1
|
|
108
|
+
return (
|
|
109
|
+
<>
|
|
110
110
|
{item}
|
|
111
|
-
{
|
|
111
|
+
{!isLastItem ? (
|
|
112
112
|
<span className={s.metaSeparator} aria-hidden={true}>
|
|
113
113
|
|
|
|
114
114
|
</span>
|
|
115
115
|
) : null}
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
)
|
|
119
|
-
|
|
120
|
-
</
|
|
116
|
+
</>
|
|
117
|
+
)
|
|
118
|
+
})}
|
|
119
|
+
</TextPlus.Label>
|
|
120
|
+
</div>
|
|
121
121
|
)
|
|
122
122
|
}
|
|
123
123
|
|
|
@@ -26,7 +26,7 @@ describe('<ResourceCard />', () => {
|
|
|
26
26
|
const metaElement = screen.getByTestId('wpl-card-meta')
|
|
27
27
|
|
|
28
28
|
expectedMeta.forEach((item) => {
|
|
29
|
-
expect(metaElement).
|
|
29
|
+
expect(metaElement).toHaveTextContent(item)
|
|
30
30
|
})
|
|
31
31
|
|
|
32
32
|
expect(metaElement).toContainElement(screen.getByText('|'))
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) HashiCorp, Inc.
|
|
3
|
+
* SPDX-License-Identifier: MPL-2.0
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
import { render, screen } from '@testing-library/react'
|
|
7
|
+
import { UnifiedCard, UnifiedCardProps } from '.'
|
|
8
|
+
|
|
9
|
+
const defaultProps: UnifiedCardProps = {
|
|
10
|
+
link: 'https://hashicorp.com',
|
|
11
|
+
heading: 'Example heading',
|
|
12
|
+
thumbnail: {
|
|
13
|
+
src: 'https://www.datocms-assets.com/19447/1648680074-screenshot-2022-03-31-at-00-40-47.png',
|
|
14
|
+
alt: 'HashiConf Europe 2022 Recap',
|
|
15
|
+
},
|
|
16
|
+
} as const
|
|
17
|
+
|
|
18
|
+
describe(`<UnifiedCard />`, () => {
|
|
19
|
+
it('should render the provided meta with a separator if n > 1', () => {
|
|
20
|
+
const expectedMeta = ['Category', 'Hello']
|
|
21
|
+
render(<UnifiedCard {...defaultProps} meta={expectedMeta} />)
|
|
22
|
+
|
|
23
|
+
const metaElement = screen.getByTestId('wpl-card-meta')
|
|
24
|
+
|
|
25
|
+
expectedMeta.forEach((item) => {
|
|
26
|
+
expect(metaElement).toHaveTextContent(item)
|
|
27
|
+
})
|
|
28
|
+
|
|
29
|
+
expect(metaElement).toContainElement(screen.getByText('|'))
|
|
30
|
+
})
|
|
31
|
+
|
|
32
|
+
it('it should not render a separator if n === 1', () => {
|
|
33
|
+
render(<UnifiedCard {...defaultProps} meta={['Category']} />)
|
|
34
|
+
const metaElement = screen.getByTestId('wpl-card-meta')
|
|
35
|
+
|
|
36
|
+
expect(metaElement).toContainElement(screen.getByText('Category'))
|
|
37
|
+
|
|
38
|
+
expect(metaElement).not.toContainElement(screen.queryByText('|'))
|
|
39
|
+
})
|
|
40
|
+
})
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import type { ReactNode } from 'react'
|
|
7
|
-
import Badge from '@hashicorp/react-
|
|
7
|
+
import Badge from '@hashicorp/react-hds/src/components/badge'
|
|
8
8
|
import * as CardPrimitives from '../primitives'
|
|
9
9
|
import type { CardProps } from '../types'
|
|
10
10
|
|
|
@@ -3,9 +3,11 @@
|
|
|
3
3
|
* SPDX-License-Identifier: MPL-2.0
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
+
'use client'
|
|
7
|
+
|
|
6
8
|
import { useEffect, useMemo, useRef } from 'react'
|
|
7
9
|
import { useForm, FormProvider } from 'react-hook-form'
|
|
8
|
-
import Button from '@hashicorp/react-
|
|
10
|
+
import Button from '@hashicorp/react-hds/src/components/button'
|
|
9
11
|
import VisibilityRule from '../partials/visibility-rule'
|
|
10
12
|
import NameField from '../partials/fields/name-field'
|
|
11
13
|
import { FormMetadataContext } from '../contexts/FormMetadata'
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
import { useFormContext } from 'react-hook-form'
|
|
7
7
|
// import CheckboxInput from '@hashicorp/react-form-fields/checkbox'
|
|
8
|
-
import Checkbox from '@hashicorp/react-
|
|
8
|
+
import Checkbox from '@hashicorp/react-hds/src/components/form/checkbox'
|
|
9
9
|
import FieldWrapper from '../../field-wrapper'
|
|
10
10
|
import { formattedLabel, useErrorMessage } from '../../../utils'
|
|
11
11
|
import type { MarketoFormCheckboxField } from '../../../types'
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
import { useFormContext } from 'react-hook-form'
|
|
7
7
|
// import TextInput from '@hashicorp/react-form-fields/text'
|
|
8
|
-
import TextInput from '@hashicorp/react-
|
|
8
|
+
import TextInput from '@hashicorp/react-hds/src/components/form/text-input'
|
|
9
9
|
import FieldWrapper from '../../field-wrapper'
|
|
10
10
|
import { formattedLabel, useErrorMessage } from '../../../utils'
|
|
11
11
|
import type { MarketoFormEmailField } from '../../../types'
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useFormContext } from 'react-hook-form'
|
|
2
2
|
import RadioCard, {
|
|
3
3
|
RadioCardGroup,
|
|
4
|
-
} from '@hashicorp/react-
|
|
4
|
+
} from '@hashicorp/react-hds/src/components/form/radio-card'
|
|
5
5
|
import FieldWrapper from '../../field-wrapper'
|
|
6
6
|
import type { MarketoFormRadioButtonsField } from '../../../types'
|
|
7
7
|
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import { useFormContext } from 'react-hook-form'
|
|
7
|
-
import Select from '@hashicorp/react-
|
|
7
|
+
import Select from '@hashicorp/react-hds/src/components/form/select'
|
|
8
8
|
import FieldWrapper from '../../field-wrapper'
|
|
9
9
|
import { formattedLabel, useErrorMessage } from '../../../utils'
|
|
10
10
|
import type { MarketoFormSelectField } from '../../../types'
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import { useFormContext } from 'react-hook-form'
|
|
7
|
-
import TextInput from '@hashicorp/react-
|
|
7
|
+
import TextInput from '@hashicorp/react-hds/src/components/form/text-input'
|
|
8
8
|
import FieldWrapper from '../../field-wrapper'
|
|
9
9
|
import { formattedLabel, useErrorMessage } from '../../../utils'
|
|
10
10
|
import type { MarketoFormTelephoneField } from '../../../types'
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import { useFormContext } from 'react-hook-form'
|
|
7
|
-
import TextInput from '@hashicorp/react-
|
|
7
|
+
import TextInput from '@hashicorp/react-hds/src/components/form/text-input'
|
|
8
8
|
import FieldWrapper from '../../field-wrapper'
|
|
9
9
|
import { formattedLabel, useErrorMessage } from '../../../utils'
|
|
10
10
|
import type { MarketoFormTextField } from '../../../types'
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import { useFormContext } from 'react-hook-form'
|
|
7
|
-
import Textarea from '@hashicorp/react-
|
|
7
|
+
import Textarea from '@hashicorp/react-hds/src/components/form/textarea'
|
|
8
8
|
import FieldWrapper from '../../field-wrapper'
|
|
9
9
|
import { formattedLabel, useErrorMessage } from '../../../utils'
|
|
10
10
|
import type { MarketoFormTextAreaField } from '../../../types'
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import Link from 'next/link'
|
|
2
2
|
import { parseUrl } from '../../../../lib/parse-url'
|
|
3
3
|
import { vercelSplit } from '../../../../lib/v'
|
|
4
|
-
import FlightIcon from '@hashicorp/react-
|
|
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
|
|
|
@@ -4,7 +4,7 @@ import { vercelSplit } from '../../../../lib/v'
|
|
|
4
4
|
import Link from 'next/link'
|
|
5
5
|
import { parseUrl } from '../../../../lib/parse-url'
|
|
6
6
|
import { trackNavClickEvent } from '../../../../lib/track-nav-click-event'
|
|
7
|
-
import FlightIcon from '@hashicorp/react-
|
|
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
|
|
|
@@ -3,8 +3,8 @@ import Link from 'next/link'
|
|
|
3
3
|
import * as NavPanel from '../components/panel'
|
|
4
4
|
import Promo, { type PromoProps } from '../components/promo'
|
|
5
5
|
import { Products } from '@hashicorp/platform-product-meta'
|
|
6
|
-
import FlightIcon from '@hashicorp/react-
|
|
7
|
-
import { TextPlus } from '@hashicorp/react-
|
|
6
|
+
import FlightIcon from '@hashicorp/react-hds/src/components/flight-icon'
|
|
7
|
+
import { TextPlus } from '@hashicorp/react-hds/src/components/text'
|
|
8
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'
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
* Copyright (c) HashiCorp, Inc.
|
|
3
3
|
* SPDX-License-Identifier: MPL-2.0
|
|
4
4
|
*/
|
|
5
|
+
'use client'
|
|
5
6
|
|
|
6
7
|
import { useState } from 'react'
|
|
7
8
|
import Badge from '@hashicorp/react-badge'
|
|
@@ -10,7 +11,7 @@ import ExpandableArrow from '@hashicorp/react-expandable-arrow'
|
|
|
10
11
|
import Intro from '../intro'
|
|
11
12
|
import Link from 'next/link'
|
|
12
13
|
import type { NextStepsProps } from './types'
|
|
13
|
-
import StandaloneLink from '@hashicorp/react-
|
|
14
|
+
import StandaloneLink from '@hashicorp/react-hds/src/components/standalone-link'
|
|
14
15
|
import { IconArrowRight16 } from '@hashicorp/flight-icons/svg-react/arrow-right-16'
|
|
15
16
|
import useProductMeta from '@hashicorp/platform-product-meta'
|
|
16
17
|
import s from './style.module.css'
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import type { Products } from '@hashicorp/platform-product-meta'
|
|
7
|
-
import Badge from '@hashicorp/react-
|
|
7
|
+
import Badge from '@hashicorp/react-hds/src/components/badge'
|
|
8
8
|
import { IconDot16 } from '@hashicorp/flight-icons/svg-react/dot-16'
|
|
9
9
|
import s from './style.module.css'
|
|
10
10
|
|
|
@@ -164,6 +164,10 @@ function Subnav({ className, theme = 'light', ...restProps }: SubnavProps) {
|
|
|
164
164
|
setActivePanel(panel)
|
|
165
165
|
}
|
|
166
166
|
|
|
167
|
+
const ariaLabel = restProps?.titleLink?.text
|
|
168
|
+
? `${restProps.titleLink.text} pages`
|
|
169
|
+
: 'Subnav pages'
|
|
170
|
+
|
|
167
171
|
return (
|
|
168
172
|
<>
|
|
169
173
|
{/**
|
|
@@ -179,7 +183,7 @@ function Subnav({ className, theme = 'light', ...restProps }: SubnavProps) {
|
|
|
179
183
|
[s.hasOverflow]: hasOverflow,
|
|
180
184
|
'hdsplus-dark-mode': theme === 'dark',
|
|
181
185
|
})}
|
|
182
|
-
aria-label={
|
|
186
|
+
aria-label={ariaLabel}
|
|
183
187
|
onValueChange={activatePanel}
|
|
184
188
|
value={activePanel}
|
|
185
189
|
delayDuration={0}
|
|
@@ -5,11 +5,11 @@
|
|
|
5
5
|
|
|
6
6
|
import Button, {
|
|
7
7
|
type ButtonProps,
|
|
8
|
-
} from '@hashicorp/react-
|
|
9
|
-
import FlightIcon from '@hashicorp/react-
|
|
8
|
+
} from '@hashicorp/react-hds/src/components/button'
|
|
9
|
+
import FlightIcon from '@hashicorp/react-hds/src/components/flight-icon'
|
|
10
10
|
import type { Products } from '@hashicorp/platform-product-meta'
|
|
11
|
-
import type { ToggleButtonProps } from '@hashicorp/react-
|
|
12
|
-
import * as Dropdown from '@hashicorp/react-
|
|
11
|
+
import type { ToggleButtonProps } from '@hashicorp/react-hds/src/components/dropdown/toggle/button'
|
|
12
|
+
import * as Dropdown from '@hashicorp/react-hds/src/components/dropdown'
|
|
13
13
|
import GithubStarsLink from './github-stars-link'
|
|
14
14
|
import classNames from 'classnames'
|
|
15
15
|
import * as NavigationMenu from '@radix-ui/react-navigation-menu'
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* SPDX-License-Identifier: MPL-2.0
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
import FlightIcon from '@hashicorp/react-
|
|
6
|
+
import FlightIcon from '@hashicorp/react-hds/src/components/flight-icon'
|
|
7
7
|
import NavItemText from '../nav-item-text'
|
|
8
8
|
import * as NavigationMenu from '@radix-ui/react-navigation-menu'
|
|
9
9
|
import s from './style.module.css'
|
|
@@ -9,7 +9,7 @@ import NavItemText from '../nav-item-text'
|
|
|
9
9
|
import DropdownTrigger from '../DropdownTrigger'
|
|
10
10
|
import * as NavigationMenu from '@radix-ui/react-navigation-menu'
|
|
11
11
|
import s from './style.module.css'
|
|
12
|
-
import FlightIcon from '@hashicorp/react-
|
|
12
|
+
import FlightIcon from '@hashicorp/react-hds/src/components/flight-icon'
|
|
13
13
|
|
|
14
14
|
interface MenuItemsDefaultProps {
|
|
15
15
|
menuItems: (
|
|
@@ -12,7 +12,7 @@ import DropdownTrigger from '../DropdownTrigger'
|
|
|
12
12
|
import * as NavigationMenu from '@radix-ui/react-navigation-menu'
|
|
13
13
|
import classNames from 'classnames'
|
|
14
14
|
import s from './style.module.css'
|
|
15
|
-
import FlightIcon from '@hashicorp/react-
|
|
15
|
+
import FlightIcon from '@hashicorp/react-hds/src/components/flight-icon'
|
|
16
16
|
|
|
17
17
|
interface MenuItemsOverflowProps {
|
|
18
18
|
menuItems: (
|
|
@@ -28,6 +28,11 @@ describe('parseUrl', () => {
|
|
|
28
28
|
expect(url.href).toBe('/resources?type=case-study&products=terraform')
|
|
29
29
|
})
|
|
30
30
|
|
|
31
|
+
it('leaves URL hash intact', () => {
|
|
32
|
+
const url = parseUrl('https://hashicorp.com/about#leadership')
|
|
33
|
+
expect(url.href).toBe('/about#leadership')
|
|
34
|
+
})
|
|
35
|
+
|
|
31
36
|
it('leaves HashiCorp subdomain URLs intact', () => {
|
|
32
37
|
const url = parseUrl('https://developer.hashicorp.com/terraform')
|
|
33
38
|
expect(url.href).toBe('https://developer.hashicorp.com/terraform')
|
|
@@ -12,8 +12,8 @@ export function parseUrl(url: string | undefined): {
|
|
|
12
12
|
|
|
13
13
|
if (isInternal(url)) {
|
|
14
14
|
try {
|
|
15
|
-
const { pathname, search } = new URL(url)
|
|
16
|
-
const href = pathname + search
|
|
15
|
+
const { pathname, search, hash } = new URL(url)
|
|
16
|
+
const href = pathname + search + hash
|
|
17
17
|
return { linkType: 'inbound', href }
|
|
18
18
|
} catch (error) {
|
|
19
19
|
throw new Error(`Invalid href: ${url}`)
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
# Consent Manager
|
|
2
|
-
|
|
3
|
-
A GDPR-compliant consent manager.
|
|
4
|
-
|
|
5
|
-
### Props
|
|
6
|
-
|
|
7
|
-
- `version` (integer) - version number, bump up to override previous consent preferences
|
|
8
|
-
- `container` (string) - id of container where the consent manager should live
|
|
9
|
-
- `companyName` (string) - your company name to be inserted in various copy
|
|
10
|
-
- `privacyPolicyLink` (string) - link to your company's privacy policy
|
|
11
|
-
- `segmentWriteKey` (string) - your production segment write key
|
|
12
|
-
- `segmentServices` (array of objects) - use this to override the category or description of a service provided by Segment
|
|
13
|
-
- `name` - name of the Segment integration, must match the integration you are overriding
|
|
14
|
-
- `category` _[optional]_ - new category name
|
|
15
|
-
- `description` _[optional]_ - new description
|
|
16
|
-
- `categories` (array) - State of toggle
|
|
17
|
-
- `name` - name of category
|
|
18
|
-
- `description` - description for the category
|
|
19
|
-
- `additionalServices` (array of objects) - additional integrations outside of Segment that you wish to include in the consent manager
|
|
20
|
-
- `name` - name of service
|
|
21
|
-
- `description` - description of service
|
|
22
|
-
- `category` - category of service
|
|
23
|
-
- `body` _[optional]_ - javascript body associated with service _If present, overrides `url` below_
|
|
24
|
-
- `url` _[optional]_ - url of js file associated with service
|
|
25
|
-
- `async` (bool) _[optional]_ - add `async` property to script element
|
|
26
|
-
- `addToBody` (bool) _[optional]_ - inject script before closing `<body>` tag
|
|
27
|
-
- `dataAttrs` (arr) _[optional]_ - array of `data-` attributes to add to script tag
|
|
28
|
-
- `name` (str) - name of data attribute (`data-name`)
|
|
29
|
-
- `value` (str) - value of `data` attribute to set
|
|
30
|
-
- `showDialog` (bool) - whether or not the dialog `open` attribute is true
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
## `SegmentPreloadScript`
|
|
34
|
-
|
|
35
|
-
In `v9.0.0`, ConsentManager now exports a `SegmentPreloadScript` component. Why? ConsentManager uses a very similar Segment script to the current preloading script that we use in our `_document.tsx/js` files.
|
|
36
|
-
|
|
37
|
-
Now that we're updating both with a custom Segment AJS URL and CDN hostname, it makes sense for the two to be co-located.
|
|
38
|
-
|
|
39
|
-
Expect the new change to look like the following:
|
|
40
|
-
|
|
41
|
-
```diff
|
|
42
|
-
// pages/_document.tsx
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
import Document, { Html, Head, Main, NextScript } from 'next/document'
|
|
46
|
-
import HashiHead from '@hashicorp/react-head'
|
|
47
|
-
+ import { SegmentPreloadScript } from '@web/react-components/src/components/consent-manager/scripts/segment'
|
|
48
|
-
// other imports
|
|
49
|
-
|
|
50
|
-
export default class MyDocument extends Document {
|
|
51
|
-
static async getInitialProps(ctx) {
|
|
52
|
-
const initialProps = await Document.getInitialProps(ctx)
|
|
53
|
-
return { ...initialProps }
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
render() {
|
|
57
|
-
return (
|
|
58
|
-
<Html lang="en">
|
|
59
|
-
<Head>
|
|
60
|
-
<HashiHead />
|
|
61
|
-
</Head>
|
|
62
|
-
<body>
|
|
63
|
-
- <script
|
|
64
|
-
- dangerouslySetInnerHTML={{
|
|
65
|
-
- __html: `!function(){var analytics=window... ... ...`
|
|
66
|
-
- }}
|
|
67
|
-
- />
|
|
68
|
-
+ <SegmentPreloadScript />
|
|
69
|
-
|
|
70
|
-
// etc...
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
No additional updates are necessary!
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
.root {
|
|
2
|
-
background-color: var(--token-color-surface-strong);
|
|
3
|
-
width: 100%;
|
|
4
|
-
padding: 10px 15px;
|
|
5
|
-
position: fixed;
|
|
6
|
-
bottom: 0;
|
|
7
|
-
left: 0;
|
|
8
|
-
z-index: 10;
|
|
9
|
-
font-size: 0.9rem;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.innerContainer {
|
|
13
|
-
composes: g-grid-container from global;
|
|
14
|
-
display: flex;
|
|
15
|
-
justify-content: space-between;
|
|
16
|
-
align-items: center;
|
|
17
|
-
gap: var(--hdsplus-spacing-01);
|
|
18
|
-
flex-direction: column;
|
|
19
|
-
|
|
20
|
-
@media (min-width: 1350px) {
|
|
21
|
-
flex-direction: row;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { render, screen, fireEvent } from '@testing-library/react'
|
|
2
|
-
import ConsentBanner from './banner'
|
|
3
|
-
|
|
4
|
-
test('should display the correct privacy policy url', () => {
|
|
5
|
-
const testValue = 'test'
|
|
6
|
-
render(<ConsentBanner privacyPolicyLink={testValue} />)
|
|
7
|
-
expect(screen.getByTestId('privacy-policy')).toHaveAttribute(
|
|
8
|
-
'href',
|
|
9
|
-
testValue
|
|
10
|
-
)
|
|
11
|
-
})
|
|
12
|
-
|
|
13
|
-
test('should display the correct cookie policy url', () => {
|
|
14
|
-
const testValue = 'test'
|
|
15
|
-
render(<ConsentBanner cookiePolicyLink={testValue} />)
|
|
16
|
-
expect(screen.getByTestId('cookie-policy')).toHaveAttribute('href', testValue)
|
|
17
|
-
})
|
|
18
|
-
|
|
19
|
-
test('should run the onManagePreferences function when the correct button is clicked', () => {
|
|
20
|
-
const mock = vi.fn()
|
|
21
|
-
render(<ConsentBanner onManagePreferences={mock} />)
|
|
22
|
-
fireEvent.click(screen.getByTestId('manage-preferences'))
|
|
23
|
-
expect(mock).toHaveBeenCalled()
|
|
24
|
-
})
|
|
25
|
-
|
|
26
|
-
test('should run the onAccept function when the correct button is clicked', () => {
|
|
27
|
-
const mock = vi.fn()
|
|
28
|
-
render(<ConsentBanner onAccept={mock} />)
|
|
29
|
-
fireEvent.click(screen.getByTestId('accept'))
|
|
30
|
-
expect(mock).toHaveBeenCalled()
|
|
31
|
-
})
|