@hashicorp/react-components 0.0.0-canary.0a0feee

package/src/components/marketo-form/package.original.json

@@ -0,0 +1,30 @@
+{
+  "name": "@hashicorp/react-marketo-form",
+  "description": "A form component that dynamically renders a Marketo form",
+  "version": "0.9.0",
+  "author": "HashiCorp",
+  "contributors": [
+    "Dylan Staley"
+  ],
+  "dependencies": {
+    "@hashicorp/platform-analytics": "^0.11.2",
+    "@hashicorp/react-button": "^6.2.0",
+    "@hashicorp/react-form-fields": "^0.2.0",
+    "@vercel/fetch": "^6.2.0",
+    "clsx": "^1.1.1",
+    "js-cookie": "^3.0.1",
+    "moize": "^6.1.3",
+    "react-hook-form": "^7.37.0"
+  },
+  "license": "MPL-2.0",
+  "peerDependencies": {
+    "next": ">=11.x",
+    "react": ">=16.x"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/js-cookie": "^3.0.2"
+  }
+}

package/src/components/marketo-form/partials/error-message/index.tsx

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import styles from './style.module.css'
+
+const ErrorMessage = ({ error }: { error: string }) => {
+	return <div className={styles.errorText}>{error}</div>
+}
+
+export default ErrorMessage

