@saasquatch/mint-components 1.6.2-3 → 1.7.0-0

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

@@ -1,85 +1,85 @@
-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",
-};
-const barProps = {
-  data: {
-    programs: [
-      {
-        key: "program1",
-        label: "My Referral Program",
-      },
-      {
-        key: "program2",
-        label: "My Rewards Program",
-      },
-    ],
-  },
-};
-const item1Props = {
-  states: {
-    active: false,
-  },
-  data: {
-    label: "Dashboard",
-    icon: "house",
-    path: "/",
-  },
-};
-const item2Props = {
-  states: {
-    active: true,
-  },
-  data: {
-    label: "Activity",
-    icon: "bar-chart",
-    path: "/",
-  },
-};
-const Sidebar = () => {
-  return (h(NavigationSidebarView, Object.assign({}, barProps),
-    h(NavigationSidebarItemView, Object.assign({}, item1Props)),
-    h(NavigationSidebarItemView, Object.assign({}, item2Props))));
-};
-export const Row = () => {
-  return (h("sqm-divided-layout", { direction: "row" },
-    h(Sidebar, null),
-    h("div", { style: { padding: "48px" } },
-      h(PortalSectionView, Object.assign({}, {
-        labelMargin: "xx-small",
-        padding: "none",
-        label: (h("sqm-text", null,
-          h("p", null, "Welcome back,"))),
-        content: (h("sqm-text", null,
-          h("h1", null, "Joe Smith"))),
-      })))));
-};
-export const Column = () => {
-  return (h("sqm-divided-layout", { direction: "column" },
-    h(Sidebar, null),
-    h("div", { style: { padding: "48px" } },
-      h(PortalSectionView, Object.assign({}, {
-        labelMargin: "xx-small",
-        padding: "none",
-        label: (h("sqm-text", null,
-          h("p", null, "Welcome back,"))),
-        content: (h("sqm-text", null,
-          h("h1", null, "Joe Smith"))),
-      })))));
-};
-export const ColumnCustomDivider = () => {
-  return (h("sqm-divided-layout", { direction: "column", dividerStyle: "1px solid red" },
-    h(Sidebar, null),
-    h("div", { style: { padding: "48px" } },
-      h(PortalSectionView, Object.assign({}, {
-        labelMargin: "xx-small",
-        padding: "none",
-        label: (h("sqm-text", null,
-          h("p", null, "Welcome back,"))),
-        content: (h("sqm-text", null,
-          h("h1", null, "Joe Smith"))),
-      })))));
-};
+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",
+};
+const barProps = {
+  data: {
+    programs: [
+      {
+        key: "program1",
+        label: "My Referral Program",
+      },
+      {
+        key: "program2",
+        label: "My Rewards Program",
+      },
+    ],
+  },
+};
+const item1Props = {
+  states: {
+    active: false,
+  },
+  data: {
+    label: "Dashboard",
+    icon: "house",
+    path: "/",
+  },
+};
+const item2Props = {
+  states: {
+    active: true,
+  },
+  data: {
+    label: "Activity",
+    icon: "bar-chart",
+    path: "/",
+  },
+};
+const Sidebar = () => {
+  return (h(NavigationSidebarView, Object.assign({}, barProps),
+    h(NavigationSidebarItemView, Object.assign({}, item1Props)),
+    h(NavigationSidebarItemView, Object.assign({}, item2Props))));
+};
+export const Row = () => {
+  return (h("sqm-divided-layout", { direction: "row" },
+    h(Sidebar, null),
+    h("div", { style: { padding: "48px" } },
+      h(PortalSectionView, Object.assign({}, {
+        labelMargin: "xx-small",
+        padding: "none",
+        label: (h("sqm-text", null,
+          h("p", null, "Welcome back,"))),
+        content: (h("sqm-text", null,
+          h("h1", null, "Joe Smith"))),
+      })))));
+};
+export const Column = () => {
+  return (h("sqm-divided-layout", { direction: "column" },
+    h(Sidebar, null),
+    h("div", { style: { padding: "48px" } },
+      h(PortalSectionView, Object.assign({}, {
+        labelMargin: "xx-small",
+        padding: "none",
+        label: (h("sqm-text", null,
+          h("p", null, "Welcome back,"))),
+        content: (h("sqm-text", null,
+          h("h1", null, "Joe Smith"))),
+      })))));
+};
+export const ColumnCustomDivider = () => {
+  return (h("sqm-divided-layout", { direction: "column", dividerStyle: "1px solid red" },
+    h(Sidebar, null),
+    h("div", { style: { padding: "48px" } },
+      h(PortalSectionView, Object.assign({}, {
+        labelMargin: "xx-small",
+        padding: "none",
+        label: (h("sqm-text", null,
+          h("p", null, "Welcome back,"))),
+        content: (h("sqm-text", null,
+          h("h1", null, "Joe Smith"))),
+      })))));
+};

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

