@saasquatch/mint-components 1.15.0-99 → 1.16.0-0

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

@@ -13,13 +13,6 @@ 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() { }
@@ -69,9 +62,6 @@ export class NavigationSidebarItem {
         "tags": [{
             "text": "Icon",
             "name": "uiName"
-          }, {
-            "text": "Style",
-            "name": "uiGroup"
           }],
         "text": "Options available at https://shoelace.style/components/icon"
       },
@@ -98,226 +88,12 @@ 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; }; textColor?: string; backgroundColor?: string; borderRadius?: number; backgroundHoverColor?: string; textHoverColor?: string; backgroundFocusedColor?: string; textFocusedColor?: string; padding?: string; }",
+        "resolved": "{ states?: { active: boolean; }; data?: { label: string; icon: string; path: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -353,13 +129,5 @@ 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

@@ -8,15 +8,7 @@ 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

@@ -16,7 +16,7 @@ const style = {
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PaginationView(props) {
-  const { states, callbacks, text, buttonType } = props;
+  const { states, callbacks, text } = 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", { exportparts: `base: ${buttonType}button-base`, onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
+      h("sl-button", { 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", { exportparts: `base: ${buttonType}button-base`, onClick: onNext, part: "sqm-pagination-button", circle: true, disabled: currentPage === totalPages },
+    h("sl-button", { 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

@@ -9,6 +9,8 @@ import { PaginationView } from "./sqm-pagination-view";
 import { usePagination } from "./usePagination";
 /**
  * @uiName Pagination
+ * @exampleGroup Common Components
+ * @example Promo Code Pagination - <sqm-pagination></sqm-pagination>
  */
 export class Pagination {
   constructor() {
@@ -17,15 +19,6 @@ export class Pagination {
      * @uiName Pagination text
      */
     this.paginationText = "{currentPage} of {totalPages}";
-    /**
-     * The type of the button that is used (primary or secondary).
-     * @uiName Button Type
-     * @uiType string
-     * @uiEnum ["primary", "secondary"]
-     * @uiEnumNames ["Primary", "Secondary"]
-     * @uiGroup Style
-     */
-    this.buttonType = "secondary";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -59,39 +52,6 @@ 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 that is used (primary or secondary)."
-      },
-      "attribute": "button-type",
-      "reflect": false,
-      "defaultValue": "\"secondary\""
-    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
@@ -135,7 +95,6 @@ function useDemoPagination(props) {
       totalPages: 5,
       loading: false,
     },
-    buttonType: props.buttonType,
     callbacks: {
       onNext: () => setCurrentPage(currentPage + 1),
       onPrev: () => setCurrentPage(currentPage - 1),

package/dist/collection/components/sqm-payout-button-scroll/sqm-payout-button-scroll-view.js

@@ -6,7 +6,7 @@ const style = {
     marginLeft: "auto",
   },
   PayoutButtonDescription: {
-    color: "var(--sqm-text-subdued)",
+    color: "var(--sl-color-neutral-500)",
     fontSize: "var(--sl-font-size-small)",
     margin: "0",
   },

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

@@ -8,10 +8,6 @@ export function PortalChangePasswordView(props) {
   const style = {
     Dialog: {
       padding: "0",
-      "&::part(panel)": {
-        background: "var(--sqm-portal-background)",
-        borderRadius: "var(--sqm-border-radius-normal, var(--sl-border-radius-medium))",
-      },
       "&::part(close-button)": {
         "margin-top": "var(--sl-spacing-medium)",
       },
@@ -35,8 +31,8 @@ export function PortalChangePasswordView(props) {
       },
     },
     CancelButton: {
+      width: "25%",
       margin: "var(--sl-spacing-large) auto",
-      width: "100%",
     },
     PasswordField: {
       marginBottom: "var(--sl-spacing-large) !important",
@@ -65,14 +61,14 @@ export function PortalChangePasswordView(props) {
               h("sqm-password-field", { exportparts: "input-label: input-label", class: sheet.classes.PasswordField, fieldLabel: states.content.passwordFieldLabel, meetsRequirementsText: states.content.meetsRequirementsText, doesNotMeetRequirementsText: states.content.doesNotMeetRequirementsText, minErrorText: states.content.minErrorText, uppercaseErrorText: states.content.uppercaseErrorText, lowercaseErrorText: states.content.lowercaseErrorText, hasErrorText: states.content.hasErrorText }),
               h("sl-input", { exportparts: "label: input-label, base: input-base", name: "/confirmPassword", label: states.content.confirmPasswordFieldLabel, required: true, togglePassword: true, disabled: states.loading, type: "password" })),
             h(PortalContainerView, Object.assign({}, { direction: "row", padding: "none", gap: "20px" }),
-              h("sl-button", { class: sheet.classes.ChangePasswordButton, type: "primary", exportparts: "base: primarybutton-base", submit: true, loading: states.loading }, states.content.changePasswordButtonText),
-              h("sl-button", { class: sheet.classes.CancelButton, type: "secondary", exportparts: "base: secondarybutton-base", onClick: () => callbacks.setOpen(false) }, states.content.cancelText))))),
+              h("sl-button", { class: sheet.classes.ChangePasswordButton, type: "primary", submit: true, loading: states.loading }, states.content.changePasswordButtonText),
+              h("sl-button", { class: sheet.classes.CancelButton, type: "text", onClick: () => callbacks.setOpen(false) }, states.content.cancelText))))),
       }))),
     h(PortalSectionView, Object.assign({}, {
       labelMargin: "x-large",
       padding: "xxx-large",
       label: (h(TextSpanView, Object.assign({}, { type: "h2" }), states.content.portalChangePasswordHeader)),
-      content: (h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: () => callbacks.setOpen(true) }, states.content.portalChangePasswordButtonText)),
+      content: (h("sl-button", { onClick: () => callbacks.setOpen(true) }, states.content.portalChangePasswordButtonText)),
     }),
       h("style", { type: "text/css" }, styleString))));
 }

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

