npm - @saasquatch/mint-components - Versions diffs - 1.15.0-2 → 1.15.0-21 - Mend

@saasquatch/mint-components 1.15.0-2 → 1.15.0-21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (428) hide show

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

@@ -4,21 +4,32 @@ import { gap } from "../../global/mixins";
 import { navigation } from "@saasquatch/component-boilerplate";
 export function NavigationSidebarItemView(props) {
   const { states, data } = props;
+  const backgroundColor = props.backgroundColor || "var(--sqm-portal-background)";
+  const backgroundHoverColor = props.backgroundHoverColor || "var(--sl-color-gray-50)";
+  const backgroundFocusedColor = props.backgroundFocusedColor || "var(--sl-color-gray-200)";
+  const textFocusedColor = props.textFocusedColor || "var(--sqm-text)";
   const style = {
     ItemContainer: {
       display: "flex",
-      "background-color": `${states.active ? "var(--sl-color-gray-200)" : "var(--sl-color-white)"}`,
-      "border-radius": "8px",
-      padding: "8px",
+      "background-color": `${states.active ? backgroundFocusedColor : backgroundColor}`,
+      borderRadius: props.borderRadius
+        ? `${props.borderRadius}px`
+        : "var(--sl-border-radius-large)",
+      padding: `var(--sl-spacing-${props.padding})`,
       "text-decoration": "none",
-      color: "#454444",
+      color: states.active
+        ? textFocusedColor
+        : props.textColor || "var(--sqm-text)",
       "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)",
+          ? backgroundFocusedColor
+          : backgroundHoverColor,
+        color: states.active
+          ? textFocusedColor
+          : props.textHoverColor || "var(--sqm-text)",
       },
     },
     Label: {

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

@@ -13,6 +13,13 @@ import { useNavigationSidebarItem } from "./useNavigationSidebarItem";
  */
 export class NavigationSidebarItem {
   constructor() {
+    /**
+     * @uiName Padding
+     * @uiType string
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     */
+    this.padding = "x-small";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -62,6 +69,9 @@ export class NavigationSidebarItem {
         "tags": [{
             "text": "Icon",
             "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Options available at https://shoelace.style/components/icon"
       },
@@ -88,12 +98,226 @@ export class NavigationSidebarItem {
       "attribute": "label",
       "reflect": false
     },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Background Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Background color of the nav item"
+      },
+      "attribute": "background-color",
+      "reflect": false
+    },
+    "backgroundHoverColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Background Hover Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Background color of the nav item when hovered"
+      },
+      "attribute": "background-hover-color",
+      "reflect": false
+    },
+    "backgroundFocusedColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Background Focused Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Background color of the nav item when focused"
+      },
+      "attribute": "background-focused-color",
+      "reflect": false
+    },
+    "textColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Text Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Text color of the nav item"
+      },
+      "attribute": "text-color",
+      "reflect": false
+    },
+    "textHoverColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Text Hover Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Text color of the nav item when hovered"
+      },
+      "attribute": "text-hover-color",
+      "reflect": false
+    },
+    "textFocusedColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Text Focused Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Text color of the nav item when items is focused"
+      },
+      "attribute": "text-focused-color",
+      "reflect": false
+    },
+    "borderRadius": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Border Radius",
+            "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Border radius (in number of pixels)"
+      },
+      "attribute": "border-radius",
+      "reflect": false
+    },
+    "padding": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Spacing",
+        "resolved": "\"large\" | \"medium\" | \"none\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\" | \"xxxx-large\"",
+        "references": {
+          "Spacing": {
+            "location": "import",
+            "path": "../../global/mixins"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Padding",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": ""
+      },
+      "attribute": "padding",
+      "reflect": false,
+      "defaultValue": "\"x-small\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<NavigationSidebarItemViewProps>",
-        "resolved": "{ states?: { active: boolean; }; data?: { label: string; icon: string; path: string; }; }",
+        "resolved": "{ states?: { active: boolean; }; data?: { label: string; icon: string; path: string; }; textColor?: string; backgroundColor?: string; borderRadius?: number; backgroundHoverColor?: string; textHoverColor?: string; backgroundFocusedColor?: string; textFocusedColor?: string; padding?: string; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -129,5 +353,13 @@ function useSidebarItemDemo(props) {
       label: props.label || "Dashboard",
       icon: props.icon || "house",
     },
