@hashicorp/react-components 0.0.0 → 1.0.0

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

@@ -1,79 +1,3 @@
-# HashiCorp React Components
+# `@hashicorp/react-components`
 
-This project is a [lerna](https://github.com/lerna/lerna) monorepo containing a library of react components that are shared between multiple HashiCorp web properties. It also includes a component playground that uses [swingset](https://github.com/hashicorp/swingset) to create a space where component authors and contributors can experiment with and quickly iterate on component design and functionality.
-
-## Usage
-
-- **Getting Started:** Run `npm i` to install base-level dependencies, then follow with `npm run bootstrap` to install dependencies for each component in the `packages` directory.
-- **Running the Playground:** Run `npm start` - it will start a dev server which can be viewed at `http://localhost:3000`.
-- **Running Tests:**: Run `npm t` to execute the tests. To run watch mode on tests, `npm run test:watch` - this is helpful during development.
-
-The `packages` directory contains all the individual components. Let's talk about some of the most important files:
-
-- `index.jsx`: primary export of the component itself
-- `index.test.js`: tests for the component, run using [jest](https://jestjs.io/)
-- `docs.mdx`: documentation for the component, see [swingset docs](https://github.com/hashicorp/swingset#usage) for more details on the format
-- `props.js`: information about the component's props, see [swingset docs](https://github.com/hashicorp/swingset#props) for more details on the format
-
-## Publishing Packages
-
-We manage and distribute packages to [`npm`](https://www.npmjs.com/) using [Lerna](https://lerna.js.org/). Each component is independently published and versioned.
-
-### Prerequisites
-
-In order to publish packages, you must:
-
-1. Be added to the HashiCorp organization on `npm`
-2. [Enable 2-factor authentication](https://docs.npmjs.com/configuring-two-factor-authentication) on your npm account
-3. Log into to `npm` in your CLI with [`npm login`](https://docs.npmjs.com/cli/adduser)
-
-If you have not done any of these steps, the publish script will fail.
-
-### Publishing `--canary` releases
-
-Canary releases allow us to publish and test in-progress changes to components.
-
-```
-npm run release:canary
-```
-
-You can consume pre-releases with something like `npm install @hashicorp/react-package-name@next`. Canary releases should only be used in staging contexts, not production.
-
-By default, `npm run release:canary` will publish a pre-patch canary release. If you're working on feature changes or breaking changes, you'll likely want to run the appropriate versioning command within the package folder before running `npm run release:canary`. This also helps signal the versioning intent to reviewers.
-
-**Further details**: `npm run release:canary` will publish any changed packages and their dependencies. It tags the release with the `@next` dist-tag. It also uses [Lerna's `--canary` option](https://github.com/lerna/lerna/tree/master/commands/publish#--canary) to avoid version collisions across branches.
-
-### Publishing Production Releases
-
-Production releases should only be published off of `master`.
-
-```sh
-npm run release
-```
-
-Any production releases should be **immediately followed up by bumping the updated package** in any consuming projects.
-
-For most web-components packages, this means checking the `hashicorp-www-next` repo for Dependabot PRs to bump the package in question. You can view open Dependabot PRs on `hashicorp-www-next` using [the PR view with the `author:app/dependabot-preview` filter applied](https://github.com/hashicorp/hashicorp-www-next/pulls/app%2Fdependabot-preview).
-
-### Oh no! I got a 401 and now my packages are like half-published
-
-The current workaround is not ideal, but should completely fix the issue. Definitely reach out if you need assistance, as almost everyone on the team has run into this:
-
-1. **Remove the "Publish" commit**. The "Publish" commit will most likely be your most recent commit, in which case the command below can be used. **These commands rewrite git history, so use caution!**
-   ```sh
-   git reset --hard HEAD^ # reset the previous commit
-   git push origin master --force-with-lease # push new history
-   ```
-1. **Delete the tags** that point to the deleted publish commit
-   ```sh
-   git tag --delete {tagname} # delete the local tag
-   git push --delete origin {tagname} # delete the remote tag
-   ```
-   For example:
-   ```sh
-   git tag --delete @hashicorp/react-secondary-nav@2.1.0
-   git push --delete origin @hashicorp/react-secondary-nav@2.1.0
-   ```
-   If multiple packages were published, you'll need to delete tags for each individual package.
-
-Now everything should be reset to its state prior to the publish failure.
+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

@@ -1,31 +1,31 @@
 {
-  "name": "@hashicorp/react-components",
-  "version": "0.0.0",
-  "dependencies": {
-    "@hashicorp/mktg-global-styles": "^2.0.0",
-    "@hashicorp/nextjs-scripts": "^13.2.0",
-    "next": "9.5.5",
-    "next-remote-watch": "^0.2.0",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "swingset": "^0.4.2"
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.5",
-    "@testing-library/react": "^11.1.1",
-    "jest": "^26.6.3",
-    "lerna": "^3.22.1",
-    "regenerator-runtime": "^0.13.7"
-  },
-  "scripts": {
-    "bootstrap": "lerna bootstrap",
-    "release": "npm run release:check-branch && npm run release:check-auth && lerna publish",
-    "release:canary": "npm run release:check-auth && lerna publish --dist-tag=next --canary",
-    "release:check-auth": "./scripts/release-check-npm-auth.sh",
-    "release:check-branch": "./scripts/release-check-branch.sh",
-    "start": "next-remote-watch \"./packages/*/{docs.mdx,props.js}\"",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "vercel-build": "npm run bootstrap && next build"
-  }
+	"name": "@hashicorp/react-components",
+	"version": "1.0.0",
+	"main": "src/index.ts",
+	"scripts": {
+		"lint": "next-hashicorp lint",
+		"test": "vitest run",
+		"test:watch": "vitest watch"
+	},
+	"dependencies": {
+		"@hashicorp/flight-icons": "^2.15.0",
+		"@hashicorp/platform-product-meta": "^0.1.1",
+		"@hashicorp/platform-util": "^0.2.0",
+		"@hashicorp/react-design-system-components": "*",
+		"@radix-ui/react-visually-hidden": "^1.0.3",
+		"@vercel/fetch": "^7.0.0",
+		"@web/mktg-logos": "*",
+		"classnames": "^2.3.2",
+		"js-cookie": "^3.0.5",
+		"moize": "^6.1.3",
+		"react-hook-form": "^7.43.5"
+	},
+	"devDependencies": {
+		"@hashicorp/platform-cli": "^2.6.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