@hashicorp/react-components 0.0.0-canary.57d393c

package/src/components/next-steps/style.module.css

@@ -0,0 +1,270 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.nextSteps {
+	--padding-y: var(--wpl-spacing-10);
+
+	position: relative;
+	padding-top: var(--padding-y);
+	padding-bottom: var(--padding-y);
+
+	@media (--medium-up) {
+		--padding-y: var(--wpl-spacing-13);
+	}
+}
+
+.container {
+	composes: g-grid-container from global;
+	composes: g-grid from global;
+	row-gap: var(--wpl-spacing-06);
+	align-items: flex-start;
+}
+
+.content {
+	grid-column: 1 / -1;
+
+	@media (--large) {
+		grid-column: 1 / 5;
+	}
+}
+
+.heading {
+	--color: var(--black);
+
+	composes: g-type-display-2 from global;
+	margin: 0;
+	color: var(--color);
+
+	@nest .dark & {
+		--color: var(--white);
+	}
+}
+
+.description {
+	--color: var(--gray-3);
+
+	composes: g-type-body-large from global;
+	margin: var(--wpl-spacing-05) 0 0;
+	color: var(--color);
+
+	@nest .dark & {
+		--color: var(--gray-5);
+	}
+}
+
+.actions {
+	margin-top: var(--wpl-spacing-06);
+}
+
+.stepsWrapper {
+	--grid-gap: var(--wpl-spacing-05);
+
+	display: flex;
+	flex-direction: column;
+	gap: var(--wpl-spacing-05);
+	grid-column: 1 / -1;
+
+	@media (--large) {
+		--grid-gap: var(--wpl-spacing-06);
+
+		grid-column: 6 / -1;
+	}
+}
+
+.stepsList {
+	--grid-template-columns: 1;
+
+	display: grid;
+	grid-template-columns: repeat(var(--grid-template-columns), 1fr);
+	gap: var(--grid-gap);
+	list-style: none;
+	padding: 0;
+	margin: 0;
+
+	@media (--medium-up) {
+		--grid-template-columns: 2;
+	}
+}
+
+.stepsListItem {
+	display: flex;
+	width: 100%;
+
+	&.stepsListItemFeature {
+		@media (--medium-up) {
+			grid-column: span 2;
+		}
+	}
+}
+
+.tile {
+	--background-color: transparent;
+	--color: var(--wpl-neutral-0);
+	--transition-duration: 250ms;
+	--transition-timing-function: ease-in-out;
+	--border-radius: 8px;
+	--scrim-background: transparent;
+
+	position: relative;
+	display: flex;
+	width: 100%;
+	min-height: 208px;
+	flex-direction: column;
+	padding: var(--wpl-spacing-06);
+	background-color: var(--background-color);
+	color: var(--color);
+	border-radius: var(--border-radius);
+	transition-duration: var(--transition-duration);
+	transition-timing-function: var(--transition-timing-function);
+	transition-property: background-color;
+
+	&.primary {
+		--background-color: var(--brand-secondary);
+		--color: var(--wpl-neutral-900);
+		--scrim-background: black;
+
+		&:hover {
+			--background-color: var(--brand-secondary);
+		}
+
+		@nest .hashicorp & {
+			--background-color: var(--wpl-blue-500);
+			--color: var(--wpl-neutral-0);
+			--scrim-background: transparent;
+
+			&:hover {
+				--background-color: var(--wpl-blue-600);
+			}
+		}
+
+		@nest .dark & {
+			--background-color: var(--wpl-neutral-700);
+			--color: var(--wpl-neutral-0);
+
+			&:hover {
+				--background-color: var(--wpl-neutral-600);
+			}
+		}
+	}
+
+	&:not(.primary) {
+		--color: var(--wpl-neutral-900);
+		--background-color: var(--wpl-neutral-50);
+
+		&:hover {
+			--background-color: var(--wpl-neutral-100);
+		}
+
+		@nest .dark & {
+			--background-color: var(--wpl-neutral-700);
+			--color: var(--white);
+
+			&:hover {
+				--background-color: var(--wpl-neutral-600);
+			}
+		}
+	}
+}
+
+.tileInner {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+.tileScrim {
+	position: absolute;
+	inset: 0;
+	background: var(--scrim-background);
+	border-radius: var(--border-radius);
+	opacity: 0;
+	transition-duration: var(--transition-duration);
+	transition-timing-function: var(--transition-timing-function);
+	transition-property: opacity;
+
+	@nest .tile &:hover {
+		opacity: 0.05;
+	}
+}
+
+.tileHeading {
+	margin: 0;
+	color: inherit;
+}
+
+.tileHeadingText {
+	composes: g-type-display-4 from global;
+	vertical-align: middle;
+}
+
+.tileBadge {
+	display: inline-flex;
+	margin: 0 0 0 var(--wpl-spacing-02);
+	vertical-align: middle;
+}
+
+.tileDescription {
+	--color: var(--wpl-neutral-900);
+
+	composes: g-type-display-6 from global;
+	margin: 8px 0 0;
+	color: var(--color);
+
+	@nest .hashicorp .primary & {
+		--color: var(--wpl-neutral-0);
+	}
+
+	@nest .primary & {
+		--color: var(--brand-text-on-primary);
+	}
+
+	@nest .primary & {
+		--color: var(--brand-text-on-primary);
+		--color: var(--wpl-neutral-900);
+	}
+
+	@nest .dark & {
+		--color: var(--wpl-neutral-0);
+	}
+}
+
+.tileCta {
+	margin-top: auto;
+	padding-top: var(--wpl-spacing-05);
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	color: inherit;
+}
+
+.tileCtaLabel {
+	font-size: 0.875rem;
+	line-height: 1.143;
+	font-weight: var(--token-typography-font-weight-medium);
+	font-family: var(--token-typography-font-stack-text);
+}
+
+.tileCtaIcon {
+	flex-shrink: 0;
+}
+
+.cta {
+	grid-column: 1/ -1;
+	display: flex;
+	flex-wrap: wrap;
+	column-gap: var(--wpl-spacing-03);
+	row-gap: var(--wpl-spacing-01);
+}
+
+.ctaCopy {
+	margin: 0;
+	composes: g-type-body-strong from global;
+	font-size: 16px;
+
+	@nest .dark & {
+		color: var(--wpl-neutral-0);
+	}
+}

package/src/components/next-steps/types.ts

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { Products } from '@hashicorp/platform-product-meta'
+import type { ActionsProps } from '@hashicorp/react-actions/types'
+
+export interface StepProps {
+	/**
+	 * The heading for the step.
+	 */
+	heading: string
+	/**
+	 * Optional badge for the step.
+	 */
+	badge?: string
+	/**
+	 * Optional description for the step.
+	 */
+	description?: string
+	/**
+	 * The call to action for the step.
+	 */
+	cta: {
+		title: string
+		url: string
+	}
+}
+
+export interface NextStepsProps {
+	/**
+	 * Render NextSteps on light or dark background.
+	 */
+	appearance?: 'light' | 'dark'
+	/**
+	 * Optional theme which controls the primary step color.
+	 */
+	theme?: Products
+	/**
+	 * The heading for the section.
+	 */
+	heading: string
+	/**
+	 * The description for the section.
+	 */
+	description: string
+	/**
+	 * The list of steps to display as tiles.
+	 */
+	steps:
+		| [StepProps]
+		| [StepProps, StepProps]
+		| [StepProps, StepProps, StepProps]
+	/**
+	 * Optional CTA displayed below the tiles.
+	 */
+	cta?: {
+		copy: string
+		href: string
+		ctaText: string
+	}
+}

package/src/components/product-badge/index.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react'
+import ProductBadge from '.'
+
+describe('<ProductBadge />', () => {
+	it('should render the name of the product', () => {
+		const productName = 'waypoint'
+		render(<ProductBadge productName={productName} />)
+		const productBadgeEl = screen.getByText(productName)
+		expect(productBadgeEl).toBeInTheDocument()
+	})
+})

package/src/components/product-badge/index.tsx

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { Products } from '@hashicorp/platform-product-meta'
+import Badge from '@hashicorp/react-design-system-components/src/components/badge'
+import { IconDot16 } from '@hashicorp/flight-icons/svg-react/dot-16'
+import s from './style.module.css'
+
+export interface ProductBadgeProps {
+	productName: Products
+	hasDot?: boolean
+}
+
+const ProductBadge = ({ productName, hasDot }: ProductBadgeProps) => {
+	const finalProductName = productName.replace('hashicorp', 'HashiCorp')
+
+	const productBrand =
+		finalProductName === 'HashiCorp cloud platform' ? 'hashicorp' : productName
+
+	return (
+		<Badge
+			className={s.badge}
+			text={finalProductName}
+			icon={
+				hasDot ? (
+					<IconDot16
+						width="100%"
+						height="100%"
+						style={{
+							display: 'block',
+							color: `var(--token-color-${productBrand}-brand)`,
+						}}
+					/>
+				) : undefined
+			}
+		/>
+	)
+}
+
+export default ProductBadge

package/src/components/product-badge/style.module.css

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.root {
+	display: flex;
+	align-items: center;
+	height: 24px;
+	padding: 1.5px 12px 2.5px 12px;
+	border-radius: 24px;
+	width: max-content;
+	background-color: var(--brand);
+	color: var(--brand-text-on-primary);
+
+	&.hasDot {
+		gap: 5px;
+
+		&::before {
+			--size: 7px;
+
+			content: '';
+			width: var(--size);
+			height: var(--size);
+			background-color: var(--brand);
+			border-radius: 50%;
+		}
+	}
+
+	&.light {
+		&.secondary,
+		&.hasDot {
+			background-color: hsla(225, 2%, 63%, 0.13);
+		}
+	}
+
+	&.dark {
+		background-color: var(--wpl-neutral-0);
+
+		&.secondary,
+		&.hasDot {
+			background-color: hsla(0, 0%, 100%, 0.18);
+		}
+	}
+}
+
+.text {
+	display: inline-block;
+	position: relative;
+	font-family: var(--font-body);
+	font-weight: var(--font-weight-bold);
+	font-size: 14px;
+	letter-spacing: 0.0125em;
+	text-transform: capitalize;
+	margin: 0;
+
+	&.light {
+		&.secondary,
+		&.hasDot {
+			color: var(--wpl-neutral-500);
+		}
+	}
+
+	&.dark {
+		color: var(--wpl-neutral-500);
+
+		&.secondary,
+		&.hasDot {
+			color: var(--wpl-neutral-300);
+		}
+	}
+}
+
+.badge {
+	text-transform: capitalize;
+}

package/src/components/products-used/index.tsx

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { ProductsUsedProps } from './types'
+import { IconBoundaryColor16 } from '@hashicorp/flight-icons/svg-react/boundary-color-16'
+import { IconConsulColor16 } from '@hashicorp/flight-icons/svg-react/consul-color-16'
+import { IconNomadColor16 } from '@hashicorp/flight-icons/svg-react/nomad-color-16'
+import { IconPackerColor16 } from '@hashicorp/flight-icons/svg-react/packer-color-16'
+import { IconTerraformColor16 } from '@hashicorp/flight-icons/svg-react/terraform-color-16'
+import { IconVaultColor16 } from '@hashicorp/flight-icons/svg-react/vault-color-16'
+import { IconVagrantColor16 } from '@hashicorp/flight-icons/svg-react/vagrant-color-16'
+import { IconWaypointColor16 } from '@hashicorp/flight-icons/svg-react/waypoint-color-16'
+import classNames from 'classnames'
+import s from './style.module.css'
+
+const ProductIconMap = {
+	boundary: <IconBoundaryColor16 />,
+	consul: <IconConsulColor16 />,
+	nomad: <IconNomadColor16 />,
+	packer: <IconPackerColor16 />,
+	terraform: <IconTerraformColor16 />,
+	vault: <IconVaultColor16 />,
+	vagrant: <IconVagrantColor16 />,
+	waypoint: <IconWaypointColor16 />,
+}
+
+const ProductsUsed = ({
+	appearance = 'light',
+	products,
+}: ProductsUsedProps) => {
+	const eyebrowText = 'Products used'
+
+	// Products with links have different spacing between each other (8px) than
+	// products without links (16px). This spacing is set on the `ul` using the `gap` property.
+	// This logic determines whether or not products have links so as to conditionally change
+	// the spacing.
+	const productsHaveLinks = products[0]?.hasOwnProperty('href')
+
+	return (
+		<div className={classNames([s.root, s[appearance]])} data-testid="root">
+			<p className={classNames([s.eyebrow, s[appearance]])}>{eyebrowText}</p>
+			<ul
+				className={classNames([s.productList], {
+					[s.isSmallerGap]: productsHaveLinks,
+				})}
+			>
+				{products.map((product, index) => {
+					return (
+						<li
+							// eslint-disable-next-line react/no-array-index-key
+							key={index}
+						>
+							<ConditionalLink
+								className={classNames([s.product, s[appearance]])}
+								href={product.href}
+							>
+								<span className={s.productIcon}>
+									{ProductIconMap[product.name]}
+								</span>
+								<span className={classNames([s.productName, s[appearance]])}>
+									{product.name}
+								</span>
+							</ConditionalLink>
+						</li>
+					)
+				})}
+			</ul>
+		</div>
+	)
+}
+
+const ConditionalLink = ({ href, children, className }) => {
+	return href ? (
+		<a href={href} className={className} data-testid={'anchorEl'}>
+			{children}
+		</a>
+	) : (
+		<div className={className}>{children}</div>
+	)
+}
+
+export default ProductsUsed

package/src/components/products-used/style.module.css

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.root {
+	position: relative;
+}
+
+.eyebrow {
+	composes: g-type-label-strong from global;
+	margin: 0 0 var(--hdsplus-spacing-05) 0;
+	color: var(--token-color-foreground-faint);
+
+	&.dark {
+		color: var(--wpl-neutral-400);
+	}
+}
+
+.productList {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	padding: 0;
+	list-style-type: none;
+	row-gap: var(--hdsplus-spacing-03);
+	column-gap: var(--hdsplus-spacing-05);
+
+	&.isSmallerGap {
+		column-gap: var(--hdsplus-spacing-03);
+	}
+}
+
+.product {
+	display: flex;
+	align-items: center;
+
+	&[href] {
+		min-height: 40px;
+		padding: var(--hdsplus-spacing-03) var(--hdsplus-spacing-04);
+		border-radius: calc(var(--hdsplus-spacing-03) / 2);
+		border: 1px solid var(--token-color-border-primary);
+		transition: background-color 0.2s, border 0.2s;
+
+		&:hover {
+			background-color: var(--token-color-border-primary);
+		}
+
+		&:focus {
+			outline: transparent;
+		}
+
+		&:focus-visible {
+			outline: 2px solid var(--token-color-surface-interactive-active);
+			outline-offset: 2px;
+		}
+
+		&.dark {
+			border-color: var(--token-color-border-strong);
+
+			&:hover {
+				background-color: var(--token-color-border-strong);
+			}
+
+			&:focus-visible {
+				outline: 2px solid var(--token-color-border-strong);
+			}
+		}
+	}
+}
+
+.productIcon {
+	display: flex;
+	align-items: center;
+	margin-right: 6px;
+}
+
+.productName {
+	composes: hds-typography-body-100 hds-font-weight-medium from global;
+	font-size: 14px;
+	text-transform: capitalize;
+	color: var(--token-color-foreground-primary);
+
+	&.dark {
+		color: var(--wpl-neutral-0);
+	}
+}

package/src/components/products-used/types.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { Products } from '@hashicorp/platform-product-meta'
+
+export interface ProductsUsedProps {
+	/**
+	 * Display actions on light or dark background.
+	 */
+	appearance?: 'light' | 'dark'
+	/**
+	 * Array of products or products with links. Only supports one or the other, not a mix of the two.
+	 */
+	products: Array<Product> | Array<ProductLink>
+}
+
+interface Product {
+	/**
+	 * Renders a product name
+	 */
+	name: Exclude<Products, 'hashicorp'>
+}
+
+interface ProductLink extends Product {
+	/**
+	 * Where the anchor element links to when clicked.
+	 */
+	href: string
+}