@saasquatch/mint-components 1.7.0-9 → 1.7.0

package/dist/collection/components/sqm-navigation-sidebar/NavigationSidebar.stories.js

@@ -1,46 +1,45 @@
-import { h } from "@stencil/core";
-export default {
-  title: "Components/Navigation Sidebar",
-};
-export const DefaultNavigationSidebar = () => {
-  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: "/",
-    },
-  };
-  return (h("div", null)
-  // <NavigationSidebarView {...barProps}>
-  //   <NavigationSidebarItemView {...item1Props} />
-  //   <NavigationSidebarItemView {...item2Props} />
-  // </NavigationSidebarView>
-  );
-};
+import { h } from "@stencil/core";
+import { NavigationSidebarView } from "./sqm-navigation-sidebar-view";
+import { NavigationSidebarItemView } from "../sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
+export default {
+  title: "Components/Navigation Sidebar",
+};
+export const DefaultNavigationSidebar = () => {
+  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: "/",
+    },
+  };
+  return (h(NavigationSidebarView, null,
+    h(NavigationSidebarItemView, Object.assign({}, item1Props)),
+    h(NavigationSidebarItemView, Object.assign({}, item2Props))));
+};

package/dist/collection/components/sqm-navigation-sidebar/sqm-navigation-sidebar-view.js