@@ -1,52 +1,52 @@
-import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
-export function DividedLayoutView(props, children) {
-  const getBorder = () => {
-    if (props.direction === "row") {
-      return { "border-right": props.dividerStyle || "1px solid #EAEAEA" };
-    }
-    else {
-      return { "border-bottom": props.dividerStyle || "1px solid #EAEAEA" };
-    }
-  };
-  const style = {
-    LayoutContainer: {
-      display: "contents",
-      // "min-width": "320px",
-      // "& > ::slotted(*)": {
-      //   "min-width": "320px",
-      // },
-      // First style applies when shadow DOM is disabled, second applies when shadow DOM is enabled
-      "& > :not(:last-child)": {
-        ...getBorder(),
-      },
-      "& > ::slotted(*:not(:last-child))": {
-        ...getBorder(),
-      },
-    },
-  };
-  const hostStyle = `
-    display: flex;
-    flex: 1;
-    flex-direction: ${props.direction};
-    background-color: var(--sqm-content-background);
-    ${props.direction === "column"
-    ? "width: 100%; max-width: var(--sqm-portal-main-width);"
-    : ""}
-  `;
-  const vanillaStyle = `
-  :host{
-    ${hostStyle}
-  }
-  sqm-divided-layout {
-    ${hostStyle}
-  }
-  `;
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (h("div", { class: sheet.classes.LayoutContainer },
-    h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    children));
-}
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+export function DividedLayoutView(props, children) {
+  const getBorder = () => {
+    if (props.direction === "row") {
+      return { "border-right": props.dividerStyle || "1px solid #EAEAEA" };
+    }
+    else {
+      return { "border-bottom": props.dividerStyle || "1px solid #EAEAEA" };
+    }
+  };
+  const style = {
+    LayoutContainer: {
+      display: "contents",
+      // "min-width": "320px",
+      // "& > ::slotted(*)": {
+      //   "min-width": "320px",
+      // },
+      // First style applies when shadow DOM is disabled, second applies when shadow DOM is enabled
+      "& > :not(:last-child)": {
+        ...getBorder(),
+      },
+      "& > ::slotted(*:not(:last-child))": {
+        ...getBorder(),
+      },
+    },
+  };
+  const hostStyle = `
+    display: flex;
+    flex: 1;
+    flex-direction: ${props.direction};
+    background-color: var(--sqm-content-background);
+    ${props.direction === "column"
+    ? "width: 100%; max-width: var(--sqm-portal-main-width);"
+    : ""}
+  `;
+  const vanillaStyle = `
+  :host{
+    ${hostStyle}
+  }
+  sqm-divided-layout {
+    ${hostStyle}
+  }
+  `;
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { class: sheet.classes.LayoutContainer },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    children));
+}

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

