@hashicorp/react-components 0.0.0-nightly.97eb452 → 0.0.0-nightly.9aa5827

package/src/components/card/types.ts

@@ -1,66 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import type { ReactNode } from 'react'
-import type { ProductBadgeProps } from '../product-badge'
-import type { NewsroomCardProps } from './newsroom-card'
-import type { PersonCardProps } from './person-card'
-import type { ResourceCardProps } from './resource-card'
-import type { UnifiedCardProps } from './unified-card'
-
-export interface BaseCardProps
-	extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-	withArrow?: boolean
-	heading: string
-	link: string
-	clickHandler?: () => void
-	isExternal?: boolean
-	hasBorder?: boolean
-}
-
-export interface CardPrimitiveProps extends BaseCardProps {
-	children: ReactNode
-}
-
-export interface ThumbnailProps {
-	src: string
-	alt: string
-}
-
-export interface MetaProps {
-	items: Array<string | ReactNode>
-}
-
-export interface ContentProps {
-	children: ReactNode
-}
-
-export interface HeadingProps {
-	as?: 'h2' | 'h3' | 'h4'
-	children: string
-}
-
-export interface ProductBadgesProps {
-	badges: Array<ProductBadgeProps['productName']>
-	children?: ReactNode
-}
-
-export interface DescriptionProps {
-	children: string
-}
-
-export interface CardProps extends BaseCardProps {
-	thumbnail?: ThumbnailProps
-	meta?: MetaProps['items']
-	description?: DescriptionProps['children']
-	productBadges?: ProductBadgesProps['badges']
-}
-
-export {
-	NewsroomCardProps,
-	PersonCardProps,
-	ResourceCardProps,
-	UnifiedCardProps,
-}

package/src/components/card/unified-card/index.spec.tsx

@@ -1,40 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { render, screen } from '@testing-library/react'
-import { UnifiedCard, UnifiedCardProps } from '.'
-
-const defaultProps: UnifiedCardProps = {
-	link: 'https://hashicorp.com',
-	heading: 'Example heading',
-	thumbnail: {
-		src: 'https://www.datocms-assets.com/19447/1648680074-screenshot-2022-03-31-at-00-40-47.png',
-		alt: 'HashiConf Europe 2022 Recap',
-	},
-} as const
-
-describe(`<UnifiedCard />`, () => {
-	it('should render the provided meta with a separator if n > 1', () => {
-		const expectedMeta = ['Category', 'Hello']
-		render(<UnifiedCard {...defaultProps} meta={expectedMeta} />)
-
-		const metaElement = screen.getByTestId('wpl-card-meta')
-
-		expectedMeta.forEach((item) => {
-			expect(metaElement).toHaveTextContent(item)
-		})
-
-		expect(metaElement).toContainElement(screen.getByText('|'))
-	})
-
-	it('it should not render a separator if n === 1', () => {
-		render(<UnifiedCard {...defaultProps} meta={['Category']} />)
-		const metaElement = screen.getByTestId('wpl-card-meta')
-
-		expect(metaElement).toContainElement(screen.getByText('Category'))
-
-		expect(metaElement).not.toContainElement(screen.queryByText('|'))
-	})
-})

package/src/components/card/unified-card/index.tsx

@@ -1,58 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import type { ReactNode } from 'react'
-import Badge from '@hashicorp/react-hds/src/components/badge'
-import * as CardPrimitives from '../primitives'
-import type { CardProps } from '../types'
-
-export interface UnifiedCardProps extends CardProps {
-	badges?: (string | [ReactNode, string])[]
-}
-
-export function UnifiedCard({
-	heading,
-	meta,
-	link,
-	productBadges,
-	badges,
-	thumbnail,
-	withArrow = false,
-	isExternal = false,
-	className,
-	'aria-label': ariaLabel,
-}: UnifiedCardProps) {
-	return (
-		<CardPrimitives.Card
-			heading={heading}
-			link={link}
-			withArrow={withArrow}
-			isExternal={isExternal}
-			className={className}
-			aria-label={ariaLabel ?? heading}
-		>
-			{thumbnail ? <CardPrimitives.Thumbnail {...thumbnail} /> : null}
-			<CardPrimitives.Content>
-				{meta && meta.length > 0 ? <CardPrimitives.Meta items={meta} /> : null}
-				<CardPrimitives.Heading>{heading}</CardPrimitives.Heading>
-				{productBadges && productBadges?.length > 0 ? (
-					<CardPrimitives.ProductBadges badges={productBadges}>
-						{badges && badges.length > 0
-							? badges.map((badge, stableIdx) => {
-									if (Array.isArray(badge)) {
-										return (
-											<Badge key={stableIdx} icon={badge[0]} text={badge[1]} />
-										)
-									}
-
-									return <Badge key={stableIdx} text={badge} />
-							  })
-							: null}
-					</CardPrimitives.ProductBadges>
-				) : null}
-			</CardPrimitives.Content>
-		</CardPrimitives.Card>
-	)
-}

