@hashicorp/react-components 1.1.8 → 1.1.11

package/src/components/consent-manager/components/dialog/dialog.tsx

@@ -1,339 +0,0 @@
-/*
-  dialog.js
-  Managing preferences dialog
-*/
-
-import { useState, useEffect, useRef } from 'react'
-import Link from 'next/link'
-import getIntegrations, {
-	type ConsentManagerServiceWithOrigin,
-} from '../../util/integrations'
-import Button from '@hashicorp/react-design-system-components/src/components/button'
-import ButtonSet from '@hashicorp/react-design-system-components/src/components/button-set'
-import { ToggleBase } from '@hashicorp/react-design-system-components/src/components/form/toggle'
-import Text from '@hashicorp/react-design-system-components/src/components/text'
-import Card from '@hashicorp/react-design-system-components/src/components/card'
-import FlightIcon from '@hashicorp/react-design-system-components/src/components/flight-icon'
-import classNames from 'classnames'
-import s from './dialog.module.css'
-import type { ConsentManagerService, ConsentManagerCategory } from '../../types'
-
-interface ConsentPreferencesProps {
-	preferences: { loadAll?: boolean }
-	categories: ConsentManagerCategory[]
-	segmentServices?: ConsentManagerService[]
-	additionalServices?: ConsentManagerService[]
-	segmentWriteKey?: string
-	privacyPolicyLink?: string
-	cookiePolicyLink?: string
-	saveAndLoadAnalytics: (consent: unknown) => void
-	version?: number
-	showDialog: boolean
-}
-
-interface ConsentPreferencesState {
-	version: number
-	groupedIntegrations: Record<string, ConsentManagerServiceWithOrigin[]>
-	consent: { loadAll?: boolean }
-	categories: Record<string, string>
-	showCategories: Record<string, boolean>
-}
-
-const ConsentPreferences: React.FC<ConsentPreferencesProps> = (props) => {
-	const [state, setState] = useState<ConsentPreferencesState>({
-		version: props.version || 0,
-		groupedIntegrations: {},
-		consent: props.preferences,
-		categories: props.categories.reduce((obj, category) => {
-			obj[category.name] = category.description
-			return obj
-		}, {}),
-		showCategories: {},
-	})
-	const dialogRef = useRef<HTMLDialogElement>(null)
-
-	useEffect(() => {
-		// Set up integrations
-		getIntegrations(
-			props.segmentServices,
-			props.additionalServices,
-			props.segmentWriteKey
-		).then((groupedIntegrations) => {
-			setState((prevState) => ({
-				...prevState,
-				groupedIntegrations,
-			}))
-		})
-	}, [props.segmentServices, props.additionalServices, props.segmentWriteKey])
-
-	useEffect(() => {
-		const dialog = dialogRef.current
-		if (!dialog) return
-
-		const currentState = dialog.open ? 'open' : 'closed'
-		const correctState = props.showDialog ? 'open' : 'closed'
-
-		const isCorrect = currentState === correctState
-		const shouldClose = currentState === 'open' && correctState === 'closed'
-		const shouldOpen = currentState === 'closed' && correctState === 'open'
-
-		if (isCorrect) return
-
-		if (shouldClose) {
-			dialog.close()
-		} else if (shouldOpen) {
-			dialog.showModal()
-		}
-	}, [props.showDialog])
-
-	const handleToggle = (
-		integrationName: string,
-		integrationOrigin: string,
-		event: React.FormEvent<HTMLInputElement>
-	) => {
-		const currentConsent = state.consent || {}
-
-		// 	If user has { loadAll: true } and they toggle, make sure to preserve
-		// the loadAll settings by setting everything to true first. This setting
-		// gets reset at the end of the function.
-		if (currentConsent.loadAll) {
-			Object.keys(state.groupedIntegrations).forEach((category) => {
-				state.groupedIntegrations[category].forEach((tool) => {
-					currentConsent[tool.origin] = currentConsent[tool.origin] || {}
-					currentConsent[tool.origin][tool.name] = true
-				})
-			})
-		}
-
-		if (integrationOrigin === 'categories') {
-			state.groupedIntegrations[integrationName].forEach((tool) => {
-				currentConsent[tool.origin] = currentConsent[tool.origin] || {}
-				currentConsent[tool.origin][tool.name] = event.currentTarget.checked
-			})
-		} else {
-			currentConsent[integrationOrigin] =
-				currentConsent[integrationOrigin] || {}
-			currentConsent[integrationOrigin][integrationName] =
-				event.currentTarget.checked
-		}
-
-		delete currentConsent.loadAll
-		setState((prevState) => ({
-			...prevState,
-			consent: currentConsent,
-		}))
-	}
-
-	const handleFold = (categoryName) => {
-		const categories = { ...state.showCategories }
-		categories[categoryName] = !categories[categoryName]
-		setState((prevState) => ({
-			...prevState,
-			showCategories: categories,
-		}))
-	}
-
-	const getCategoryToggle = (category) => {
-		return state.groupedIntegrations[category].some((tool) => {
-			return (
-				state.consent &&
-				Object.prototype.hasOwnProperty.call(state.consent, tool.origin) &&
-				Object.prototype.hasOwnProperty.call(
-					state.consent[tool.origin],
-					tool.name
-				) &&
-				state.consent[tool.origin][tool.name]
-			)
-		})
-	}
-
-	// Build each individual category and integration row
-	const buildCategory = (
-		consentManagerServices: ConsentManagerServiceWithOrigin[],
-		name: string
-	) => {
-		const categoryItems = consentManagerServices.map((service) => {
-			const categoryItemTitleID = `consent-manager-categoryItemTitle-${service.name}`
-
-			return (
-				<Card
-					level="mid"
-					hasBorder
-					key={service.name}
-					className={s.categoryItem}
-				>
-					<div className={s.categoryItemHeader}>
-						<Text.Display
-							id={categoryItemTitleID}
-							tag="h4"
-							color="strong"
-							className={s.categoryItemTitle}
-						>
-							{service.name}
-						</Text.Display>
-						<ToggleBase
-							data-testid={`category-toggle-${service.name}`}
-							toggleOnEnter
-							field={{
-								'aria-labelledby': categoryItemTitleID,
-								onChange: (e) => handleToggle(service.name, service.origin, e),
-								checked: Boolean(
-									state.consent.loadAll ||
-										(state.consent &&
-											state.consent[service.origin] &&
-											state.consent[service.origin][service.name])
-								),
-							}}
-						/>
-					</div>
-					<Text.Body
-						tag="p"
-						color="primary"
-						className={s.categoryItemDescription}
-					>
-						{service.description}
-					</Text.Body>
-				</Card>
-			)
-		})
-
-		const categoryHeaderTitleID = `consent-manager-categoryHeaderTitle-${name}`
-		const categoryListID = `consent-manager-categoryHeaderTitle-${name}-list`
-
-		return (
-			<div className={s.category} key={name}>
-				<div className={s.categoryHeader}>
-					<Text.Display
-						id={categoryHeaderTitleID}
-						tag="h3"
-						size="200"
-						color="strong"
-					>
-						{name}
-					</Text.Display>
-					{!state.showCategories[name] && (
-						<ToggleBase
-							toggleOnEnter
-							field={{
-								'aria-labelledby': categoryHeaderTitleID,
-								onChange: (e) => handleToggle(name, 'categories', e),
-								checked: state.consent.loadAll || getCategoryToggle(name),
-							}}
-						/>
-					)}
-					<button
-						className={classNames(s.categoryFoldTrigger, {
-							[s.shown]: state.showCategories[name],
-						})}
-						onClick={() => {
-							handleFold(name)
-						}}
-						aria-label={
-							state.showCategories[name]
-								? `See less in ${name}`
-								: `See more in ${name}`
-						}
-						aria-expanded={state.showCategories[name] ? `true` : `false`}
-						aria-controls={
-							state.showCategories[name] ? categoryListID : undefined
-						}
-					>
-						<FlightIcon name="chevron-down" size={24} />
-					</button>
-				</div>
-				{state.showCategories[name] && (
-					<div className={s.categoryFold} id={categoryListID}>
-						<Text.Body tag="p" color="primary">
-							{state.categories[name]}
-						</Text.Body>
-						{categoryItems}
-					</div>
-				)}
-			</div>
-		)
-	}
-	const categories = Object.keys(state.groupedIntegrations).map((category) => {
-		return buildCategory(state.groupedIntegrations[category], category)
-	})
-
-	return (
-		<dialog
-			aria-labelledby="consent-mgr-dialog-title"
-			className={s.root}
-			data-testid="consent-mgr-dialog"
-			ref={dialogRef}
-		>
-			<div className={s.visibleDialog}>
-				<div className={s.dialogHeader}>
-					<Text.Display
-						id="consent-mgr-dialog-title"
-						tag="h2"
-						size="300"
-						color="strong"
-					>
-						Manage cookies
-					</Text.Display>
-				</div>
-				<div className={s.dialogBody}>
-					<Text.Body tag="p" size="300" color="primary">
-						HashiCorp uses data collected by cookies and JavaScript libraries to
-						improve your browsing experience, analyze site traffic, and increase
-						the overall performance of our site. By using our website, you’re
-						agreeing to our{' '}
-						<Link
-							href={
-								props.privacyPolicyLink ??
-								'https://www.hashicorp.com/trust/privacy'
-							}
-							target="_blank"
-							rel="noopener noreferrer"
-							data-testid="privacy-policy-link"
-						>
-							Privacy Policy
-						</Link>{' '}
-						and{' '}
-						<Link
-							href={
-								props.cookiePolicyLink ??
-								'https://www.hashicorp.com/trust/privacy/cookies'
-							}
-							target="_blank"
-							rel="noopener noreferrer"
-							data-testid="cookie-policy-link"
-						>
-							Cookie Policy
-						</Link>
-						.
-					</Text.Body>
-					<Text.Body tag="p" size="300" color="faint">
-						The categories below outline which companies and tools we use for
-						collecting data. To opt out of a category of data collection, set
-						the toggle to “Off” and save your preferences.
-					</Text.Body>
-					<div id="outline">{categories}</div>
-				</div>
-				<div className={s.dialogFooter}>
-					<ButtonSet>
-						<Button
-							text="Save preferences"
-							color="secondary"
-							onClick={() => {
-								props.saveAndLoadAnalytics(state.consent)
-							}}
-						/>
-						<Button
-							autoFocus
-							text="Accept all"
-							color="primary"
-							onClick={() => {
-								props.saveAndLoadAnalytics({ loadAll: true })
-							}}
-						/>
-					</ButtonSet>
-				</div>
-			</div>
-		</dialog>
-	)
-}
-
-export default ConsentPreferences