package/src/components/marketo-form/partials/error-message/style.module.css

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.errorText {
+  --error-text-color: var(--danger);
+
+  composes: g-type-body-small from global;
+  color: var(--error-text-color);
+  line-height: 1.4;
+  margin-top: 4px;
+}

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

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import TextField from '../fields/text-field'
+import EmailField from '../fields/email-field'
+import TelephoneField from '../fields/telephone-field'
+import TextareaField from '../fields/textarea-field'
+import SelectField from '../fields/select-field'
+import CheckboxField from '../fields/checkbox-field'
+import HiddenField from '../fields/hidden-field'
+import HtmltextField from '../fields/htmltext-field'
+import RadioButtonsField from '../fields/radio-buttons-field'
+import FormPageUrlField from '../fields/form-page-url-field'
+import type { MarketoFormField, MarketoFormComponents } from '../../types'
+
+const Field = ({
+	field,
+	components,
+}: {
+	field: MarketoFormField
+	components?: MarketoFormComponents
+}) => {
+	switch (field.dataType) {
+		case 'text':
+			if (components && 'text' in components) {
+				const Component = components.text!
+				return <Component field={field} />
+			}
+			return <TextField field={field} />
+		case 'textArea':
+			if (components && 'textArea' in components) {
+				const Component = components.textArea!
+				return <Component field={field} />
+			}
+			return <TextareaField field={field} />
+		case 'email':
+			if (components && 'email' in components) {
+				const Component = components.email!
+				return <Component field={field} />
+			}
+			return <EmailField field={field} />
+		case 'telephone':
+			if (components && 'telephone' in components) {
+				const Component = components.telephone!
+				return <Component field={field} />
+			}
+			return <TelephoneField field={field} />
+		case 'select':
+			if (components && 'select' in components) {
+				const Component = components.select!
+				return <Component field={field} />
+			}
+			return <SelectField field={field} />
+		case 'checkbox':
+			if (components && 'checkbox' in components) {
+				const Component = components.checkbox!
+				return <Component field={field} />
+			}
+			return <CheckboxField field={field} />
+		case 'hidden':
+			if (components && 'hidden' in components) {
+				const Component = components.hidden!
+				return <Component field={field} />
+			}
+			if (field.id === 'form_page_url__c') {
+				return <FormPageUrlField field={field} />
+			}
+			return <HiddenField field={field} />
+		case 'htmltext':
+			if (components && 'htmltext' in components) {
+				const Component = components.htmltext!
+				return <Component field={field} />
+			}
+			return <HtmltextField field={field} />
+		case 'radioButtons':
+			if (components && 'radioButtons' in components) {
+				const Component = components.radioButtons!
+				return <Component field={field} />
+			}
+			return <RadioButtonsField field={field} />
+		default:
+			console.error(`Unknown form field type: ${(field as any).Datatype}`)
+	}
+
+	return null
+}
+
+export default Field

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

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { ReactNode } from 'react'
+
+const FieldWrapper = ({
+	children,
+	fieldId,
+}: {
+	children: ReactNode
+	fieldId: string
+}) => {
+	return (
+		<div
+			style={{ marginBottom: '1rem' }}
+			className="marketo-form-field-wrapper"
+			data-field-id={fieldId}
+		>
+			{children}
+		</div>
+	)
+}
+
+export default FieldWrapper

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

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+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 FieldWrapper from '../../field-wrapper'
+import { formattedLabel, useErrorMessage } from '../../../utils'
+import type { MarketoFormCheckboxField } from '../../../types'
+
+const CheckboxField = ({ field }: { field: MarketoFormCheckboxField }) => {
+	const { register, watch } = useFormContext()
+	const error = useErrorMessage(field.id)
+	const checked = watch(field.id, false)
+
+	return (
+		<FieldWrapper fieldId={field.id}>
+			<Checkbox
+				label={formattedLabel(field)}
+				field={{
+					...register(field.id),
+					checked,
+				}}
+				error={error}
+			/>
+		</FieldWrapper>
+	)
+}
+
+export default CheckboxField

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

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+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 FieldWrapper from '../../field-wrapper'
+import { formattedLabel, useErrorMessage } from '../../../utils'
+import type { MarketoFormEmailField } from '../../../types'
+
+const EmailField = ({ field }: { field: MarketoFormEmailField }) => {
+	const { register } = useFormContext()
+	const error = useErrorMessage(field.id)
+
+	return (
+		<FieldWrapper fieldId={field.id}>
+			<TextInput
+				label={formattedLabel(field)}
+				type="email"
+				field={{
+					...register(field.id),
+					type: 'email',
+					placeholder: field.hintText,
+				}}
+				size="large"
+				error={error}
+				isRequired={field.required}
+			/>
+		</FieldWrapper>
+	)
+}
+
+export default EmailField

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

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { useEffect } from 'react'
+import { useFormContext } from 'react-hook-form'
+import type { MarketoFormHiddenField } from '../../../types'
+
+const FormPageUrlField = ({ field }: { field: MarketoFormHiddenField }) => {
+	const { register, setValue } = useFormContext()
+
+	useEffect(() => {
+		const { protocol, host, pathname } = window.location
+		setValue(field.id, `${protocol}//${host}${pathname}`)
+	}, [])
+
+	return <input type="hidden" {...register(field.id)} />
+}
+
+export default FormPageUrlField

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

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { useEffect } from 'react'
+import { useFormContext } from 'react-hook-form'
+import type { MarketoFormHiddenField } from '../../../types'
+import cookies from 'js-cookie'
+
+const HiddenField = ({ field }: { field: MarketoFormHiddenField }) => {
+	const { register, setValue } = useFormContext()
+
+	useEffect(() => {
+		if (field.autoFill && field.autoFill.valueFrom === 'query') {
+			const searchParams = new URLSearchParams(window.location.search)
+			if (searchParams.has(field.autoFill.parameterName)) {
+				setValue(field.id, searchParams.get(field.autoFill.parameterName))
+			}
+		} else if (
+			field.autoFill &&
+			field.autoFill.valueFrom === 'default' &&
+			field.autoFill.value
+		) {
+			setValue(field.id, field.autoFill.value)
+		} else if (field.autoFill && field.autoFill.valueFrom === 'cookie') {
+			const fieldCookieValue = cookies.get(field.autoFill.parameterName)
+			if (fieldCookieValue) {
+				setValue(field.id, fieldCookieValue)
+			}
+		}
+	}, [field, setValue])
+
+	return <input type="hidden" {...register(field.id)} />
+}
+
+export default HiddenField

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

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import FieldWrapper from '../../field-wrapper'
+import type { MarketoFormHtmltextField } from '../../../types'
+import styles from './style.module.css'
+
+const Index = ({ field }: { field: MarketoFormHtmltextField }) => {
+	return (
+		<FieldWrapper fieldId={field.id}>
+			<span
+				className={styles.htmltext}
+				dangerouslySetInnerHTML={{ __html: field.text }}
+			/>
+		</FieldWrapper>
+	)
+}
+
+export default Index

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

