@saasquatch/mint-components 1.15.0-99 → 1.16.0-1

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

@@ -0,0 +1,44 @@
+import { h } from "@stencil/core";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+import { LeadCheckboxFieldView, } from "./sqm-lead-checkbox-field-view";
+export default {
+  title: "Components/Lead Checkbox Field",
+};
+const defaultProps = {
+  states: {
+    leadFormState: {
+      validationErrors: {},
+    },
+  },
+  content: {
+    checkboxName: "terms",
+    checkboxLabel: "By signing up you agree to the {labelLink}",
+    checkboxLabelLink: "https://example.com",
+    checkboxLabelLinkText: "Terms and Conditions",
+    errorMessage: "{checkboxLabel} Must be checked",
+  },
+};
+export const Default = createHookStory(() => (h(LeadCheckboxFieldView, Object.assign({}, defaultProps))));
+export const CustomLabel = createHookStory(() => (h(LeadCheckboxFieldView, Object.assign({}, defaultProps, { content: {
+    ...defaultProps.content,
+    checkboxLabel: "I Agree",
+  } }))));
+export const Error = createHookStory(() => (h(LeadCheckboxFieldView, Object.assign({}, defaultProps, { states: {
+    ...defaultProps.states,
+    leadFormState: {
+      validationErrors: {
+        terms: "{checkboxLabel} Must be checked",
+      },
+    },
+  } }))));
+export const CustomError = createHookStory(() => (h(LeadCheckboxFieldView, Object.assign({}, defaultProps, { states: {
+    ...defaultProps.states,
+    leadFormState: {
+      validationErrors: {
+        terms: "{checkboxLabel} Must be checked",
+      },
+    },
+  }, content: {
+    ...defaultProps.content,
+    errorMessage: "This checkbox must be checked to continue",
+  } }))));

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

@@ -0,0 +1,93 @@
+import { h } from "@stencil/core";
+import { LeadFormView } from "./sqm-lead-form-view";
+export default {
+  title: "Components/Lead Form",
+};
+const defaultProps = {
+  states: {
+    success: false,
+    leadFormState: {},
+    error: "",
+    loading: false,
+    referralCode: "ABC123",
+  },
+  callbacks: {
+    submit: () => console.log("Submit!"),
+    inputFunction: () => { },
+    resetForm: () => { },
+  },
+  refs: {
+    formRef: {},
+  },
+  content: {
+    submitLabel: "Submit",
+    pageLabel: "Submit your information",
+    resubmitFormLabel: "Refer Another Friend",
+    requiredFieldErrorMessage: "Cannot be empty",
+    invalidEmailErrorMessage: "Must be a valid email address",
+    submitSuccessHeader: "Referral submitted",
+    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.",
+    submitErrorHeader: "An error occurred while submitting",
+    submitErrorDescription: "Please try again later. If the problem continues, contact Support",
+  },
+};
+const successProps = {
+  ...defaultProps,
+  states: {
+    ...defaultProps.states,
+    success: true,
+    error: null,
+  },
+  content: {
+    ...defaultProps.content,
+    pageLabel: "Refer your friend",
+  },
+};
+const errorProps = {
+  ...defaultProps,
+  states: {
+    ...defaultProps.states,
+    error: "Something went wrong. Please try again.",
+    leadFormState: {
+      validationErrors: {
+        firstName: "Please enter a first name",
+        lastName: "Please enter a last name",
+        email: "Please enter a valid email",
+      },
+    },
+  },
+};
+const loadingProps = {
+  ...defaultProps,
+  states: {
+    ...defaultProps.states,
+    loading: true,
+  },
+};
+const slottedProps = {
+  ...defaultProps,
+  content: {
+    ...defaultProps.content,
+    formData: (h("div", null,
+      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));
+export const LeadSubmitSuccess = () => h(LeadFormView, Object.assign({}, successProps));
+export const LeadSubmitWithError = () => h(LeadFormView, Object.assign({}, errorProps));
+export const LeadSubmitLoading = () => h(LeadFormView, Object.assign({}, loadingProps));
+export const FieldsHidden = () => {
+  return (h("sqm-lead-form", { demoData: {
+      states: {
+        leadFormState: {},
+        error: "",
+        success: false,
+        loading: true,
+        referralCode: "ABC123",
+      },
+    } }));
+};
+export const SlottedInputs = () => h(LeadFormView, Object.assign({}, slottedProps));

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

@@ -0,0 +1,62 @@
+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",
+    optionalLabel: "(Optional)",
+    dropdownOptional: false,
+    multiple: 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 Multiple = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps, { content: { ...defaultProps.content, multiple: true } })));
+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,49 @@
+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",
+    optionalLabel: "(Optional)",
+    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-checkbox-field-view.js

