@hashicorp/react-components 1.1.10 → 1.2.0

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

@@ -1,270 +0,0 @@
-/**
- * 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

@@ -1,63 +0,0 @@
-/**
- * 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

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

@@ -1,42 +0,0 @@
-/**
- * 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

@@ -1,76 +0,0 @@
-/**
- * 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

@@ -1,84 +0,0 @@
-/**
- * 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

@@ -1,87 +0,0 @@
-/**
- * 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

@@ -1,31 +0,0 @@
-/**
- * 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
-}