@hashicorp/react-components 0.0.0-canary.06ed51b

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: require.resolve('@hashicorp/platform-cli/config/.eslintrc.js'),
+}

package/.stylelintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@hashicorp/platform-cli/config/stylelint.config']
+}

package/.test/setup-vitest.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'

package/README.md

@@ -0,0 +1,3 @@
+# `@hashicorp/react-components`
+
+This package contains React components that are built using HDS guidelines that don't align with existing HDS components.

package/global.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+/// <reference types="@hashicorp/platform-types" />

package/package.json

@@ -0,0 +1,34 @@
+{
+	"name": "@hashicorp/react-components",
+	"version": "0.0.0-canary.06ed51b",
+	"main": "src/index.ts",
+	"scripts": {
+		"lint": "next-hashicorp lint",
+		"test": "vitest run",
+		"test:watch": "vitest watch"
+	},
+	"dependencies": {
+		"@hashicorp/flight-icons": "^3.5.0",
+		"@hashicorp/platform-product-meta": "^0.1.1",
+		"@hashicorp/platform-util": "^0.2.0",
+		"@hashicorp/react-design-system-components": "*",
+		"@hashicorp/web-mktg-logos": "*",
+		"@radix-ui/react-navigation-menu": "^1.2.0",
+		"@radix-ui/react-visually-hidden": "^1.1.0",
+		"@vercel/analytics": "^1.3.1",
+		"@vercel/fetch": "^7.0.0",
+		"@vercel/stega": "^0.1.2",
+		"classnames": "^2.3.2",
+		"js-cookie": "^3.0.5",
+		"moize": "^6.1.3",
+		"react-hook-form": "^7.43.5"
+	},
+	"devDependencies": {
+		"@hashicorp/platform-cli": "^2.8.0",
+		"@hashicorp/platform-types": "^0.4.0",
+		"@testing-library/jest-dom": "^6.4.2",
+		"@vitejs/plugin-react": "^4.2.1",
+		"nock": "^14.0.0-beta.5",
+		"vitest": "^1.4.0"
+	}
+}

package/postcss.config.js

@@ -0,0 +1,21 @@
+// Next.js allows for plugins to be specified as an array of arrays, but this
+// isn't supported by Vitest, so use a helper function to convert the array of
+// arrays to an object.
+function standardSyntax(plugins) {
+	const _plugins = {}
+	plugins.forEach((p) => {
+		if (Array.isArray(p)) {
+			_plugins[p[0]] = p[1]
+		} else {
+			_plugins[p] = {}
+		}
+	})
+	return _plugins
+}
+
+const baseConfig = require('@hashicorp/platform-postcss-config')
+
+module.exports = {
+	...baseConfig,
+	plugins: standardSyntax(baseConfig.plugins),
+}

package/src/components/actions/index.tsx

@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import classNames from 'classnames'
+import Button from '@hashicorp/react-design-system-components/src/components/button'
+import StandaloneLink from '@hashicorp/react-design-system-components/src/components/standalone-link'
+import { IconArrowRight16 } from '@hashicorp/flight-icons/svg-react/arrow-right-16'
+import { IconArrowRight24 } from '@hashicorp/flight-icons/svg-react/arrow-right-24'
+import type { ActionsProps } from './types'
+import s from './style.module.css'
+import { ComponentProps } from 'react'
+
+const hasButton = (item) => item.type === 'button' || item.type === undefined
+const hasStandaloneLink = (item) => item.type === 'standalone-link'
+
+export default function Actions({
+	appearance = 'light',
+	layout = 'inline',
+	alignment = 'left',
+	theme = 'primary',
+	size = 'large',
+	ctas,
+}: ActionsProps) {
+	if (ctas.length < 1 || ctas.length > 2) {
+		throw new Error(
+			`Actions expects at least 1 cta, no more than 2. You provided ${ctas.length}.`
+		)
+	}
+	let mixed = false
+	// If CTAs contain a button and standalone link
+	// increase the column gap
+	if (ctas.some(hasButton) && ctas.some(hasStandaloneLink)) {
+		mixed = true
+	}
+	return (
+		<div
+			className={classNames(
+				s.actions,
+				s[layout],
+				s[alignment],
+				mixed && s.mixed
+			)}
+			data-testid="actions"
+		>
+			{ctas.map((cta, index) => {
+				// The first CTA and second CTA should always
+				// have the `primary` and `secondary` variations respectively.
+
+				const standaloneLinkVariant: ComponentProps<
+					typeof StandaloneLink
+				>['color'] =
+					index === 0
+						? 'primary'
+						: appearance === 'dark'
+						? 'secondary-inverted'
+						: 'secondary'
+				const isStandaloneLink = cta?.type === 'standalone-link'
+
+				if (isStandaloneLink) {
+					return (
+						<StandaloneLink
+							// eslint-disable-next-line react/no-array-index-key
+							key={index}
+							text={cta.title}
+							icon={
+								size === 'large' ? (
+									<IconArrowRight24
+										width="100%"
+										height="100%"
+										style={{ display: 'block' }}
+									/>
+								) : (
+									<IconArrowRight16
+										width="100%"
+										height="100%"
+										style={{ display: 'block' }}
+									/>
+								)
+							}
+							iconPosition="trailing"
+							href={cta.href}
+							color={standaloneLinkVariant}
+							size={size}
+							onClick={cta?.onClick}
+							data-testid={`standaloneLink-${index}`}
+						/>
+					)
+				} else {
+					return (
+						<Button
+							// eslint-disable-next-line react/no-array-index-key
+							key={index}
+							text={cta.title}
+							href={cta.href}
+							onClick={cta.onClick}
+							size={size}
+							color={theme}
+							data-testid={`button-${index}`}
+						/>
+					)
+				}
+			})}
+		</div>
+	)
+}

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

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.actions {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 16px 18px;
+
+	&.stacked {
+		flex-direction: column;
+
+		&.left {
+			align-items: flex-start;
+		}
+
+		&.center {
+			align-items: center;
+		}
+	}
+
+	&.mixed {
+		column-gap: 24px;
+		row-gap: 32px;
+	}
+}

