@hashicorp/react-components 0.0.0 → 1.0.1

package/src/components/intro/index.tsx

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

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

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

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

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

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

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

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

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