@saasquatch/mint-components 1.15.0-4 → 1.15.0-40

package/dist/types/components/sqm-coupon-code/CouponCode.stories.d.ts

@@ -6,6 +6,8 @@ declare const _default: {
 };
 export default _default;
 export declare const CouponCode: () => any;
+export declare const CouponCodeWithSecondaryButtonType: () => any;
+export declare const CouponCodeWithTertiaryButtonType: () => any;
 export declare const CustomTooltipText: () => any;
 export declare const CustomTooltipDuration: () => any;
 export declare const TextAlignCenter: () => any;

package/dist/types/components/sqm-coupon-code/sqm-coupon-code-view.d.ts

@@ -2,5 +2,7 @@ import { CopyTextViewProps } from "../views/copy-text-view";
 export interface CouponCodeViewProps extends CopyTextViewProps {
   errorType?: "error" | "warning" | "info" | "success";
   couponCodeLabel?: string;
+  textColor?: string;
+  buttonType: "primary" | "secondary" | "tertiary";
 }
 export declare function CouponCodeView(props: CouponCodeViewProps): any;

package/dist/types/components/sqm-coupon-code/sqm-coupon-code.d.ts

@@ -32,6 +32,7 @@ export declare class CouponCode {
    * @uiType string
    * @uiEnum ["left", "center", "right"]
    * @uiEnumNames ["Left", "Center", "Right"]
+   * @uiGroup Style
    */
   textAlign?: "left" | "center" | "right";
   /**
@@ -45,6 +46,7 @@ export declare class CouponCode {
    * @uiType string
    * @uiEnum ["icon", "button-outside", "button-below"]
    * @uiEnumNames ["Icon", "Button outside", "Button below"]
+   * @uiGroup Style
    */
   buttonStyle?: "icon" | "button-outside" | "button-below";
   /**
@@ -106,6 +108,46 @@ export declare class CouponCode {
    * @uiGroup Coupon code error
    */
   couponCodePlaceholder: string;
+  /**
+   * Border color of share link container (default is set to 1px solid transparent)
+   * @uiName Border color
+   * @uiWidget color
+   * @format color
+   * @uiGroup Style
+   */
+  borderColor?: string;
+  /**
+   * Color of the text and copy icon
+   * @uiName Text color
+   * @uiWidget color
+   * @format color
+   * @uiGroup Style
+   */
+  textColor?: string;
+  /**
+   * The border radius on the share link container (in pixels)
+   * @uiName Border Radius
+   * @uiType number
+   * @uiGroup Style
+   */
+  borderRadius?: string;
+  /**
+   * 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
+   */
+  buttonType?: "primary" | "secondary" | "tertiary";
+  /**
+   * Background color of share link container
+   * @uiName Background color
+   * @uiWidget color
+   * @format color
+   * @uiGroup Style
+   */
+  backgroundColor?: string;
   /**
    * @undocumented
    * @uiType object

package/dist/types/components/sqm-coupon-code/useCouponCode.d.ts

@@ -9,6 +9,7 @@ interface CouponCodeProps {
   pendingErrorText: string;
   redeemedErrorText: string;
   genericErrorText: string;
+  buttonType?: "primary" | "secondary" | "tertiary";
 }
 export declare type RewardStatusType = "AVAILABLE" | "EXPIRED" | "REDEEMED" | "CANCELLED" | "PENDING" | "EMPTY_TANK" | "ERROR";
 export declare function useCouponCode(props: CouponCodeProps): CouponCodeViewProps;

package/dist/types/components/sqm-divided-layout/sqm-divided-layout-view.d.ts

@@ -2,7 +2,10 @@ import { VNode } from "../../stencil-public-runtime";
 interface DividedLayoutViewProps {
   direction: "row" | "column";
   contentAreaWidth?: string | null;
-  dividerStyle: string;
+  dividerStyle?: string;
+  backgroundColor?: string;
+  borderless?: boolean;
+  borderColor?: string;
 }
 export declare function DividedLayoutView(props: DividedLayoutViewProps, children: VNode): any;
 export {};

package/dist/types/components/sqm-divided-layout/sqm-divided-layout.d.ts

@@ -22,10 +22,23 @@ export declare class DividedLayout {
    */
   contentAreaWidth: string | null;
   /**
+   * @undocumented
    * Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color.
    * @uiName Border style
    */
   dividerStyle: string;
+  /**
+   * Background color of the divider
+   * @uiName Divider Background Color
+   * @uiWidget color
+   */
+  backgroundColor?: string;
+  /**
+   * Color of the divider (defaults to default text color if none is set)
+   * @uiName Divider Background Color
+   * @uiWidget color
+   */
+  borderColor?: string;
   constructor();
   disconnectedCallback(): void;
   render(): any;

package/dist/types/components/sqm-hero-image/sqm-hero-image-view.d.ts

@@ -17,5 +17,6 @@ export interface HeroImageViewProps {
   paddingImage?: Spacing;
   imagePos: "left" | "center" | "right";
   imageMobilePos: "top" | "bottom";
+  buttonType?: "primary" | "secondary" | "tertiary";
 }
 export declare function HeroImageView(props: HeroImageViewProps, children: VNode): any;

package/dist/types/components/sqm-hero-image/sqm-hero-image.d.ts

@@ -17,22 +17,26 @@ export declare class HeroImage {
    * @uiName Overlay color
    * @uiWidget color
    * @format color
+   * @uiGroup Style
    */
   overlayColor?: string;
   /**
    * @uiName Overlay opacity
+   * @uiGroup Style
    */
   overlayOpacity: string;
   /**
    * @uiName Text color
    * @uiWidget color
    * @format color
+   * @uiGroup Style
    */
   textColor?: string;
   /**
    * @uiName Background color
    * @uiWidget color
    * @format color
+   * @uiGroup Style
    */
   backgroundColor?: string;
   /**
@@ -40,11 +44,13 @@ export declare class HeroImage {
    * @uiType string
    * @uiEnum ["overlay", "columns"]
    * @uiEnumNames ["Overlay", "Two-column"]
+   * @uiGroup Style
    */
   layout: "overlay" | "columns";
   /**
    * @uiName Image percentage
    * @uiType number
+   * @uiGroup Style
    */
   imagePercentage: number;
   /**
@@ -52,6 +58,7 @@ export declare class HeroImage {
    * @uiType string
    * @uiEnum ["left", "center", "right"]
    * @uiEnumNames ["Left", "Center", "Right"]
+   * @uiGroup Style
    */
   imagePos: "left" | "center" | "right";
   /**
@@ -59,6 +66,7 @@ export declare class HeroImage {
    * @uiType string
    * @uiEnum ["top", "bottom"]
    * @uiEnumNames ["Top", "Bottom"]
+   * @uiGroup Style
    */
   imageMobilePos: "top" | "bottom";
   /**
@@ -88,6 +96,7 @@ export declare class HeroImage {
    * @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"]
+   * @uiGroup Style
    */
   paddingText: Spacing;
   /**
@@ -95,8 +104,18 @@ export declare class HeroImage {
    * @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"]
+   * @uiGroup Style
    */
   paddingImage: Spacing;
+  /**
+   * The type of the button that is used (primary, secondary, or tertiary).
+   * @uiName Button Type
+   * @uiType string
+   * @uiEnum ["primary", "secondary", "tertiary"]
+   * @uiEnumNames ["Primary", "Secondary", "Tertiary"]
+   * @uiGroup Style
+   */
+  buttonType?: "primary" | "secondary" | "tertiary";
   constructor();
   disconnectedCallback(): void;
   render(): any;

package/dist/types/components/sqm-leaderboard/Leaderboard.stories.d.ts

@@ -11,6 +11,7 @@ export declare const Essentials: () => any;
 export declare const One: () => any;
 export declare const Five: () => any;
 export declare const ReferralLeaderboard: () => any;
+export declare const ReferralLeaderboardWithCustomStyles: () => any;
 export declare const ReferralLeaderboardWithMaxWidth: () => any;
 export declare const PointsLeaderboard: () => any;
 export declare const TenWithRank: () => any;

package/dist/types/components/sqm-leaderboard/sqm-leaderboard-view.d.ts

@@ -11,10 +11,16 @@ export interface LeaderboardViewProps {
       showRank?: boolean;
       hideViewer?: boolean;
       viewingUserText?: string;
+      viewingUserHighlightColor?: string;
+      viewingUserHighlightTextColor?: string;
       hideNames?: boolean;
       anonymousUser?: string;
       rankSuffix?: string;
       width?: string;
+      background?: string;
+      borderColor?: string;
+      textColor?: string;
+      borderRadius?: number;
     };
   };
   data: {

package/dist/types/components/sqm-leaderboard/sqm-leaderboard.d.ts

@@ -49,13 +49,6 @@ export declare class Leaderboard {
    * @uiName Rank Suffix
    */
   rankSuffix: string;
-  /**
-   * Hide the viewer's leaderboard row if not in the top results.
-   *
-   * @uiName Hide viewing user
-   * @default
-   */
-  hideViewer: boolean;
   /**
    * @uiName Viewing user text
    */
@@ -99,6 +92,54 @@ export declare class Leaderboard {
    * @uiName Maximum rows number
    */
   maxRows: number;
+  /**
+   * Hide the viewer's leaderboard row if not in the top results.
+   *
+   * @uiName Hide viewing user
+   * @default
+   */
+  hideViewer: boolean;
+  /**
+   * Changes the background color of the viewing user row in the leaderboard.
+   * @uiName Viewing User Highlight Color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  viewingUserHighlightColor?: string;
+  /**
+   * Changes the text color of the viewing user row in the leaderboard.
+   * @uiName Viewing User Text Color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  viewingUserHighlightTextColor?: string;
+  /**
+   * Changes the background color of the leaderboard.
+   * @uiName Background Color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  background?: string;
+  /**
+   * Changes the border color of the table rows.
+   * @uiName Border Color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  borderColor?: string;
+  /**
+   * Text color of the leaderboard.
+   * @uiName Text Color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  textColor?: string;
+  /**
+   * Leaderboard border radius in pixels.
+   * @uiName Border Radius
+   * @uiGroup Style
+   */
+  borderRadius?: number;
   /**
    * @undocumented
    * @uiType object

package/dist/types/components/sqm-leaderboard/useLeaderboard.d.ts

@@ -16,6 +16,12 @@ export interface LeaderboardProps {
   maxRows: number;
   programId?: string;
   interval: string;
+  viewingUserHighlightColor?: string;
+  viewingUserHighlightTextColor?: string;
+  background?: string;
+  borderColor?: string;
+  textColor?: string;
+  borderRadius?: number;
   empty: VNode;
   demoProps?: LeaderboardViewProps;
 }

package/dist/types/components/sqm-navigation-sidebar/sqm-navigation-sidebar-view.d.ts

@@ -2,5 +2,6 @@ import { VNode } from "../../stencil-public-runtime";
 export interface NavigationSidebarViewProps {
   checked?: boolean;
   onClick?: (e: MouseEvent) => void;
+  mobileMenuColor?: string;
 }
 export declare function NavigationSidebarView(props: NavigationSidebarViewProps, children: VNode): any;

package/dist/types/components/sqm-navigation-sidebar/sqm-navigation-sidebar.d.ts

@@ -1,3 +1,5 @@
+import { NavigationSidebarViewProps } from "./sqm-navigation-sidebar-view";
+import { DemoData } from "../../global/demo";
 /**
  * @uiName Microsite Sidebar
  * @validParents ["div","sqm-divided-layout","template","sqm-portal-container","sqm-brand"]
@@ -6,6 +8,18 @@
  */
 export declare class NavigationSidebar {
   ignored: boolean;
+  /**
+   * @uiName Text color
+   * @uiWidget color
+   * @format color
+   * @uiGroup Style
+   */
+  mobileMenuColor?: string;
+  /**
+   * @undocumented
+   * @uiType object
+   */
+  demoData?: DemoData<NavigationSidebarViewProps>;
   constructor();
   disconnectedCallback(): void;
   render(): any;

package/dist/types/components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view.d.ts

@@ -7,5 +7,13 @@ export interface NavigationSidebarItemViewProps {
     icon: string;
     path: string;
   };
+  backgroundColor?: string;
+  backgroundHoverColor?: string;
+  textColor?: string;
+  textHoverColor?: string;
+  borderRadius?: number;
+  backgroundFocusedColor?: string;
+  textFocusedColor?: string;
+  padding?: string;
 }
 export declare function NavigationSidebarItemView(props: NavigationSidebarItemViewProps): any;

package/dist/types/components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item.d.ts

@@ -1,5 +1,6 @@
 import { DemoData } from "../../global/demo";
 import { NavigationSidebarItemViewProps } from "./sqm-navigation-sidebar-item-view";
+import { Spacing } from "../../global/mixins";
 /**
  * @uiName Microsite Sidebar Item
  * @validParents ["sqm-navigation-sidebar"]
@@ -16,12 +17,68 @@ export declare class NavigationSidebarItem {
    * Options available at https://shoelace.style/components/icon
    *
    * @uiName Icon
+   * @uiGroup Style
    */
   icon: string;
   /**
    * @uiName Label
    */
   label: string;
+  /**
+   * Background color of the nav item
+   * @uiName Background Color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  backgroundColor?: string;
+  /**
+   * Background color of the nav item when hovered
+   * @uiName Background Hover Color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  backgroundHoverColor?: string;
+  /**
+   * Background color of the nav item when focused
+   * @uiName Background Focused Color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  backgroundFocusedColor?: string;
+  /**
+   * Text color of the nav item
+   * @uiName Text Color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  textColor?: string;
+  /**
+   * Text color of the nav item when hovered
+   * @uiName Text Hover Color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  textHoverColor?: string;
+  /**
+   * Text color of the nav item when items is focused
+   * @uiName Text Focused Color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  textFocusedColor?: string;
+  /**
+   * Border radius (in number of pixels)
+   * @uiName Border Radius
+   * @uiGroup Style
+   */
+  borderRadius?: number;
+  /**
+   * @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"]
+   */
+  padding?: Spacing;
   /**
    * @undocumented
    * @uiType object

package/dist/types/components/sqm-pagination/sqm-pagination-view.d.ts

@@ -11,5 +11,6 @@ export interface PaginationViewProps {
     onNext: (e: Event) => void;
     onPrev: (e: Event) => void;
   };
+  buttonType?: "primary" | "secondary" | "tertiary";
 }
 export declare function PaginationView(props: PaginationViewProps): any;

package/dist/types/components/sqm-pagination/sqm-pagination.d.ts

@@ -11,6 +11,15 @@ export declare class Pagination {
    * @uiName Pagination text
    */
   paginationText: string;
+  /**
+   * The type of the button that is used (primary, secondary, or tertiary).
+   * @uiName Button Type
+   * @uiType string
+   * @uiEnum ["primary", "secondary", "tertiary"]
+   * @uiEnumNames ["Primary", "Secondary", "Tertiary"]
+   * @uiGroup Style
+   */
+  buttonType?: "primary" | "secondary" | "tertiary";
   /**
    * @undocumented
    * @uiType object

package/dist/types/components/sqm-portal-change-password/sqm-portal-change-password-view.d.ts

@@ -25,5 +25,7 @@ export interface PortalChangePasswordViewProps {
     setOpen: (open: boolean) => void;
     submit: (event: MouseEvent) => void;
   };
+  borderRadius?: string;
+  background?: string;
 }
 export declare function PortalChangePasswordView(props: PortalChangePasswordViewProps): any;

package/dist/types/components/sqm-portal-forgot-password/sqm-portal-forgot-password-view.d.ts

@@ -14,6 +14,13 @@ export interface PortalForgotPasswordViewProps {
     emailLabel?: string;
     submitLabel?: string;
     successAlertText?: string;
+    loginText?: string;
+  };
+  styles?: {
+    backgroundColor?: string;
+    borderRadius?: string;
+    border?: string;
+    textColor?: string;
   };
 }
 export declare function PortalForgotPasswordView(props: PortalForgotPasswordViewProps): any;

package/dist/types/components/sqm-portal-forgot-password/sqm-portal-forgot-password.d.ts

@@ -43,6 +43,21 @@ export declare class PortalForgotPassword {
    * @uiName Email verification sent text
    */
   successAlertText: string;
+  /**
+   * @uiName Background color
+   * @uiWidget color
+   */
+  backgroundColor: string;
+  /**
+   * @uiName Border radius
+   * @uiWidget number
+   */
+  borderRadius: string;
+  /**
+   * @uiName Border style
+   * @uiWidget textArea
+   */
+  border: string;
   /**
    * @undocumented
    * @uiType object

package/dist/types/components/sqm-portal-frame/sqm-portal-frame-view.d.ts

@@ -8,5 +8,8 @@ export interface PortalFrameViewProps {
     rerender: Function;
   };
   notFullScreen?: boolean;
+  backgroundColor?: string;
+  border?: string;
+  headerAndFooterBackgroundColor?: string;
 }
 export declare function PortalFrameView(props: PortalFrameViewProps, children: VNode): any;

package/dist/types/components/sqm-portal-frame/sqm-portal-frame.d.ts

@@ -10,6 +10,25 @@ export declare class PortalFrame {
    * @undocumented
    */
   notFullScreen?: boolean;
+  /**
+   * @uiName Background color
+   * @uiWidget color
+   * @uiType string
+   */
+  backgroundColor: string;
+  /**
+   * Borders placed to seperate the header and footer from the body content.
+   * @uiName Border
+   * @uiType string
+   */
+  border: string;
+  /**
+   * Background color for the header and footer.
+   * @uiName Header and Footer Background Color
+   * @uiWidget color
+   * @uiType string
+   */
+  headerAndFooterBackgroundColor: string;
   /**
    * @undocumented
    * @uiType object

package/dist/types/components/sqm-portal-frame/usePortalFrame.d.ts

@@ -1,3 +1,4 @@
 import { VNode } from "../../stencil-public-runtime";
 import { PortalFrameViewProps } from "./sqm-portal-frame-view";
-export declare function usePortalFrame(footerContent: VNode, headerContent: VNode): PortalFrameViewProps;
+import { PortalFrame } from "./sqm-portal-frame";
+export declare function usePortalFrame(footerContent: VNode, headerContent: VNode, props: PortalFrame): PortalFrameViewProps;

package/dist/types/components/sqm-program-explainer-step/sqm-program-explainer-step-view.d.ts

@@ -3,6 +3,9 @@ export interface ProgramExplainerStepViewProps {
   description: string;
   textColor?: string;
   backgroundColor?: string;
+  borderRadius?: number;
+  iconBackgroundColor?: string;
+  iconColor?: string;
   imageUrl?: string;
   icon?: string;
 }

package/dist/types/components/sqm-program-explainer-step/sqm-program-explainer-step.d.ts

@@ -19,13 +19,31 @@ export declare class ProgramExplainerStep {
    * @uiWidget color
    * @format color
    */
-  textColor: string;
+  textColor?: string;
   /**
    * @uiName Background color
    * @uiWidget color
    * @format color
    */
-  backgroundColor: string;
+  backgroundColor?: string;
+  /**
+   * Amount in pixels
+   * @uiName Border radius
+   * @type number
+   */
+  borderRadius?: number;
+  /**
+   * @uiName Icon Background color
+   * @uiWidget color
+   * @format color
+   */
+  iconBackgroundColor?: string;
+  /**
+   * @uiName Icon color
+   * @uiWidget color
+   * @format color
+   */
+  iconColor?: string;
   /**
    * Displayed in place of an icon
    *

package/dist/types/components/sqm-referral-card/sqm-referral-card-view.d.ts

@@ -2,7 +2,10 @@ import { VNode } from "../../stencil-public-runtime";
 export interface ReferralCardViewProps {
   verticalAlignment: "start" | "center" | "end";
   hideBorder?: boolean;
-  backgroundColor: string;
+  borderColor?: string;
+  borderRadius?: number;
+  textColor?: string;
+  backgroundColor?: string;
   slots: {
     left: VNode;
     right: VNode;
@@ -13,7 +16,7 @@ export interface ReferralCardViewProps {
   paddingRight?: string;
   paddingBottom?: string;
   paddingLeft?: string;
-  limitWidth: boolean;
+  limitWidth?: boolean;
   hasHeader: boolean;
   hasFooter: boolean;
 }

package/dist/types/components/sqm-referral-card/sqm-referral-card.d.ts

@@ -54,6 +54,26 @@ export declare class ReferralCard {
    * @uiType string
    */
   backgroundColor: string;
+  /**
+   * Border color of share link container (default is set to 1px solid transparent)
+   * @uiName Border color
+   * @uiWidget color
+   * @format color
+   */
+  borderColor?: string;
+  /**
+   * Color of the text and copy icon
+   * @uiName Text color
+   * @uiWidget color
+   * @format color
+   */
+  textColor?: string;
+  /**
+   * The border radius on the share link container (in pixels)
+   * @uiName Border Radius
+   * @uiType number
+   */
+  borderRadius?: number;
   /**
    * @uiName Limit width
    * @uiType boolean

package/dist/types/components/sqm-referral-code/ReferralCode.stories.d.ts

@@ -7,6 +7,7 @@ declare const _default: {
 export default _default;
 export declare const ReferralCode: () => any;
 export declare const ShowNotificationText: () => any;
+export declare const ShowNotificationTextRed: () => any;
 export declare const ShowNotificationTextWithButton: () => any;
 export declare const ShowNotificationTextWithButtonBelow: () => any;
 export declare const CustomTooltipText: () => any;