@@ -7,7 +7,6 @@ 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() {
@@ -445,7 +444,7 @@ export class PortalChangePassword {
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalChangePasswordViewProps>",
-        "resolved": "{ states?: { open: boolean; error: string; loading: boolean; success: boolean; content: { modalChangePasswordHeader: string; cancelText: string; changePasswordButtonText: string; passwordFieldLabel: string; confirmPasswordFieldLabel: string; successMessage: string; portalChangePasswordHeader: string; portalChangePasswordButtonText: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; }; }; borderRadius?: string; background?: string; }",
+        "resolved": "{ states?: { open: boolean; error: string; loading: boolean; success: boolean; content: { modalChangePasswordHeader: string; cancelText: string; changePasswordButtonText: string; passwordFieldLabel: string; confirmPasswordFieldLabel: string; successMessage: string; portalChangePasswordHeader: string; portalChangePasswordButtonText: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; }; }; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-portal-container/sqm-portal-container-view.js

@@ -14,7 +14,7 @@ export function PortalContainerView(props, children) {
       maxWidth: props.maxWidth,
       margin: props.center && "auto",
       justifyContent: props.justifyContent,
-      backgroundColor: props.backgroundColor || "var(--sqm-portal-background)",
+      backgroundColor: props.backgroundColor || "transparent",
     },
   };
   const vanillaStyle = `

package/dist/collection/components/sqm-portal-container/sqm-portal-container.js

@@ -44,6 +44,12 @@ export class PortalContainer {
      * @uiEnumNames ["Wrap", "No Wrap"]
      */
     this.flexWrap = "wrap";
+    /**
+     * @uiName Background color
+     * @uiWidget color
+     * @uiType string
+     */
+    this.backgroundColor = "#ffffff00";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -327,7 +333,8 @@ export class PortalContainer {
         "text": ""
       },
       "attribute": "background-color",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"#ffffff00\""
     }
   }; }
   static get states() { return {

package/dist/collection/components/sqm-portal-footer/sqm-portal-footer-view.js

@@ -9,8 +9,8 @@ const vanillaStyle = `
   }
   a{
     cursor:pointer;
-    color: var(--sqm-text-subdued);
-    text-decoration: none ;
+    color: inherit;
+    text-decoration: none;
   }
 `;
 export function PortalFooterView(props) {
@@ -26,14 +26,14 @@ export function PortalFooterView(props) {
       "flex-direction": "column",
       "align-items": "center",
       "font-size": "var(--sl-font-size-small)",
-      color: "var(--sqm-text-subdued)",
+      color: "var(--sl-color-gray-600)",
       "padding-top": `var(--sl-spacing-${props.paddingTop})`,
       "padding-right": `var(--sl-spacing-${props.paddingRight})`,
       "padding-bottom": `var(--sl-spacing-${props.paddingBottom})`,
       "padding-left": `var(--sl-spacing-${props.paddingLeft})`,
       "row-gap": `var(--sl-spacing-small)`,
       "& a:hover": {
-        color: "var(--sqm-text)",
+        color: "var(--sl-color-gray-900)",
       },
     },
     SupportText: {
@@ -41,7 +41,7 @@ export function PortalFooterView(props) {
       margin: 0,
     },
     PoweredByLink: {
-      color: "var(--sqm-text-subdued)",
+      color: "var(--sl-color-gray-400)",
       "font-size": "var(--sl-font-size-small)",
       display: "flex",
       alignItems: "center",
@@ -50,7 +50,7 @@ export function PortalFooterView(props) {
         shapeRendering: "geometricprecision",
       },
       "&:hover, &:hover *": {
-        color: "var(--sqm-text)",
+        color: "var(--sl-color-gray-900)",
       },
     },
   };

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

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

package/dist/collection/components/sqm-portal-forgot-password/PortalForgotPassword.stories.js

@@ -18,7 +18,7 @@ const defaultProps = {
     submit: async (e) => await e,
   },
   content: {
-    loginText: "Login",
+    secondaryButton: "Cancel",
     messageSlot: "Enter your email below to receive a password reset link.",
   },
 };
@@ -33,8 +33,8 @@ const errorProps = {
     submit: async (e) => await e,
   },
   content: {
+    secondaryButton: "Cancel",
     messageSlot: "Enter your email below to receive a password reset link.",
-    loginText: "Login",
   },
 };
 const loadingProps = {
@@ -48,7 +48,7 @@ const loadingProps = {
     submit: async (e) => await e,
   },
   content: {
-    loginText: "Login",
+    secondaryButton: "Cancel",
     messageSlot: "Enter your email below to receive a password reset link.",
   },
 };
@@ -63,7 +63,7 @@ const successProps = {
     submit: async (e) => await e,
   },
   content: {
-    loginText: "Login",
+    secondaryButton: "Cancel",
     messageSlot: "Enter your email below to receive a password reset link.",
   },
 };

package/dist/collection/components/sqm-portal-forgot-password/sqm-portal-forgot-password-view.js

@@ -2,7 +2,15 @@ import { h } from "@stencil/core";
 import { AuthButtonsContainer, AuthColumn, AuthWrapper, } from "../../global/mixins";
 import { createStyleSheet } from "../../styling/JSS";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
-import { navigation } from "@saasquatch/component-boilerplate";
+const style = {
+  Wrapper: AuthWrapper,
+  Column: { ...AuthColumn },
+  ButtonsContainer: AuthButtonsContainer,
+  SecondaryButton: {
+    cursor: "pointer",
+    width: "25%",
+  },
+};
 const vanillaStyle = `
 :host {
   display: block;
@@ -11,27 +19,11 @@ const vanillaStyle = `
   display: none;
 }
 `;
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
 export function PortalForgotPasswordView(props) {
   const { states, callbacks, content } = props;
-  const style = {
-    FormWrapper: {
-      ...AuthWrapper,
-      background: content.backgroundColor || "var(--sqm-portal-background)",
-      borderRadius: content.borderRadius || "var(--sqm-border-radius-normal)",
-      border: content.border ||
-        "var(--sqm-border-thickness) solid var(--sqm-border-color)",
-    },
-    Column: { ...AuthColumn },
-    ButtonsContainer: AuthButtonsContainer,
-    SecondaryButton: {
-      margin: "auto",
-      display: "block",
-      cursor: "pointer",
-    },
-  };
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (h("div", { class: sheet.classes.FormWrapper, part: "sqm-base" },
+  return (h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
@@ -44,5 +36,5 @@ export function PortalForgotPasswordView(props) {
       h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true }),
       h("div", { class: sheet.classes.ButtonsContainer },
         h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Reset Password"),
-        h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", class: sheet.classes.SecondaryButton, disabled: states.loading, onClick: () => navigation.push(states.loginPath) }, content.loginText)))));
+        h("div", { class: sheet.classes.SecondaryButton }, content.secondaryButton)))));
 }