@hashicorp/react-components 0.0.0-nightly.f535c63 → 0.0.0-nightly.f8bc604

package/src/components/actions/types.ts

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

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

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

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

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

@@ -1,91 +0,0 @@
-/**
- * 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;
-
-	@media (--medium-up) {
-		display: flex;
-	}
-}
-
-.heading {
-	composes: g-type-display-2 from global;
-	color: var(--text-color-display);
-	margin: 0;
-
-	@media (--medium-up) {
-		flex-basis: 33.3%;
-		padding-right: 32px;
-	}
-}
-
-.contentAndLinks {
-	@media (--medium-up) {
-		flex-basis: 66.6%;
-		margin-left: 32px;
-	}
-}
-
-.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;
-}

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

@@ -1,85 +0,0 @@
-/**
- * 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;
-}
-
-.content {
-	composes: g-type-body-large from global;
-	color: var(--text-color-body);
-	margin: 0;
-	max-width: 30em;
-
-	&.hasHeading {
-		margin-top: 16px;
-
-		@media (--large) {
-			margin-top: 24px;
-		}
-	}
-}
-
-.links {
-	margin-top: 32px;
-
-	@media (--large) {
-		margin-top: 40px;
-	}
-
-	&::after {
-		display: block;
-		float: none;
-		content: '';
-		clear: both;
-	}
-}
-
-.button {
-	display: block;
-	float: left;
-	clear: both;
-	& + .g-btn {
-		margin-top: 8px;
-	}
-}

package/src/components/card/README.md

@@ -1,11 +0,0 @@
-# Card
-
-A component used to promote and link to marketing pages, always using a descriptive heading but optionally other elements as needed.
-
-### Props
-
-See [the props file](props.js) for more details.
-
-### Notes
-
-Sub-components of this card can be directly accessed from the base component (e.g.: `<Card.Heading />`) and used to compose the card's `children`.

package/src/components/card/card.tsx

@@ -1,45 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import type { CardProps } from './types'
-import * as CardPrimitive from './primitives'
-
-function Card({
-	withArrow,
-	heading,
-	link,
-	thumbnail,
-	meta,
-	description,
-	productBadges,
-	isExternal,
-	hasBorder,
-}: CardProps) {
-	return (
-		<CardPrimitive.Card
-			withArrow={withArrow}
-			heading={heading}
-			link={link}
-			isExternal={isExternal}
-			hasBorder={hasBorder}
-		>
-			{thumbnail ? (
-				<CardPrimitive.Thumbnail src={thumbnail.src} alt={thumbnail.alt} />
-			) : null}
-			<CardPrimitive.Content>
-				{meta && meta.length > 0 ? <CardPrimitive.Meta items={meta} /> : null}
-				<CardPrimitive.Heading>{heading}</CardPrimitive.Heading>
-				{description ? (
-					<CardPrimitive.Description>{description}</CardPrimitive.Description>
-				) : null}
-				{productBadges && productBadges?.length > 0 ? (
-					<CardPrimitive.ProductBadges badges={productBadges} />
-				) : null}
-			</CardPrimitive.Content>
-		</CardPrimitive.Card>
-	)
-}
-
-export default Card