package/src/components/intro/index.tsx

@@ -1,82 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import classNames from 'classnames'
-import type { IntroProps } from './types'
-import Actions from '../actions'
-import s from './style.module.css'
-
-export default function Intro({
-	appearance = 'light',
-	textAlignment = 'left',
-	eyebrow,
-	heading,
-	headingElement: HeadingElement = 'h2',
-	headingSize = 2,
-	description,
-	actions,
-}: IntroProps) {
-	const headingSizeClassname = `g-type-display-${headingSize}`
-	const descriptionSizeClassname =
-		headingSize === 1 ? 'g-type-body-large' : 'g-type-body'
-	const descriptionClassName = classNames(
-		s.description,
-		descriptionSizeClassname
-	)
-	return (
-		<div
-			className={classNames(s.intro, s[appearance], s[textAlignment])}
-			data-testid="intro"
-		>
-			{eyebrow ? <p className={s.eyebrow}>{eyebrow}</p> : null}
-			<HeadingElement className={classNames(s.heading, headingSizeClassname)}>
-				{heading}
-			</HeadingElement>
-			<Description className={descriptionClassName}>{description}</Description>
-			{actions && actions.ctas && actions.ctas.length > 0 ? (
-				<div className={s.actions}>
-					<Actions
-						appearance={appearance}
-						layout={actions.layout}
-						alignment={textAlignment}
-						theme={actions.theme}
-						size={actions.size}
-						ctas={actions.ctas}
-					/>
-				</div>
-			) : null}
-		</div>
-	)
-}
-
-const containsHTML = (str: string) => /<[a-z][\s\S]*>/i.test(str)
-
-function Description({
-	className,
-	children,
-}: {
-	className: string
-	children: IntroProps['description']
-}) {
-	// ReactNode
-	if (typeof children === 'object') {
-		return <div className={className}>{children}</div>
-	}
-
-	// HTML String
-	if (typeof children === 'string' && containsHTML(children)) {
-		return (
-			<div
-				dangerouslySetInnerHTML={{
-					__html: children,
-				}}
-				className={className}
-			/>
-		)
-	}
-
-	// String
-	return <p className={className}>{children}</p>
-}

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

@@ -1,67 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-.intro {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-
-	&.center {
-		text-align: center;
-		align-items: center;
-	}
-}
-
-.eyebrow {
-	--color: var(--wpl-neutral-500);
-
-	composes: hdsplus-typography-label from global;
-	font-weight: var(--font-weight-bold);
-	text-transform: uppercase;
-	margin: 0 0 32px;
-	color: var(--color);
-
-	@nest .dark & {
-		--color: var(--wpl-neutral-300);
-	}
-}
-
-.heading {
-	--color: var(--wpl-neutral-900);
-
-	margin: 0;
-	color: var(--color);
-
-	@nest .dark & {
-		--color: var(--wpl-neutral-0);
-	}
-}
-
-.description {
-	--color: var(--wpl-neutral-500);
-
-	margin: 16px 0 0;
-	color: var(--color);
-
-	@nest .dark & {
-		--color: var(--wpl-neutral-400);
-	}
-
-	& > * {
-		color: inherit;
-
-		&:first-child {
-			margin-top: 0;
-		}
-
-		&:last-child {
-			margin-bottom: 0;
-		}
-	}
-}
-
-.actions {
-	margin-top: 32px;
-}

package/src/components/intro/types.ts

@@ -1,44 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import type { ActionsProps } from '../actions/types'
-import React from 'react'
-
-type WithOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
-
-export interface IntroProps {
-	/**
-	 * Display intro on light or dark backgrounds.
-	 */
-	appearance?: 'light' | 'dark'
-	/**
-	 * Controls the text alignment rendering.
-	 */
-	textAlignment?: 'left' | 'center'
-	/**
-	 * Optional text displayed above the heading.
-	 */
-	eyebrow?: string
-	/**
-	 * Text displayed within the heading element.
-	 */
-	heading: string
-	/**
-	 * Controls which element the heading renders as.
-	 */
-	headingElement?: 'h1' | 'h2' | 'h3' | 'h4'
-	/**
-	 * Controls the size at which the heading is rendered.
-	 */
-	headingSize?: 1 | 2 | 3
-	/**
-	 * Text following the heading element.
-	 */
-	description: string | React.ReactNode
-	/**
-	 * Render CTAs following the description element.
-	 */
-	actions?: WithOptional<ActionsProps, 'ctas'>
-}

