@hashicorp/react-components 0.0.0-canary.29ac326 → 0.0.0-canary.32599ff

package/src/components/inline-video/index.tsx

@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { useEffect, useState } from 'react'
+import classNames from 'classnames'
+import WistiaPlayer from 'react-player/wistia'
+import Player from 'react-player'
+import s from './style.module.css'
+
+interface InlineVideoProps {
+	appearance?: 'light' | 'dark'
+	url: string
+	description?: string
+	solution?: 'infrastructure' | 'security' | 'networking' | 'applications'
+	gradientPosition?: 'left' | 'right' | false
+	videoClassName?: string
+	aspectRatio?: string
+	showAccent?: boolean
+}
+
+const DEFAULT_ASPECT_RATIO = '16 / 9'
+
+export default function InlineVideo(props: InlineVideoProps) {
+	const {
+		appearance = 'light',
+		gradientPosition = 'left',
+		url,
+		description,
+		solution,
+		videoClassName,
+		aspectRatio,
+		showAccent = true,
+	} = props
+
+	const hasAspectRatio = Boolean(aspectRatio)
+
+	const playerProps = {
+		controls: true,
+		url,
+		width: '100%',
+		height: '100%',
+	}
+
+	const [hasWindow, setHasWindow] = useState(false)
+
+	useEffect(() => {
+		if (typeof window !== 'undefined') {
+			setHasWindow(true)
+		}
+	}, [])
+
+	return (
+		<div
+			className={classNames(
+				s.inlineVideo,
+				s[appearance],
+				gradientPosition && s[gradientPosition]
+			)}
+			data-testid="wpl-inline-video"
+		>
+			<div
+				className={classNames(s.videoContainer, solution && s[solution], {
+					[s.hideAccentColor]: !showAccent,
+				})}
+				style={{
+					['--aspect-ratio' as string]: hasAspectRatio
+						? aspectRatio
+						: DEFAULT_ASPECT_RATIO,
+				}}
+			>
+				<div
+					className={classNames(
+						s.video,
+						{
+							[s.innerHasAspectRatio]: hasAspectRatio,
+						},
+						videoClassName
+					)}
+				>
+					{hasWindow ? (
+						<>
+							{url.includes('wistia') ? (
+								<WistiaPlayer
+									{...playerProps}
+									config={{
+										options: {
+											controlsVisibleOnLoad: false,
+										},
+									}}
+								/>
+							) : (
+								<Player {...playerProps} />
+							)}
+						</>
+					) : null}
+				</div>
+			</div>
+
+			{description ? <p className={s.description}>{description}</p> : null}
+		</div>
+	)
+}

package/src/components/inline-video/style.module.css

