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

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

@@ -0,0 +1,59 @@
+import { h } from "@stencil/core";
+import { LeadDropdownFieldView, } from "./sqm-lead-dropdown-field-view";
+export default {
+  title: "Components/Lead Form Dropdown Field",
+};
+const defaultProps = {
+  states: {
+    leadFormState: {
+      validationErrors: {},
+      loading: false,
+      disabled: false,
+      initialData: {},
+    },
+  },
+  content: {
+    dropdownName: "country",
+    dropdownLabel: "Country",
+    requiredFieldErrorMessage: "Please select a country",
+    dropdownOptional: false,
+    selectOptions: [
+      h("sl-menu-item", { value: "red" }, "Canada"),
+      h("sl-menu-item", { value: "blue" }, "United States"),
+      h("sl-menu-item", { value: "green" }, "Mexico"),
+    ],
+  },
+};
+export const Default = () => h(LeadDropdownFieldView, Object.assign({}, defaultProps));
+export const WithError = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps, { states: {
+    ...defaultProps.states,
+    leadFormState: {
+      ...defaultProps.states.leadFormState,
+      validationErrors: {
+        country: "Please select a country",
+      },
+    },
+  } })));
+export const Disabled = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps, { states: {
+    ...defaultProps.states,
+    leadFormState: {
+      ...defaultProps.states.leadFormState,
+      disabled: true,
+    },
+  } })));
+export const Loading = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps, { states: {
+    ...defaultProps.states,
+    leadFormState: {
+      ...defaultProps.states.leadFormState,
+      loading: true,
+    },
+  } })));
+export const WithInitialValue = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps, { states: {
+    ...defaultProps.states,
+    leadFormState: {
+      ...defaultProps.states.leadFormState,
+      initialData: {
+        country: "Canada",
+      },
+    },
+  } })));

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

@@ -0,0 +1,48 @@
+import { h } from "@stencil/core";
+import { LeadInputFieldView, } from "./sqm-lead-input-field-view";
+export default {
+  title: "Components/Lead Form Input Field",
+};
+const defaultProps = {
+  states: {
+    leadFormState: {
+      validationErrors: {},
+      loading: false,
+      disabled: false,
+      initialData: {},
+    },
+  },
+  content: {
+    fieldName: "firstName",
+    fieldLabel: "First Name",
+    fieldType: "text",
+    requiredFieldErrorMessage: "Please {fieldAction} a {fieldLabel}",
+    fieldOptional: false,
+  },
+};
+export const Default = () => h(LeadInputFieldView, Object.assign({}, defaultProps));
+export const WithError = () => (h(LeadInputFieldView, Object.assign({}, defaultProps, { states: {
+    ...defaultProps.states,
+    leadFormState: {
+      ...defaultProps.states.leadFormState,
+      validationErrors: {
+        firstName: "Please enter a first name",
+      },
+    },
+  } })));
+export const Disabled = () => (h(LeadInputFieldView, Object.assign({}, defaultProps, { states: {
+    ...defaultProps.states,
+    leadFormState: {
+      ...defaultProps.states.leadFormState,
+      disabled: true,
+    },
+  } })));
+export const WithInitialValue = () => (h(LeadInputFieldView, Object.assign({}, defaultProps, { states: {
+    ...defaultProps.states,
+    leadFormState: {
+      ...defaultProps.states.leadFormState,
+      initialData: {
+        firstName: "Jane",
+      },
+    },
+  } })));

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