@@ -1,79 +1,79 @@
-import { Component, h, Prop } from "@stencil/core";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { DividedLayoutView } from "./sqm-divided-layout-view";
-import { getProps } from "../../utils/utils";
-/**
- * Shows it's children as either a row or a column, with a division in between them.
- * Spacing is left up to the child
- *
- * @uiName Divided Layout
- */
-export class DividedLayout {
-  constructor() {
-    /**
-     * Uses Shorthand CSS border syntax
-     * @uiName Border Style
-     */
-    this.dividerStyle = "1px solid #EAEAEA";
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    return (h(DividedLayoutView, Object.assign({}, getProps(this)),
-      h("slot", null)));
-  }
-  static get is() { return "sqm-divided-layout"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "direction": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"row\" | \"column\"",
-        "resolved": "\"column\" | \"row\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Direction",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"row\", \"column\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"Row\", \"Column\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": ""
-      },
-      "attribute": "direction",
-      "reflect": false
-    },
-    "dividerStyle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Border Style",
-            "name": "uiName"
-          }],
-        "text": "Uses Shorthand CSS border syntax"
-      },
-      "attribute": "divider-style",
-      "reflect": false,
-      "defaultValue": "\"1px solid #EAEAEA\""
-    }
-  }; }
-}
+import { Component, h, Prop } from "@stencil/core";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { DividedLayoutView } from "./sqm-divided-layout-view";
+import { getProps } from "../../utils/utils";
+/**
+ * Shows it's children as either a row or a column, with a division in between them.
+ * Spacing is left up to the child
+ *
+ * @uiName Divided Layout
+ */
+export class DividedLayout {
+  constructor() {
+    /**
+     * Uses CSS border style syntax
+     * @uiName Border style
+     */
+    this.dividerStyle = "1px solid #EAEAEA";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (h(DividedLayoutView, Object.assign({}, getProps(this)),
+      h("slot", null)));
+  }
+  static get is() { return "sqm-divided-layout"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "direction": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"row\" | \"column\"",
+        "resolved": "\"column\" | \"row\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Direction",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"row\", \"column\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Row\", \"Column\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": ""
+      },
+      "attribute": "direction",
+      "reflect": false
+    },
+    "dividerStyle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Border style",
+            "name": "uiName"
+          }],
+        "text": "Uses CSS border style syntax"
+      },
+      "attribute": "divider-style",
+      "reflect": false,
+      "defaultValue": "\"1px solid #EAEAEA\""
+    }
+  }; }
+}

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

@@ -1,38 +1,38 @@
-import { h } from "@stencil/core";
-import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
-import { DropdownFieldView, } from "./sqm-dropdown-field-view";
-export default {
-  title: "Components/Dropdown Field",
-};
-const defaultProps = {
-  states: {
-    validationErrors: {},
-  },
-  content: {
-    dropdownName: "options",
-    dropdownLabel: "Select an option",
-    errorMessage: "Must select an option",
-    selectOptions: [
-      h("sl-menu-item", { value: "option-1" }, "Option 1"),
-      h("sl-menu-item", { value: "option-2" }, "Option 2"),
-      h("sl-menu-item", { value: "option-3" }, "Option 3"),
-    ],
-  },
-};
-export const Default = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps))));
-export const CustomLabel = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps, { content: {
-    ...defaultProps.content,
-    dropdownLabel: "Pick your favorite",
-  } }))));
-export const Error = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps, { states: {
-    ...defaultProps.states,
-    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: {
-    ...defaultProps.states,
-    validationErrors: {
-      options: "Must select an option",
-    },
-  } }))));
+import { h } from "@stencil/core";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+import { DropdownFieldView, } from "./sqm-dropdown-field-view";
+export default {
+  title: "Components/Dropdown Field",
+};
+const defaultProps = {
+  states: {
+    validationErrors: {},
+  },
+  content: {
+    dropdownName: "options",
+    dropdownLabel: "Select an option",
+    errorMessage: "Must select an option",
+    selectOptions: [
+      h("sl-menu-item", { value: "option-1" }, "Option 1"),
+      h("sl-menu-item", { value: "option-2" }, "Option 2"),
+      h("sl-menu-item", { value: "option-3" }, "Option 3"),
+    ],
+  },
+};
+export const Default = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps))));
+export const CustomLabel = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps, { content: {
+    ...defaultProps.content,
+    dropdownLabel: "Pick your favorite",
+  } }))));
+export const Error = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps, { states: {
+    ...defaultProps.states,
+    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: {
+    ...defaultProps.states,
+    validationErrors: {
+      options: "Must select an option",
+    },
+  } }))));

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

