@saasquatch/mint-components 1.14.6-9 → 1.14.6

package/dist/cjs/{sqm-big-stat_42.cjs.entry.js → sqm-big-stat_43.cjs.entry.js}

@@ -19,13 +19,13 @@ require('./luxon-2926d85f.js');
 require('./sqm-text-span-view-0aa82125.js');
 const index$1 = require('./index-8c6255f5.js');
 const useRegistrationFormState = require('./useRegistrationFormState-7b820f0c.js');
-const useLeadFormState = require('./useLeadFormState-c83d2034.js');
 const sqmPortalLoginView = require('./sqm-portal-login-view-761a4d8e.js');
 const usePortalLogin = require('./usePortalLogin-63d896d1.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 const utilities = require('./utilities-78f5e169.js');
-const ShadowViewAddon = require('./ShadowViewAddon-d1dda2b0.js');
+const ShadowViewAddon = require('./ShadowViewAddon-3c344355.js');
 require('./sqm-portal-container-view-4f15143a.js');
+const useLeadFormState = require('./useLeadFormState-c83d2034.js');
 const usePayoutStatus = require('./usePayoutStatus-feeac99b.js');
 
 const BigStat = class {
@@ -1293,6 +1293,81 @@ function useInputFieldDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
+function useLeadDropdownField() {
+  const leadFormState = stencilHooks_module.d(useLeadFormState.LEAD_FORM_STATE_CONTEXT);
+  return {
+    states: {
+      leadFormState,
+    },
+  };
+}
+
+const LeadDropdownField = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Dropdown label
+     */
+    this.dropdownLabel = "Select an option";
+    /**
+     * The message to be displayed when a required field is not filled.
+     *
+     * @uiName Required field message
+     * @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;
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const missingProps = utils.getMissingProps([
+      {
+        attribute: "dropdown-name",
+        value: this.dropdownName,
+      },
+    ]);
+    if (!index_module.isDemo() && missingProps) {
+      return (index.h(useLeadFormState.RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this drop down field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }, index.h("slot", null)));
+    }
+    const content = {
+      ...utils.getProps(this),
+      selectOptions: index.h("slot", null),
+    };
+    const { states } = index_module.isDemo()
+      ? useLeadDropdownFieldDemo(this)
+      : useLeadDropdownField();
+    return (index.h(ShadowViewAddon.LeadDropdownFieldView, { states: states, content: content }));
+  }
+};
+function useLeadDropdownFieldDemo(props) {
+  return cjs.cjs({
+    states: {
+      leadFormState: {},
+    },
+    content: {
+      dropdownName: props.dropdownName,
+      dropdownLabel: props.dropdownLabel,
+      requiredFieldErrorMessage: props.requiredFieldErrorMessage,
+      dropdownOptional: props.dropdownOptional,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
 const SUBMIT_LEAD = index_module.dist.gql `
   mutation submitForm($formSubmissionInput: FormSubmissionInput!) {
     submitForm(formSubmissionInput: $formSubmissionInput) {
@@ -1316,7 +1391,6 @@ function useLeadForm(props) {
   const programId = index_module.H();
   const user = index_module.J();
   const { data: userDetails } = index_module.wn(GET_USER_DETAILS, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
-  console.log({ userDetails });
   const [submitLead, { loading, errors, data }] = index_module.$e(SUBMIT_LEAD);
   const [success, setSuccess] = stencilHooks_module.useState(false);
   stencilHooks_module.useEffect(() => {
@@ -1329,7 +1403,7 @@ function useLeadForm(props) {
     };
   }, [formRef.current]);
   const submit = async (event) => {
-    var _a, _b, _c, _d;
+    var _a;
     let formControls = event.target.getFormControls();
     let formData = {};
     let validationErrors = {};
@@ -1361,17 +1435,12 @@ function useLeadForm(props) {
       error: "",
       validationErrors: {},
     });
-    formData = { ...formData };
     const variables = {
       key: props.formKey,
       formData,
     };
     try {
       const result = await submitLead({ formSubmissionInput: variables });
-      console.log({
-        success: (_b = (_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.submitForm) === null || _b === void 0 ? void 0 : _b.success,
-        isError: result instanceof Error,
-      });
       if (result instanceof Error) {
         throw result;
       }
@@ -1380,12 +1449,11 @@ function useLeadForm(props) {
         error: "",
         validationErrors: {},
       });
-      if ((_d = (_c = result === null || result === void 0 ? void 0 : result.data) === null || _c === void 0 ? void 0 : _c.submitForm) === null || _d === void 0 ? void 0 : _d.success) {
+      if ((_a = result === null || result === void 0 ? void 0 : result.submitForm) === null || _a === void 0 ? void 0 : _a.success) {
         setSuccess(true);
       }
     }
     catch (error) {
-      console.log({ error });
       setLeadFormState({
         loading: false,
         error: props.networkErrorMessage,
@@ -1401,6 +1469,18 @@ function useLeadForm(props) {
     const asYouType = new AsYouType.AsYouType("US");
     e.target.value = asYouType.input(e.target.value);
   }, []);
+  function resetForm() {
+    var _a, _b;
+    setLeadFormState({
+      loading: false,
+      error: "",
+      validationErrors: {},
+    });
+    (_b = (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.getFormControls()) === null || _b === void 0 ? void 0 : _b.forEach((c) => {
+      c.value = "";
+    });
+    setSuccess(false);
+  }
   let errorMessage = "";
   if ((_a = errors === null || errors === void 0 ? void 0 : errors.response) === null || _a === void 0 ? void 0 : _a["error"]) {
     errorMessage = props.networkErrorMessage;
@@ -1412,7 +1492,6 @@ function useLeadForm(props) {
     errorMessage =
       ((_f = (_e = (_d = (_c = errors === null || errors === void 0 ? void 0 : errors.response) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.extensions) === null || _f === void 0 ? void 0 : _f.message) || ((_j = (_h = (_g = errors === null || errors === void 0 ? void 0 : errors.response) === null || _g === void 0 ? void 0 : _g.errors) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.message) || (leadFormState === null || leadFormState === void 0 ? void 0 : leadFormState.error);
   }
-  console.log({ errors, errorMessage });
   return {
     states: {
       loading,
@@ -1424,6 +1503,7 @@ function useLeadForm(props) {
     callbacks: {
       submit,
       inputFunction,
+      resetForm,
     },
     refs: {
       formRef,
@@ -1442,11 +1522,11 @@ const LeadForm = class {
     /**
      * @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
      */
@@ -1459,43 +1539,52 @@ const LeadForm = class {
      * @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
@@ -1514,13 +1603,15 @@ const LeadForm = class {
       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 (index.h(ShadowViewAddon.LeadFormView, { states: states, callbacks: callbacks, content: content, refs: refs }));
   }
@@ -1537,6 +1628,7 @@ function useRegisterDemo(props) {
         console.log("submit");
       },
       inputFunction: () => { },
+      resetForm: () => { },
     },
     refs: {
       formRef: {},
@@ -5401,6 +5493,7 @@ exports.sqm_hero_image = HeroImage;
 exports.sqm_hook_story_container = SqmHookStoryContainer;
 exports.sqm_image = Image;
 exports.sqm_input_field = InputField;
+exports.sqm_lead_dropdown_field = LeadDropdownField;
 exports.sqm_lead_form = LeadForm;
 exports.sqm_leaderboard = Leaderboard;
 exports.sqm_link_button = LinkButton;

package/dist/cjs/{sqm-lead-input-field-view-6344cd93.js → sqm-lead-input-field-view-89308aab.js}

@@ -8,7 +8,7 @@ const mixins = require('./mixins-f7e0377a.js');
 const style = {
   ErrorStyle: mixins.ErrorStyles,
   FieldContainer: {
-    "margin-bottom": "var(--sl-spacing-large)",
+    "margin-bottom": "var(--sl-spacing-medium)",
   },
 };
 const vanillaStyle = `
@@ -25,24 +25,24 @@ function LeadInputFieldView(props) {
   var _a, _b, _c, _d, _e, _f;
   const { states, content } = props;
   const getRequiredFieldErrorMessage = ({ fieldLabel, }) => global.intl.formatMessage({
-    id: "requiredFieldErrorMessage",
+    id: `requiredFieldErrorMessage-${fieldLabel}`,
     defaultMessage: content.requiredFieldErrorMessage,
   }, {
     fieldLabel,
   });
-  return (index.h("div", { part: "sqm-base" },
+  return (index.h("div", { class: sheet.classes.FieldContainer, part: "sqm-base" },
     index.h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    index.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) {
+    index.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/cjs/sqm-lead-input-field.cjs.entry.js

@@ -10,8 +10,8 @@ const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 require('./JSS-8503a151.js');
 require('./mixins-f7e0377a.js');
+const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-89308aab.js');
 const useLeadFormState = require('./useLeadFormState-c83d2034.js');
-const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-6344cd93.js');
 
 function useLeadInputField() {
   const leadFormState = stencilHooks_module.d(useLeadFormState.LEAD_FORM_STATE_CONTEXT);
@@ -26,6 +26,10 @@ const LeadInputField = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
+    /**
+     * @uiName Optional label
+     */
+    this.optionalLabel = "(optional)";
     /**
      * @uiName Input type
      * @uiType string
@@ -39,7 +43,7 @@ const LeadInputField = class {
      * @uiName Required field message
      * @uiWidget textArea
      */
-    this.requiredFieldErrorMessage = "Please enter a {fieldName}";
+    this.requiredFieldErrorMessage = "Please enter a {fieldLabel}";
     /**
      * @uiName Optional
      * @default

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -20,7 +20,6 @@ const sqmAssetCardView = require('./sqm-asset-card-view-21ddf04f.js');
 const sqmCloseButtonView = require('./sqm-close-button-view-ea3fa23b.js');
 require('./index-8c6255f5.js');
 const emailRegistrationView = require('./email-registration-view-55b378dc.js');
-const sqmLeadDropdownFieldView = require('./sqm-lead-dropdown-field-view-03a3e03f.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-d39a55d8.js');
 const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-11d57c12.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-17111896.js');
@@ -36,10 +35,10 @@ const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-fe6
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7b678f34.js');
 require('./ErrorView-b2fcf954.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-15dfc0b6.js');
-const ShadowViewAddon = require('./ShadowViewAddon-d1dda2b0.js');
+const ShadowViewAddon = require('./ShadowViewAddon-3c344355.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
 const sqmInvoiceTableView = require('./sqm-invoice-table-view-0f7fa309.js');
-const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-6344cd93.js');
+const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-89308aab.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -15847,6 +15846,7 @@ const defaultProps$t = {
   callbacks: {
     submit: () => console.log("Submit!"),
     inputFunction: () => { },
+    resetForm: () => { },
   },
   refs: {
     formRef: {},
@@ -15901,8 +15901,10 @@ const slottedProps$2 = {
   content: {
     ...defaultProps$t.content,
     formData: (index.h("div", null,
-      index.h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label, base: input-base", label: "Slotted Input", required: true }),
-      index.h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
+      index.h("sqm-lead-input-field", { "field-name": "firstName", "field-label": "First Name", "field-type": "text", "required-field-error-message": "Please enter a first name" }),
+      index.h("sqm-lead-input-field", { "field-name": "lastName", "field-label": "Last Name", "field-type": "text", "required-field-error-message": "Please enter a last name" }),
+      index.h("sqm-lead-input-field", { "field-name": "email", "field-label": "Email", "field-type": "email", "required-field-error-message": "Please enter a valid email address" }),
+      index.h("sqm-lead-dropdown-field", null))),
   },
 };
 const Default$r = () => index.h(ShadowViewAddon.LeadFormView, Object.assign({}, defaultProps$t));
@@ -15949,6 +15951,7 @@ const defaultProps$u = {
     fieldName: "firstName",
     fieldLabel: "First Name",
     fieldType: "text",
+    optionalLabel: "(Optional)",
     requiredFieldErrorMessage: "Please {fieldAction} a {fieldLabel}",
     fieldOptional: false,
   },
@@ -16005,7 +16008,9 @@ const defaultProps$v = {
     dropdownName: "country",
     dropdownLabel: "Country",
     requiredFieldErrorMessage: "Please select a country",
+    optionalLabel: "(Optional)",
     dropdownOptional: false,
+    multiple: false,
     selectOptions: [
       index.h("sl-menu-item", { value: "red" }, "Canada"),
       index.h("sl-menu-item", { value: "blue" }, "United States"),
@@ -16013,8 +16018,9 @@ const defaultProps$v = {
     ],
   },
 };
-const Default$t = () => index.h(sqmLeadDropdownFieldView.LeadDropdownFieldView, Object.assign({}, defaultProps$v));
-const WithError$1 = () => (index.h(sqmLeadDropdownFieldView.LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
+const Default$t = () => index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$v));
+const Multiple = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$v, { content: { ...defaultProps$v.content, multiple: true } })));
+const WithError$1 = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
     ...defaultProps$v.states,
     leadFormState: {
       ...defaultProps$v.states.leadFormState,
@@ -16023,21 +16029,21 @@ const WithError$1 = () => (index.h(sqmLeadDropdownFieldView.LeadDropdownFieldVie
       },
     },
   } })));
-const Disabled$3 = () => (index.h(sqmLeadDropdownFieldView.LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
+const Disabled$3 = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
     ...defaultProps$v.states,
     leadFormState: {
       ...defaultProps$v.states.leadFormState,
       disabled: true,
     },
   } })));
-const Loading$d = () => (index.h(sqmLeadDropdownFieldView.LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
+const Loading$d = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
     ...defaultProps$v.states,
     leadFormState: {
       ...defaultProps$v.states.leadFormState,
       loading: true,
     },
   } })));
-const WithInitialValue$1 = () => (index.h(sqmLeadDropdownFieldView.LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
+const WithInitialValue$1 = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
     ...defaultProps$v.states,
     leadFormState: {
       ...defaultProps$v.states.leadFormState,
@@ -16051,6 +16057,7 @@ const LeadFormDropdownField = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': LeadFormDropdownField_stories,
   Default: Default$t,
+  Multiple: Multiple,
   WithError: WithError$1,
   Disabled: Disabled$3,
   Loading: Loading$d,

package/dist/collection/collection-manifest.json

@@ -43,7 +43,6 @@
     "./components/sqm-invoice-table/columns/sqm-invoice-table-date-column.js",
     "./components/sqm-invoice-table/columns/sqm-invoice-table-download-column.js",
     "./components/sqm-lead-form/sqm-lead-dropdown-field.js",
-    "./components/sqm-referral-iframe/sqm-referral-iframe.js",
     "./components/sqm-lead-form/sqm-lead-form.js",
     "./components/sqm-lead-form/sqm-lead-input-field.js",
     "./components/sqm-leaderboard/sqm-leaderboard.js",
@@ -79,6 +78,7 @@
     "./components/sqm-qr-code/sqm-qr-code.js",
     "./components/sqm-referral-card/sqm-referral-card.js",
     "./components/sqm-referral-code/sqm-referral-code.js",
+    "./components/sqm-referral-iframe/sqm-referral-iframe.js",
     "./components/sqm-referral-table/cells/sqm-referral-table-cell.js",
     "./components/sqm-referral-table/cells/sqm-referral-table-date-cell.js",
     "./components/sqm-referral-table/cells/sqm-referral-table-rewards-cell.js",

package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field-view.js

@@ -15,7 +15,7 @@ const style = {
     fontSize: "var(--sl-input-help-text-font-size-medium)",
   },
   FieldContainer: {
-    "margin-bottom": "var(--sl-spacing-large)",
+    "margin-bottom": "var(--sl-spacing-medium)",
   },
 };
 const vanillaStyle = `

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

@@ -14,6 +14,7 @@ const defaultProps = {
   callbacks: {
     submit: () => console.log("Submit!"),
     inputFunction: () => { },
+    resetForm: () => { },
   },
   refs: {
     formRef: {},
@@ -68,8 +69,10 @@ const slottedProps = {
   content: {
     ...defaultProps.content,
     formData: (h("div", null,
-      h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label, base: input-base", label: "Slotted Input", required: true }),
-      h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
+      h("sqm-lead-input-field", { "field-name": "firstName", "field-label": "First Name", "field-type": "text", "required-field-error-message": "Please enter a first name" }),
+      h("sqm-lead-input-field", { "field-name": "lastName", "field-label": "Last Name", "field-type": "text", "required-field-error-message": "Please enter a last name" }),
+      h("sqm-lead-input-field", { "field-name": "email", "field-label": "Email", "field-type": "email", "required-field-error-message": "Please enter a valid email address" }),
+      h("sqm-lead-dropdown-field", null))),
   },
 };
 export const Default = () => h(LeadFormView, Object.assign({}, defaultProps));

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

@@ -16,7 +16,9 @@ const defaultProps = {
     dropdownName: "country",
     dropdownLabel: "Country",
     requiredFieldErrorMessage: "Please select a country",
+    optionalLabel: "(Optional)",
     dropdownOptional: false,
+    multiple: false,
     selectOptions: [
       h("sl-menu-item", { value: "red" }, "Canada"),
       h("sl-menu-item", { value: "blue" }, "United States"),
@@ -25,6 +27,7 @@ const defaultProps = {
   },
 };
 export const Default = () => h(LeadDropdownFieldView, Object.assign({}, defaultProps));
+export const Multiple = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps, { content: { ...defaultProps.content, multiple: true } })));
 export const WithError = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps, { states: {
     ...defaultProps.states,
     leadFormState: {

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

@@ -16,6 +16,7 @@ const defaultProps = {
     fieldName: "firstName",
     fieldLabel: "First Name",
     fieldType: "text",
+    optionalLabel: "(Optional)",
     requiredFieldErrorMessage: "Please {fieldAction} a {fieldLabel}",
     fieldOptional: false,
   },

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

@@ -28,16 +28,19 @@ sl-select::part(label){
   font-size: var(--sl-input-label-font-size-small);
   font-weight: var(--sl-font-weight-semibold);
 }
+sl-select::part(menu){
+  max-height: 300px;
+}
 `;
 jss.setup(preset());
 const sheet = jss.createStyleSheet(style);
 const styleString = sheet.toString();
 export function LeadDropdownFieldView(props) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e;
   const { states, content } = props;
   const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.leadFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
   const getRequiredFieldErrorMessage = ({ dropdownLabel, }) => intl.formatMessage({
-    id: "requiredFieldErrorMessage",
+    id: `requiredFieldErrorMessage-${dropdownLabel}`,
     defaultMessage: content.requiredFieldErrorMessage,
   }, {
     dropdownLabel,
@@ -46,20 +49,17 @@ export function LeadDropdownFieldView(props) {
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    h("sl-select", Object.assign({ exportparts: "label: input-label, base: input-base", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), { disabled: ((_b = states.leadFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.disabled), validationError: ({ value }) => {
-        if (!value) {
+    h("sl-select", Object.assign({ style: { maxHeight: "100px" }, exportparts: "label: input-label, base: input-base", label: `${content.dropdownLabel}${content.dropdownOptional ? ` ${content.optionalLabel}` : ""}`, name: `/${content.dropdownName}`, multiple: content.multiple }, (!content.dropdownOptional ? { required: true } : []), { disabled: ((_b = states.leadFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.disabled), validationError: ({ value }) => {
+        if (!value && !content.dropdownOptional) {
           return getRequiredFieldErrorMessage({
             dropdownLabel: content.dropdownLabel,
           });
         }
-      } }, (((_e = (_d = states.leadFormState) === null || _d === void 0 ? void 0 : _d.validationErrors) === null || _e === void 0 ? void 0 : _e.firstName) ? {
+      } }, (((_e = (_d = states.leadFormState) === null || _d === void 0 ? void 0 : _d.validationErrors) === null || _e === void 0 ? void 0 : _e[content.dropdownName]) ? {
       class: sheet.classes.ErrorStyle,
-      helpText: ((_g = (_f = states.leadFormState) === null || _f === void 0 ? void 0 : _f.validationErrors) === null || _g === void 0 ? void 0 : _g.firstName) ||
-        content.requiredFieldErrorMessage,
     }
       : [])), content.selectOptions),
-    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (h("p", { class: sheet.classes.ErrorMessageStyle }, intl.formatMessage({
-      id: `errorMessage-${content.dropdownName}`,
-      defaultMessage: content.requiredFieldErrorMessage,
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (h("p", { class: sheet.classes.ErrorMessageStyle }, getRequiredFieldErrorMessage({
+      dropdownLabel: content.dropdownLabel,
     })))));
 }