@@ -0,0 +1,18 @@
+.htmltext {
+	composes: g-type-body-small from global;
+	margin-top: var(--hdsplus-spacing-04);
+	margin-bottom: var(--hdsplus-spacing-07);
+	color: var(--token-color-foreground-faint);
+
+	& a {
+		color: var(--token-color-foreground-action);
+		text-decoration: underline;
+
+		&:focus-visible {
+			text-decoration: none;
+			border-radius: 2px;
+			outline: 2px solid var(--token-color-focus-action-internal);
+			outline-offset: 1px;
+		}
+	}
+}

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

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import TextField from '../text-field'
+import type { MarketoFormField, MarketoFormTextField } from '../../../types'
+import styles from './style.module.css'
+
+const NameFields = ({ fields }: { fields: MarketoFormField[] }) => {
+	return (
+		<div className={styles.name}>
+			<TextField field={fields[0] as MarketoFormTextField} />
+			<TextField field={fields[1] as MarketoFormTextField} />
+		</div>
+	)
+}
+
+export default NameFields

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

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.name {
+  display: grid;
+  grid-gap: 8px;
+  @media (--medium-up) {
+    grid-gap: 32px;
+    grid-template-columns: 1fr 1fr;
+  }
+}

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

@@ -0,0 +1,48 @@
+import { useFormContext } from 'react-hook-form'
+import RadioCard, {
+	RadioCardGroup,
+} from '@hashicorp/react-design-system-components/src/components/form/radio-card'
+import FieldWrapper from '../../field-wrapper'
+import type { MarketoFormRadioButtonsField } from '../../../types'
+
+const RadioCardField = ({ field }: { field: MarketoFormRadioButtonsField }) => {
+	const {
+		register,
+		watch,
+		formState: { errors },
+	} = useFormContext()
+	const error = errors[field.id]?.message as string
+	const currentSelection = watch(field.id)
+
+	return (
+		<FieldWrapper fieldId={field.id}>
+			<RadioCardGroup
+				error={error}
+				layout="vertical"
+				isRequired={field.required}
+				legend={field.label}
+				id={field.id}
+				aria-describedby={error && `error-${field.id}-error`}
+			>
+				{field.fieldMetaData.values.map(({ label, value }) => (
+					<RadioCard
+						controlPosition="left"
+						key={value}
+						label={label}
+						field={{
+							...register(field.id, { required: field.validationMessage }),
+							checked: currentSelection === value,
+							value,
+							name: field.id,
+							required: field.required,
+							'aria-invalid': Boolean(errors[field.id]),
+							'aria-describedby': error && `error-${field.id}-error`,
+						}}
+					/>
+				))}
+			</RadioCardGroup>
+		</FieldWrapper>
+	)
+}
+
+export default RadioCardField

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

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { useFormContext } from 'react-hook-form'
+import Select from '@hashicorp/react-design-system-components/src/components/form/select'
+import FieldWrapper from '../../field-wrapper'
+import { formattedLabel, useErrorMessage } from '../../../utils'
+import type { MarketoFormSelectField } from '../../../types'
+import s from './style.module.css'
+
+const SelectField = ({ field }: { field: MarketoFormSelectField }) => {
+	const { register } = useFormContext()
+	const error = useErrorMessage(field.id)
+
+	return (
+		<FieldWrapper fieldId={field.id}>
+			<Select
+				field={{ ...register(field.id) }}
+				size="large"
+				label={formattedLabel(field)}
+				error={error}
+				isRequired={field.required}
+				className={s.selectConstrainWidth}
+			>
+				{field.fieldMetaData.values
+					? field.fieldMetaData.values.map(({ label, value }) => (
+							<option key={label} value={value}>
+								{label}
+							</option>
+					  ))
+					: []}
+			</Select>
+		</FieldWrapper>
+	)
+}
+
+export default SelectField

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