package/src/components/actions/types.ts

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { Products } from '@hashicorp/platform-product-meta'
+
+interface CtaProps {
+	/**
+	 * The text that appears inside the button.
+	 */
+	title: string
+	/**
+	 * Where the button links to when clicked.
+	 */
+	href: string
+	/**
+	 * A function that will be called when the button is clicked.
+	 */
+	onClick?: () => void
+}
+
+interface ButtonCtaProps extends CtaProps {
+	type?: 'button'
+}
+
+interface StandaloneLinkCtaProps extends CtaProps {
+	type: 'standalone-link'
+}
+
+export interface ActionsProps {
+	/**
+	 * Display actions on light or dark background.
+	 */
+	appearance?: 'light' | 'dark'
+	/**
+	 * Display buttons inline or stacked by default.
+	 */
+	layout?: 'inline' | 'stacked'
+	/**
+	 * Display buttons inline or stacked by default.
+	 */
+	alignment?: 'left' | 'center'
+	/**
+	 * Render primary button with product color.
+	 */
+	theme?:
+		| 'primary'
+		| 'secondary'
+		| 'secondary-high-contrast'
+		| 'tertiary'
+		| 'critical'
+		| Exclude<Products, 'hashicorp'>
+	/**
+	 * Determines CTA button sizing.
+	 */
+	size?: 'small' | 'medium' | 'large'
+	/**
+	 * Array of CTAs. Minimum of one, max of two.
+	 * When both a Button and StandaloneLink are
+	 * rendered, they can only render in said order.
+	 * This is intentional and ensures adherence to a design
+	 * requirement of rendering the Button first when data
+	 * for both a Button and a StandaloneLink are provided.
+	 * @see CtaProps
+	 */
+	ctas:
+		| [ButtonCtaProps]
+		| [StandaloneLinkCtaProps]
+		| [ButtonCtaProps, ButtonCtaProps]
+		| [StandaloneLinkCtaProps, StandaloneLinkCtaProps]
+		| [ButtonCtaProps, StandaloneLinkCtaProps]
+}

package/src/components/call-to-action/index.tsx

