@saasquatch/mint-components 1.15.0-15 → 1.15.0-17

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -35,7 +35,7 @@ const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-52f
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-4f837226.js');
 require('./ErrorView-b2fcf954.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-3da9ed28.js');
-const ShadowViewAddon = require('./ShadowViewAddon-d2ed86e8.js');
+const ShadowViewAddon = require('./ShadowViewAddon-974f6839.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
 const sqmInvoiceTableView = require('./sqm-invoice-table-view-55066ec6.js');
 
@@ -1500,13 +1500,15 @@ const TextStyleWithoutIcon = () => {
   const props = { medium: "facebook", type: "text", hideicon: true };
   return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
 };
-const WithCustomColors = () => {
+const WithCustomColorsAndBranding = () => {
   const props = {
     medium: "facebook",
     type: "text",
     backgroundcolor: "red",
     textcolor: "yellow",
     iconslot: "prefix",
+    border: "2px solid yellow",
+    borderradius: 30,
   };
   return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Facebook");
 };
@@ -1579,7 +1581,7 @@ const ShareButton = /*#__PURE__*/Object.freeze({
   WithoutIcon: WithoutIcon,
   WithoutText: WithoutText,
   TextStyleWithoutIcon: TextStyleWithoutIcon,
-  WithCustomColors: WithCustomColors,
+  WithCustomColorsAndBranding: WithCustomColorsAndBranding,
   WithCustomBorderRadius: WithCustomBorderRadius,
   LinkLocationTest: LinkLocationTest,
   FullStackIcon: FullStackIcon,
@@ -1832,6 +1834,10 @@ const InvalidStatValue = () => {
   };
   return index.h(ShadowViewAddon.BigStatView, Object.assign({}, props), "Big stat");
 };
+const CustomStyles$1 = () => {
+  return (index.h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
+    index.h("p", null, "Giftcards Earned")));
+};
 const MultipleStats = () => {
   return (index.h("sqm-stat-container", { space: "xxx-large", display: "flex" },
     index.h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/referralsCount" },
@@ -1844,6 +1850,15 @@ const MultipleStats = () => {
       index.h("sqm-text", null,
         index.h("p", null, "Points Balance")))));
 };
+const MultipleStatsWithCustomBranding = () => {
+  return (index.h("sqm-stat-container", { space: "xxx-large", display: "grid", alignment: "center", "hide-border": "true" },
+    index.h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
+      index.h("p", null, "Giftcards Earned")),
+    index.h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
+      index.h("p", null, "Referrals")),
+    index.h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
+      index.h("p", null, "Points balance"))));
+};
 
 const BigStat = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -1856,7 +1871,9 @@ const BigStat = /*#__PURE__*/Object.freeze({
   FlexReverseLeft: FlexReverseLeft,
   NoStatValue: NoStatValue,
   InvalidStatValue: InvalidStatValue,
-  MultipleStats: MultipleStats
+  CustomStyles: CustomStyles$1,
+  MultipleStats: MultipleStats,
+  MultipleStatsWithCustomBranding: MultipleStatsWithCustomBranding
 });
 
 const scenario$4 = "@owner:noah @author:noah\nFeature: Leaderboard\n\tThe leaderboard supports three main cases\n\t- Top Started Referrers\n\t- Top Converted Referrers\n\t- Top Point Earners\n\tTo display these different types of leaderboards it uses the backends pre-canned options.\n\tThe backend supports filtering on programId and interval, programId is sourced from program context.\n\n  Background: A user exists\n    Given a user\n    And they are viewing the leaderboard\n\n  @motivating\n  Scenario Outline: Two types of referrals leaderboards can be displayed\n    Given a leaderboard has prop \"leaderboard-type\" with <value>\n    And there are started referrals on the tenant\n    And there are started converted on the tenant\n    When the user views the leaderboard\n    Then they see the referral <referralType> leaderboard\n\n    Examples:\n      | value                 | referralType |\n      | topStartedReferrers   | started      |\n      | topConvertedReferrers | converted    |\n\n  @motivating\n  Scenario: The top point earners leaderboard can be displayed\n    Given a leaderboard has prop \"leaderboard-type\" with value \"topPointEarners\"\n    And there are users with points\n    When the user views the leaderboard\n    Then they see the top point earners leaderboard\n    And text values are displayed for point counts\n\n  @minutia\n  Scenario Outline: Reward pretty value is used on the top point earners leaderboard\n    Given top point earners leaderboard\n    And the \"POINT\" reward unit has a pretty value for the following locales\n      | locale |\n      | en     |\n      | fr     |\n      | tr     |\n    When the user views the leaderboard\n    And they have <locale>\n    Then they see the translated pretty value in the stat value column\n\n  @motivating\n  Scenario Outline: Program Context is used by default to filter leaderboard results\n    Given a <leaderboardType> leaderboard loaded with program context for \"my-program\"\n    When the user views the leaderboard\n    Then they only see <results> from \"my-program\"\n\n    Examples:\n      | leaderboardType       | results             |\n      | topStartedReferrers   | started referrals   |\n      | topConvertedReferrers | converted referrals |\n      | topPointEarners       | points earned       |\n\n  @motivating\n  Scenario Outline: Program Id context can be overwritten with a prop\n    Given a <leaderboardType> leaderboard has prop \"program-Id\" with value \"my-test-program\"\n    When the user views the leaderboard\n    Then they only see <results> from \"my-test-program\"\n\n    Examples:\n      | leaderboardType       | results             |\n      | topStartedReferrers   | started referrals   |\n      | topConvertedReferrers | converted referrals |\n      | topPointEarners       | points earned       |\n\n  @motivating\n  Scenario Outline: Global leaderboards can be displayed by clearing program context\n\t\t#This is important for clients with use cases like StaffTracks global points leaderboard\n\t\t#This can also be done with a program section in a similar manner\n    Given a <leaderboardType> leaderboard has prop \"program-Id\" with value \"\"\n    When the user views the leaderboard\n    Then they see global <results>\n\n    Examples:\n      | leaderboardType       | results             |\n      | topStartedReferrers   | started referrals   |\n      | topConvertedReferrers | converted referrals |\n      | topPointEarners       | points earned       |\n\n  @motivating\n  Scenario: Leaderboard results are shown in descending order\n    Given there are leaderboard results\n    When the user views the leaderboard\n    Then they see up to the 10 top leaderboard results\n    And leaderboard is in descending order\n\n  @motivating\n  Scenario Outline: Leaderboard results can be filtered with a time interval\n    Given a <leaderboardType> leaderboard\n    And it has prop \"interval\" with value \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\"\n    When the user views the leaderboard\n    Then they only see <results> from within \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\"\n\n    Examples:\n      | leaderboardType       | results             |\n      | topStartedReferrers   | started referrals   |\n      | topConvertedReferrers | converted referrals |\n      | topPointEarners       | points earned       |\n\n  @motivating\n  Scenario Outline: Leaderboard rank type can be configured\n    Given a leaderboard has prop \"rank-type\" with <value>\n    When the user views the leaderboard\n    Then their leaderboard rank is their <rank>\n\n    Examples:\n      | value     | rank       |\n      | rowNumber | row number |\n      | denseRank | dense rank |\n      | rank      | rank       |\n\n  @minutia\n  Scenario Outline: The max number of leaderboard rows displayed can be configured but defaults to 10\n    Given a leaderboard has prop \"max-rows\" with <value>\n    And the leaderboard has <resultCount>\n    When the user views the leaderboard\n    Then they see <number> rows\n\n    Examples:\n      | value | resultCount | number |\n      |       |          10 |     10 |\n      |     5 |          10 |      5 |\n      |     3 |           1 |      1 |\n      |    25 |          15 |     15 |\n\n  @minutiae @ui\n  Scenario: Leaderboards with no results show an empty state\n    Given a leaderboard has no results\n    When the user views the leaderboard\n    Then an empty state is dislayed\n    And they see an image of a leaderboard\n    And below they see \"View your rank in the leaderboard\"\n    And below they see \"Be the first to refer a friend and reach the top of the leaderboard\"\n    And the text is center aligned\n\n  @minutiae @ui\n  Scenario: A custom empty state can be provided\n    Given a leaderboard has no results\n    When the user views the leaderboard\n    Then the contents of the \"empty\" slot are displayed\n\n  @minutiae @ui\n  Scenario: User is on Essentials plan\n    Given the user has an Essentials plan\n    When they view the leaderboard\n    Then a message telling them to upgrade their plan appears:\n      \"\"\"\n      Contact Support to upgrade your plan and start leveraging\n                gamification in your program.\n      \"\"\"\n    And an empty table image is displayed\n\n  @minutiae @ui\n  Scenario: Leaderboard headings can be customized\n    Given a leaderboard\n    And it has the following props\n      | prop         | value          |\n      | rankheading  | Place          |\n      | usersheading | Customer       |\n      | statsheading | Referral Count |\n      | show-rank    | true           |\n    When the user views the leaderboard\n    Then they see the following columns with headings\n      | column | heading        |\n      | rank   | Place          |\n      | user   | Customer       |\n      | stat   | Referral Count |\n\n  @motivating @ui\n  Scenario Outline: Leaderboard rank can be hidden or shown\n    Given a leaderboard\n    And it has prop \"show-rank\" with <propValue>\n    When the user views the leaderboard\n    Then they <maySee> the rank column\n\n    Examples:\n      | propValue | maySee    |\n      | true      | see       |\n      | false     | don't see |\n      |           | don't see |\n\n    Scenario Outline: Users names can be hidden or shown\n    Given a leaderboard\n    And it has prop \"hide-names\" with <propValue>\n    When the user views the leaderboard\n    Then they <maySee> the referrer column\n\n    Examples:\n      | propValue | maySee    |\n      | true      | don't see |\n      | false     | see       |\n      |           | see       |\n\n  @motivating @ui\n  Scenario: Users in the top 10 of the leaderboard results see their leaderboard row highlighted\n    Given a user in the top 10 of the leaderboard results\n    When they view the leaderboard\n    Then they see the row with their name highlighted with brand colour\n\n  @motivating @ui\n  Scenario Outline: Users not in the top 10 leaderboard results can see their progress at the bottom of the leaderboard\n    Given a user <mayHave> completed actions counted by the leaderboard\n    And they are not in the top 10 leaderboard results\n    And the leaderboard has prop \"show-user\" with <value>\n    When they view the leaderboard\n    Then they <maySee> \"...\" under the top 10 leaderboard results\n    And under \"...\" they <maySee> a row highlighted with brand colour\n    And they <maySee> their name\n    And they <maySee> their leaderboard value\n    And they <maySeeRank>\n\n    Examples:\n      | mayHave | value | maySee    | maySeeRank           |\n      | has     | true  | see       | see their rank       |\n      | hasn't  | true  | see       | don't see their rank |\n      | N/A     | false | don't see | don't see their rank |\n      | hasn't  |       | see       | don't see their rank |\n\n  @minutiae\n  Scenario: Users without names are displayed as an \"Anonymous User\"\n    Given a user\n    And they do not have a first name\n    And they do not have a last initial\n    When they view the leaderboard\n    Then they see the user displayed as \"Anonymous User\"\n\n  @minutiae\n  Scenario Outline: If a user only has a first or last name, then only that is displayed\n    Given a user\n    And they only have a <name>\n    When they view the leaderboard\n    Then they only see their <name>\n\n    Examples:\n      | name      |\n      | firstName |\n      | lastName  |\n";
