@saasquatch/mint-components 1.14.6-9 → 1.14.7-0

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

@@ -0,0 +1,103 @@
+import { h } from "@stencil/core";
+import { PortalRegisterView, } from "../sqm-portal-register/sqm-portal-register-view";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+import { LeadCheckboxFieldView, } from "./sqm-lead-checkbox-field-view";
+import scenario from "./sqm-checkbox-field.feature";
+export default {
+  title: "Components/Checkbox Field",
+  parameters: {
+    scenario,
+  },
+};
+const defaultProps = {
+  states: {
+    leadFormState: {
+      validationErrors: {},
+    },
+    checked: false,
+  },
+  content: {
+    checkboxName: "terms",
+    checkboxLabel: "By signing up you agree to the {labelLink}",
+    checkboxLabelLink: "https://example.com",
+    checkboxLabelLinkText: "Terms and Conditions",
+    errorMessage: "Must be checked",
+  },
+  callbacks: {
+    setChecked: () => { },
+  },
+};
+const defaultRegisterProps = {
+  states: {
+    registrationFormState: {},
+    error: "",
+    loading: false,
+    confirmPassword: true,
+    hideInputs: false,
+    loginPath: "/login",
+  },
+  callbacks: {
+    submit: () => console.log("Submit!"),
+    inputFunction: () => { },
+  },
+  refs: {
+    formRef: {},
+  },
+  content: {
+    pageLabel: "Register",
+    confirmPasswordLabel: "Confirm Password",
+    requiredFieldErrorMessage: "Cannot be empty",
+    invalidEmailErrorMessage: "Must be a valid email address",
+  },
+};
+export const Default = createHookStory(() => (h(LeadCheckboxFieldView, Object.assign({}, defaultProps))));
+export const DefaultChecked = createHookStory(() => (h(LeadCheckboxFieldView, Object.assign({}, defaultProps, { states: {
+    ...defaultProps.states,
+    checked: true,
+  } }))));
+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: {
+        agree: "Must be checked",
+      },
+    },
+  } }))));
+export const CustomError = createHookStory(() => (h(LeadCheckboxFieldView, Object.assign({}, defaultProps, { states: {
+    ...defaultProps.states,
+    leadFormState: {
+      validationErrors: {
+        agree: "Must be checked",
+      },
+    },
+  }, content: {
+    ...defaultProps.content,
+    errorMessage: "This checkbox must be checked to continue",
+  } }))));
+export const TermsAndConditions = createHookStory(() => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
+  //@ts-ignore
+  content: {
+    ...defaultRegisterProps.content,
+    terms: (h("p", null,
+      h("sqm-checkbox-field", null))),
+  } }))));
+export const TermsAndConditionsCustomLabel = createHookStory(() => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
+  //@ts-ignore
+  content: {
+    ...defaultRegisterProps.content,
+    terms: (h("p", null,
+      "By signing up you agree to the",
+      " ",
+      h("a", { href: "https://example.com", target: "_blank" }, "Terms and Conditions"),
+      h("sqm-checkbox-field", { "checkbox-label": "I agree" }))),
+  } }))));
+export const TermsAndConditionsLongCustomLabel = createHookStory(() => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
+  //@ts-ignore
+  content: {
+    ...defaultRegisterProps.content,
+    terms: (h("sqm-checkbox-field", { "checkbox-label": "Participants must be at least 18 years of age and a legal resident of the U.S. or Canada. By signing up to participate in the rewards program, you agree to the {labelLink}.", "checkbox-label-link": "https://www.example.com", "checkbox-label-link-text": "terms", "checkbox-name": "termsAndConditions" })),
+  } }))));

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-checkbox-field-view.js

@@ -0,0 +1,62 @@
+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)": {
+      background: "var(--sl-color-danger-10)",
+      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;
+  const { states, content, callbacks } = props;
+  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}`, checked: states.checked, "onSl-change": (e) => {
+        e.target.value = e.target.checked;
+        callbacks.setChecked(e.target.value);
+      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_a = states.leadFormState) === null || _a === void 0 ? void 0 : _a.loading) || ((_b = states.leadFormState) === null || _b === void 0 ? void 0 : _b.disabled), required: false }), intl.formatMessage({
+      id: content.checkboxName + "-message",
+      defaultMessage: content.checkboxLabel,
+    }, {
+      labelLink: (h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
+    }))));
+}

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

@@ -0,0 +1,238 @@
+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, callbacks } = isDemo()
+      ? useLeadCheckboxFieldDemo(this)
+      : useLeadCheckboxField(this);
+    return (h(LeadCheckboxFieldView, { states: states, content: content, callbacks: callbacks }));
+  }
+  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; checked: boolean; }; 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: {
+      registrationFormState: {},
+      checked: false,
+    },
+    callbacks: {
+      setChecked: () => { },
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

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,
     })))));
 }

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

@@ -9,9 +9,7 @@ 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>
+ * @slots [{"name":"", "title":"Dropdown Option"}]
  */
 export class LeadDropdownField {
   constructor() {
@@ -27,11 +25,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 +132,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 +162,7 @@ export class LeadDropdownField {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [{
             "text": "Optional",
@@ -149,12 +177,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",