@@ -0,0 +1,5 @@
+.selectConstrainWidth {
+	& select {
+		width: 100%;
+	}
+}

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

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { useFormContext } from 'react-hook-form'
+import TextInput from '@hashicorp/react-design-system-components/src/components/form/text-input'
+import FieldWrapper from '../../field-wrapper'
+import { formattedLabel, useErrorMessage } from '../../../utils'
+import type { MarketoFormTelephoneField } from '../../../types'
+
+const TelephoneField = ({ field }: { field: MarketoFormTelephoneField }) => {
+	const { register } = useFormContext()
+	const error = useErrorMessage(field.id)
+
+	return (
+		<FieldWrapper fieldId={field.id}>
+			<TextInput
+				label={formattedLabel(field)}
+				type="tel"
+				field={{ ...register(field.id), placeholder: field.hintText }}
+				size="large"
+				error={error}
+				isRequired={field.required}
+			/>
+		</FieldWrapper>
+	)
+}
+
+export default TelephoneField

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

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { useFormContext } from 'react-hook-form'
+import TextInput from '@hashicorp/react-design-system-components/src/components/form/text-input'
+import FieldWrapper from '../../field-wrapper'
+import { formattedLabel, useErrorMessage } from '../../../utils'
+import type { MarketoFormTextField } from '../../../types'
+
+const Index = ({ field }: { field: MarketoFormTextField }) => {
+	const { register } = useFormContext()
+	const error = useErrorMessage(field.id)
+
+	return (
+		<FieldWrapper fieldId={field.id}>
+			<TextInput
+				label={formattedLabel(field)}
+				type="text"
+				field={{ ...register(field.id), placeholder: field.hintText }}
+				size="large"
+				error={error}
+				isRequired={field.required}
+			/>
+		</FieldWrapper>
+	)
+}
+
+export default Index

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

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { useFormContext } from 'react-hook-form'
+import Textarea from '@hashicorp/react-design-system-components/src/components/form/textarea'
+import FieldWrapper from '../../field-wrapper'
+import { formattedLabel, useErrorMessage } from '../../../utils'
+import type { MarketoFormTextAreaField } from '../../../types'
+
+const Index = ({ field }: { field: MarketoFormTextAreaField }) => {
+	const { register } = useFormContext()
+	const error = useErrorMessage(field.id)
+
+	return (
+		<FieldWrapper fieldId={field.id}>
+			<Textarea
+				label={formattedLabel(field)}
+				field={{ ...register(field.id), placeholder: field.hintText }}
+				size="large"
+				error={error}
+				isRequired={field.required}
+			/>
+		</FieldWrapper>
+	)
+}
+
+export default Index

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

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import clsx from 'clsx'
+import s from './style.module.css'
+
+interface LabelProps {
+	label: string
+	fieldName: string
+	className?: string
+}
+
+export default function Label({ label, fieldName, className }: LabelProps) {
+	return (
+		<label
+			htmlFor={fieldName}
+			className={clsx(className && className, s.label)}
+		>
+			{label}
+		</label>
+	)
+}

package/src/components/marketo-form/partials/label/style.module.css

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.label {
+  color: var(--gray-3);
+  composes: g-type-label from global;
+  display: block;
+  padding-bottom: 8px;
+  text-transform: uppercase;
+}