@@ -0,0 +1,79 @@
+import { h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+import { intl } from "../../global/global";
+const style = {
+  ErrorStyle: {
+    "&::part(control)": {
+      borderColor: "var(--sl-color-danger-500)",
+      outline: "var(--sl-color-danger-500)",
+    },
+    "&:host": {
+      "--focus-ring": "0 0 0 var(--sl-focus-ring-width) red !important",
+    },
+  },
+  ErrorMessageStyle: {
+    margin: 0,
+    marginTop: "5px",
+    color: "var(--sl-color-danger-500)",
+    fontSize: "var(--sl-input-help-text-font-size-medium)",
+    fontFamily: "var(--sl-font-sans)",
+    fontWeight: "var(--sl-font-weight-normal)",
+  },
+  FieldContainer: {
+    "margin-bottom": "var(--sl-spacing-large)",
+  },
+};
+const vanillaStyle = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+sl-checkbox::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-normal);
+  line-height: 20px;
+}
+sl-checkbox::part(base){
+  align-items: start;
+}
+`;
+jss.setup(preset());
+const sheet = jss.createStyleSheet(style);
+const styleString = sheet.toString();
+export function LeadCheckboxFieldView(props) {
+  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 = ({ checkboxLabel, }) => intl.formatMessage({
+    id: `requiredFieldErrorMessage-${checkboxLabel}`,
+    defaultMessage: content.errorMessage,
+  }, {
+    checkboxLabel,
+  });
+  return (h("div", { class: sheet.classes.FieldContainer, part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, "onSl-change": (e) => {
+        e.target.value = e.target.checked;
+      } }, (!content.checkboxOptional ? { required: false } : []), { 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.checkboxOptional) {
+          return getRequiredFieldErrorMessage({
+            checkboxLabel: content.checkboxLabel,
+          });
+        }
+      } }, (((_e = (_d = states.leadFormState) === null || _d === void 0 ? void 0 : _d.validationErrors) === null || _e === void 0 ? void 0 : _e[content.checkboxName]) ? {
+      class: sheet.classes.ErrorStyle,
+    }
+      : [])), intl.formatMessage({
+      id: content.checkboxName + "-message",
+      defaultMessage: content.checkboxLabel,
+    }, {
+      labelLink: (h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
+    })),
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet.classes.ErrorMessageStyle }, getRequiredFieldErrorMessage({
+      checkboxLabel: content.checkboxLabel,
+    })))));
+}

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

@@ -0,0 +1,234 @@
+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 { LeadCheckboxFieldView, } from "./sqm-lead-checkbox-field-view";
+import { useLeadCheckboxField } from "./useCheckboxField";
+/**
+ * @uiName Lead Form Checkbox Field
+ * @validParents ["sqm-lead-form"]
+ */
+export class LeadCheckboxField {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Checkbox label
+     * @uiWidget textArea
+     */
+    this.checkboxLabel = "By signing up you agree to the {labelLink}";
+    /**
+     * Used with link text if the checkbox label contains {labelLink}
+     *
+     * @uiName Checkbox label link
+     */
+    this.checkboxLabelLink = "https://example.com";
+    /**
+     * @uiName Checkbox label link lext
+     */
+    this.checkboxLabelLinkText = "Terms and Conditions";
+    /**
+     * @uiName Unchecked error message
+     */
+    this.errorMessage = "Must be checked";
+    /**
+     * @uiName Optional
+     */
+    this.checkboxOptional = false;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const missingProps = getMissingProps([
+      {
+        attribute: "checkbox-name",
+        value: this.checkboxName,
+      },
+    ]);
+    if (!isDemo() && missingProps) {
+      return (h(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this checkbox field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
+    }
+    const content = {
+      ...getProps(this),
+    };
+    const { states } = isDemo()
+      ? useLeadCheckboxFieldDemo(this)
+      : useLeadCheckboxField();
+    return (h(LeadCheckboxFieldView, { states: states, content: content }));
+  }
+  static get is() { return "sqm-lead-checkbox-field"; }
+  static get properties() { return {
+    "checkboxName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Checkbox 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": "checkbox-name",
+      "reflect": false
+    },
+    "checkboxLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Checkbox label",
+            "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "checkbox-label",
+      "reflect": false,
+      "defaultValue": "\"By signing up you agree to the {labelLink}\""
+    },
+    "checkboxLabelLink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Checkbox label link",
+            "name": "uiName"
+          }],
+        "text": "Used with link text if the checkbox label contains {labelLink}"
+      },
+      "attribute": "checkbox-label-link",
+      "reflect": false,
+      "defaultValue": "\"https://example.com\""
+    },
+    "checkboxLabelLinkText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Checkbox label link lext",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "checkbox-label-link-text",
+      "reflect": false,
+      "defaultValue": "\"Terms and Conditions\""
+    },
+    "errorMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Unchecked error message",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "error-message",
+      "reflect": false,
+      "defaultValue": "\"Must be checked\""
+    },
+    "checkboxOptional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Optional",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "checkbox-optional",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<LeadCheckboxFieldViewProps>",
+        "resolved": "{ states?: { leadFormState?: LeadFormState; }; content?: { checkboxName: string; checkboxLabel: string; checkboxLabelLink?: string; checkboxLabelLinkText?: string; checkboxOptional?: boolean; errorMessage?: string; }; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "LeadCheckboxFieldViewProps": {
+            "location": "import",
+            "path": "./sqm-lead-checkbox-field-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function useLeadCheckboxFieldDemo(props) {
+  return deepmerge({
+    states: {
+      leadFormState: {},
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

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);
+}
+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;
+  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-${dropdownLabel}`,
+    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({ 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[content.dropdownName]) ? {
+      class: sheet.classes.ErrorStyle,
+    }
+      : [])), content.selectOptions),
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (h("p", { class: sheet.classes.ErrorMessageStyle }, getRequiredFieldErrorMessage({
+      dropdownLabel: content.dropdownLabel,
+    })))));
+}