@saasquatch/mint-components 1.7.0-7 → 1.7.0-9

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

@@ -7,13 +7,17 @@ import { getMissingProps, getProps } from "../../utils/utils";
 import { CheckboxFieldView, } from "./sqm-checkbox-field-view";
 import { useCheckboxField } from "./useCheckboxField";
 /**
- * @uiName Checkbox Field
+ * @uiName Form Checkbox Field
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @exampleGroup Microsite Components
+ * @example Form Checkbox Field - <sqm-checkbox-field checkbox-label="By signing up you agree to the {labelLink}" checkbox-label-link="https://example.com" checkbox-label-link-text="Terms and Conditions" error-message="Must be checked" ></sqm-checkbox-field>
  */
 export class CheckboxField {
   constructor() {
     this.ignored = true;
     /**
      * @uiName Checkbox Label
+     * @uiWidget textArea
      */
     this.checkboxLabel = "By signing up you agree to the {labelLink}";
     /**
@@ -32,7 +36,6 @@ export class CheckboxField {
     this.errorMessage = "Must be checked";
     /**
      * @uiName Optional
-     * @default
      */
     this.checkboxOptional = false;
     withHooks(this);
@@ -53,7 +56,7 @@ export class CheckboxField {
     };
     const { states, callbacks } = isDemo()
       ? useCheckboxFieldDemo(this)
-      : useCheckboxField();
+      : useCheckboxField(this);
     return (h(CheckboxFieldView, { states: states, content: content, callbacks: callbacks }));
   }
   static get is() { return "sqm-checkbox-field"; }
@@ -72,8 +75,11 @@ export class CheckboxField {
         "tags": [{
             "text": "Checkbox Name Attribute",
             "name": "uiName"
+          }, {
+            "text": undefined,
+            "name": "required"
           }],
-        "text": ""
+        "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
@@ -92,6 +98,9 @@ export class CheckboxField {
         "tags": [{
             "text": "Checkbox Label",
             "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
           }],
         "text": ""
       },
@@ -176,9 +185,6 @@ export class CheckboxField {
         "tags": [{
             "text": "Optional",
             "name": "uiName"
-          }, {
-            "text": undefined,
-            "name": "default"
           }],
         "text": ""
       },
@@ -191,7 +197,7 @@ export class CheckboxField {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CheckboxFieldViewProps>",
-        "resolved": "{ states?: { validationErrors?: ValidationErrors; checked: boolean; }; content?: { checkboxName: string; checkboxLabel: string; checkboxLabelLink?: string; checkboxLabelLinkText?: string; checkboxOptional?: boolean; errorMessage: string; }; }",
+        "resolved": "{ states?: { registrationFormState?: RegistrationFormState; checked: boolean; }; content?: { checkboxName: string; checkboxLabel: string; checkboxLabelLink?: string; checkboxLabelLinkText?: string; checkboxOptional?: boolean; errorMessage: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -224,7 +230,7 @@ export class CheckboxField {
 function useCheckboxFieldDemo(props) {
   return deepmerge({
     states: {
-      validationErrors: [],
+      registrationFormState: {},
       checked: false,
     },
     callbacks: {

package/dist/collection/components/sqm-checkbox-field/useCheckboxField.js

@@ -1,12 +1,19 @@
 import { useDomContext } from "@saasquatch/stencil-hooks";
-import { useState } from "@saasquatch/universal-hooks";
-import { FORM_VALIDATION_CONTEXT, } from "../sqm-portal-register/useValidationState";
-export function useCheckboxField() {
-  const validationState = useDomContext(FORM_VALIDATION_CONTEXT);
+import { useEffect, useState } from "@saasquatch/universal-hooks";
+import { REGISTRATION_FORM_STATE_CONTEXT, } from "../sqm-portal-registration-form/useRegistrationFormState";
+export function useCheckboxField(props) {
+  var _a;
+  const registrationFormState = useDomContext(REGISTRATION_FORM_STATE_CONTEXT);
   const [checked, setChecked] = useState(false);
+  useEffect(() => {
+    var _a, _b;
+    if ((_a = registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData) === null || _a === void 0 ? void 0 : _a[props.checkboxName]) {
+      setChecked(!!((_b = registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData) === null || _b === void 0 ? void 0 : _b[props.checkboxName]));
+    }
+  }, [(_a = registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData) === null || _a === void 0 ? void 0 : _a[props.checkboxName]]);
   return {
     states: {
-      validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
+      registrationFormState,
       checked,
     },
     callbacks: {

package/dist/collection/components/sqm-divided-layout/DividedLayout.stories.js

@@ -1,6 +1,4 @@
 import { h } from "@stencil/core";
-import { NavigationSidebarItemView } from "../sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
-import { NavigationSidebarView } from "../sqm-navigation-sidebar/sqm-navigation-sidebar-view";
 import { PortalSectionView } from "../sqm-titled-section/sqm-portal-section-view";
 export default {
   title: "Components/Divided Layout",
@@ -40,9 +38,12 @@ const item2Props = {
   },
 };
 const Sidebar = () => {
-  return (h(NavigationSidebarView, Object.assign({}, barProps),
-    h(NavigationSidebarItemView, Object.assign({}, item1Props)),
-    h(NavigationSidebarItemView, Object.assign({}, item2Props))));
+  return (h("div", null)
+  // <NavigationSidebarView {...barProps}>
+  //   <NavigationSidebarItemView {...item1Props} />
+  //   <NavigationSidebarItemView {...item2Props} />
+  // </NavigationSidebarView>
+  );
 };
 export const Row = () => {
   return (h("sqm-divided-layout", { direction: "row" },

package/dist/collection/components/sqm-divided-layout/sqm-divided-layout-view.js

@@ -12,10 +12,7 @@ export function DividedLayoutView(props, children) {
   const style = {
     LayoutContainer: {
       display: "contents",
-      // "min-width": "320px",
-      // "& > ::slotted(*)": {
-      //   "min-width": "320px",
-      // },
+      maxWidth: "100%",
       // First style applies when shadow DOM is disabled, second applies when shadow DOM is enabled
       "& > :not(:last-child)": {
         ...getBorder(),
@@ -29,6 +26,7 @@ export function DividedLayoutView(props, children) {
     display: flex;
     flex: 1;
     flex-direction: ${props.direction};
+    overflow: ${props.overflow};
     background-color: var(--sqm-content-background);
     ${props.direction === "column"
     ? "width: 100%; max-width: var(--sqm-portal-main-width);"

package/dist/collection/components/sqm-divided-layout/sqm-divided-layout.js

@@ -7,11 +7,19 @@ import { getProps } from "../../utils/utils";
  * Spacing is left up to the child
  *
  * @uiName Divided Layout
+ * @slots [{"name":"", "title":"Layout Content"}]
  */
 export class DividedLayout {
   constructor() {
     /**
-     * Uses Shorthand CSS border syntax
+     * @uiName Overflow
+     * @uiType string
+     * @uiEnum ["initial", "scroll", "auto", "hidden"]
+     * @uiEnumNames ["Initial", "Scroll", "Auto", "Hidden"]
+     */
+    this.overflow = "initial";
+    /**
+     * Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color.
      * @uiName Border Style
      */
     this.dividerStyle = "1px solid #EAEAEA";
@@ -54,6 +62,36 @@ export class DividedLayout {
       "attribute": "direction",
       "reflect": false
     },
+    "overflow": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"initial\" | \"scroll\" | \"auto\" | \"hidden\"",
+        "resolved": "\"auto\" | \"hidden\" | \"initial\" | \"scroll\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Overflow",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"initial\", \"scroll\", \"auto\", \"hidden\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Initial\", \"Scroll\", \"Auto\", \"Hidden\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": ""
+      },
+      "attribute": "overflow",
+      "reflect": false,
+      "defaultValue": "\"initial\""
+    },
     "dividerStyle": {
       "type": "string",
       "mutable": false,
@@ -69,7 +107,7 @@ export class DividedLayout {
             "text": "Border Style",
             "name": "uiName"
           }],
-        "text": "Uses Shorthand CSS border syntax"
+        "text": "Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color."
       },
       "attribute": "divider-style",
       "reflect": false,

package/dist/collection/components/sqm-dropdown-field/DropdownField.stories.js

@@ -6,7 +6,7 @@ export default {
 };
 const defaultProps = {
   states: {
-    validationErrors: {},
+    registrationFormState: {},
   },
   content: {
     dropdownName: "options",
@@ -26,13 +26,20 @@ export const CustomLabel = createHookStory(() => (h(DropdownFieldView, Object.as
   } }))));
 export const Error = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps, { states: {
     ...defaultProps.states,
-    validationErrors: {
-      options: "Must select an option",
+    registrationFormState: {
+      validationErrors: {
+        options: "Must select an option",
+      },
     },
   } }))));
-export const CustomError = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps, { content: { ...defaultProps.content, errorMessage: "An option must be selected to continue", }, states: {
+export const CustomError = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps, { content: {
+    ...defaultProps.content,
+    errorMessage: "An option must be selected to continue",
+  }, states: {
     ...defaultProps.states,
-    validationErrors: {
-      options: "Must select an option",
+    registrationFormState: {
+      validationErrors: {
+        options: "Must select an option",
+      },
     },
   } }))));

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

@@ -33,13 +33,17 @@ jss.setup(preset());
 const sheet = jss.createStyleSheet(style);
 const styleString = sheet.toString();
 export function DropdownFieldView(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
   const { states, content } = props;
-  const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
   return (h("div", { class: sheet.classes.FieldContainer },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    h("sl-select", Object.assign({ exportparts: "label: input-label", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
+    h("sl-select", Object.assign({ exportparts: "label: input-label", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e[content.dropdownName]) ? {
+      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.dropdownName],
+    }
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
       class: sheet.classes.ErrorStyle,
     }
       : [])), content.selectOptions),

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

@@ -7,7 +7,11 @@ import { getMissingProps, getProps } from "../../utils/utils";
 import { DropdownFieldView, } from "./sqm-dropdown-field-view";
 import { useDropdownField } from "./useDropdownField";
 /**
- * @uiName Dropdown Field
+ * @uiName Form Dropdown Field
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @slots [{"name":"", "title":"Drop Down Option"}]
+ * @exampleGroup Microsite Components
+ * @example Form Dropdown Field - <sqm-dropdown-field dropdown-label="Select an option" error-message="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-dropdown-field>
  */
 export class DropdownField {
   constructor() {
@@ -64,8 +68,11 @@ export class DropdownField {
         "tags": [{
             "text": "Dropdown Name Attribute",
             "name": "uiName"
+          }, {
+            "text": undefined,
+            "name": "required"
           }],
-        "text": ""
+        "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
@@ -141,7 +148,7 @@ export class DropdownField {
       "mutable": false,
       "complexType": {
         "original": "DemoData<DropdownFieldViewProps>",
-        "resolved": "{ states?: { validationErrors?: ValidationErrors; }; content?: { dropdownName: string; dropdownLabel: string; dropdownOptional?: boolean; errorMessage: string; selectOptions?: VNode | VNode[]; }; }",
+        "resolved": "{ states?: { registrationFormState?: RegistrationFormState; }; content?: { dropdownName: string; dropdownLabel: string; dropdownOptional?: boolean; errorMessage: string; selectOptions?: VNode | VNode[]; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -174,7 +181,7 @@ export class DropdownField {
 function useDropdownFieldDemo(props) {
   return deepmerge({
     states: {
-      validationErrors: [],
+      registrationFormState: {},
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

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

@@ -1,10 +1,10 @@
 import { useDomContext } from "@saasquatch/stencil-hooks";
-import { FORM_VALIDATION_CONTEXT, } from "../sqm-portal-register/useValidationState";
+import { REGISTRATION_FORM_STATE_CONTEXT, } from "../sqm-portal-registration-form/useRegistrationFormState";
 export function useDropdownField() {
-  const validationState = useDomContext(FORM_VALIDATION_CONTEXT);
+  const registrationFormState = useDomContext(REGISTRATION_FORM_STATE_CONTEXT);
   return {
     states: {
-      validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
+      registrationFormState,
     },
   };
 }

package/dist/collection/components/sqm-edit-profile/sqm-edit-profile.js

@@ -6,7 +6,7 @@ import { isDemo } from "@saasquatch/component-boilerplate";
 import { getProps } from "../../utils/utils";
 import deepmerge from "deepmerge";
 /**
- * @uiName Edit Profile
+ * @uiName Microsite Edit Profile
  */
 export class EditProfile {
   constructor() {

package/dist/collection/components/sqm-form-message/sqm-form-message.js

@@ -2,6 +2,7 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop, State } from "@stencil/core";
 /**
  * @uiName Form Message
+ * @slots [{"name":"","title":"Message Content"}]
  */
 export class FormMessage {
   constructor() {

package/dist/collection/components/sqm-graphql-client-provider/sqm-graphql-client-provider.js

@@ -5,6 +5,7 @@ import { useGraphQLClientProvider } from "./useGraphQLProvider";
 /**
  * @uiName GraphQL Client Provider
  * @canvasRenderer always-replace
+ * @slots [{"name":"","title":"Provider Content"}]
  */
 export class GraphQLClientProvider {
   constructor() {

package/dist/collection/components/sqm-hamburger-menu/HamburgerMenu.stories.js

@@ -0,0 +1,7 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Hamburger Menu",
+};
+export const Default = () => {
+  return h("div", null, "Default");
+};

package/dist/collection/components/sqm-hamburger-menu/sqm-hamburger-menu-view.js

@@ -0,0 +1,139 @@
+import { h } from "@stencil/core";
+export function HamburgerMenuView(
+// @ts-ignore - Stencil requires props (even if empty)
+props, children) {
+  const vanillaStyle = `
+
+    * {
+      padding: 0;
+      margin: 0;
+      box-sizing: border-box;
+    }
+
+    .container {
+      position: sticky;
+      top: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 60px;
+      width: 60px;
+      flex-direction: column;
+      z-index: 100;
+      display: none;
+    }
+    .menu-items { 
+      display: none;
+      padding: 20px;
+      border-right: 2px solid #eaeaea;
+      padding-top: 60px;
+      background: white; 
+      max-width: 400px;
+      width: 70vw;
+      height: 100vh;
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0px;
+      margin: 0;
+      animation: slideIn 500ms ease-in-out;
+    }
+  
+   @keyframes slideIn {
+      0% {
+        left: -350px;
+      }
+      100% {
+        left: 0;
+      }
+    } 
+  
+
+    .toggler {
+      border: 2px solid #eee;
+      cursor: pointer;
+      opacity: 0;
+      z-index: 5;
+    }
+
+    @media screen and (max-width: 799px) {
+      .toggler,
+      .hamburger {
+        visibility: visible !important;
+      }
+
+      .container {
+        display: flex;
+      }
+
+      .hamburger > .line {
+        visibility: visible !important;
+      }
+    }
+
+
+    .toggler,
+    .hamburger {
+      user-select: none;
+      visibility:hidden;
+      position: absolute;
+      padding: 20px 10px;
+    }
+
+    .toggler {
+      z-index: 100;
+      width: 100%;
+      height: 100%;
+    }
+
+    .hamburger {
+      z-index: 10;
+      width: 75%;
+      height: 100%;
+    }
+
+    .toggler:checked ~ .menu-items {
+      display: block;
+    }
+
+    /***** Turn hamburger into an X *****/
+    .toggler:checked ~ .hamburger > .line:nth-child(1) {
+      opacity: 0;
+    }
+
+    .toggler:checked ~ .hamburger > .line:nth-child(2) {
+      transform: rotate(45deg) translate(0px, -0.5px);
+    }
+
+    .toggler:checked ~ .hamburger > .line:nth-child(3) {
+      transform: rotate(-45deg) translate(3px, -3.5px);
+    }
+
+    .toggler:checked ~ .hamburger > .line:nth-child(1),
+    .toggler:checked ~ .hamburger > .line:nth-child(2),
+    .toggler:checked ~ .hamburger > .line:nth-child(3) {
+      width: 75%;
+      border-bottom: 3px solid #444445;
+      margin: 0;
+    }
+
+    .hamburger > .line {
+      visibility:hidden;
+      z-index: 2;
+      height: 4px;
+      width: 100%;
+      margin-bottom: 3px;
+      border-bottom: 5px solid #444445;
+    }
+
+  `;
+  return (h("div", { class: "container" },
+    h("style", null, vanillaStyle),
+    h("input", { type: "checkbox", class: "toggler", part: "toggler" }),
+    h("div", { class: "hamburger" },
+      h("div", { class: "line" }),
+      h("div", { class: "line" }),
+      h("div", { class: "line" })),
+    h("ul", { class: "menu-items" },
+      h("div", null, children))));
+}

package/dist/collection/components/sqm-hamburger-menu/sqm-hamburger-menu.js

@@ -0,0 +1,45 @@
+import { Component, h, Prop, State } from "@stencil/core";
+import { getProps } from "../../utils/utils";
+import { HamburgerMenuView } from "./sqm-hamburger-menu-view";
+/**
+ *
+ * @uiName Hamburger menu
+ * @slot the navigation items shown in menu
+ */
+export class HamburgerMenu {
+  constructor() {
+    this.ignored = true;
+    this.position = "right";
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = getProps(this);
+    return (h(HamburgerMenuView, Object.assign({}, props),
+      h("slot", null)));
+  }
+  static get is() { return "sqm-hamburger-menu"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "position",
+      "reflect": false,
+      "defaultValue": "\"right\""
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

package/dist/collection/components/sqm-header-logo/sqm-header-logo.js

@@ -0,0 +1,102 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Host, Prop } from "@stencil/core";
+/**
+ * @uiName Header Logo
+ */
+export class HeroImage {
+  constructor() {
+    /**
+     * Page participants are navigated to after clicking the header logo.
+     *
+     * @uiName Redirect Path
+     * @uiWidget pageSelect
+     */
+    this.nextPage = "/";
+    /**
+     * @uiName Logo Height
+     */
+    this.height = 60;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (h(Host, null,
+      h("a", { href: this.nextPage },
+        h("img", { style: { height: `${this === null || this === void 0 ? void 0 : this.height}px` }, src: this === null || this === void 0 ? void 0 : this.imageUrl }))));
+  }
+  static get is() { return "sqm-header-logo"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "imageUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "ImageUpload",
+            "name": "uiWidget"
+          }, {
+            "text": "url",
+            "name": "format"
+          }, {
+            "text": "Logo Image",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "image-url",
+      "reflect": false
+    },
+    "nextPage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Redirect Path",
+            "name": "uiName"
+          }, {
+            "text": "pageSelect",
+            "name": "uiWidget"
+          }],
+        "text": "Page participants are navigated to after clicking the header logo."
+      },
+      "attribute": "next-page",
+      "reflect": false,
+      "defaultValue": "\"/\""
+    },
+    "height": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Logo Height",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "height",
+      "reflect": false,
+      "defaultValue": "60"
+    }
+  }; }
+}