@saasquatch/mint-components 1.14.6 → 1.14.7-1

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

@@ -0,0 +1,78 @@
+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, _c, _d, _e, _f;
+  const { states, content, callbacks } = props;
+  const getRequiredFieldErrorMessage = ({ checkboxLabel, }) => intl.formatMessage({
+    id: `requiredFieldErrorMessage-${checkboxLabel}`,
+    defaultMessage: content.requiredFieldErrorMessage,
+  }, {
+    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}`, 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), validationError: ({ value }) => {
+        if (!value && !content.checkboxOptional) {
+          return getRequiredFieldErrorMessage({
+            checkboxLabel: content.checkboxLabel,
+          });
+        }
+      } }, (((_d = (_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d[content.checkboxName]) ? {
+      class: sheet.classes.ErrorStyle,
+      helpText: ((_f = (_e = states.leadFormState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f[content.checkboxName]) || content.requiredFieldErrorMessage,
+    }
+      : [])), 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; requiredFieldErrorMessage?: 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/useCheckboxField.js

@@ -0,0 +1,23 @@
+import { useDomContext } from "@saasquatch/stencil-hooks";
+import { useEffect, useState } from "@saasquatch/universal-hooks";
+import { LEAD_FORM_STATE_CONTEXT } from "./useLeadFormState";
+export function useLeadCheckboxField(props) {
+  var _a;
+  const leadFormState = useDomContext(LEAD_FORM_STATE_CONTEXT);
+  const [checked, setChecked] = useState(false);
+  useEffect(() => {
+    var _a, _b;
+    if ((_a = leadFormState === null || leadFormState === void 0 ? void 0 : leadFormState.initialData) === null || _a === void 0 ? void 0 : _a[props.checkboxName]) {
+      setChecked(!!((_b = leadFormState === null || leadFormState === void 0 ? void 0 : leadFormState.initialData) === null || _b === void 0 ? void 0 : _b[props.checkboxName]));
+    }
+  }, [(_a = leadFormState === null || leadFormState === void 0 ? void 0 : leadFormState.initialData) === null || _a === void 0 ? void 0 : _a[props.checkboxName]]);
+  return {
+    states: {
+      leadFormState,
+      checked,
+    },
+    callbacks: {
+      setChecked,
+    },
+  };
+}