@hashicorp/react-components 1.1.10 → 1.2.0

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

@@ -1,194 +0,0 @@
-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

@@ -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>
-	)
-}