@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.inlineVideo {
+	--gradient-size: 32px;
+
+	/* Apply border radius to Wistia play button */
+	& :global(.w-bpb-wrapper) {
+		border-radius: 4px !important;
+		overflow: hidden;
+	}
+}
+
+.videoContainer {
+	--gradient: linear-gradient(180deg, #b5d9fa 0%, #1a5ee5 100%);
+
+	width: 100%;
+	position: relative;
+
+	@media (--large) {
+		@nest .left & {
+			padding-left: var(--gradient-size);
+		}
+
+		@nest .right & {
+			padding-right: var(--gradient-size);
+		}
+
+		&.hideAccentColor {
+			&::before {
+				background-image: none;
+			}
+		}
+
+		&::before {
+			position: absolute;
+			content: '';
+			width: 100%;
+			height: calc(100% - var(--gradient-size) * 2);
+			top: var(--gradient-size);
+			left: 0;
+			border-radius: 8px;
+			background-image: var(--gradient);
+		}
+	}
+
+	&.infrastructure {
+		--gradient: linear-gradient(180deg, #8cdeff 0%, #8763d9 100%);
+	}
+
+	&.security {
+		--gradient: linear-gradient(180deg, #ffe58c 0%, #f26b63 100%);
+	}
+
+	&.networking {
+		--gradient: linear-gradient(180deg, #ffb2b8 0%, #c74fb8 100%);
+	}
+
+	&.applications {
+		--gradient: linear-gradient(180deg, #a3f7d6 0%, #5cd1d9 50%, #5494e3 100%);
+	}
+}
+
+.video {
+	aspect-ratio: var(--aspect-ratio);
+	border-radius: 8px;
+	background-color: var(--wpl-neutral-50);
+	overflow: hidden;
+	position: relative;
+
+	@nest .dark & {
+		background-color: var(--wpl-neutral-800);
+	}
+
+	&.innerHasAspectRatio {
+		width: calc(var(--aspect-ratio) * 100%);
+		height: auto;
+		max-width: 100%;
+	}
+}
+.description {
+	composes: g-type-body-small-strong from global;
+	color: var(--wpl-neutral-500);
+	padding: 16px 24px 0 24px;
+	margin: 0;
+	text-align: center;
+
+	@media (--large) {
+		@nest .left & {
+			padding-left: calc(24px + var(--gradient-size));
+		}
+
+		@nest .right & {
+			padding-right: calc(24px + var(--gradient-size));
+		}
+	}
+}

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

@@ -17,8 +17,8 @@
 .eyebrow {
 	--color: var(--wpl-neutral-500);
 
-	composes: hdsplus-typography-label from global;
-	font-weight: var(--font-weight-bold);
+	composes: mds-typography-label from global;
+	font-weight: var(--mds-typography-font-weight-bold);
 	text-transform: uppercase;
 	margin: 0 0 32px;
 	color: var(--color);

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

@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
+'use client'
+
 import { createContext } from 'react'
 import type { MarketoFormMetadata } from '../types'
 

package/src/components/marketo-form/form/index.tsx

@@ -3,9 +3,11 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
+'use client'
+
 import { useEffect, useMemo, useRef } from 'react'
 import { useForm, FormProvider } from 'react-hook-form'
-import Button from '@hashicorp/react-design-system-components/src/components/button'
+import { HDSButton } from '@hashicorp/react-mds/src/hds/components/button'
 import VisibilityRule from '../partials/visibility-rule'
 import NameField from '../partials/fields/name-field'
 import { FormMetadataContext } from '../contexts/FormMetadata'
@@ -81,7 +83,10 @@ interface Props {
 	/**
 	 * Callback called when form has been successfully submitted.
 	 */
-	onSubmitSuccess?: () => void
+	onSubmitSuccess?: (
+		dataToPersist: Record<string, unknown>,
+		response: MarketoSubmissionResponse
+	) => void
 
 	/**
 	 * Callback called when form submission results in an error.
@@ -278,16 +283,16 @@ const Form = ({
 			marketoResponse.success &&
 			!includesSkippedRecords(marketoResponse)
 		) {
-			if (onSubmitSuccess) {
-				onSubmitSuccess()
-			}
-
 			// Remove fields that shouldn't be stored in local storage
 			const dataToPersist = Object.fromEntries(
 				Object.entries(data).filter(([k]) => STORED_FIELD_NAMES.includes(k))
 			)
 			localStorage.setItem('marketoFormData', JSON.stringify(dataToPersist))
 
+			if (onSubmitSuccess) {
+				onSubmitSuccess(dataToPersist, marketoResponse)
+			}
+
 			if (resetOnSubmission) {
 				methods.reset()
 			}
@@ -345,7 +350,7 @@ const Form = ({
 							/>
 						)
 					})}
-					<Button
+					<HDSButton
 						type="submit"
 						size="large"
 						disabled={

package/src/components/marketo-form/partials/fields/checkbox-field/index.tsx

@@ -5,7 +5,7 @@
 
 import { useFormContext } from 'react-hook-form'
 // import CheckboxInput from '@hashicorp/react-form-fields/checkbox'
-import Checkbox from '@hashicorp/react-design-system-components/src/components/form/checkbox'
+import Checkbox from '@hashicorp/react-mds/src/hds/components/form/checkbox'
 import FieldWrapper from '../../field-wrapper'
 import { formattedLabel, useErrorMessage } from '../../../utils'
 import type { MarketoFormCheckboxField } from '../../../types'

package/src/components/marketo-form/partials/fields/email-field/index.tsx

@@ -5,7 +5,7 @@
 
 import { useFormContext } from 'react-hook-form'
 // import TextInput from '@hashicorp/react-form-fields/text'
-import TextInput from '@hashicorp/react-design-system-components/src/components/form/text-input'
+import TextInput from '@hashicorp/react-mds/src/hds/components/form/text-input'
 import FieldWrapper from '../../field-wrapper'
 import { formattedLabel, useErrorMessage } from '../../../utils'
 import type { MarketoFormEmailField } from '../../../types'

package/src/components/marketo-form/partials/fields/form-page-url-field/index.tsx

@@ -3,8 +3,11 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
+'use client'
+
 import { useEffect } from 'react'
 import { useFormContext } from 'react-hook-form'
+import { removeLocaleFromPathname } from '@web/utils/supported-locales/index'
 import type { MarketoFormHiddenField } from '../../../types'
 
 const FormPageUrlField = ({ field }: { field: MarketoFormHiddenField }) => {
@@ -12,7 +15,15 @@ const FormPageUrlField = ({ field }: { field: MarketoFormHiddenField }) => {
 
 	useEffect(() => {
 		const { protocol, host, pathname } = window.location
-		setValue(field.id, `${protocol}//${host}${pathname}`)
+		// Marketo campaigns expect a URL that does not include the locale.
+		// This is because the campaigns were created prior to locales being
+		// added to hashicorp.com paths. As a result, we need to strip out the
+		// locale from the path in order for Marketo campaigns to work.
+		// In the future, we should better understand why this dependency exists
+		// and explore ways to make this less brittle.
+		const pathnameWithoutLocale = removeLocaleFromPathname(pathname)
+		const url = `${protocol}//${host}${pathnameWithoutLocale}`
+		setValue(field.id, url)
 	}, [])
 
 	return <input type="hidden" {...register(field.id)} />

package/src/components/marketo-form/partials/fields/hidden-field/index.tsx

@@ -2,6 +2,7 @@
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
  */
+'use client'
 
 import { useEffect } from 'react'
 import { useFormContext } from 'react-hook-form'

package/src/components/marketo-form/partials/fields/htmltext-field/style.module.css

@@ -1,7 +1,7 @@
 .htmltext {
 	composes: g-type-body-small from global;
-	margin-top: var(--hdsplus-spacing-04);
-	margin-bottom: var(--hdsplus-spacing-07);
+	margin-top: var(--mds-spacing-04);
+	margin-bottom: var(--mds-spacing-07);
 	color: var(--token-color-foreground-faint);
 
 	& a {

package/src/components/marketo-form/partials/fields/radio-buttons-field/index.tsx

@@ -1,7 +1,7 @@
 import { useFormContext } from 'react-hook-form'
 import RadioCard, {
 	RadioCardGroup,
-} from '@hashicorp/react-design-system-components/src/components/form/radio-card'
+} from '@hashicorp/react-mds/src/hds/components/form/radio-card'
 import FieldWrapper from '../../field-wrapper'
 import type { MarketoFormRadioButtonsField } from '../../../types'
 

package/src/components/marketo-form/partials/fields/select-field/index.tsx

@@ -4,7 +4,7 @@
  */
 
 import { useFormContext } from 'react-hook-form'
-import Select from '@hashicorp/react-design-system-components/src/components/form/select'
+import Select from '@hashicorp/react-mds/src/hds/components/form/select'
 import FieldWrapper from '../../field-wrapper'
 import { formattedLabel, useErrorMessage } from '../../../utils'
 import type { MarketoFormSelectField } from '../../../types'

package/src/components/marketo-form/partials/fields/telephone-field/index.tsx

@@ -4,7 +4,7 @@
  */
 
 import { useFormContext } from 'react-hook-form'
-import TextInput from '@hashicorp/react-design-system-components/src/components/form/text-input'
+import TextInput from '@hashicorp/react-mds/src/hds/components/form/text-input'
 import FieldWrapper from '../../field-wrapper'
 import { formattedLabel, useErrorMessage } from '../../../utils'
 import type { MarketoFormTelephoneField } from '../../../types'

package/src/components/marketo-form/partials/fields/text-field/index.tsx

@@ -4,7 +4,7 @@
  */
 
 import { useFormContext } from 'react-hook-form'
-import TextInput from '@hashicorp/react-design-system-components/src/components/form/text-input'
+import TextInput from '@hashicorp/react-mds/src/hds/components/form/text-input'
 import FieldWrapper from '../../field-wrapper'
 import { formattedLabel, useErrorMessage } from '../../../utils'
 import type { MarketoFormTextField } from '../../../types'

package/src/components/marketo-form/partials/fields/textarea-field/index.tsx

@@ -4,7 +4,7 @@
  */
 
 import { useFormContext } from 'react-hook-form'
-import Textarea from '@hashicorp/react-design-system-components/src/components/form/textarea'
+import Textarea from '@hashicorp/react-mds/src/hds/components/form/textarea'
 import FieldWrapper from '../../field-wrapper'
 import { formattedLabel, useErrorMessage } from '../../../utils'
 import type { MarketoFormTextAreaField } from '../../../types'

package/src/components/marketo-form/types.ts

@@ -15,6 +15,7 @@ export type MarketoFormDatatype =
 	| 'hidden'
 	| 'htmltext'
 	| 'radioButtons'
+	| 'fieldset'
 
 export interface Autofill {
 	value: string
@@ -41,7 +42,7 @@ export interface MarketoBaseFormField {
 	columnNumber: number
 	defaultValue?: string
 	label?: string
-	required: boolean
+	required?: boolean
 	validationMessage?: string
 	autoFill?: Autofill
 	visibilityRules?: VisibilityRules
@@ -106,12 +107,9 @@ export interface MarketoFormHiddenField extends MarketoBaseFormField {
 	dataType: 'hidden'
 }
 
-export interface MarketoFormHtmltextField {
-	id: string
-	labelWidth: number
+export interface MarketoFormHtmltextField extends MarketoBaseFormField {
 	dataType: 'htmltext'
-	rowNumber: number
-	columnNumber: number
+	labelWidth: number
 	visibilityRules?: VisibilityRules
 	text: string
 }
@@ -125,12 +123,8 @@ export interface MarketoFormRadioButtonsField extends MarketoBaseFormField {
 	}
 }
 
-export interface MarketoFormFieldset {
-	id: string
-	label?: string
+export interface MarketoFormFieldset extends MarketoBaseFormField {
 	dataType: 'fieldset'
-	rowNumber: number
-	columnNumber: number
 	visibilityRules?: VisibilityRules
 	fields: Array<string>
 }
@@ -232,8 +226,12 @@ export type MarketoFormGroups = Record<
 export type SubmissionFilter = (req: NextApiRequest) => Promise<boolean>
 
 export interface MarketoSubmissionResponse {
+	requestId?: string
 	success: boolean
-	result: { status: 'created' | 'updated' | 'skipped' }[]
+	result: {
+		status: 'created' | 'updated' | 'skipped'
+		id?: number
+	}[]
 }
 
 export type OnSubmitData = Record<string, unknown>

package/src/components/marketo-form/utils.ts

@@ -18,7 +18,7 @@ import cookies from 'js-cookie'
 // endpoints return SOAP names, while others accept REST names. This object
 // contains all fields from our Marketo instance that have a REST name that is
 // different from the SOAP name.
-const soapToRESTFieldNames: Record<string, string> = {
+export const soapToRESTFieldNames: Record<string, string> = {
 	Address: 'address',
 	AnnualRevenue: 'annualRevenue',
 	AnonymousIP: 'anonymousIP',

package/src/components/nav-panel/components/link-list/index.tsx

@@ -1,11 +1,12 @@
 import Link from 'next/link'
-import { parseUrl } from '../../../../lib/parse-url'
-import { v } from '../../../../lib/v'
-import FlightIcon from '@hashicorp/react-design-system-components/src/components/flight-icon'
+import { vercelSplit } from '../../../../lib/v'
+import { getLocalizedLinkProps } from '../../../../lib/get-localized-link-props'
+import FlightIcon from '@hashicorp/react-mds/src/hds/components/flight-icon'
 import * as NavigationMenu from '@radix-ui/react-navigation-menu'
 import s from './style.module.css'
 
 export interface LinkListProps {
+	locale?: string
 	links: {
 		title: string
 		url: string
@@ -37,15 +38,20 @@ const GRADIENT_VALUE_MAP = new Map([
 	],
 ])
 
-export default function LinkList({ links, linkClickHandler }: LinkListProps) {
+export default function LinkList({
+	locale,
+	links,
+	linkClickHandler,
+}: LinkListProps) {
 	return (
 		<ul className={s.linkList}>
 			{links.map((link) => {
 				let style
 				link.iconGradient
 					? (style = {
-							'--iconGradient': GRADIENT_VALUE_MAP.get(v(link.iconGradient))
-								?.iconGradient,
+							'--iconGradient': GRADIENT_VALUE_MAP.get(
+								vercelSplit(link.iconGradient)
+							)?.iconGradient,
 					  } as React.CSSProperties)
 					: (style = null)
 				return (
@@ -53,19 +59,19 @@ export default function LinkList({ links, linkClickHandler }: LinkListProps) {
 						<NavigationMenu.Link asChild>
 							<Link
 								className={s.link}
-								href={parseUrl(link.url).href}
+								{...getLocalizedLinkProps(link.url, locale)}
 								onClickCapture={() => {
 									linkClickHandler && linkClickHandler(link.title, link.url)
 								}}
 							>
 								{link.iconGradient && link.icon ? (
 									<div className={s.iconBackground} style={style}>
-										<FlightIcon name={v(link.icon)} />
+										<FlightIcon name={vercelSplit(link.icon)} />
 									</div>
 								) : (
 									link.icon && (
 										<FlightIcon
-											name={v(link.icon)}
+											name={vercelSplit(link.icon)}
 											color="var(--token-color-foreground-faint)"
 										/>
 									)

package/src/components/nav-panel/components/link-list/style.module.css

@@ -2,7 +2,7 @@
 	display: flex;
 	list-style: none;
 	flex-direction: column;
-	gap: var(--hdsplus-spacing-03);
+	gap: var(--mds-spacing-03);
 	margin: 0;
 	padding: 0;
 }
@@ -10,14 +10,14 @@
 .link {
 	color: var(--token-color-foreground-primary);
 	display: flex;
-	gap: var(--hdsplus-spacing-04);
-	padding: var(--hdsplus-spacing-03) var(--hdsplus-spacing-04);
+	gap: var(--mds-spacing-04);
+	padding: var(--mds-spacing-03) var(--mds-spacing-04);
 	min-width: 190px;
 	align-items: center;
 
 	&:hover {
 		background-color: var(--token-color-surface-interactive-hover);
-		border-radius: var(--hdsplus-spacing-01);
+		border-radius: var(--mds-spacing-01);
 	}
 
 	&:has(.iconBackground) {
@@ -35,15 +35,15 @@
 }
 
 .description {
-	font-size: var(--hdsplus-typography-body-200-font-size);
-	font-weight: var(--token-typography-font-weight-regular);
-	margin-top: var(--hdsplus-spacing-02);
+	font-size: var(--mds-typography-body-200-font-size);
+	font-weight: var(--mds-typography-font-weight-regular);
+	margin-top: var(--mds-spacing-02);
 }
 
 .iconBackground {
 	background: var(--iconGradient);
-	height: var(--hdsplus-spacing-08);
-	width: var(--hdsplus-spacing-08);
+	height: var(--mds-spacing-08);
+	width: var(--mds-spacing-08);
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -53,5 +53,5 @@
 }
 
 .boldTitle {
-	font-weight: var(--font-weight-semi-bold);
+	font-weight: var(--mds-typography-font-weight-semibold);
 }

package/src/components/nav-panel/components/panel/column/index.tsx

@@ -4,8 +4,21 @@ import s from './style.module.css'
 export interface NavColumnProps {
 	className?: string
 	children: React.ReactNode
+	hasSidePanel?: boolean
 }
 
-export default function Column({ className, children }: NavColumnProps) {
-	return <div className={classNames(s.column, className)}>{children}</div>
+export default function Column({
+	className,
+	children,
+	hasSidePanel,
+}: NavColumnProps) {
+	return (
+		<div
+			className={classNames(s.column, className, {
+				[s.hasSide]: hasSidePanel,
+			})}
+		>
+			{children}
+		</div>
+	)
 }

package/src/components/nav-panel/components/panel/column/style.module.css

@@ -1,3 +1,5 @@
+@custom-media --dev-dot-viewport (min-width: 924px);
+
 .column {
 	position: relative;
 	display: flex;
@@ -5,10 +7,18 @@
 	justify-content: flex-start;
 	min-width: 190px;
 	padding: 0;
-	margin: 0 var(--hdsplus-spacing-05);
-	border-radius: var(--hdsplus-spacing-03);
+	margin: 0 var(--mds-spacing-07);
+	border-radius: var(--mds-spacing-03);
 
 	@media (--large) {
-		margin: 0;
+		&:not(.hasSide) {
+			margin: 0;
+		}
+	}
+
+	@media (--dev-dot-viewport) {
+		&.hasSide {
+			margin: 0;
+		}
 	}
 }

package/src/components/nav-panel/components/panel/root/index.tsx

@@ -4,8 +4,17 @@ import s from './style.module.css'
 interface RootProps {
 	className?: string
 	children: React.ReactNode
+	hasSidePanel?: boolean
 }
 
-export default function Root({ className, children }: RootProps) {
-	return <div className={classNames(s.root, className)}>{children}</div>
+export default function Root({ className, children, hasSidePanel }: RootProps) {
+	return (
+		<div
+			className={classNames(s.root, className, {
+				[s.hasSide]: hasSidePanel,
+			})}
+		>
+			{children}
+		</div>
+	)
 }