@@ -1,170 +1,153 @@
-import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
-import { gap } from "../../global/mixins";
-const style = {
-  ItemsContainer: {
-    "min-width": "290px",
-    "max-width": "320px",
-    "box-sizing": "border-box",
-    padding: "20px 15px",
-    ...gap({ direction: "column", size: "4px" }),
-    "@media screen and (max-width: 799px)": {
-      display: "none",
-    },
-  },
-};
-const vanillaStyle = `
-  @media screen and (max-width: 799px) {
-    :host {
-     max-width: max-content;
-    }
-  }
-  :host {    
-    width: 30vw;
-    min-width: min-content;
-    max-width: 320px;
-  }
-`;
-const hamburgerStyle = `
-    * {
-      padding: 0;
-      margin: 0;
-      box-sizing: border-box;
-    }
-
-    .hamburger-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;
-      }
-
-      .hamburger-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;
-    }
-
-  `;
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-export function NavigationSidebarView(props, children) {
-  return [
-    h("div", { class: "hamburger-container" },
-      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" }, props.mobileItemsSlot)),
-    h("div", { class: sheet.classes.ItemsContainer },
-      h("style", { type: "text/css" },
-        vanillaStyle,
-        styleString,
-        hamburgerStyle),
-      h("div", null, children)),
-  ];
-}
+import { h } from "@stencil/core";
+const vanillaStyle = `
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+@keyframes slideIn {
+  0% {
+    left: -350px;
+  }
+  100% {
+    left: 0;
+  }
+} 
+
+@media screen and (min-width: 800px) {
+  :host {
+    max-width: 300px;
+  }
+  .toggler,
+  .hamburger {
+     user-select: none;
+     visibility:hidden;
+  }
+  .container{
+    position: sticky;
+    top: 0;
+  }
+  .menu-items {
+    min-width: 290px;
+    max-width: 320px;
+    box-sizing: border-box;
+    padding: 0px 15px;
+  }
+  .menu-items > :not(:last-child): {
+    margin-bottom: 4px;
+  }
+}
+@media screen and (max-width: 799px) {
+  .toggler {
+    border: 2px solid #eee;
+    cursor: pointer;
+    opacity: 0;
+    z-index: 5;
+  }
+
+  .container {
+    position: sticky;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 60px;
+    width: 60px;
+    flex-direction: column;
+    z-index: 100;
+  }
+  .menu-items { 
+    display: none;
+    padding: 20px;
+    border-right: 1px solid #eaeaea;
+    padding-top: 60px;
+    background: white; 
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0px;
+    margin: 0;
+    animation: slideIn 500ms ease-in-out;
+  }
+
+  .toggler,
+  .hamburger {
+    visibility: visible !important;
+  }
+
+  .container {
+    display: flex;
+  }
+
+  .hamburger > .line {
+    visibility: visible !important;
+  }
+
+
+  .toggler,
+  .hamburger {
+    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;
+  }
+}
+`;
+export function NavigationSidebarView(props, children) {
+  return (h("div", { class: "container", part: "sqm-base" },
+    h("style", null, vanillaStyle),
+    h("input", Object.assign({ type: "checkbox", class: "toggler" }, props)),
+    h("div", { class: "hamburger" },
+      h("div", { class: "line" }),
+      h("div", { class: "line" }),
+      h("div", { class: "line" })),
+    h("div", { class: "menu-items", part: "sqm-items-container" }, children)));
+}

package/dist/collection/components/sqm-navigation-sidebar/sqm-navigation-sidebar.js

@@ -1,55 +1,42 @@
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h, Method, State } from "@stencil/core";
-import { NavigationSidebarView } from "./sqm-navigation-sidebar-view";
-import { useNavigationSidebar } from "./useNavigationSidebar";
-/**
- * @uiName Microsite Sidebar
- * @slots [{"name":"", "title":"Sidebar Content"}]
- */
-export class NavigationSidebar {
-  constructor() {
-    this.ignored = true;
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  async renderNavigationItem(child) {
-    return h("div", { innerHTML: child.outerHTML });
-  }
-  render() {
-    const { mobileChildren } = useNavigationSidebar(this.renderNavigationItem);
-    const props = {
-      mobileItemsSlot: mobileChildren,
-    };
-    return (h(NavigationSidebarView, Object.assign({}, props),
-      h("slot", null)));
-  }
-  static get is() { return "sqm-navigation-sidebar"; }
-  static get encapsulation() { return "shadow"; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-  static get methods() { return {
-    "renderNavigationItem": {
-      "complexType": {
-        "signature": "(child: Element) => Promise<any>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "Element": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<any>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    }
-  }; }
-}
+import { useCurrentPage, useProgramId, } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { useEffect, useState } from "@saasquatch/universal-hooks";
+import { Component, h, State } from "@stencil/core";
+import { NavigationSidebarView } from "./sqm-navigation-sidebar-view";
+/**
+ * @uiName Microsite Sidebar
+ * @slots [{"name":"", "title":"Sidebar Content"}]
+ */
+export class NavigationSidebar {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = useNavigationSidebar();
+    return (h(NavigationSidebarView, Object.assign({}, props),
+      h("slot", null)));
+  }
+  static get is() { return "sqm-navigation-sidebar"; }
+  static get encapsulation() { return "shadow"; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function useNavigationSidebar() {
+  const location = useCurrentPage();
+  const programId = useProgramId();
+  const [checked, setChecked] = useState(false);
+  // Close hamburger menu after navigation
+  useEffect(() => {
+    setChecked(false);
+  }, [location.pathname, programId]);
+  function onClick(e) {
+    setChecked(e.target.checked);
+  }
+  return {
+    checked,
+    onClick,
+  };
+}

package/dist/collection/components/sqm-navigation-sidebar-item/SidebarItem.stories.js

@@ -1,31 +1,31 @@
-import { h } from "@stencil/core";
-import { NavigationSidebarItemView } from "./sqm-navigation-sidebar-item-view";
-export default {
-  title: "Components/Sidebar Item",
-};
-export const InactiveItem = () => {
-  const props = {
-    states: {
-      active: false,
-    },
-    data: {
-      label: "Dashboard",
-      icon: "house",
-      path: "/",
-    },
-  };
-  return h(NavigationSidebarItemView, Object.assign({}, props));
-};
-export const ActiveItem = () => {
-  const props = {
-    states: {
-      active: true,
-    },
-    data: {
-      label: "Dashboard",
-      icon: "house",
-      path: "/",
-    },
-  };
-  return h(NavigationSidebarItemView, Object.assign({}, props));
-};
+import { h } from "@stencil/core";
+import { NavigationSidebarItemView } from "./sqm-navigation-sidebar-item-view";
+export default {
+  title: "Components/Sidebar Item",
+};
+export const InactiveItem = () => {
+  const props = {
+    states: {
+      active: false,
+    },
+    data: {
+      label: "Dashboard",
+      icon: "house",
+      path: "/",
+    },
+  };
+  return h(NavigationSidebarItemView, Object.assign({}, props));
+};
+export const ActiveItem = () => {
+  const props = {
+    states: {
+      active: true,
+    },
+    data: {
+      label: "Dashboard",
+      icon: "house",
+      path: "/",
+    },
+  };
+  return h(NavigationSidebarItemView, Object.assign({}, props));
+};

package/dist/collection/components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view.js

@@ -1,40 +1,40 @@
-import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
-import { gap } from "../../global/mixins";
-import { navigation } from "@saasquatch/component-boilerplate";
-export function NavigationSidebarItemView(props) {
-  const { states, data } = props;
-  const style = {
-    ItemContainer: {
-      display: "flex",
-      "background-color": `${states.active ? "var(--sl-color-gray-200)" : "var(--sl-color-white)"}`,
-      "border-radius": "8px",
-      padding: "8px",
-      "text-decoration": "none",
-      color: "#454444",
-      "align-items": "center",
-      ...gap({ direction: "row", size: "var(--sl-font-size-small)" }),
-      "&:hover": {
-        cursor: "pointer",
-        background: states.active
-          ? "var(--sl-color-gray-300)"
-          : "var(--sl-color-gray-50)",
-      },
-    },
-    Label: {
-      margin: "0",
-    },
-    Icon: {
-      "flex-shrink": "0",
-    },
-  };
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (h("a", { href: data.path, onClick: (e) => {
-      e.preventDefault();
-      navigation.push(data.path);
-    }, class: sheet.classes.ItemContainer },
-    h("style", { type: "text/css" }, styleString),
-    h("sl-icon", { class: sheet.classes.Icon, name: data.icon }),
-    h("p", { class: sheet.classes.Label }, data.label)));
-}
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+import { gap } from "../../global/mixins";
+import { navigation } from "@saasquatch/component-boilerplate";
+export function NavigationSidebarItemView(props) {
+  const { states, data } = props;
+  const style = {
+    ItemContainer: {
+      display: "flex",
+      "background-color": `${states.active ? "var(--sl-color-gray-200)" : "var(--sl-color-white)"}`,
+      "border-radius": "8px",
+      padding: "8px",
+      "text-decoration": "none",
+      color: "#454444",
+      "align-items": "center",
+      ...gap({ direction: "row", size: "var(--sl-font-size-small)" }),
+      "&:hover": {
+        cursor: "pointer",
+        background: states.active
+          ? "var(--sl-color-gray-300)"
+          : "var(--sl-color-gray-50)",
+      },
+    },
+    Label: {
+      margin: "0",
+    },
+    Icon: {
+      "flex-shrink": "0",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("a", { part: "sqm-link", href: data.path, onClick: (e) => {
+      e.preventDefault();
+      navigation.push(data.path);
+    }, class: sheet.classes.ItemContainer },
+    h("style", { type: "text/css" }, styleString),
+    h("sl-icon", { class: sheet.classes.Icon, name: data.icon }),
+    h("p", { class: sheet.classes.Label, part: "sqm-label" }, data.label)));
+}