@hashicorp/react-components 0.0.0-canary.57d393c

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} />

package/src/components/marketo-form/fixtures/index.ts

@@ -0,0 +1,185 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { MarketoFormField } from '../types'
+
+const BASIC_FORM_PROPS = {
+	metadata: {
+		result: [
+			{
+				id: 9999,
+				language: 'English',
+				waitingLabel: 'Submitting...',
+				buttonLabel: 'Submit',
+			},
+		],
+	},
+	fields: {
+		result: [
+			{
+				id: 'FirstName',
+				label: 'First Name',
+				dataType: 'text',
+				validationMessage: 'This field is required.',
+				rowNumber: 3,
+				columnNumber: 0,
+				required: true,
+				visibilityRules: {
+					ruleType: 'alwaysShow',
+				},
+			},
+			{
+				id: 'LastName',
+				label: 'Last Name',
+				dataType: 'text',
+				validationMessage: 'This field is required.',
+				rowNumber: 3,
+				columnNumber: 0,
+				required: true,
+				formPrefill: true,
+				visibilityRules: {
+					ruleType: 'alwaysShow',
+				},
+			},
+		] as MarketoFormField[],
+	},
+}
+
+const UTM_FORM_PROPS = {
+	...BASIC_FORM_PROPS,
+	fields: {
+		result: [
+			...BASIC_FORM_PROPS.fields.result,
+			{
+				id: 'utm_medium__c',
+				label: 'utm_medium:',
+				dataType: 'hidden',
+				rowNumber: 7,
+				columnNumber: 0,
+				required: false,
+				autoFill: {
+					value: '',
+					valueFrom: 'query',
+					parameterName: 'utm_medium',
+				},
+				visibilityRules: {
+					ruleType: 'alwaysShow',
+				},
+			},
+			{
+				id: 'form_page_url__c',
+				label: 'form_page_url:',
+				dataType: 'hidden',
+				rowNumber: 7,
+				columnNumber: 0,
+				required: false,
+				visibilityRules: {
+					ruleType: 'alwaysShow',
+				},
+			},
+		] as MarketoFormField[],
+	},
+}
+
+const COOKIE_UTM_FORM_PROPS = {
+	...BASIC_FORM_PROPS,
+	fields: {
+		result: [
+			...BASIC_FORM_PROPS.fields.result,
+			{
+				id: 'utm_content__c',
+				label: 'utm_content:',
+				dataType: 'hidden',
+				rowNumber: 7,
+				columnNumber: 0,
+				required: false,
+				autoFill: {
+					value: '',
+					valueFrom: 'query',
+					parameterName: 'utm_content',
+				},
+				visibilityRules: {
+					ruleType: 'alwaysShow',
+				},
+			},
+		] as MarketoFormField[],
+	},
+}
+
+const VISIBILITY_RULE_FORM_PROPS = {
+	...BASIC_FORM_PROPS,
+	fields: {
+		result: [
+			...BASIC_FORM_PROPS.fields.result,
+			{
+				id: 'Phone',
+				label: 'Phone Number',
+				dataType: 'telephone',
+				validationMessage: 'Must be a phone number.',
+				rowNumber: 6,
+				columnNumber: 0,
+				required: false,
+				formPrefill: true,
+				visibilityRules: {
+					rules: [
+						{
+							subjectField: 'fastTracktoSales',
+							operator: 'is',
+							values: ['yes'],
+							altLabel: 'Phone Number:',
+						},
+					],
+					ruleType: 'show',
+				},
+			},
+			{
+				id: 'fastTracktoSales',
+				label: 'Have salesperson contact me',
+				dataType: 'checkbox',
+				validationMessage: 'This field is required.',
+				rowNumber: 7,
+				columnNumber: 0,
+				required: false,
+				formPrefill: true,
+				fieldMetaData: {
+					initiallyChecked: false,
+				},
+				visibilityRules: {
+					ruleType: 'alwaysShow',
+				},
+			},
+		] as MarketoFormField[],
+	},
+}
+
+const HIDDEN_COOKIE_FIELD_FORM_PROPS = {
+	...BASIC_FORM_PROPS,
+	fields: {
+		result: [
+			...BASIC_FORM_PROPS.fields.result,
+			{
+				id: 'cookieHiddenField',
+				label: 'Cookie Value',
+				dataType: 'hidden',
+				rowNumber: 20,
+				columnNumber: 0,
+				required: false,
+				autoFill: {
+					value: '',
+					valueFrom: 'cookie',
+					parameterName: 'hidden_cookie_field',
+				},
+			},
+		] as MarketoFormField[],
+	},
+}
+
+export {
+	BASIC_FORM_PROPS,
+	UTM_FORM_PROPS,
+	VISIBILITY_RULE_FORM_PROPS,
+	COOKIE_UTM_FORM_PROPS,
+	HIDDEN_COOKIE_FIELD_FORM_PROPS,
+}