package/src/components/consent-manager/img/icn_close.tsx

@@ -1,19 +0,0 @@
-export default function CloseIcon() {
-	return (
-		<svg
-			width="16"
-			height="16"
-			viewBox="0 0 16 16"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<title>Close Button</title>
-			<path
-				d="M1.778 1.778l12.541 12.541m-.097-12.541L1.681 14.319"
-				stroke="#FFF"
-				strokeWidth="2"
-				fill="none"
-				strokeLinecap="square"
-			/>
-		</svg>
-	)
-}

package/src/components/consent-manager/index.test.tsx

@@ -1,334 +0,0 @@
-import { fireEvent, render, screen, act } from '@testing-library/react'
-
-const defaultProps = {
-	version: 0,
-	showDialog: false,
-	segmentWriteKey: 'iyi06c432UL7SB1r3fQReec4bNwFyzkW',
-	privacyPolicyLink: 'https://www.hashicorp.com/privacy',
-	companyName: 'HashiCorp',
-	segmentServices: [
-		{
-			name: 'Example Name',
-			category: 'Example Category',
-			description:
-				'A short description of what the service is and how your company uses the data.',
-		},
-	],
-	additionalServices: [
-		{
-			name: 'Name of the service',
-			category: 'Example Category',
-			description:
-				'A short description of what the service is and how your company uses the data.',
-			body: '',
-			url: 'http://www.an-optional-url-for-a-script-to-add-to-the-page.com',
-			async: true,
-		},
-		{
-			name: 'Name of the service 2',
-			category: 'Example Category',
-			description: 'A script with additional elements to be injected',
-			body: '',
-			url: 'https://source-url-of-script.com',
-			async: true,
-			addToBody: true,
-			dataAttrs: [
-				{
-					name: 'test',
-					value: 'foobar',
-				},
-			],
-		},
-		{
-			name: 'Name of the service 3',
-			category: 'Example Category',
-			description: 'A script with additional elements to be injected',
-			body: 'window.foo = "bar"',
-			async: true,
-			dataAttrs: [
-				{
-					name: 'test',
-					value: 'foobar',
-				},
-			],
-		},
-		{
-			name: 'Name of the conditionally loaded service',
-			category: 'Example Category with conditionally loaded service',
-			description: 'A script with additional elements to be injected',
-			body: 'window.foo = "bar"',
-			url: 'https://source-of-conditionally-loaded-script.com',
-			async: true,
-			dataAttrs: [
-				{
-					name: 'test',
-					value: 'foobar',
-				},
-			],
-			shouldLoad: () => false,
-		},
-	],
-	categories: [
-		{
-			name: 'Example Category',
-			description: 'A short description of the category',
-		},
-	],
-	container: '#consent-manager',
-}
-
-beforeAll(() => {
-	HTMLDialogElement.prototype.show = vi.fn()
-	HTMLDialogElement.prototype.showModal = vi.fn()
-	HTMLDialogElement.prototype.close = vi.fn()
-})
-
-describe('ConsentManager', () => {
-	afterEach(() => {
-		vi.resetModules()
-	})
-
-	test('shows the banner if the forceShow prop is true', async () => {
-		const { default: ConsentManager } = await import('./')
-		render(<ConsentManager {...defaultProps} forceShow={true} />)
-		expect(screen.getByTestId('consent-banner')).toBeInTheDocument()
-	})
-
-	test('sets existing preferences and does not show the banner if preferences are already set', async () => {
-		await runWithMockedImport(
-			'./util/cookies',
-			{
-				loadPreferences: () => {
-					return { loadAll: false, segment: false, version: 0 }
-				},
-				// eslint-disable-next-line @typescript-eslint/no-empty-function
-				savePreferences: () => {},
-			},
-			(MockedConsentManager) => {
-				render(<MockedConsentManager {...defaultProps} forceShow={false} />)
-				expect(screen.queryByTestId('consent-banner')).not.toBeInTheDocument()
-			}
-		)
-	})
-
-	test('shows the banner if preferences are set but version has increased', async () => {
-		await runWithMockedImport(
-			'./util/cookies',
-			{
-				loadPreferences: () => {
-					return { loadAll: false, segment: false, version: 1 }
-				},
-				// eslint-disable-next-line @typescript-eslint/no-empty-function
-				savePreferences: () => {},
-			},
-			(MockedConsentManager) => {
-				render(
-					<MockedConsentManager
-						{...defaultProps}
-						forceShow={false}
-						version={2}
-					/>
-				)
-				expect(screen.queryByTestId('consent-banner')).toBeInTheDocument()
-			}
-		)
-	})
-
-	test('if the manage preferences button is clicked, opens the dialog and makes body un-scrollable', async () => {
-		const { default: ConsentManager } = await import('./')
-
-		render(<ConsentManager {...defaultProps} forceShow={true} />)
-		fireEvent.click(screen.getByTestId('manage-preferences'))
-		expect(screen.getByTestId('consent-mgr-dialog')).toBeInTheDocument()
-		expect(document.body.className).toBe('g-noscroll')
-	})
-
-	test('opens the dialog when the open function is called', async () => {
-		const { default: ConsentManager, open } = await import('./')
-		render(<ConsentManager {...defaultProps} />)
-		act(() => open())
-		expect(screen.getByTestId('consent-mgr-dialog')).toBeInTheDocument()
-	})
-
-	test('if accept all button is clicked, any open dialogs are closed and all analytics are loaded', async () => {
-		let prefs
-		await runWithMockedImport(
-			'./util/cookies',
-			{
-				// eslint-disable-next-line @typescript-eslint/no-empty-function
-				loadPreferences: () => {},
-				savePreferences: (preferences) => {
-					prefs = preferences
-				},
-			},
-			(MockedConsentManager) => {
-				render(<MockedConsentManager {...defaultProps} forceShow={true} />)
-				fireEvent.click(screen.getByTestId('accept'))
-			}
-		)
-		expect(prefs.loadAll).toBe(true)
-	})
-
-	test('loads segment and additional services if loadAll is passed', async () => {
-		await runWithMockedImport(
-			'./util/cookies',
-			{
-				loadPreferences: () => {
-					return { loadAll: true, segment: { foo: 'bar' } }
-				},
-				// eslint-disable-next-line @typescript-eslint/no-empty-function
-				savePreferences: () => {},
-			},
-			(MockedConsentManager) => {
-				render(
-					<MockedConsentManager
-						{...defaultProps}
-						forceShow={false}
-						version={2}
-					/>
-				)
-				const html = document.body.innerHTML
-				// script was injected
-				expect(html).toMatch(
-					/<script type="text\/javascript" src="https:\/\/artemis.hashicorp.com\/script/
-				)
-				// all services loaded, as well as custom segment
-				expect(html).toMatch(
-					/analytics\.load\("iyi06c432UL7SB1r3fQReec4bNwFyzkW", {"integrations":{"All":true,"Segment\.io":true,"foo":"bar"}}\);/
-				)
-
-				// custom service loaded
-				expect(html).toMatch(
-					/src="http:\/\/www.an-optional-url-for-a-script-to-add-to-the-page\.com"/
-				)
-
-				// conditionally loaded service not loaded
-				expect(html).not.toMatch(
-					/src="https:\/\/source-of-conditionally-loaded-script\.com"/
-				)
-
-				// custom inline script
-				expect(html).toMatch(/window\.foo = "bar"/)
-			}
-		)
-	})
-
-	describe('handles custom events', () => {
-		test('manage preferences callback', async () => {
-			const fn = vi.fn()
-			await runWithMockedImport(
-				'./components/dialog',
-				{
-					default: () => {
-						return <p data-testid="mocked-dialog">test</p>
-					},
-				},
-				(MockedConsentManager) => {
-					render(
-						<MockedConsentManager
-							{...defaultProps}
-							forceShow={true}
-							onManagePreferences={fn}
-						/>
-					)
-					fireEvent.click(screen.getByTestId('manage-preferences'))
-					expect(fn).toHaveBeenCalled()
-				}
-			)
-		})
-
-		test('accept all callback', async () => {
-			const fn = vi.fn()
-			await runWithMockedImport(
-				'./components/dialog',
-				{
-					default: () => {
-						return <p data-testid="mocked-dialog">test</p>
-					},
-				},
-				(MockedConsentManager) => {
-					render(
-						<MockedConsentManager
-							{...defaultProps}
-							forceShow={true}
-							onAcceptAll={fn}
-						/>
-					)
-					fireEvent.click(screen.getByTestId('accept'))
-					expect(fn).toHaveBeenCalled()
-				}
-			)
-		})
-	})
-
-	describe('handles conditionally loaded services in dialog', () => {
-		test('additional services category is not in dialog when shouldLoad() is false in all category services', async () => {
-			const { default: ConsentManager, open } = await import('./')
-			render(<ConsentManager {...defaultProps} />)
-			act(() => open())
-
-			const shownCategory = await screen.findByText('Example Category')
-			const hiddenCategory = screen.queryByText(
-				'Example Category with conditionally loaded service'
-			)
-			expect(shownCategory).toBeInTheDocument()
-			expect(hiddenCategory).not.toBeInTheDocument()
-		})
-
-		test('additional services category is in dialog when shouldLoad() is false in some category services but service is not in dialog', async () => {
-			const newService = {
-				name: 'Name of the new service',
-				category: 'Example Category with conditionally loaded service',
-				description: 'A script with additional elements to be injected',
-				body: 'window.foo = "bar"',
-				async: true,
-				dataAttrs: [
-					{
-						name: 'test',
-						value: 'foobar',
-					},
-				],
-			}
-
-			const { default: ConsentManager, open } = await import('./')
-			render(
-				<ConsentManager
-					{...{
-						...defaultProps,
-						additionalServices: [
-							...defaultProps.additionalServices,
-							newService,
-						],
-					}}
-				/>
-			)
-			act(() => open())
-			const category = await screen.findByText(
-				'Example Category with conditionally loaded service'
-			)
-
-			expect(category).toBeInTheDocument()
-			const showMoreButton = category.nextSibling!.nextSibling!
-			// Open category accordion item to make services visible
-			fireEvent.click(showMoreButton)
-			const shouldLoadService = await screen.findByText(
-				'Name of the new service'
-			)
-			const shouldNotLoadService = screen.queryByText(
-				'Name of the conditionally loaded service'
-			)
-			expect(shouldLoadService).toBeInTheDocument()
-			expect(shouldNotLoadService).not.toBeInTheDocument()
-		})
-	})
-})
-
-// Given an internal module name and mock implementation, mocks the given module and returns a version
-// of the component with the module mocked.
-async function runWithMockedImport(module, mock, cb) {
-	vi.doMock(module, () => mock)
-	return import('./').then(({ default: ConsentManager, open }) => {
-		cb(ConsentManager, open)
-		vi.doUnmock(module)
-	})
-}