@hashicorp/react-components 0.0.0 → 1.0.1

package/src/components/card/style.module.css

@@ -0,0 +1,145 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.card {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	transition: 0.2s ease;
+	transition-property: transform, box-shadow, border-color, background-color;
+
+	&:hover {
+		transform: translateY(-2px);
+
+		& .cta svg {
+			transform: translateX(2px);
+		}
+	}
+
+	&.dark {
+		& .thumbnail {
+			border-bottom: 0;
+		}
+	}
+
+	&:focus-within {
+		outline-color: var(--token-color-focus-action-external);
+		outline-width: 2px;
+		outline-style: solid;
+		outline-offset: 0;
+	}
+}
+
+.contentContainer {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	overflow: hidden;
+	position: relative;
+}
+
+.link {
+	position: absolute;
+	inset: 0;
+	outline: none;
+}
+
+.thumbnail {
+	& .image {
+		position: relative;
+		display: grid;
+		aspect-ratio: 16 / 9;
+		overflow: hidden;
+
+		& img {
+			object-fit: cover;
+			object-position: center;
+			width: 100%;
+			height: 100%;
+		}
+	}
+}
+
+.personThumbnail {
+	composes: thumbnail;
+	& .image {
+		aspect-ratio: 4 / 3;
+	}
+}
+
+.logoThumbnail {
+	composes: thumbnail;
+	padding: var(--hdsplus-spacing-07);
+
+	& .image {
+		aspect-ratio: none;
+
+		& img {
+			aspect-ratio: 16 / 9;
+			object-fit: contain;
+		}
+	}
+}
+
+.meta {
+	color: var(--token-color-foreground-faint);
+	text-transform: uppercase;
+	margin: 0;
+	display: flex;
+	flex-wrap: wrap;
+	list-style: none;
+	padding: 0;
+}
+
+.metaSeparator {
+	--padding-x: 12px;
+
+	padding-left: var(--padding-x);
+	padding-right: var(--padding-x);
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	row-gap: 16px;
+	padding: 20px 20px 0 20px;
+}
+
+.heading {
+	font-weight: var(--token-typography-font-weight-bold);
+	color: var(--token-color-foreground-strong);
+	margin: 0;
+}
+
+.description {
+	color: var(--token-color-foreground-primary);
+	margin: 0;
+}
+
+.productBadges {
+	margin-top: auto;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
+.cta {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	color: var(--token-color-foreground-primary);
+	padding: 8px 20px 20px 20px;
+	margin-top: auto;
+	transition: color 0.25s ease;
+
+	& svg {
+		transition: transform 0.25s ease;
+	}
+
+	&:empty {
+		padding-top: 0;
+	}
+}

package/src/components/card/types.ts

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { ReactNode } from 'react'
+import type { ProductBadgeProps } from '../product-badge'
+import type { NewsroomCardProps } from './newsroom-card'
+import type { PersonCardProps } from './person-card'
+import type { ResourceCardProps } from './resource-card'
+import type { UnifiedCardProps } from './unified-card'
+
+export interface BaseCardProps {
+	withArrow?: boolean
+	heading: string
+	link: string
+	clickHandler?: () => void
+	isExternal?: boolean
+	hasBorder?: boolean
+	className?: string
+}
+
+export interface CardPrimitiveProps extends BaseCardProps {
+	children: ReactNode
+}
+
+export interface ThumbnailProps {
+	src: string
+	alt: string
+}
+
+export interface MetaProps {
+	items: Array<string | ReactNode>
+}
+
+export interface ContentProps {
+	children: ReactNode
+}
+
+export interface HeadingProps {
+	as?: 'h2' | 'h3' | 'h4'
+	children: string
+}
+
+export interface ProductBadgesProps {
+	badges: Array<ProductBadgeProps['productName']>
+	children?: ReactNode
+}
+
+export interface DescriptionProps {
+	children: string
+}
+
+export interface CardProps extends BaseCardProps {
+	thumbnail?: ThumbnailProps
+	meta?: MetaProps['items']
+	description?: DescriptionProps['children']
+	productBadges?: ProductBadgesProps['badges']
+}
+
+export {
+	NewsroomCardProps,
+	PersonCardProps,
+	ResourceCardProps,
+	UnifiedCardProps,
+}

package/src/components/card/unified-card/index.tsx

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { ReactNode } from 'react'
+import Badge from '@hashicorp/react-design-system-components/src/components/badge'
+import * as CardPrimitives from '../primitives'
+import type { CardProps, ThumbnailProps } from '../types'
+
+export interface UnifiedCardProps {
+	heading: string
+	meta?: string[]
+	link: string
+	productBadges?: CardProps['productBadges']
+	badges?: (string | [ReactNode, string])[]
+	thumbnail?: ThumbnailProps
+	withArrow?: boolean
+	isExternal?: boolean
+	className?: string
+}
+
+export function UnifiedCard({
+	heading,
+	meta,
+	link,
+	productBadges,
+	badges,
+	thumbnail,
+	withArrow = false,
+	isExternal = false,
+	className,
+}: UnifiedCardProps) {
+	return (
+		<CardPrimitives.Card
+			heading={heading}
+			link={link}
+			withArrow={withArrow}
+			isExternal={isExternal}
+			className={className}
+		>
+			{thumbnail ? <CardPrimitives.Thumbnail {...thumbnail} /> : null}
+			<CardPrimitives.Content>
+				{meta && meta.length > 0 ? <CardPrimitives.Meta items={meta} /> : null}
+				<CardPrimitives.Heading>{heading}</CardPrimitives.Heading>
+				{productBadges && productBadges?.length > 0 ? (
+					<CardPrimitives.ProductBadges badges={productBadges}>
+						{badges && badges.length > 0
+							? badges.map((badge, stableIdx) => {
+									if (Array.isArray(badge)) {
+										return (
+											<Badge key={stableIdx} icon={badge[0]} text={badge[1]} />
+										)
+									}
+
+									return <Badge key={stableIdx} text={badge} />
+							  })
+							: null}
+					</CardPrimitives.ProductBadges>
+				) : null}
+			</CardPrimitives.Content>
+		</CardPrimitives.Card>
+	)
+}

package/{packages → src/components}/consent-manager/README.md

@@ -11,7 +11,6 @@ A GDPR-compliant consent manager.
 - `segmentWriteKey` (string) - your production segment write key
 - `segmentServices` (array of objects) - use this to override the category or description of a service provided by Segment
   - `name` - name of the Segment integration, must match the integration you are overriding
-  - `utilServerRoot` - root path of the instance of HashiCorp's `web-utility-server` to use. This is used to fetch integrations based on segment write key.
   - `category` _[optional]_ - new category name
   - `description` _[optional]_ - new description
 - `categories` (array) - State of toggle
@@ -28,3 +27,47 @@ A GDPR-compliant consent manager.
   - `dataAttrs` (arr) _[optional]_ - array of `data-` attributes to add to script tag
     - `name` (str) - name of data attribute (`data-name`)
     - `value` (str) - value of `data` attribute to set
+- `showDialog` (bool) - whether or not the dialog `open` attribute is true
+
+
+## `SegmentPreloadScript`
+
+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.
+
+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.
+
+Expect the new change to look like the following:
+
+```diff
+// pages/_document.tsx
+
+
+  import Document, { Html, Head, Main, NextScript } from 'next/document'
+  import HashiHead from '@hashicorp/react-head'
++ import { SegmentPreloadScript } from '@web/react-components/src/components/consent-manager/scripts/segment'
+  // other imports
+
+  export default class MyDocument extends Document {
+    static async getInitialProps(ctx) {
+      const initialProps = await Document.getInitialProps(ctx)
+      return { ...initialProps }
+    }
+
+    render() {
+      return (
+        <Html lang="en">
+          <Head>
+            <HashiHead />
+          </Head>
+          <body>
+-           <script
+-             dangerouslySetInnerHTML={{
+-               __html: `!function(){var analytics=window... ... ...`
+-             }}
+-           />
++           <SegmentPreloadScript />
+
+// etc...
+```
+
+No additional updates are necessary!

package/src/components/consent-manager/components/banner/banner.module.css

@@ -0,0 +1,23 @@
+.root {
+	background-color: var(--token-color-surface-strong);
+	width: 100%;
+	padding: 10px 15px;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	z-index: 10;
+	font-size: 0.9rem;
+}
+
+.innerContainer {
+	composes: g-grid-container from global;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: var(--hdsplus-spacing-01);
+	flex-direction: column;
+
+	@media (min-width: 1350px) {
+		flex-direction: row;
+	}
+}

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

@@ -0,0 +1,31 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import ConsentBanner from './banner'
+
+test('should display the correct privacy policy url', () => {
+	const testValue = 'test'
+	render(<ConsentBanner privacyPolicyLink={testValue} />)
+	expect(screen.getByTestId('privacy-policy')).toHaveAttribute(
+		'href',
+		testValue
+	)
+})
+
+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/banner/banner.tsx

@@ -0,0 +1,73 @@
+import Link from 'next/link'
+import Button from '@hashicorp/react-design-system-components/src/components/button'
+import ButtonSet from '@hashicorp/react-design-system-components/src/components/button-set'
+import Text from '@hashicorp/react-design-system-components/src/components/text'
+import s from './banner.module.css'
+
+interface ConsentBannerProps {
+	preferences?: { loadAll?: boolean }
+	privacyPolicyLink?: string
+	cookiePolicyLink?: string
+	onManagePreferences?: () => void
+	onAccept?: () => void
+}
+
+export default function ConsentBanner({
+	preferences,
+	privacyPolicyLink,
+	cookiePolicyLink,
+	onManagePreferences,
+	onAccept,
+}: ConsentBannerProps) {
+	return (
+		<div className={s.root} data-testid="consent-banner">
+			<div className={s.innerContainer}>
+				<Text.Body color="primary">
+					We use cookies & other similar technology to collect data to improve
+					your experience on our site, as described in our{' '}
+					<Link
+						href={
+							privacyPolicyLink ?? 'https://www.hashicorp.com/trust/privacy'
+						}
+						className={s.link}
+						target="_blank"
+						rel="noopener noreferrer"
+						data-testid="privacy-policy"
+					>
+						Privacy Policy
+					</Link>{' '}
+					and{' '}
+					<Link
+						href={
+							cookiePolicyLink ??
+							'https://www.hashicorp.com/trust/privacy/cookies'
+						}
+						className={s.link}
+						target="_blank"
+						rel="noopener noreferrer"
+						data-testid="cookie-policy"
+					>
+						Cookie Policy
+					</Link>
+					.
+				</Text.Body>
+				<div>
+					<ButtonSet>
+						<Button
+							onClick={onManagePreferences}
+							color="secondary"
+							data-testid="manage-preferences"
+							text="Manage Preferences"
+						/>
+						<Button
+							onClick={onAccept}
+							color="primary"
+							data-testid="accept"
+							text={preferences?.loadAll ? 'Dismiss' : 'Accept'}
+						/>
+					</ButtonSet>
+				</div>
+			</div>
+		</div>
+	)
+}

package/src/components/consent-manager/components/dialog/dialog.module.css

@@ -0,0 +1,145 @@
+.root {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 999;
+	background-color: rgba(0, 0, 0, 0.5);
+	border: 0;
+}
+
+.flexCenteredRow {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.visibleDialog {
+	display: flex;
+	flex-direction: column;
+	width: 60%;
+	max-width: 734px;
+	background-color: var(--token-color-surface-primary);
+	color: var(--black);
+	border-radius: var(--hdsplus-spacing-03);
+	overflow: hidden; /* IE */
+	max-height: 80%;
+	box-shadow: var(--token-surface-overlay-box-shadow);
+
+	@media (max-width: 1000px) {
+		width: 85%;
+	}
+
+	@media (max-width: 700px) {
+		width: 90%;
+	}
+}
+
+.dialogHeader {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background-color: var(--token-color-surface-faint);
+	border-bottom: 1px solid var(--token-color-border-primary);
+	padding: var(--hdsplus-spacing-07);
+	flex-shrink: 0;
+}
+
+.dialogBody {
+	padding: var(--hdsplus-spacing-07);
+	flex-grow: 1;
+	overflow-y: scroll;
+	display: flex;
+	flex-direction: column;
+	gap: var(--hdsplus-spacing-05);
+}
+
+.category {
+	border-top: 1px solid var(--token-color-foreground-faint);
+}
+
+.categoryHeader {
+	display: flex;
+	align-items: center;
+	gap: var(--hdsplus-spacing-05);
+	padding: var(--hdsplus-spacing-07) 0;
+}
+
+.categoryFoldTrigger {
+	--size: 24px;
+	--svg-rotation: 0 deg;
+
+	appearance: none;
+	margin: 0;
+	margin-left: auto;
+	padding: 0;
+	width: var(--size);
+	height: var(--size);
+	display: grid;
+	place-items: center;
+	border: 0;
+	background-color: transparent;
+	cursor: pointer;
+	color: var(--token-color-foreground-strong);
+
+	& svg {
+		transform: rotate(var(--svg-rotation));
+		transition: transform 0.3s;
+	}
+
+	&.shown {
+		--svg-rotation: 180deg;
+	}
+}
+
+.categoryFold {
+	margin-top: -16px;
+	padding-bottom: var(--hdsplus-spacing-07);
+}
+
+.categoryFoldDescription {
+	composes: g-type-body-small from global;
+	margin: 0;
+	color: var(--wpl-neutral-500);
+}
+
+.categoryItem {
+	display: flex;
+	flex-direction: column;
+	margin-top: var(--hdsplus-spacing-05);
+	padding: var(--hdsplus-spacing-05);
+}
+
+.categoryItemHeader {
+	display: flex;
+	align-items: center;
+	gap: var(--hdsplus-spacing-05);
+}
+
+.categoryItemTitle {
+	margin: 0;
+}
+
+.categoryItemDescription {
+	margin: var(--hdsplus-spacing-02) 0 0;
+}
+
+.dialogFooter {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
+	flex-shrink: 0;
+	padding: var(--hdsplus-spacing-07);
+	column-gap: var(--hdsplus-spacing-07);
+	row-gap: var(--hdsplus-spacing-04);
+	background-color: var(--token-color-surface-faint);
+	border-top: 1px solid var(--token-color-border-primary);
+
+	@media (min-width: 420px) {
+		flex-direction: row;
+	}
+}