@@ -0,0 +1,65 @@
+import { h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+import { intl } from "../../global/global";
+const style = {
+  ErrorStyle: {
+    "--sl-input-border-color": "var(--sl-color-danger-500)",
+    "--sl-input-background-color": "var(--sl-color-danger-10)",
+    "--sl-input-border-color-focus": "var(--sl-color-danger-500)",
+    "--sl-input-border-color-hover": "var(--sl-color-danger-500)",
+  },
+  ErrorMessageStyle: {
+    margin: 0,
+    color: "var(--sl-color-danger-500)",
+    fontSize: "var(--sl-input-help-text-font-size-medium)",
+  },
+  FieldContainer: {
+    "margin-bottom": "var(--sl-spacing-large)",
+  },
+};
+const vanillaStyle = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+sl-select::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-semibold);
+}
+`;
+jss.setup(preset());
+const sheet = jss.createStyleSheet(style);
+const styleString = sheet.toString();
+export function LeadDropdownFieldView(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  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",
+    defaultMessage: content.requiredFieldErrorMessage,
+  }, {
+    dropdownLabel,
+  });
+  return (h("div", { class: sheet.classes.FieldContainer, part: "sqm-base" },
+    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) {
+          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) ? {
+      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,
+    })))));
+}

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

@@ -0,0 +1,193 @@
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import deepmerge from "deepmerge";
+import { RequiredPropsError } from "../../utils/RequiredPropsError";
+import { getMissingProps, getProps } from "../../utils/utils";
+import { LeadDropdownFieldView, } from "./sqm-lead-dropdown-field-view";
+import { useLeadDropdownField } from "./useLeadDropdownField";
+/**
+ * @uiName Lead Form Dropdown Field
+ * @validParents ["sqm-lead-form"]
+ * @slots [{"name":"", "title":"Drop Down Option"}]
+ * @exampleGroup Microsite Components
+ * @example Lead Form Dropdown Field - <sqm-lead-dropdown-field dropdown-label="Select an option" required-field-error-message="Please select an option"><sl-menu-item value="option-1">Option 1</sl-menu-item><sl-menu-item value="option-2">Option 2</sl-menu-item><sl-menu-item value="option-3">Option 3</sl-menu-item></sqm-lead-dropdown-field>
+ */
+export class LeadDropdownField {
+  constructor() {
+    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
+     * @default
+     */
+    this.dropdownOptional = false;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const missingProps = getMissingProps([
+      {
+        attribute: "dropdown-name",
+        value: this.dropdownName,
+      },
+    ]);
+    if (!isDemo() && missingProps) {
+      return (h(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:" },
+        h("slot", null)));
+    }
+    const content = {
+      ...getProps(this),
+      selectOptions: h("slot", null),
+    };
+    const { states } = isDemo()
+      ? useLeadDropdownFieldDemo(this)
+      : useLeadDropdownField();
+    return (h(LeadDropdownFieldView, { states: states, content: content }));
+  }
+  static get is() { return "sqm-lead-dropdown-field"; }
+  static get properties() { return {
+    "dropdownName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Dropdown name attribute",
+            "name": "uiName"
+          }, {
+            "text": undefined,
+            "name": "required"
+          }],
+        "text": "This name is used as the key for this form field on submission. The name must be unique within this specific form."
+      },
+      "attribute": "dropdown-name",
+      "reflect": false
+    },
+    "dropdownLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Dropdown label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "dropdown-label",
+      "reflect": false,
+      "defaultValue": "\"Select an option\""
+    },
+    "requiredFieldErrorMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Required field message",
+            "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": "The message to be displayed when a required field is not filled."
+      },
+      "attribute": "required-field-error-message",
+      "reflect": false,
+      "defaultValue": "\"Please select a {dropdownLabel}\""
+    },
+    "dropdownOptional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Optional",
+            "name": "uiName"
+          }, {
+            "text": undefined,
+            "name": "default"
+          }],
+        "text": ""
+      },
+      "attribute": "dropdown-optional",
+      "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[]; }; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "DropdownFieldViewProps": {
+            "location": "import",
+            "path": "./sqm-lead-dropdown-field-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function useLeadDropdownFieldDemo(props) {
+  return deepmerge({
+    states: {
+      leadFormState: {},
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 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" },
   Column: AuthColumn,
@@ -10,7 +11,24 @@ const style = {
     margin: "0 auto",
     width: "100%",
   },
+  NameFieldWrapper: {
+    display: "flex",
+    gap: "var(--sl-spacing-medium)",
+  },
+  ContinueButton: { maxWidth: "169px" },
   ButtonsContainer: AuthButtonsContainer,
+  SuccessAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-green-100)",
+      borderTop: "none",
+    },
+  },
+  ErrorAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-red-100)",
+      borderTop: "none",
+    },
+  },
   ErrorStyle: ErrorStyles,
 };
 const vanillaStyle = `
@@ -31,50 +49,65 @@ sqm-portal-register {
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function LeadFormView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+  var _a, _b, _c, _d;
   const { states, refs, callbacks, content } = props;
   if (states.error) {
     window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
   }
+  const getRequiredFieldErrorMessage = ({ fieldLabel, }) => intl.formatMessage({
+    id: "requiredFieldErrorMessage",
+    defaultMessage: content.requiredFieldErrorMessage,
+  }, {
+    fieldLabel,
+  });
+  if (states.success) {
+    return (h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
+      h("style", { type: "text/css" },
+        vanillaStyle,
+        styleString),
+      h(TextSpanView, { type: "h3" }, content.pageLabel),
+      h("sqm-form-message", { exportparts: "success-icon" },
+        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("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
-        h("div", { part: "erroralert-text" }, props.states.error))),
-      h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "text", name: "/lastName", label: content.firstNameLabel || "First Name", disabled: states.loading, required: true, validationError: ({ value }) => {
-          if (!value) {
-            return content.requiredFieldErrorMessage;
-          }
-        } }, (((_b = (_a = states.leadFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
-        class: sheet.classes.ErrorStyle,
-        helpText: ((_d = (_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.firstName) ||
-          content.requiredFieldErrorMessage,
-      }
-        : []))),
-      h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "text", name: "/lastName", label: content.lastNameLabel || "Last Name", disabled: states.loading, required: true, validationError: ({ value }) => {
-          if (!value) {
-            return content.requiredFieldErrorMessage;
-          }
-        } }, (((_f = (_e = states.leadFormState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.lastName) ? {
-        class: sheet.classes.ErrorStyle,
-        helpText: ((_h = (_g = states.leadFormState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.lastName) ||
-          content.requiredFieldErrorMessage,
-      }
-        : []))),
+      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 content.requiredFieldErrorMessage;
+            return getRequiredFieldErrorMessage({
+              fieldLabel: content.emailLabel || "Email",
+            });
           }
           // this matches shoelace validation, but could be better
           if (!value.includes("@")) {
             return content.invalidEmailErrorMessage;
           }
-        } }, (((_k = (_j = states.leadFormState) === null || _j === void 0 ? void 0 : _j.validationErrors) === null || _k === void 0 ? void 0 : _k.email) ? {
+        } }, (((_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: ((_m = (_l = states.leadFormState) === null || _l === void 0 ? void 0 : _l.validationErrors) === null || _m === void 0 ? void 0 : _m.email) ||
+        helpText: ((_d = (_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
           content.requiredFieldErrorMessage,
       }
         : []))),