@@ -13623,6 +13640,13 @@ const SimpleTabs = () => (index.h("div", { style: { maxWidth: "700px", margin: "
         <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>
       </sqm-tabs>
     ` }));
+const CustomColor$1 = () => (index.h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
+     <sqm-tabs text-color="red">
+        <sqm-tab header="General">This is the general tab</sqm-tab>
+        <sqm-tab header="Custom">This is the custom tab</sqm-tab>
+        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>
+      </sqm-tabs>
+    ` }));
 const ManyTabs = () => (index.h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
      <sqm-tabs>
         <sqm-tab header="General">This is the general tab</sqm-tab>
@@ -14104,6 +14128,7 @@ const Tabs = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': Tabs_stories,
   SimpleTabs: SimpleTabs,
+  CustomColor: CustomColor$1,
   ManyTabs: ManyTabs,
   SingleTab: SingleTab,
   ReferralProgram: ReferralProgram,
@@ -14526,7 +14551,7 @@ const InAContainer = () => {
   return (index.h("div", { style: containerStyles },
     index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, defaultProps$j))));
 };
-const CustomColor$1 = () => {
+const CustomColor$2 = () => {
   return (index.h("div", { style: containerStyles },
     index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, { ...defaultProps$j, color: "blue" }))));
 };
@@ -14536,7 +14561,7 @@ const CloseButton = /*#__PURE__*/Object.freeze({
   'default': CloseButton_stories,
   Default: Default$l,
   InAContainer: InAContainer,
-  CustomColor: CustomColor$1
+  CustomColor: CustomColor$2
 });
 
 // ! IMPORTANT: These objects cannot be used as default values for component props