+    backgroundColor: props.backgroundColor,
+    backgroundHoverColor: props.backgroundHoverColor,
+    textColor: props.textColor,
+    textHoverColor: props.textHoverColor,
+    borderRadius: props.borderRadius,
+    backgroundFocusedColor: props.backgroundFocusedColor,
+    textFocusedColor: props.textFocusedColor,
+    padding: props.padding,
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

package/dist/collection/components/sqm-navigation-sidebar-item/useNavigationSidebarItem.js CHANGED Viewed

@@ -8,7 +8,15 @@ export function useNavigationSidebarItem(props) {
     data: {
       label: props.label,
       icon: props.icon,
-      path: props.path
+      path: props.path,
     },
+    backgroundColor: props.backgroundColor,
+    backgroundHoverColor: props.backgroundHoverColor,
+    textColor: props.textColor,
+    textHoverColor: props.textHoverColor,
+    borderRadius: props.borderRadius,
+    backgroundFocusedColor: props.backgroundFocusedColor,
+    textFocusedColor: props.textFocusedColor,
+    padding: props.padding,
   };
 }

package/dist/collection/components/sqm-pagination/sqm-pagination-view.js CHANGED Viewed

@@ -16,7 +16,7 @@ const style = {
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PaginationView(props) {
-  const { states, callbacks, text } = props;
+  const { states, callbacks, text, buttonType } = props;
   const { onNext, onPrev } = callbacks;
   const { currentPage, totalPages, loading } = states;
   if (totalPages === 1)
@@ -24,9 +24,9 @@ export function PaginationView(props) {
   return (h("span", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" }, styleString),
     !loading && (h(Fragment, null,
-      h("sl-button", { onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
+      h("sl-button", { exportparts: `base: ${props.buttonType === "primary" ? "primary" : "secondary"}button-base`, onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
         h("sl-icon", { name: "chevron-left", label: "Previous Page" })),
       h("div", { class: sheet.classes.TextContainer }, text.paginationText))),
-    h("sl-button", { onClick: onNext, part: "sqm-pagination-button", circle: true, disabled: currentPage === totalPages },
+    h("sl-button", { exportparts: `base: ${props.buttonType === "primary" ? "primary" : "secondary"}button-base`, onClick: onNext, part: "sqm-pagination-button", circle: true, disabled: currentPage === totalPages },
       h("sl-icon", { name: "chevron-right", label: "Previous Page" }))));
 }

package/dist/collection/components/sqm-pagination/sqm-pagination.js CHANGED Viewed

@@ -19,6 +19,15 @@ export class Pagination {
      * @uiName Pagination text
      */
     this.paginationText = "{currentPage} of {totalPages}";
+    /**
+     * The type of the button (primary or secondary) that will be used to copy the link.
+     * @uiName Button Type
+     * @uiType string
+     * @uiEnum ["primary", "secondary"]
+     * @uiEnumNames ["Primary", "Secondary"]
+     * @uiGroup Style
+     */
+    this.buttonType = "secondary";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -52,6 +61,39 @@ export class Pagination {
       "reflect": false,
       "defaultValue": "\"{currentPage} of {totalPages}\""
     },
+    "buttonType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"primary\" | \"secondary\"",
+        "resolved": "\"primary\" | \"secondary\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Button Type",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"primary\", \"secondary\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Primary\", \"Secondary\"]",
+            "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "The type of the button (primary or secondary) that will be used to copy the link."
+      },
+      "attribute": "button-type",
+      "reflect": false,
+      "defaultValue": "\"secondary\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
@@ -95,6 +137,7 @@ function useDemoPagination(props) {
       totalPages: 5,
       loading: false,
     },
+    buttonType: props.buttonType,
     callbacks: {
       onNext: () => setCurrentPage(currentPage + 1),
       onPrev: () => setCurrentPage(currentPage - 1),

package/dist/collection/components/sqm-portal-change-password/sqm-portal-change-password.js CHANGED Viewed

@@ -7,6 +7,7 @@ import deepmerge from "deepmerge";
 import { useState } from "@saasquatch/universal-hooks";
 /**
  * @uiName Microsite Password Change
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand"]
  */
 export class PortalChangePassword {
   constructor() {

package/dist/collection/components/sqm-portal-footer/sqm-portal-footer.js CHANGED Viewed

@@ -4,6 +4,7 @@ import { getProps } from "../../utils/utils";
 import { PortalFooterView } from "./sqm-portal-footer-view";
 /**
  * @uiName Footer
+ * @validParents ["div","sqm-brand","sqm-portal-container"]
  */
 export class PortalFooter {
   constructor() {

package/dist/collection/components/sqm-portal-frame/sqm-portal-frame-view.js CHANGED Viewed

@@ -1,44 +1,44 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 import { HostBlock } from "../../global/mixins";
-const style = {
-  HostBlock: HostBlock,
-  Frame: {
-    display: "flex",
-    "flex-direction": "column",
-    "box-sizing": "border-box",
-  },
-  FooterWrapper: {
-    width: "100%",
-    "max-width": "100%",
-    padding: "var(--sl-spacing-medium) var(--sl-spacing-x-large)",
-    background: "var(--sqm-footer-background)",
-    display: "flex",
-    "justify-content": "flex-end",
-    "align-items": "center",
-    "box-sizing": "border-box",
-    "margin-top": "auto",
-  },
-  HeaderWrapper: {
-    width: "100%",
-    "max-width": "100%",
-    "box-sizing": "border-box",
-    display: "flex",
-    "justify-content": "space-between",
-    padding: "var(--sl-spacing-small) var(--sl-spacing-large)",
-    "align-items": "center",
-    "background-color": "var(--sqm-header-background)",
-    "@media screen and (max-width: 499px)": {
-      "flex-direction": "row-reverse",
-      "justify-content": "flex-end",
-      padding: "0",
-    },
-  },
-};
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
 export function PortalFrameView(props, children) {
   const { data, notFullScreen } = props;
+  const style = {
+    HostBlock: HostBlock,
+    Frame: {
+      display: "flex",
+      "flex-direction": "column",
+      "box-sizing": "border-box",
+    },
+    FooterWrapper: {
+      width: "100%",
+      "max-width": "100%",
+      padding: "var(--sl-spacing-medium) var(--sl-spacing-x-large)",
+      background: props.backgroundColor,
+      display: "flex",
+      "justify-content": "flex-end",
+      "align-items": "center",
+      "box-sizing": "border-box",
+      "margin-top": "auto",
+    },
+    HeaderWrapper: {
+      width: "100%",
+      "max-width": "100%",
+      "box-sizing": "border-box",
+      display: "flex",
+      "justify-content": "space-between",
+      padding: "var(--sl-spacing-small) var(--sl-spacing-large)",
+      "align-items": "center",
+      background: props.backgroundColor,
+      "@media screen and (max-width: 499px)": {
+        "flex-direction": "row-reverse",
+        "justify-content": "flex-end",
+        padding: "0",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
   return (h("div", { style: { minHeight: notFullScreen ? "100%" : "100vh" }, class: sheet.classes.Frame, part: "sqm-base" },
     h("style", { type: "text/css" }, styleString),
     h("div", { class: sheet.classes.HeaderWrapper, part: "sqm-header" },

package/dist/collection/components/sqm-portal-frame/sqm-portal-frame.js CHANGED Viewed

@@ -15,6 +15,12 @@ export class PortalFrame {
      * @undocumented
      */
     this.notFullScreen = false;
+    /**
+     * @uiName Background color
+     * @uiWidget color
+     * @uiType string
+     */
+    this.backgroundColor = "var(--sqm-portal-background, #fff);";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -23,7 +29,7 @@ export class PortalFrame {
     const headerContent = h("slot", { name: "header" });
     const props = isDemo()
       ? usePortalFrameDemo(footerContent, headerContent, this)
-      : usePortalFrame(footerContent, headerContent);
+      : usePortalFrame(footerContent, headerContent, this);
     return (h(PortalFrameView, Object.assign({}, props),
       h("slot", null)));
   }
@@ -51,12 +57,39 @@ export class PortalFrame {
       "reflect": false,
       "defaultValue": "false"
     },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Background color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }],
+        "text": ""
+      },
+      "attribute": "background-color",
+      "reflect": false,
+      "defaultValue": "\"var(--sqm-portal-background, #fff);\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalFrameViewProps>",
-        "resolved": "{ data?: { footer: VNode; header: VNode; }; notFullScreen?: boolean; }",
+        "resolved": "{ data?: { footer: VNode; header: VNode; }; backgroundColor?: string; notFullScreen?: boolean; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -89,6 +122,7 @@ export class PortalFrame {
 function usePortalFrameDemo(footerContent, headerContent, props) {
   return deepmerge({
     notFullScreen: true,
+    backgroundColor: props.backgroundColor,
     data: {
       footer: footerContent ? (footerContent) : (h("span", null, "example@example.com")),
       header: headerContent ? (headerContent) : (h("div", { style: { display: "flex", flexDirection: "column" } },

package/dist/collection/components/sqm-portal-frame/usePortalFrame.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useTick } from "@saasquatch/component-boilerplate";
-export function usePortalFrame(footerContent, headerContent) {
+export function usePortalFrame(footerContent, headerContent, props) {
   const [, rerender] = useTick();
   return {
     data: {
@@ -9,5 +9,6 @@ export function usePortalFrame(footerContent, headerContent) {
     callbacks: {
       rerender,
     },
+    backgroundColor: props.backgroundColor,
   };
 }

package/dist/collection/components/sqm-portal-login/sqm-portal-login.js CHANGED Viewed

@@ -7,6 +7,7 @@ import { usePortalLogin } from "./usePortalLogin";
 import { createStyleSheet } from "../../styling/JSS";
 /**
  * @uiName Microsite Login
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand", "template"]
  */
 export class PortalLogin {
   constructor() {

package/dist/collection/components/sqm-portal-logout/sqm-portal-logout.js CHANGED Viewed

@@ -4,6 +4,7 @@ import { Component, Prop, State } from "@stencil/core";
 import { usePortalLogout } from "./usePortalLogout";
 /**
  * @uiName Microsite Logout
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template"]
  * @compatibility Built for instant access
  */
 export class PortalLogout {

package/dist/collection/components/sqm-portal-profile/sqm-portal-profile.js CHANGED Viewed

@@ -7,6 +7,7 @@ import { isDemo } from "@saasquatch/component-boilerplate";
 import deepmerge from "deepmerge";
 /**
  * @uiName Microsite Participant Profile
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template"]
  */
 export class PortalProfile {
   constructor() {

package/dist/collection/components/sqm-portal-protected-route/sqm-portal-protected-route.js CHANGED Viewed

@@ -4,6 +4,7 @@ import { h, Component, Prop, State, Host } from "@stencil/core";
 import { usePortalProtectedRoute } from "./usePortalProtectedRoute";
 /**
  * @uiName Microsite Protected Route
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template", "sqb-program-section", "sqb-conditional-section"]
  * @slots [{"name":"","title":"Route Content"}]
  */
 export class PortalProtectedRoute {

package/dist/collection/components/sqm-program-explainer/sqm-program-explainer-view.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { createStyleSheet } from "../../styling/JSS";
 export function ProgramExplainerView(props, children) {
   const style = {
     Container: {
-      color: props.textColor || "var(--sl-color-neutral-900)",
+      color: props.textColor || "var(--sqm-text)",
       background: props.backgroundColor || "",
     },
     Header: {

package/dist/collection/components/sqm-program-explainer/sqm-program-explainer.js CHANGED Viewed

@@ -4,6 +4,8 @@ import { getProps } from "../../utils/utils";
 import { ProgramExplainerView } from "./sqm-program-explainer-view";
 /**
  * @uiName Program Explainer
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqb-program-section","sqb-conditional-section"]
+ * @validChildren ["sqm-program-explainer-step"]
  * @exampleGroup Common Components
  * @slots [{"name":"", "title":"Explainer", "validChildren":["sqm-program-explainer-step"]}]
  * @example Program Explainer - <sqm-program-explainer header="How it works"><sqm-program-explainer-step description="Explore and use our product while earning points in the process!" header="Earn points" icon="cash-stack" text-color="#000000"></sqm-program-explainer-step><sqm-program-explainer-step description="Use your points and redeem rewards like one free month of Enterprise or a visa giftcard" header="Redeem rewards" icon="people" text-color="#000000"></sqm-program-explainer-step></sqm-program-explainer>