@hashicorp/react-components 0.0.0 → 1.0.1

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

@@ -0,0 +1,194 @@
+import { render, screen } from '@testing-library/react'
+import ConsentPreferences from './dialog'
+
+beforeAll(() => {
+	HTMLDialogElement.prototype.show = vi.fn()
+	HTMLDialogElement.prototype.showModal = vi.fn()
+	HTMLDialogElement.prototype.close = vi.fn()
+})
+
+const defaultProps = {
+	segmentWriteKey: 'iyi06c432UL7SB1r3fQReec4bNwFyzkW',
+	privacyPolicyLink: 'https://www.hashicorp.com/privacy',
+	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',
+		},
+		{
+			name: 'Another Example Category',
+			description: 'A short description of the category',
+		},
+	],
+	preferences: { loadAll: true },
+	saveAndLoadAnalytics: () => null,
+	showDialog: false,
+}
+
+test('segmentServices`, `additionalServices`, and `segmentWriteKey` props are passed to getIntegration function', async () => {
+	const getIntegrationsModule = await import('../../util/integrations')
+	const getIntegrations = vi.spyOn(getIntegrationsModule, 'default')
+
+	render(<ConsentPreferences {...defaultProps} />)
+	const { segmentServices, additionalServices, segmentWriteKey } = defaultProps
+	expect(getIntegrations).toHaveBeenCalledWith(
+		segmentServices,
+		additionalServices,
+		segmentWriteKey
+	)
+})
+
+test('custom `privacyPolicyLink` renders in the right place', () => {
+	render(<ConsentPreferences {...defaultProps} />)
+	expect(screen.getByTestId('privacy-policy-link')).toHaveAttribute(
+		'href',
+		defaultProps.privacyPolicyLink
+	)
+})
+
+test.todo('Displays the correct categories with their descriptions', () => {
+	const testValue = 'test'
+	render(<ConsentPreferences {...defaultProps} />)
+	expect(screen.getByTestId('privacy-policy-link')).toHaveAttribute(
+		'href',
+		testValue
+	)
+})
+
+test('Dialog closes and opens based on props', () => {
+	vi.spyOn(HTMLDialogElement.prototype, 'showModal')
+
+	const { rerender } = render(<ConsentPreferences {...defaultProps} />)
+	rerender(<ConsentPreferences {...defaultProps} showDialog={true} />)
+	expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalled()
+})
+
+test.todo(
+	'Toggles are populated correctly according to the `preferences` props'
+)
+
+test.todo(
+	'When "see more" within a category is clicked, it will toggle and expand/contract it\'s items'
+)
+
+test.todo(
+	'Displays the correct items within each category with their descriptions'
+)
+
+test.todo(
+	'When the toggle for a category is clicked, all items in that category are turned on or off'
+)
+
+test.todo(
+	'When the toggle for a item within a category is clicked, that item is turned on or off'
+)
+
+test.todo(
+	'Category toggle displays as active if one of its items are active, inactive only if all items are inactive'
+)
+
+test.todo(
+	'dialog hides and `saveAndLoadAnalytics` is called when the "Save Preferences" button is clicked'
+)
+
+test.todo(
+	'clicking "X" in top right corner displays the cancellation confirmation dialog and hides the main dialog'
+)
+
+test.todo(
+	'clicking "Cancel" at the bottom displays the cancellation confirmation dialog and hides the manage preferences dialog'
+)
+
+test.todo(
+	'within the cancellation confirmation dialog, clicking "Back to Preferences" hides the cancellation confirmation dialog and brings back the manage preferences dialog'
+)
+
+test.todo(
+	'within the cancellation confirmation dialog, clicking "Agree and Close" calls `saveAndLoadAnalytics` and closes the dialog'
+)
+
+test.todo(
+	'when the "Agree and Close" button is clicked, `saveAndLoadAnalytics` runs and the dialog is closed'
+)
+
+// test('should display the correct cookie policy url', () => {
+// 	const testValue = 'test'
+// 	render(<ConsentBanner cookiePolicyLink={testValue} />)
+// 	expect(screen.getByTestId('cookie-policy')).toHaveAttribute('href', testValue)
+// })
+
+// test('should run the onManagePreferences function when the correct button is clicked', () => {
+// 	const mock = vi.fn()
+// 	render(<ConsentBanner onManagePreferences={mock} />)
+// 	fireEvent.click(screen.getByTestId('manage-preferences'))
+// 	expect(mock).toHaveBeenCalled()
+// })
+
+// test('should run the onAccept function when the correct button is clicked', () => {
+// 	const mock = vi.fn()
+// 	render(<ConsentBanner onAccept={mock} />)
+// 	fireEvent.click(screen.getByTestId('accept'))
+// 	expect(mock).toHaveBeenCalled()
+// })

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

@@ -0,0 +1,339 @@
+/*
+  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

@@ -0,0 +1,19 @@
+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>
+	)
+}