package/dist/cjs/sqm-tabs.cjs.entry.js

@@ -9,7 +9,7 @@ const utils = require('./utils-6847bc06.js');
 const reRender = require('./re-render-b324deab.js');
 const useChildElements = require('./useChildElements-1b35d945.js');
 
-const TabsView = ({ content, placement, }) => {
+const TabsView = ({ content, placement, textColor = "var(--sqm-text)", }) => {
   // Vertical padding for top & bottom placement, horizontal for left & right.
   const padding = !placement || placement === "top" || placement === "bottom"
     ? "var(--sl-spacing-x-large) 0;"
@@ -18,7 +18,12 @@ const TabsView = ({ content, placement, }) => {
     sl-tab-panel::part(base) {
       padding: ${padding};
     }
+
+    sl-tab::part(base) {
+      color: ${textColor};
+    }
   `;
+  console.log("text color is ", textColor);
   return (index.h(index.Host, null,
     index.h("style", { type: "text/css" }, vanillaStyle),
     index.h("sl-tab-group", { placement: placement }, content.tabs.map((tab) => {
@@ -29,7 +34,7 @@ const TabsView = ({ content, placement, }) => {
             index.h("slot", { name: slotName }))));
       }
       return [
-        index.h("sl-tab", { slot: "nav", panel: slotName, id: tab.getAttribute("id") || slotName }, tab.getAttribute("header")),
+        index.h("sl-tab", { slot: "nav", panel: slotName, part: "tab", id: tab.getAttribute("id") || slotName }, tab.getAttribute("header")),
         index.h("sl-tab-panel", { name: slotName },
           index.h("slot", { name: slotName })),
       ];
@@ -91,8 +96,8 @@ const Tabs = class {
   disconnectedCallback() { }
   render() {
     const { content } = useTabs();
-    const { placement } = utils.getProps(this);
-    return (index.h(TabsView, { placement: placement, content: content }, index.h("slot", null)));
+    const { placement, textColor } = utils.getProps(this);
+    return (index.h(TabsView, { placement: placement, content: content, textColor: textColor }, index.h("slot", null)));
   }
 };
 

package/dist/collection/components/sqm-big-stat/BigStat.stories.js

@@ -74,6 +74,10 @@ export const InvalidStatValue = () => {
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
+export const CustomStyles = () => {
+  return (h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
+    h("p", null, "Giftcards Earned")));
+};
 export const MultipleStats = () => {
   return (h("sqm-stat-container", { space: "xxx-large", display: "flex" },
     h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/referralsCount" },
@@ -86,3 +90,12 @@ export const MultipleStats = () => {
       h("sqm-text", null,
         h("p", null, "Points Balance")))));
 };
+export const MultipleStatsWithCustomBranding = () => {
+  return (h("sqm-stat-container", { space: "xxx-large", display: "grid", alignment: "center", "hide-border": "true" },
+    h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
+      h("p", null, "Giftcards Earned")),
+    h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
+      h("p", null, "Referrals")),
+    h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
+      h("p", null, "Points balance"))));
+};

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

@@ -1,13 +1,13 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 export function BigStatView(props) {
-  const { statvalue, flexReverse, alignment } = props;
-  // Dependent on props, not feasiable to move out
+  const { statvalue, flexReverse, alignment, statTextColor, statFontSize, descriptionTextColor, descriptionFontSize, statFontWeight, } = props;
+  // Dependent on props, not feasible to move out
   const style = {
     Container: {
       display: "flex",
-      height: "inherit",
-      "justify-content": "space-between",
+      // height: "inherit",
+      // "justify-content": "space-between",
       "flex-direction": `${flexReverse ? "column-reverse" : "column"}`,
       "align-items": `${alignment === "left"
         ? "flex-start"
@@ -16,14 +16,22 @@ export function BigStatView(props) {
           : "center"}`,
     },
     Stat: {
-      "font-size": "var(--sl-font-size-x-large)",
+      "font-size": statFontSize
+        ? `${statFontSize}px`
+        : "var(--sl-font-size-xx-large)",
       "text-align": alignment,
+      color: statTextColor || "var(--sqm-text)",
+      lineHeight: "35px",
+      fontWeight: statFontWeight || "var(--sl-font-weight-normal)",
     },
     Description: {
-      "font-size": "var(--sl-font-size-small)",
+      "font-size": descriptionFontSize
+        ? `${descriptionFontSize}px`
+        : "var(--sl-font-size-small)",
       "font-weight": "var(--sl-font-weight-normal)",
-      color: "var(--sqm-text-subdued)",
+      color: descriptionTextColor || "var(--sqm-text)",
       "text-align": alignment,
+      lineHeight: "20px",
     },
   };
   const sheet = createStyleSheet(style);

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

@@ -23,8 +23,19 @@ export class BigStat {
      *
      * @uiName Flex reverse
      * @default
+     * @uiGroup Style
      */
     this.flexReverse = false;
+    /**
+     * Controls the alignment of the flexbox
+     *
+     * @uiName Alignment
+     * @uiType string
+     * @uiEnum ["left", "right", "center"]
+     * @uiEnumNames ["Left", "Right", "Center"]
+     * @uiGroup Style
+     */
+    this.alignment = "center";
     this.ignored = true;
     withHooks(this);
   }
@@ -86,6 +97,9 @@ export class BigStat {
           }, {
             "text": undefined,
             "name": "default"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Controls the order of the stat value & description column"
       },
@@ -116,11 +130,15 @@ export class BigStat {
           }, {
             "text": "[\"Left\", \"Right\", \"Center\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Controls the alignment of the flexbox"
       },
       "attribute": "alignment",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"center\""
     },
     "programId": {
       "type": "string",
@@ -145,12 +163,154 @@ export class BigStat {
       "attribute": "program-id",
       "reflect": false
     },
+    "statTextColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Stat text color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "color",
+            "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Color of the stat text"
+      },
+      "attribute": "stat-text-color",
+      "reflect": false
+    },
+    "statFontSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Stat font size",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Font size of the stat text in pixels"
+      },
+      "attribute": "stat-font-size",
+      "reflect": false
+    },
+    "statFontWeight": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Stat font size",
+            "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }, {
+            "text": "[100, 200, 300, 400, 500, 600, 700, 800, 900]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Thin\", \"Extra Light\", \"Light\", \"Normal\", \"Medium\", \"Semi Bold\", \"Bold\", \"Extra Bold\", \"Heavy\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": "Font size of the stat text in pixels"
+      },
+      "attribute": "stat-font-weight",
+      "reflect": false
+    },
+    "descriptionTextColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Description text color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "color",
+            "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Color of the description text"
+      },
+      "attribute": "description-text-color",
+      "reflect": false
+    },
+    "descriptionFontSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Description font size",
+            "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Font size of the description text in pixels"
+      },
+      "attribute": "description-font-size",
+      "reflect": false
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<BigStatViewProps>",
-        "resolved": "{ loading?: boolean; value?: number; statvalue?: string; flexReverse?: boolean; alignment?: \"left\" | \"right\" | \"center\"; labelSlot?: VNode; }",
+        "resolved": "{ loading?: boolean; value?: number; statvalue?: string; flexReverse?: boolean; alignment?: \"left\" | \"right\" | \"center\"; labelSlot?: VNode; statTextColor?: string; statFontSize?: number; descriptionTextColor?: string; descriptionFontSize?: number; statFontWeight?: number; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -890,6 +890,11 @@ export function useBigStat(props) {
         flexReverse,
         alignment,
         loading: false,
+        statTextColor: props.statTextColor,
+        statFontSize: props.statFontSize,
+        descriptionTextColor: props.descriptionTextColor,
+        descriptionFontSize: props.descriptionFontSize,
+        statFontWeight: props.statFontWeight,
       },
       label: "BAD PROP TYPE",
     };
@@ -919,6 +924,11 @@ export function useBigStat(props) {
       loading: stat === null || stat === void 0 ? void 0 : stat.loading,
       flexReverse,
       alignment,
+      statTextColor: props.statTextColor,
+      statFontSize: props.statFontSize,
+      descriptionTextColor: props.descriptionTextColor,
+      descriptionFontSize: props.descriptionFontSize,
+      statFontWeight: props.statFontWeight,
     },
     label,
   };

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

@@ -13,8 +13,12 @@ export function useDemoBigStat(props) {
         value: 0,
         statvalue: "!!!",
         loading: false,
-        flexReverse: false,
-        alignment: "center",
+        flexReverse: props.flexReverse,
+        alignment: props.alignment,
+        statTextColor: props.statTextColor,
+        statFontSize: props.statFontSize,
+        descriptionTextColor: props.descriptionTextColor,
+        descriptionFontSize: props.descriptionFontSize,
       },
       label: "BAD PROP TYPE",
     };
@@ -26,8 +30,13 @@ export function useDemoBigStat(props) {
     props: deepmerge({
       statvalue: "12345",
       value: 0,
-      flexReverse: false,
-      alignment: "center",
+      flexReverse: props.flexReverse,
+      alignment: props.alignment,
+      statTextColor: props.statTextColor,
+      statFontSize: props.statFontSize,
+      descriptionTextColor: props.descriptionTextColor,
+      descriptionFontSize: props.descriptionFontSize,
+      statFontWeight: props.statFontWeight,
     }, props.demoData || {}, { arrayMerge: (_, a) => a }),
     label: label !== null && label !== void 0 ? label : "Demo Label",
   };

package/dist/collection/components/sqm-coupon-code/sqm-coupon-code-view.js

@@ -2,24 +2,24 @@ import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 import { HostBlock } from "../../global/mixins";
 import { CopyTextView } from "../views/copy-text-view";
-const style = {
-  HostBlock: HostBlock,
-  couponCodeLabel: {
-    margin: "var(--sl-spacing-x-small) 0",
-    color: "var(--sqm-text-subdued)",
-    fontSize: "var(--sl-font-size-small)",
-  },
-};
-const vanillaStyle = `
+export function CouponCodeView(props) {
+  const error = !props.loading && props.error;
+  const style = {
+    HostBlock: HostBlock,
+    couponCodeLabel: {
+      margin: "var(--sl-spacing-x-small) 0",
+      color: props.textColor || "var(--sqm-text-subdued)",
+      fontSize: "var(--sl-font-size-small)",
+    },
+  };
+  const vanillaStyle = `
   :host{
     display: block;   
     width: 100%;
   }
 `;
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-export function CouponCodeView(props) {
-  const error = !props.loading && props.error;
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
   return (h("div", null,
     h("style", { type: "text/css" },
       styleString,

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

@@ -8,7 +8,9 @@ export function ProgramExplainerStepView(props) {
       width: "100%",
       padding: "var(--sl-spacing-x-large)",
       lineHeight: "var(--sl-line-height-dense)",
-      borderRadius: props.borderRadius || "var(--sl-border-radius-large)",
+      borderRadius: props.borderRadius
+        ? `${props.borderRadius}px`
+        : "var(--sl-border-radius-large)",
       color: props.textColor || "var(--sqm-text)",
       background: props.backgroundColor || "var(--sl-color-primary-50)",
       "@media (max-width: 499px)": {

package/dist/collection/components/sqm-program-explainer-step/sqm-program-explainer-step.js

@@ -115,11 +115,11 @@ export class ProgramExplainerStep {
       "reflect": false
     },
     "borderRadius": {
-      "type": "string",
+      "type": "number",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "number",
+        "resolved": "number",
         "references": {}
       },
       "required": false,
@@ -132,7 +132,7 @@ export class ProgramExplainerStep {
             "text": "number",
             "name": "type"
           }],
-        "text": ""
+        "text": "Amount in pixels"
       },
       "attribute": "border-radius",
       "reflect": false

package/dist/collection/components/sqm-share-button/ShareButton.stories.js

@@ -44,13 +44,15 @@ export const TextStyleWithoutIcon = () => {
   const props = { medium: "facebook", type: "text", hideicon: true };
   return h(ShareButtonView, Object.assign({}, props), "Share");
 };
-export const WithCustomColors = () => {
+export const WithCustomColorsAndBranding = () => {
   const props = {
     medium: "facebook",
     type: "text",
     backgroundcolor: "red",
     textcolor: "yellow",
     iconslot: "prefix",
+    border: "2px solid yellow",
+    borderradius: 30,
   };
   return h(ShareButtonView, Object.assign({}, props), "Facebook");
 };

package/dist/collection/components/sqm-share-button/sqm-share-button-view.js

@@ -24,15 +24,30 @@ const style = {
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
+// TODO: Figure out hover and active states
+// *::part(base):hover {
+// 	border-color: ${
+//     props.backgroundcolor
+//       ? props.backgroundcolor
+//       : props.medium
+//       ? medium[props.medium].color
+//       : ""
+//   }!important;
+// }
+// *::part(base):focus {
+// 	border-color: ${
+//     props.backgroundcolor
+//       ? props.backgroundcolor
+//       : props.medium
+//       ? medium[props.medium].color
+//       : ""
+//   }!important;
+// }
 export function ShareButtonView(props, children) {
   const vanillaStyle = `
-	*::part(base) {
-	border: none;
-			--sl-focus-ring-color-primary: ${props.backgroundcolor
-    ? props.backgroundcolor
-    : props.medium
-      ? medium[props.medium].color
-      : ""}80!important;
+	sl-button::part(base) {
+	  border: ${props.border || "none"};
+	
 
 	background: ${props.backgroundcolor
     ? props.backgroundcolor
@@ -47,21 +62,7 @@ export function ShareButtonView(props, children) {
 	border-radius: ${props.borderradius ? props.borderradius + "px" : ""};
 	}
 
-	*::part(base):hover {
-		border-color: ${props.backgroundcolor
-    ? props.backgroundcolor
-    : props.medium
-      ? medium[props.medium].color
-      : ""}D1!important;
-	}
 
-	*::part(base):focus {
-		border-color: ${props.backgroundcolor
-    ? props.backgroundcolor
-    : props.medium
-      ? medium[props.medium].color
-      : ""}D1!important;
-	}
 
 	*::part(label) {
 		position: relative;
@@ -71,7 +72,7 @@ export function ShareButtonView(props, children) {
   return props.hide ? (h(Host, { style: { display: "none" } })) : (h("div", null,
     h("style", { type: "text/css" }, styleString),
     h("style", { type: "text/css" }, vanillaStyle),
-    h("sl-button", { class: sheet.classes.buttonStyle, target: props.openInSameTab ? "_self" : "_blank", loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: !props.isPlainLink ? props.onClick : undefined, href: props.isPlainLink ? props.messageLink : undefined, exportparts: `base: ${props.type}sharebutton-base` },
+    h("sl-button", { class: sheet.classes.buttonStyle, target: props.openInSameTab ? "_self" : "_blank", loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: !props.isPlainLink ? props.onClick : undefined, href: props.isPlainLink ? props.messageLink : undefined, exportparts: `base: ${props.type}button-base` },
       !props.hideicon && (h("sl-icon", { slot: props.iconslot || "prefix", name: props.icon ? props.icon : medium[props.medium].icon, exportparts: "base: icon" })),
       !props.hidetext && children)));
 }