package/src/components/marketo-form/CHANGELOG.md

@@ -1,122 +0,0 @@
-# @hashicorp/react-marketo-form
-
-## 0.9.0
-
-### Minor Changes
-
-- [#928](https://github.com/hashicorp/react-components/pull/928) [`cc787d0f`](https://github.com/hashicorp/react-components/commit/cc787d0f5c880fe5d569b68ea54d56e5bc1642b6) Thanks [@dstaley](https://github.com/dstaley)! - Add support for htmltext fields
-
-### Patch Changes
-
-- [#972](https://github.com/hashicorp/react-components/pull/972) [`dbb75084`](https://github.com/hashicorp/react-components/commit/dbb75084839ef20949c37114ea3e58ebd955b33d) Thanks [@dstaley](https://github.com/dstaley)! - Remove content API
-
-## 0.8.4
-
-### Patch Changes
-
-- [#959](https://github.com/hashicorp/react-components/pull/959) [`2084dc74`](https://github.com/hashicorp/react-components/commit/2084dc74bb3390227011c9b2052b4ac393554b6e) Thanks [@dstaley](https://github.com/dstaley)! - Treat all-whitespace values as invalid
-
-## 0.8.3
-
-### Patch Changes
-
-- [#941](https://github.com/hashicorp/react-components/pull/941) [`855af8ac`](https://github.com/hashicorp/react-components/commit/855af8ac0cad8a89920b733c1f914d2dff91c391) Thanks [@BRKalow](https://github.com/BRKalow)! - Updates @hashicorp/platform-analytics to address type errors.
-
-- Updated dependencies [[`b4ac21ad`](https://github.com/hashicorp/react-components/commit/b4ac21adec2d76163e1f6a9c3ca5173440d4a934)]:
-  - @hashicorp/react-form-fields@0.2.0
-
-## 0.8.2
-
-### Patch Changes
-
-- [#886](https://github.com/hashicorp/react-components/pull/886) [`cbb148e4`](https://github.com/hashicorp/react-components/commit/cbb148e409f362333e6e898b529cd5c92462b79c) Thanks [@dstaley](https://github.com/dstaley)! - Require emails to have domains
-
-## 0.8.1
-
-### Patch Changes
-
-- [#884](https://github.com/hashicorp/react-components/pull/884) [`d7a4fda2`](https://github.com/hashicorp/react-components/commit/d7a4fda22665ab92ad075c66ca11811b13d819ce) Thanks [@dstaley](https://github.com/dstaley)! - Explicitly set default values for hidden fields
-
-## 0.8.0
-
-### Minor Changes
-
-- [#857](https://github.com/hashicorp/react-components/pull/857) [`2dfb913c`](https://github.com/hashicorp/react-components/commit/2dfb913cde43b4354183bbd04e65975aadd995e5) Thanks [@dstaley](https://github.com/dstaley)! - Add support for Marketo-driven localization
-
-### Patch Changes
-
-- Updated dependencies [[`3c65a8bf`](https://github.com/hashicorp/react-components/commit/3c65a8bf3a6699fe9fca4422f6ff04a26ffeefd4)]:
-  - @hashicorp/react-form-fields@0.1.1
-
-## 0.7.1
-
-### Patch Changes
-
-- [#868](https://github.com/hashicorp/react-components/pull/868) [`10a7dc7f`](https://github.com/hashicorp/react-components/commit/10a7dc7f92b55533a8a0c0c0216999695b165913) Thanks [@dstaley](https://github.com/dstaley)! - - `MarketoForm` will now treat skipped records as errors, and correctly invoke any `onSubmitError` handlers.
-  - Added a new `onSubmitStart` handler that's called as soon as the submission process begins.
-
-## 0.7.0
-
-### Minor Changes
-
-- [#816](https://github.com/hashicorp/react-components/pull/816) [`e6c258c8`](https://github.com/hashicorp/react-components/commit/e6c258c860adb36363827995cb89e54ea2b5f21e) Thanks [@dstaley](https://github.com/dstaley)! - Use @hashicorp/react-form-fields for base field inputs
-
-## 0.6.0
-
-### Minor Changes
-
-- [#832](https://github.com/hashicorp/react-components/pull/832) [`50fbf782`](https://github.com/hashicorp/react-components/commit/50fbf782f2e0c7640f2d26e4f07f0fe477bad245) Thanks [@dstaley](https://github.com/dstaley)! - Call segment.identify on form submissions
-
-## 0.5.0
-
-### Minor Changes
-
-- [#828](https://github.com/hashicorp/react-components/pull/828) [`bafded5c`](https://github.com/hashicorp/react-components/commit/bafded5c510546f1ea236e3455d7af8fb5060115) Thanks [@nandereck](https://github.com/nandereck)! - Allow for hidden autofill values to be passed through
-
-## 0.4.0
-
-### Minor Changes
-
-- [#815](https://github.com/hashicorp/react-components/pull/815) [`5850beac`](https://github.com/hashicorp/react-components/commit/5850beac3128d64d2b9853f023640d33461672e2) Thanks [@nandereck](https://github.com/nandereck)! - Surface field ID on the FieldWrapper component
-
-## 0.3.2
-
-### Patch Changes
-
-- [#791](https://github.com/hashicorp/react-components/pull/791) [`6bd4f1cb`](https://github.com/hashicorp/react-components/commit/6bd4f1cbf150b2f6238500004e00bd116c25a40a) Thanks [@dstaley](https://github.com/dstaley)! - Export Field component for external usage
-
-## 0.3.1
-
-### Patch Changes
-
-- [#802](https://github.com/hashicorp/react-components/pull/802) [`67020b77`](https://github.com/hashicorp/react-components/commit/67020b77bccd38298078d3b5e1fa8757a81e09d8) Thanks [@dstaley](https://github.com/dstaley)! - Throw error if form query parameter is missing
-
-## 0.3.0
-
-### Minor Changes
-
-- [`1125f588`](https://github.com/hashicorp/react-components/commit/1125f588137049b7c91b018342cc199da88d1e23) Thanks [@dstaley](https://github.com/dstaley)! - Report skipped records as errors
-
-## 0.2.0
-
-### Minor Changes
-
-- [#755](https://github.com/hashicorp/react-components/pull/755) [`e803cc00`](https://github.com/hashicorp/react-components/commit/e803cc00d473a6570328473dfb760c5b52a8b3b2) Thanks [@dstaley](https://github.com/dstaley)! - Update react-hook-form
-
-## 0.1.2
-
-### Patch Changes
-
-- [#745](https://github.com/hashicorp/react-components/pull/745) [`e8424612`](https://github.com/hashicorp/react-components/commit/e842461209fcebc5a940128dad1f0acaf8183780) Thanks [@dstaley](https://github.com/dstaley)! - Keep dirty values when resetting form
-
-## 0.1.1
-
-### Patch Changes
-
-- [#743](https://github.com/hashicorp/react-components/pull/743) [`cbbd5082`](https://github.com/hashicorp/react-components/commit/cbbd508249da7b7bf737ccafc9cfe679686b9c18) Thanks [@dstaley](https://github.com/dstaley)! - Correctly keep modified values when recalculating initial state
-
-## 0.1.0
-
-### Minor Changes
-
-- [#630](https://github.com/hashicorp/react-components/pull/630) [`fdccbcc9`](https://github.com/hashicorp/react-components/commit/fdccbcc99ed85aafbdc6af4442f482d6ce5820af) Thanks [@dstaley](https://github.com/dstaley)! - Initial release

package/src/components/marketo-form/README.md

@@ -1 +0,0 @@
-# @hashicorp/react-marketo-form

package/src/components/marketo-form/contexts/FormMetadata.ts

@@ -1,13 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-'use client'
-
-import { createContext } from 'react'
-import type { MarketoFormMetadata } from '../types'
-
-export const FormMetadataContext = createContext<MarketoFormMetadata | null>(
-	null
-)

package/src/components/marketo-form/docs.mdx

@@ -1,197 +0,0 @@
----
-componentName: 'MarketoForm'
----
-
-Renders a form from Marketo.
-
-<LiveComponent>
-  {`<MarketoForm
-    metadata={{
-      result: [
-        {
-          id: 9999,
-          name: "FORM - Contact Sales",
-          description: "",
-          createdAt: "2020-08-26T21:35:12Z+0000",
-          updatedAt: "2022-11-11T01:39:32Z+0000",
-          url: "https://app-ab32.marketo.com/#FO1307B2",
-          status: "approved",
-          theme: "simple",
-          language: "English",
-          locale: "en_US",
-          progressiveProfiling: false,
-          labelPosition: "left",
-          fontFamily: "Helvetica",
-          fontSize: "13px",
-          folder: {
-            type: "Folder",
-            value: 32792,
-            folderName: "01. In use forms",
-          },
-          knownVisitor: {
-            type: "form",
-            template: null,
-          },
-          thankYouList: [
-            {
-              followupType: "none",
-              followupValue: null,
-              default: true,
-            },
-          ],
-          buttonLocation: 120,
-          buttonLabel: "Submit",
-          waitingLabel: "Please Wait",
-          workSpaceId: 1,
-        },
-      ],
-    }}
-    fields={{
-      result: [
-        {
-          id: "FirstName",
-          label: "First Name:",
-          dataType: "text",
-          validationMessage: "This field is required.",
-          required: true,
-          visibilityRules: {
-            ruleType: "alwaysShow",
-          },
-        },
-        {
-          id: "LastName",
-          label: "Last Name:",
-          dataType: "text",
-          validationMessage: "This field is required.",
-          required: true,
-          visibilityRules: {
-            ruleType: "alwaysShow",
-          },
-        },
-        {
-          id: "Email",
-          label: "Business Email:",
-          dataType: "email",
-          validationMessage:
-            "Must be valid email. <span class='mktoErrorDetail'>example@yourdomain.com</span>",
-          required: true,
-          visibilityRules: {
-            ruleType: "alwaysShow",
-          },
-        },
-        {
-          id: "Company",
-          label: "Company:",
-          dataType: "text",
-          validationMessage: "This field is required.",
-          required: true,
-          visibilityRules: {
-            ruleType: "alwaysShow",
-          },
-        },
-        {
-          id: "FavoriteProduct",
-          label: "Favorite HashiCorp Product",
-          dataType: "select",
-          required: true,
-          validationMessage: "This field is required.",
-          visibilityRules: {
-            ruleType: "alwaysShow",
-          },
-          fieldMetaData: {
-            values: [
-              { label: "Terraform", value: "terraform" },
-              { label: "Packer", value: "packer" },
-              { label: "Consul", value: "consul" },
-              { label: "Vault", value: "vault" },
-              { label: "Boundary", value: "boundary" },
-              { label: "Nomad", value: "nomad" },
-              { label: "Waypoint", value: "waypoint" },
-              { label: "Vagrant", value: "vagrant" },
-            ],
-          },
-        },
-        {
-          id: "appendToNotes",
-          label: "Comments",
-          dataType: "textArea",
-          required: false,
-          validationMessage: "This field is required.",
-          visibilityRules: {
-            ruleType: "alwaysShow",
-          },
-        },
-        {
-          id: "Phone",
-          label: "Phone:",
-          dataType: "text",
-          validationMessage: "This field is required.",
-          required: false,
-          visibilityRules: {
-            ruleType: "show",
-            rules: [
-              {
-                subjectField: "fastTracktoSales",
-                operator: "is",
-                values: ["yes"],
-                altLabel: "Phone Number:",
-              },
-            ],
-          },
-        },
-        {
-          id: "fastTracktoSales",
-          label:
-            "I'd like a sales person to contact me about a trial or pricing.",
-          dataType: "checkbox",
-          validationMessage: "This field is required.",
-          rowNumber: 6,
-          columnNumber: 0,
-          required: false,
-          formPrefill: true,
-          fieldMetaData: {
-            initiallyChecked: false,
-          },
-          visibilityRules: {
-            ruleType: "alwaysShow",
-          },
-        },
-        {
-          id: "Consent_Privacy_Policy__c",
-          label: "Send me news about HashiCorp products, releases and events.",
-          dataType: "checkbox",
-          validationMessage: "This field is required.",
-          rowNumber: 6,
-          columnNumber: 0,
-          required: false,
-          formPrefill: true,
-          fieldMetaData: {
-            initiallyChecked: false,
-          },
-          visibilityRules: {
-            ruleType: "alwaysShow",
-          },
-        },
-        {
-          id: "SHRtbFRleHRfMjAyMy0wNC0wNVQyMjo0NDo0Ny45OTZa",
-          labelWidth: 260,
-          dataType: "htmltext",
-          rowNumber: 9,
-          columnNumber: 0,
-          visibilityRules: {
-            ruleType: "alwaysShow"
-          },
-          text: "By submitting this form, you acknowledge and agree that HashiCorp will process your personal information in accordance with the <a href=\\"https://hashicorp.com/trust/privacy\\" target=\\"_blank\\" id=\\"\\">Privacy Policy</a>."
-        }
-      ],
-    }}
-    submitTitle="Download Now"
-    onSubmitSuccess={() => alert("Success!")}
-    onSubmitFailure={() => alert("Failure!")}
-  />`}
-</LiveComponent>
-;
-
-### Props
-
-<PropsTable props={componentProps} />