@saasquatch/mint-components 1.14.6-3 → 1.14.6-31

package/dist/collection/components/sqm-lead-form/sqm-lead-dropdown-field.js

@@ -27,11 +27,20 @@ export class LeadDropdownField {
      * @uiWidget textArea
      */
     this.requiredFieldErrorMessage = "Please select a {dropdownLabel}";
+    /**
+     * @uiName Optional label
+     */
+    this.optionalLabel = "(optional)";
     /**
      * @uiName Optional
      * @default
      */
     this.dropdownOptional = false;
+    /**
+     * @uiName Multiple selection
+     * @default
+     */
+    this.multiple = false;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -125,6 +134,27 @@ export class LeadDropdownField {
       "reflect": false,
       "defaultValue": "\"Please select a {dropdownLabel}\""
     },
+    "optionalLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Optional label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "optional-label",
+      "reflect": false,
+      "defaultValue": "\"(optional)\""
+    },
     "dropdownOptional": {
       "type": "boolean",
       "mutable": false,
@@ -134,7 +164,7 @@ export class LeadDropdownField {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [{
             "text": "Optional",
@@ -149,12 +179,36 @@ export class LeadDropdownField {
       "reflect": false,
       "defaultValue": "false"
     },
+    "multiple": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Multiple selection",
+            "name": "uiName"
+          }, {
+            "text": undefined,
+            "name": "default"
+          }],
+        "text": ""
+      },
+      "attribute": "multiple",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<DropdownFieldViewProps>",
-        "resolved": "{ states?: { leadFormState?: LeadFormState; }; content?: { dropdownName: string; dropdownLabel: string; dropdownOptional?: boolean; requiredFieldErrorMessage?: string; selectOptions?: VNode | VNode[]; }; }",
+        "resolved": "{ states?: { leadFormState?: LeadFormState; }; content?: { dropdownName: string; dropdownLabel: string; dropdownOptional: boolean; optionalLabel: string; multiple: boolean; requiredFieldErrorMessage?: string; selectOptions?: VNode | VNode[]; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -189,5 +243,11 @@ function useLeadDropdownFieldDemo(props) {
     states: {
       leadFormState: {},
     },
+    content: {
+      dropdownName: props.dropdownName,
+      dropdownLabel: props.dropdownLabel,
+      requiredFieldErrorMessage: props.requiredFieldErrorMessage,
+      dropdownOptional: props.dropdownOptional,
+    },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

package/dist/collection/components/sqm-lead-form/sqm-lead-form-view.js

@@ -1,10 +1,15 @@
-import { h } from "@stencil/core";
+import { Fragment, h } from "@stencil/core";
+import { intl } from "../../global/global";
 import { AuthButtonsContainer, AuthColumn, AuthWrapper, ErrorStyles, HostBlock, } from "../../global/mixins";
 import { createStyleSheet } from "../../styling/JSS";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
-import { intl } from "../../global/global";
 const style = {
-  Wrapper: { ...AuthWrapper, "max-width": "600px" },
+  Wrapper: {
+    ...AuthWrapper,
+    "max-width": "600px",
+    border: "none",
+    margin: "0",
+  },
   Column: AuthColumn,
   HostBlock: HostBlock,
   ":host": {
@@ -14,6 +19,7 @@ const style = {
   NameFieldWrapper: {
     display: "flex",
     gap: "var(--sl-spacing-medium)",
+    marginBottom: "0 !important",
   },
   ContinueButton: { maxWidth: "169px" },
   ButtonsContainer: AuthButtonsContainer,
@@ -29,6 +35,10 @@ const style = {
       borderTop: "none",
     },
   },
+  NameInput: {
+    marginBottom: "0",
+    width: "50%",
+  },
   ErrorStyle: ErrorStyles,
 };
 const vanillaStyle = `
@@ -51,6 +61,7 @@ const styleString = sheet.toString();
 export function LeadFormView(props) {
   var _a, _b, _c, _d;
   const { states, refs, callbacks, content } = props;
+  console.log({ states });
   if (states.error) {
     window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
   }
@@ -60,8 +71,8 @@ export function LeadFormView(props) {
   }, {
     fieldLabel,
   });
-  if (states.success) {
-    return (h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
+  return (h(Fragment, null,
+    states.success && (h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
       h("style", { type: "text/css" },
         vanillaStyle,
         styleString),
@@ -70,49 +81,44 @@ export function LeadFormView(props) {
         h("b", null, content.submitSuccessHeader),
         h("br", null),
         h("div", { part: "successalert-text" }, content.submitSuccessDescription)),
-      h("sl-button", { 
-        // AL: TODO add button to allow user to submit another form
-        class: sheet.classes.ContinueButton, 
-        // onClick={callbacks.submitAnotherForm}
-        loading: states.loading, exportparts: "base: primarybutton-base", type: "default" }, content.resubmitFormLabel)));
-  }
-  return (h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
-    h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    h(TextSpanView, { type: "h3" }, content.pageLabel),
-    h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
-      states.error && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet.classes.ErrorAlertContainer, open: true },
-        h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-        h("b", null, content.submitErrorHeader),
-        h("br", null),
-        intl.formatMessage({
-          id: "submitErrorDescription",
-          defaultMessage: content.submitErrorDescription,
-        }, {
-          supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, content.supportLink)),
-        }))),
-      h("div", { class: sheet.classes.NameFieldWrapper },
-        h("sqm-lead-input-field", { style: { width: "50%" }, "field-label": "First Name", "field-name": "firstName" }),
-        h("sqm-lead-input-field", { style: { width: "50%" }, "field-label": "Last Name", "field-name": "lastName" })),
-      h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
-          if (!value) {
-            return getRequiredFieldErrorMessage({
-              fieldLabel: content.emailLabel || "Email",
-            });
-          }
-          // this matches shoelace validation, but could be better
-          if (!value.includes("@")) {
-            return content.invalidEmailErrorMessage;
-          }
-        } }, (((_b = (_a = states.leadFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
-        class: sheet.classes.ErrorStyle,
-        helpText: ((_d = (_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
-          content.requiredFieldErrorMessage,
-      }
-        : []))),
-      h("input", { type: "hidden", hidden: true, name: "/rsReferralCode", value: states.referralCode }),
-      content.formData,
-      h("div", { class: sheet.classes.ButtonsContainer },
-        h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register")))));
+      h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.resetForm, loading: states.loading, exportparts: "base: primarybutton-base", type: "default" }, content.resubmitFormLabel))),
+    h("div", { class: sheet.classes.Wrapper, part: "sqm-base", style: { display: states.success ? "none" : "block" } },
+      h("style", { type: "text/css" },
+        vanillaStyle,
+        styleString),
+      h(TextSpanView, { type: "h3" }, content.pageLabel),
+      h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+        states.error && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet.classes.ErrorAlertContainer, open: true },
+          h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+          h("b", null, content.submitErrorHeader),
+          h("br", null),
+          intl.formatMessage({
+            id: "submitErrorDescription",
+            defaultMessage: content.submitErrorDescription,
+          }, {
+            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, content.supportLinkText)),
+          }))),
+        h("div", { class: sheet.classes.NameFieldWrapper },
+          h("sqm-lead-input-field", { class: sheet.classes.NameInput, "field-label": content.firstNameLabel || "First Name", "field-name": "firstName" }),
+          h("sqm-lead-input-field", { class: sheet.classes.NameInput, "field-label": content.lastNameLabel || "Last Name", "field-name": "lastName" })),
+        h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
+            if (!value) {
+              return getRequiredFieldErrorMessage({
+                fieldLabel: content.emailLabel || "Email",
+              });
+            }
+            // this matches shoelace validation, but could be better
+            if (!value.includes("@")) {
+              return content.invalidEmailErrorMessage;
+            }
+          } }, (((_b = (_a = states.leadFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
+          class: sheet.classes.ErrorStyle,
+          helpText: ((_d = (_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
+            content.requiredFieldErrorMessage,
+        }
+          : []))),
+        h("input", { type: "hidden", hidden: true, name: "/referralCode", value: states.referralCode }),
+        content.formData,
+        h("div", { class: sheet.classes.ButtonsContainer },
+          h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"))))));
 }

package/dist/collection/components/sqm-lead-form/sqm-lead-form.js

@@ -18,11 +18,11 @@ export class LeadForm {
     /**
      * @uiName First Name field label
      */
-    this.firstNameLabel = "First Name";
+    this.firstNameLabel = "First name";
     /**
      * @uiName Last Name field label
      */
-    this.lastNameLabel = "Last Name";
+    this.lastNameLabel = "Last name";
     /**
      * @uiName Submit button text
      */
@@ -35,43 +35,52 @@ export class LeadForm {
      * @uiName Header text
      */
     this.pageLabel = "Refer your friend";
+    /**
+     * Key of the form to connect to. Create and manage forms in the /advocate dashboard under Data > Forms.
+     * @uiName Form key
+     */
     this.formKey = "lead-form";
     /**
-     * Optional support link for error messages.
+     * Optional support link text for error messages.
+     * @uiName Support link text
      */
-    this.supportLink = "Support";
+    this.supportLinkText = "Support";
     /**
-     * Header text shown on successful submission.
+     * Header text shown on successful lead submission.
+     * @uiName Submit success header
      */
-    this.submitSuccessHeader = "Referral submitted";
+    this.submitSuccessHeader = "Lead submitted";
     /**
-     * Description text shown on successful submission.
+     * Description text shown on successful lead submission.
+     * @uiName Submit success description
      */
     this.submitSuccessDescription = "Our team will contact your friend to see if they’re a good fit. In the meantime, you can track this referral on Activity page.";
     /**
-     * Header text shown when an error occurs.
+     *  Header text shown if an error occurs.
+     * @uiName Submit error header
      */
     this.submitErrorHeader = "An error occurred while submitting";
     /**
-     * Description text shown when an error occurs.
+     * Description text shown if an error occurs.
+     * @uiName Submit error description
      */
     this.submitErrorDescription = "Please try again later. If the problem continues, contact {supportLink}";
     /**
-     * The message to be displayed when a required field is not filled.
+     * The message to be displayed if a required field is not filled.
      *
      * @uiName Required field message
      * @uiWidget textArea
      */
     this.requiredFieldErrorMessage = "Please enter a valid {fieldLabel}";
     /**
-     * The message to be displayed when a the form submission fails unexpectedly.
+     * The message to be displayed if a the form submission fails unexpectedly.
      *
      * @uiName Network error message
      * @uiWidget textArea
      */
     this.networkErrorMessage = "Network request failed.";
     /**
-     * The message to be displayed when the email used is invalid or blocked.
+     * The message to be displayed if the email used is invalid.
      *
      * @uiName Invalid email message
      * @uiWidget textArea
@@ -90,13 +99,15 @@ export class LeadForm {
       submitLabel: this.submitLabel,
       resubmitFormLabel: this.resubmitFormLabel,
       pageLabel: this.pageLabel,
-      supportLink: this.supportLink,
+      supportLinkText: this.supportLinkText,
       submitSuccessHeader: this.submitSuccessHeader,
       submitSuccessDescription: this.submitSuccessDescription,
       submitErrorHeader: this.submitErrorHeader,
       submitErrorDescription: this.submitErrorDescription,
       invalidEmailErrorMessage: this.invalidEmailErrorMessage,
       requiredFieldErrorMessage: this.requiredFieldErrorMessage,
+      firstNameLabel: this.firstNameLabel,
+      lastNameLabel: this.lastNameLabel,
     };
     return (h(LeadFormView, { states: states, callbacks: callbacks, content: content, refs: refs }));
   }
@@ -143,7 +154,7 @@ export class LeadForm {
       },
       "attribute": "first-name-label",
       "reflect": false,
-      "defaultValue": "\"First Name\""
+      "defaultValue": "\"First name\""
     },
     "lastNameLabel": {
       "type": "string",
@@ -164,7 +175,7 @@ export class LeadForm {
       },
       "attribute": "last-name-label",
       "reflect": false,
-      "defaultValue": "\"Last Name\""
+      "defaultValue": "\"Last name\""
     },
     "submitLabel": {
       "type": "string",
@@ -240,14 +251,17 @@ export class LeadForm {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": ""
+        "tags": [{
+            "text": "Form key",
+            "name": "uiName"
+          }],
+        "text": "Key of the form to connect to. Create and manage forms in the /advocate dashboard under Data > Forms."
       },
       "attribute": "form-key",
       "reflect": false,
       "defaultValue": "\"lead-form\""
     },
-    "supportLink": {
+    "supportLinkText": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -258,10 +272,13 @@ export class LeadForm {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": "Optional support link for error messages."
+        "tags": [{
+            "text": "Support link text",
+            "name": "uiName"
+          }],
+        "text": "Optional support link text for error messages."
       },
-      "attribute": "support-link",
+      "attribute": "support-link-text",
       "reflect": false,
       "defaultValue": "\"Support\""
     },
@@ -276,12 +293,15 @@ export class LeadForm {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": "Header text shown on successful submission."
+        "tags": [{
+            "text": "Submit success header",
+            "name": "uiName"
+          }],
+        "text": "Header text shown on successful lead submission."
       },
       "attribute": "submit-success-header",
       "reflect": false,
-      "defaultValue": "\"Referral submitted\""
+      "defaultValue": "\"Lead submitted\""
     },
     "submitSuccessDescription": {
       "type": "string",
@@ -294,8 +314,11 @@ export class LeadForm {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": "Description text shown on successful submission."
+        "tags": [{
+            "text": "Submit success description",
+            "name": "uiName"
+          }],
+        "text": "Description text shown on successful lead submission."
       },
       "attribute": "submit-success-description",
       "reflect": false,
@@ -312,8 +335,11 @@ export class LeadForm {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": "Header text shown when an error occurs."
+        "tags": [{
+            "text": "Submit error header",
+            "name": "uiName"
+          }],
+        "text": "Header text shown if an error occurs."
       },
       "attribute": "submit-error-header",
       "reflect": false,
@@ -330,8 +356,11 @@ export class LeadForm {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": "Description text shown when an error occurs."
+        "tags": [{
+            "text": "Submit error description",
+            "name": "uiName"
+          }],
+        "text": "Description text shown if an error occurs."
       },
       "attribute": "submit-error-description",
       "reflect": false,
@@ -355,7 +384,7 @@ export class LeadForm {
             "text": "textArea",
             "name": "uiWidget"
           }],
-        "text": "The message to be displayed when a required field is not filled."
+        "text": "The message to be displayed if a required field is not filled."
       },
       "attribute": "required-field-error-message",
       "reflect": false,
@@ -379,7 +408,7 @@ export class LeadForm {
             "text": "textArea",
             "name": "uiWidget"
           }],
-        "text": "The message to be displayed when a the form submission fails unexpectedly."
+        "text": "The message to be displayed if a the form submission fails unexpectedly."
       },
       "attribute": "network-error-message",
       "reflect": false,
@@ -403,7 +432,7 @@ export class LeadForm {
             "text": "textArea",
             "name": "uiWidget"
           }],
-        "text": "The message to be displayed when the email used is invalid or blocked."
+        "text": "The message to be displayed if the email used is invalid."
       },
       "attribute": "invalid-email-error-message",
       "reflect": false,
@@ -414,7 +443,7 @@ export class LeadForm {
       "mutable": false,
       "complexType": {
         "original": "DemoData<LeadFormViewProps>",
-        "resolved": "{ states?: { error: string; success: boolean; loading: boolean; leadFormState: LeadFormState; referralCode: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; emailLabel?: string; firstNameLabel?: string; lastNameLabel?: string; submitLabel?: string; resubmitFormLabel?: string; pageLabel?: string; supportLink?: string; submitSuccessHeader?: string; submitSuccessDescription?: string; submitErrorHeader?: string; submitErrorDescription?: string; requiredFieldErrorMessage: string; invalidEmailErrorMessage: string; }; }",
+        "resolved": "{ states?: { error: string; success: boolean; loading: boolean; leadFormState: LeadFormState; referralCode: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; emailLabel?: string; firstNameLabel?: string; lastNameLabel?: string; submitLabel?: string; resubmitFormLabel?: string; pageLabel?: string; supportLinkText?: string; submitSuccessHeader?: string; submitSuccessDescription?: string; submitErrorHeader?: string; submitErrorDescription?: string; requiredFieldErrorMessage: string; invalidEmailErrorMessage: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -456,6 +485,7 @@ function useRegisterDemo(props) {
         console.log("submit");
       },
       inputFunction: () => { },
+      resetForm: () => { },
     },
     refs: {
       formRef: {},

package/dist/collection/components/sqm-lead-form/sqm-lead-input-field-view.js

@@ -6,7 +6,7 @@ import { ErrorStyles } from "../../global/mixins";
 const style = {
   ErrorStyle: ErrorStyles,
   FieldContainer: {
-    "margin-bottom": "var(--sl-spacing-large)",
+    "margin-bottom": "var(--sl-spacing-medium)",
   },
 };
 const vanillaStyle = `
@@ -23,24 +23,24 @@ export function LeadInputFieldView(props) {
   var _a, _b, _c, _d, _e, _f;
   const { states, content } = props;
   const getRequiredFieldErrorMessage = ({ fieldLabel, }) => intl.formatMessage({
-    id: "requiredFieldErrorMessage",
+    id: `requiredFieldErrorMessage-${fieldLabel}`,
     defaultMessage: content.requiredFieldErrorMessage,
   }, {
     fieldLabel,
   });
-  return (h("div", { part: "sqm-base" },
+  return (h("div", { class: sheet.classes.FieldContainer, part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), { disabled: ((_a = states.leadFormState) === null || _a === void 0 ? void 0 : _a.loading) || ((_b = states.leadFormState) === null || _b === void 0 ? void 0 : _b.disabled), validationError: ({ value }) => {
-        if (!value) {
+    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.fieldName}`, type: content.fieldType, label: `${content.fieldLabel}${content.fieldOptional ? ` ${content.optionalLabel}` : ""}` }, (!content.fieldOptional ? { required: true } : []), { disabled: ((_a = states.leadFormState) === null || _a === void 0 ? void 0 : _a.loading) || ((_b = states.leadFormState) === null || _b === void 0 ? void 0 : _b.disabled), validationError: ({ value }) => {
+        if (!value && !content.fieldOptional) {
           return getRequiredFieldErrorMessage({
             fieldLabel: content.fieldLabel,
           });
         }
-      } }, (((_d = (_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.firstName) ? {
+      } }, (((_d = (_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d[content.fieldName]) ? {
       class: sheet.classes.ErrorStyle,
-      helpText: ((_f = (_e = states.leadFormState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.firstName) ||
+      helpText: ((_f = (_e = states.leadFormState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f[content.fieldName]) ||
         content.requiredFieldErrorMessage,
     }
       : [])))));

package/dist/collection/components/sqm-lead-form/sqm-lead-input-field.js

@@ -15,6 +15,10 @@ import { useLeadInputField } from "./useLeadInputField";
 export class LeadInputField {
   constructor() {
     this.ignored = true;
+    /**
+     * @uiName Optional label
+     */
+    this.optionalLabel = "(optional)";
     /**
      * @uiName Input type
      * @uiType string
@@ -28,7 +32,7 @@ export class LeadInputField {
      * @uiName Required field message
      * @uiWidget textArea
      */
-    this.requiredFieldErrorMessage = "Please enter a {fieldName}";
+    this.requiredFieldErrorMessage = "Please enter a {fieldLabel}";
     /**
      * @uiName Optional
      * @default
@@ -100,6 +104,27 @@ export class LeadInputField {
       "attribute": "field-label",
       "reflect": false
     },
+    "optionalLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Optional label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "optional-label",
+      "reflect": false,
+      "defaultValue": "\"(optional)\""
+    },
     "fieldType": {
       "type": "string",
       "mutable": false,
@@ -152,7 +177,7 @@ export class LeadInputField {
       },
       "attribute": "required-field-error-message",
       "reflect": false,
-      "defaultValue": "\"Please enter a {fieldName}\""
+      "defaultValue": "\"Please enter a {fieldLabel}\""
     },
     "fieldOptional": {
       "type": "boolean",
@@ -183,7 +208,7 @@ export class LeadInputField {
       "mutable": false,
       "complexType": {
         "original": "DemoData<LeadInputFieldViewProps>",
-        "resolved": "{ states?: { leadFormState?: LeadFormState; }; content?: { fieldName: string; fieldLabel: string; fieldType: \"text\" | \"date\" | \"tel\"; fieldOptional?: boolean; requiredFieldErrorMessage: string; }; }",
+        "resolved": "{ states?: { leadFormState?: LeadFormState; }; content?: { fieldName: string; fieldLabel: string; optionalLabel: string; fieldType: \"text\" | \"date\" | \"tel\"; fieldOptional?: boolean; requiredFieldErrorMessage: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -218,5 +243,11 @@ function useLeadInputFieldDemo(props) {
     states: {
       leadForState: {},
     },
+    content: {
+      fieldName: props.fieldName,
+      fieldLabel: props.fieldLabel,
+      fieldType: props.fieldType,
+      requiredFieldErrorMessage: props.requiredFieldErrorMessage,
+    },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }