@saasquatch/mint-components 1.3.3-5 → 1.3.3-6

package/dist/collection/components/sqm-big-stat/useDemoBigStat.js

@@ -1,28 +1,29 @@
-import { useMemo } from "@saasquatch/universal-hooks";
-import deepmerge from "deepmerge";
-import { queries, StatPatterns } from "./useBigStat";
-export function useDemoBigStat(props) {
-  const { statType } = props;
-  const re = useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
-  if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
-    return {
-      props: {
-        statvalue: "!!!",
-        flexReverse: false,
-        alignment: "center",
-      },
-      label: "BAD PROP TYPE",
-    };
-  }
-  const result = re.exec(statType);
-  const queryName = result[1];
-  const label = queries[queryName].label;
-  return {
-    props: deepmerge({
-      statvalue: "12345",
-      flexReverse: false,
-      alignment: "center",
-    }, props.demoData || {}, { arrayMerge: (_, a) => a }),
-    label: label !== null && label !== void 0 ? label : "Demo Label",
-  };
-}
+import { useMemo } from "@saasquatch/universal-hooks";
+import deepmerge from "deepmerge";
+import { queries, StatPatterns } from "./useBigStat";
+export function useDemoBigStat(props) {
+  const { statType } = props;
+  const re = useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
+  if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
+    return {
+      props: {
+        value: 0,
+        statvalue: "!!!",
+        flexReverse: false,
+        alignment: "center",
+      },
+      label: "BAD PROP TYPE",
+    };
+  }
+  const result = re.exec(statType);
+  const queryName = result[1];
+  const label = queries[queryName].label;
+  return {
+    props: deepmerge({
+      statvalue: "12345",
+      flexReverse: false,
+      alignment: "center",
+    }, props.demoData || {}, { arrayMerge: (_, a) => a }),
+    label: label !== null && label !== void 0 ? label : "Demo Label",
+  };
+}

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

@@ -1,85 +1,85 @@
-import { h } from "@stencil/core";
-import { NavigationSidebarItemView } from "../components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
-import { NavigationSidebarView } from "../components/sqm-navigation-sidebar/sqm-navigation-sidebar-view";
-import { PortalSectionView } from "../components/sqm-titled-section/sqm-portal-section-view";
-export default {
-  title: "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,54 +1,54 @@
-import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
-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}
-  }
-  `;
-  jss.setup(preset());
-  const sheet = jss.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 jss from "jss";
+import preset from "jss-preset-default";
+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}
+  }
+  `;
+  jss.setup(preset());
+  const sheet = jss.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,76 +1,76 @@
-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": ""
-      },
-      "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\""
-    }
-  }; }
-}
+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": ""
+      },
+      "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/{stories → components/sqm-edit-profile}/EditProfileForm.stories.js

@@ -1,61 +1,61 @@
-import { h } from "@stencil/core";
-import EditProfileView from "../components/sqm-edit-profile/sqm-edit-profile-view";
-export default {
-  title: "Edit Profile Form",
-};
-const defaultProps = {
-  states: {
-    loading: false,
-    submitDisabled: false,
-    formState: {
-      currentRegion: "Canada",
-      firstName: "Bill",
-      lastName: "Bob",
-      errors: {},
-      error: "An error string",
-    },
-    user: {
-      firstName: "Bill",
-      lastName: "Bob",
-      email: "billbob@example.com",
-    },
-    showEdit: false,
-    text: {
-      editprofileheader: "Edit Profile",
-      editprofiletext: "Update your profile.",
-      firstnametext: "Bill",
-      lastnametext: "Bob",
-      canceltext: "Cancel",
-      updatetext: "Update",
-      currentregiontext: "Canada",
-    },
-  },
-  callbacks: {
-    onSubmit: (props) => {
-      console.log(props);
-    },
-    resetForm: () => {
-      console.log("reset");
-    },
-    onChange: () => {
-      console.log("change");
-    },
-    setShowEdit: (props) => {
-      console.log(props);
-    },
-  },
-};
-export const EditProfileFormDisabled = () => {
-  const props = defaultProps;
-  return h(EditProfileView, Object.assign({}, props));
-};
-export const EditProfileFormEnabled = () => {
-  const props = {
-    ...defaultProps,
-    states: { ...defaultProps.states, showEdit: true },
-  };
-  return h(EditProfileView, Object.assign({}, props));
-};
-export const FullStackFrameWithMenu = () => {
-  return (h("sqm-edit-profile", { editprofileheader: "Edit Profile", editprofiletext: "Update your profile.", firstnametext: "Bill", lastnametext: "Bob", canceltext: "Cancel", updatetext: "Update", currentregiontext: "Current Region", showregion: true }));
-};
+import { h } from "@stencil/core";
+import EditProfileView from "./sqm-edit-profile-view";
+export default {
+  title: "Components/Edit Profile Form",
+};
+const defaultProps = {
+  states: {
+    loading: false,
+    submitDisabled: false,
+    formState: {
+      currentRegion: "Canada",
+      firstName: "Bill",
+      lastName: "Bob",
+      errors: {},
+      error: "An error string",
+    },
+    user: {
+      firstName: "Bill",
+      lastName: "Bob",
+      email: "billbob@example.com",
+    },
+    showEdit: false,
+    text: {
+      editprofileheader: "Edit Profile",
+      editprofiletext: "Update your profile.",
+      firstnametext: "Bill",
+      lastnametext: "Bob",
+      canceltext: "Cancel",
+      updatetext: "Update",
+      currentregiontext: "Canada",
+    },
+  },
+  callbacks: {
+    onSubmit: (props) => {
+      console.log(props);
+    },
+    resetForm: () => {
+      console.log("reset");
+    },
+    onChange: () => {
+      console.log("change");
+    },
+    setShowEdit: (props) => {
+      console.log(props);
+    },
+  },
+};
+export const EditProfileFormDisabled = () => {
+  const props = defaultProps;
+  return h(EditProfileView, Object.assign({}, props));
+};
+export const EditProfileFormEnabled = () => {
+  const props = {
+    ...defaultProps,
+    states: { ...defaultProps.states, showEdit: true },
+  };
+  return h(EditProfileView, Object.assign({}, props));
+};
+export const FullStackFrameWithMenu = () => {
+  return (h("sqm-edit-profile", { editprofileheader: "Edit Profile", editprofiletext: "Update your profile.", firstnametext: "Bill", lastnametext: "Bob", canceltext: "Cancel", updatetext: "Update", currentregiontext: "Current Region", showregion: true }));
+};