feat: add support for htmltext

hashicorp · Apr 10, 2023 · 4ca7cb8 · 4ca7cb8
1 parent fc77a08
commit 4ca7cb8
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 0 deletions.
diff --git a/.changeset/orange-meals-mate.md b/.changeset/orange-meals-mate.md
@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-marketo-form': minor
+---
+
+Add support for htmltext fields
diff --git a/packages/marketo-form/docs.mdx b/packages/marketo-form/docs.mdx
@@ -171,6 +171,17 @@ Renders a form from Marketo.
             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/privacy\\" target=\\"_blank\\" id=\\"\\">Privacy Policy</a>."
+        }
       ],
     }}
     submitTitle="Download Now"

diff --git a/packages/marketo-form/partials/field/index.tsx b/packages/marketo-form/partials/field/index.tsx
@@ -11,6 +11,7 @@ import SelectField from '../fields/select-field'
 import CheckboxField from '../fields/checkbox-field'
 import PrivacyPolicyField from '../fields/privacy-policy-field'
 import HiddenField from '../fields/hidden-field'
+import HtmltextField from '../fields/htmltext-field'
 import FormPageUrlField from '../fields/form-page-url-field'
 import type { MarketoFormField, MarketoFormComponents } from '../../types'
 
@@ -70,6 +71,12 @@ const Field = ({
         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} />
     default:
       console.error(`Unknown form field type: ${(field as any).Datatype}`)
   }

diff --git a/packages/marketo-form/partials/fields/htmltext-field/index.tsx b/packages/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
diff --git a/packages/marketo-form/partials/fields/htmltext-field/style.module.css b/packages/marketo-form/partials/fields/htmltext-field/style.module.css
@@ -0,0 +1,6 @@
+.htmltext {
+  composes: g-type-body-small from global;
+  color: var(--wpl-neutral-500);
+  margin-top: var(--wpl-spacing-02);
+  margin-bottom: var(--wpl-spacing-05);
+}
diff --git a/packages/marketo-form/types.ts b/packages/marketo-form/types.ts
@@ -13,6 +13,7 @@ export type MarketoFormDatatype =
   | 'select'
   | 'checkbox'
   | 'hidden'
+  | 'htmltext'
 
 export interface Autofill {
   value: string
@@ -92,6 +93,11 @@ export interface MarketoFormHiddenField extends MarketoBaseFormField {
   dataType: 'hidden'
 }
 
+export interface MarketoFormHtmltextField extends MarketoBaseFormField {
+  dataType: 'htmltext'
+  text: string
+}
+
 export type MarketoFormField =
   | MarketoFormTextField
   | MarketoFormEmailField
@@ -100,6 +106,7 @@ export type MarketoFormField =
   | MarketoFormSelectField
   | MarketoFormCheckboxField
   | MarketoFormHiddenField
+  | MarketoFormHtmltextField
 
 export interface MarketoFormMetadata {
   id: number
@@ -150,6 +157,7 @@ export interface MarketoFormComponents {
   select?: (props: { field: MarketoFormSelectField }) => JSX.Element
   checkbox?: (props: { field: MarketoFormCheckboxField }) => JSX.Element
   hidden?: (props: { field: MarketoFormHiddenField }) => JSX.Element
+  htmltext?: (props: { field: MarketoFormHtmltextField }) => JSX.Element
 }
 
 /**