@@ -0,0 +1,205 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { ComponentProps, ReactNode } from 'react'
+import Button from '@hashicorp/react-design-system-components/src/components/button'
+import ButtonSet from '@hashicorp/react-design-system-components/src/components/button-set'
+import StandaloneLink from '@hashicorp/react-design-system-components/src/components/standalone-link'
+import { IconArrowRight24 } from '@hashicorp/flight-icons/svg-react/arrow-right-24'
+import { IconExternalLink24 } from '@hashicorp/flight-icons/svg-react/external-link-24'
+import { IconDownload24 } from '@hashicorp/flight-icons/svg-react/download-24'
+import { IconCornerRightDown24 } from '@hashicorp/flight-icons/svg-react/corner-right-down-24'
+import type { Products } from '@hashicorp/platform-product-meta'
+import classNames from 'classnames'
+import variantCentered from './styles/variant-centered.module.css'
+import variantCompact from './styles/variant-compact.module.css'
+import variantCompactGrid from './styles/variant-compact-grid.module.css'
+import variantLinks from './styles/variant-links.module.css'
+
+const stylesDict = {
+	centered: variantCentered,
+	compact: variantCompact,
+	compactGrid: variantCompactGrid,
+	links: variantLinks,
+}
+
+interface CallToActionProps {
+	heading?: string
+	content?: ReactNode
+	links?: {
+		type?: 'inbound' | 'outbound' | 'anchor' | 'download'
+		text: string
+		url: string
+	}[]
+	variant?: 'centered' | 'compact' | 'compactGrid' | 'links'
+	product?: 'primary' | 'secondary' | Exclude<Products, 'hashicorp'>
+	theme?: 'light' | 'gray' | 'dark' | 'brand'
+	className?: string
+}
+
+function determineIconFromLinktype(
+	linkType: 'inbound' | 'outbound' | 'anchor' | 'download'
+): ReactNode {
+	switch (linkType) {
+		case 'inbound':
+			return (
+				<IconArrowRight24
+					style={{ display: 'block' }}
+					width="100%"
+					height="100%"
+				/>
+			)
+		case 'outbound':
+			return (
+				<IconExternalLink24
+					style={{ display: 'block' }}
+					width="100%"
+					height="100%"
+				/>
+			)
+		case 'download':
+			return (
+				<IconDownload24
+					style={{ display: 'block' }}
+					width="100%"
+					height="100%"
+				/>
+			)
+		case 'anchor':
+			return (
+				<IconCornerRightDown24
+					style={{ display: 'block' }}
+					width="100%"
+					height="100%"
+				/>
+			)
+		default:
+			throw new Error(`Unsupported linkType: ${linkType}`)
+	}
+}
+
+function CallToAction({
+	heading,
+	content,
+	links,
+	variant = 'centered',
+	product = 'primary',
+	theme = 'light',
+	className,
+}: CallToActionProps) {
+	const s = stylesDict[variant]
+	if (!heading && !content) {
+		throw new Error('<CallToAction /> requires either heading or content')
+	}
+	const hasLinks = links && links.length > 0
+	if (hasLinks && links.filter((l) => !l.text || !l.url).length > 0) {
+		throw new Error(
+			'<CallToAction /> `links` must have both a "text" and a "url" prop'
+		)
+	}
+	return (
+		<div className={classNames(s.root, s[`theme-${theme}`], className)}>
+			<div className={s.container}>
+				{heading && (
+					<h2 className={s.heading} data-testid="heading">
+						{heading}
+					</h2>
+				)}
+				<div className={s.contentAndLinks}>
+					{content && (
+						<div
+							className={classNames(s.content, { [s.hasHeading]: heading })}
+							data-testid="content"
+						>
+							{content}
+						</div>
+					)}
+					{links && (
+						<ButtonSet className={s.links} data-testid="links">
+							{links.map((link, stableIdx) => {
+								let color: ComponentProps<typeof Button>['color'] =
+									variant === 'links'
+										? 'tertiary'
+										: stableIdx === 0
+										? product
+										: 'secondary'
+
+								if (color === 'tertiary') {
+									return (
+										<StandaloneLink
+											key={stableIdx}
+											color="secondary"
+											text={link.text}
+											href={link.url}
+											size="large"
+											icon={
+												<IconArrowRight24
+													style={{ display: 'block' }}
+													width="100%"
+													height="100%"
+												/>
+											}
+											iconPosition="trailing"
+										/>
+									)
+								}
+
+								// @ts-expect-error - TypeScript doesn't allow 'hashicorp', but
+								// Dato might still pass it, so rewrite it to 'primary'.
+								if (color === 'hashicorp') {
+									color = 'primary'
+								}
+
+								if (theme === 'brand' && color === 'primary') {
+									// `primary` doesn't work on brand, so
+									// update it to `secondary`
+									color = 'secondary'
+								} else if (theme === 'brand' && color === 'secondary') {
+									return (
+										<StandaloneLink
+											key={stableIdx}
+											color="secondary-inverted"
+											text={link.text}
+											href={link.url}
+											size="large"
+											icon={
+												<IconArrowRight24
+													style={{ display: 'block' }}
+													width="100%"
+													height="100%"
+												/>
+											}
+											iconPosition="trailing"
+										/>
+									)
+								}
+
+								return (
+									<Button
+										// eslint-disable-next-line react/no-array-index-key
+										key={stableIdx}
+										// className={s.button}
+										color={color}
+										text={link.text}
+										href={link.url}
+										size="large"
+										icon={
+											link.type
+												? determineIconFromLinktype(link.type)
+												: undefined
+										}
+										iconPosition="trailing"
+									/>
+								)
+							})}
+						</ButtonSet>
+					)}
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default CallToAction

package/src/components/call-to-action/styles/variant-centered.module.css

@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.root {
+	--background: var(--white);
+	--text-color-display: var(--gray-1);
+	--text-color-body: var(--gray-2);
+
+	background: var(--background);
+	padding: 64px 0;
+
+	@media (--medium) {
+		padding: 88px 0;
+	}
+	@media (--large) {
+		padding: 128px 0;
+	}
+
+	&.theme-gray {
+		--background: var(--gray-6);
+	}
+
+	&.theme-dark {
+		--background: var(--black);
+		--text-color-display: var(--white);
+		--text-color-body: var(--gray-5);
+	}
+
+	&.theme-brand {
+		--background: var(--brand);
+		--text-color-display: var(--white);
+		--text-color-body: var(--gray-6);
+	}
+}
+
+.container {
+	composes: g-grid-container from global;
+}
+
+.heading {
+	composes: g-type-display-2 from global;
+	color: var(--text-color-display);
+	margin: 0 auto;
+	text-align: center;
+	max-width: 20em;
+}
+
+.content {
+	composes: g-type-body-large from global;
+	color: var(--text-color-body);
+	margin: 0 auto;
+	text-align: center;
+	max-width: 40em;
+
+	&.hasHeading {
+		margin-top: 16px;
+
+		@media (--large) {
+			margin-top: 24px;
+		}
+	}
+}
+
+.links {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+
+	/*
+      * Margins here account for extra 8px margin on buttons
+      * which are needed to center and space properly regardless of whether
+      * buttons are wrapping to multiple lines or not.
+      */
+	margin-top: 24px;
+	margin-bottom: -8px;
+
+	@media (--large) {
+		margin-top: 32px;
+	}
+}
+
+.button {
+	/* 
+      * This ensures 16px between buttons at all times, while maintaining proper centering
+      * when buttons wrap to multiple lines.
+      * There will be an extra 8px space on all sides of the button group.
+      * The top and bottom are accounted for by the -8px adjustment on `.action` margins.
+      * The left and right excess is left as is - it's needed for proper centering when wrapping.
+      */
+	margin: 8px;
+}

package/src/components/call-to-action/styles/variant-compact-grid.module.css

@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.root {
+	--background: var(--white);
+	--text-color-display: var(--gray-1);
+	--text-color-body: var(--gray-2);
+
+	background: var(--background);
+	padding: 48px 0;
+
+	@media (--medium) {
+		padding: 64px 0;
+	}
+	@media (--large) {
+		padding: 88px 0;
+	}
+
+	&.theme-gray {
+		--background: var(--gray-6);
+	}
+
+	&.theme-dark {
+		--background: var(--black);
+		--text-color-display: var(--white);
+		--text-color-body: var(--gray-5);
+	}
+
+	&.theme-brand {
+		--background: var(--brand);
+		--text-color-display: var(--white);
+		--text-color-body: var(--gray-6);
+	}
+}
+
+.container {
+	composes: g-grid-container from global;
+	composes: g-grid from global;
+}
+
+.heading {
+	grid-column: 1 / -1;
+	composes: g-type-display-2 from global;
+	color: var(--text-color-display);
+	margin: 0;
+
+	@media (--medium-up) {
+		grid-column: 1 / 5;
+	}
+}
+
+.contentAndLinks {
+	grid-column: 1 / -1;
+	@media (--medium-up) {
+		grid-column: 6 / -1;
+	}
+}
+
+.content {
+	composes: g-type-body-large from global;
+	color: var(--text-color-body);
+	margin: 0;
+	max-width: 35em;
+
+	&.hasHeading {
+		margin-top: 16px;
+
+		@media (--medium-up) {
+			margin: 0;
+		}
+	}
+}
+
+.links {
+	margin-top: 32px;
+	margin-bottom: -16px;
+
+	@media (--large) {
+		margin-top: 40px;
+	}
+}
+
+.button {
+	margin-right: 16px;
+	margin-bottom: 16px;
+}