@@ -1,54 +1,54 @@
-import { setUserIdentity } from "@saasquatch/component-boilerplate";
-import { useEffect } from "@saasquatch/universal-hooks";
-import { h } from "@stencil/core";
-import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
-export default {
-  title: "Hooks / useDropdownField",
-};
-function setupGraphQL() {
-  const id = "testestest";
-  const accountId = id;
-  const programId = "sam-partner-test-2";
-  //@ts-ignore
-  window.widgetIdent = {
-    tenantAlias: "test_a8b41jotf8a1v",
-    appDomain: "https://staging.referralsaasquatch.com",
-    programId,
-  };
-  useEffect(() => {
-    setUserIdentity({
-      accountId,
-      id,
-      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
-    });
-    return () => {
-      window.widgetIdent = undefined;
-      setUserIdentity(undefined);
-    };
-  }, []);
-  return { id, accountId };
-}
-export const SelectOptions = createHookStory(() => {
-  setupGraphQL();
-  return (h("sqm-portal-register", null,
-    h("sqm-dropdown-field", { slot: "formData", "dropdown-label": "Select an option", "dropdown-name": "options" },
-      h("sl-menu-item", { value: "option-1" }, "Option 1"),
-      h("sl-menu-item", { value: "option-2" }, "Option 2"),
-      h("sl-menu-item", { value: "option-3" }, "Option 3"))));
-});
-export const Countries = createHookStory(() => {
-  setupGraphQL();
-  return (h("sqm-portal-register", null,
-    h("sqm-dropdown-field", { slot: "formData", "dropdown-label": "Country", "dropdown-name": "countryCode" },
-      h("sl-menu-item", { value: "CA" }, "Canada"),
-      h("sl-menu-item", { value: "US" }, "United States"),
-      h("sl-menu-item", { value: "GB" }, "United Kingdom"))));
-});
-export const MissingName = createHookStory(() => {
-  setupGraphQL();
-  return (h("sqm-portal-register", null,
-    h("sqm-dropdown-field", { slot: "formData", "dropdown-label": "Country" },
-      h("sl-menu-item", { value: "CA" }, "Canada"),
-      h("sl-menu-item", { value: "US" }, "United States"),
-      h("sl-menu-item", { value: "GB" }, "United Kingdom"))));
-});
+import { setUserIdentity } from "@saasquatch/component-boilerplate";
+import { useEffect } from "@saasquatch/universal-hooks";
+import { h } from "@stencil/core";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+export default {
+  title: "Hooks / useDropdownField",
+};
+function setupGraphQL() {
+  const id = "testestest";
+  const accountId = id;
+  const programId = "sam-partner-test-2";
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_a8b41jotf8a1v",
+    appDomain: "https://staging.referralsaasquatch.com",
+    programId,
+  };
+  useEffect(() => {
+    setUserIdentity({
+      accountId,
+      id,
+      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
+    });
+    return () => {
+      window.widgetIdent = undefined;
+      setUserIdentity(undefined);
+    };
+  }, []);
+  return { id, accountId };
+}
+export const SelectOptions = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("sqm-dropdown-field", { slot: "formData", "dropdown-label": "Select an option", "dropdown-name": "options" },
+      h("sl-menu-item", { value: "option-1" }, "Option 1"),
+      h("sl-menu-item", { value: "option-2" }, "Option 2"),
+      h("sl-menu-item", { value: "option-3" }, "Option 3"))));
+});
+export const Countries = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("sqm-dropdown-field", { slot: "formData", "dropdown-label": "Country", "dropdown-name": "countryCode" },
+      h("sl-menu-item", { value: "CA" }, "Canada"),
+      h("sl-menu-item", { value: "US" }, "United States"),
+      h("sl-menu-item", { value: "GB" }, "United Kingdom"))));
+});
+export const MissingName = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("sqm-dropdown-field", { slot: "formData", "dropdown-label": "Country" },
+      h("sl-menu-item", { value: "CA" }, "Canada"),
+      h("sl-menu-item", { value: "US" }, "United States"),
+      h("sl-menu-item", { value: "GB" }, "United Kingdom"))));
+});