@saasquatch/mint-components 1.5.0-5 → 1.5.0-9

package/dist/cjs/{sqm-program-explainer-step-view-6a01cda0.js → sqm-program-explainer-step-view-f8e1cd12.js}

@@ -9,19 +9,19 @@ function ProgramExplainerStepView(props) {
       display: "flex",
       flexDirection: "column",
       width: "100%",
-      height: "444px",
+      minHeight: "444px",
       color: props.color,
       background: props.background,
       padding: "24px",
-      "@media (max-width: 1024px)": {
+      "@media (max-width: 768px)": {
         flexDirection: "row",
         width: "auto",
-        height: "auto",
+        minHeight: "auto",
       },
     },
     Logo: {},
     Text: {
-      "@media (max-width: 1024px)": {
+      "@media (max-width: 768px)": {
         marginLeft: "24px",
       },
     },
@@ -31,7 +31,7 @@ function ProgramExplainerStepView(props) {
       textTransform: "uppercase",
       lineHeight: "24px",
       marginTop: "24px",
-      "@media (max-width: 1024px)": {
+      "@media (max-width: 768px)": {
         margin: "0",
       },
     },
@@ -39,7 +39,7 @@ function ProgramExplainerStepView(props) {
       fontSize: "16px",
       lineHeight: "28px",
       marginTop: "12px",
-      "@media (max-width: 1024px)": {
+      "@media (max-width: 768px)": {
         marginTop: "8px",
       },
     },
@@ -48,8 +48,20 @@ function ProgramExplainerStepView(props) {
   const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
   const styleString = sheet.toString();
   console.log(props);
+  const vanillaStyle = `
+  :host{
+  display: flex;
+    width: 100%;
+  }
+  @media (max-width: 768px) {
+    :host{
+      display: block;
+    }
+  }`;
   return (index.h("div", { class: sheet.classes.Container },
-    index.h("style", { type: "text/css" }, styleString),
+    index.h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
     index.h("div", { class: sheet.classes.Logo },
       index.h("div", { style: {
           width: "64px",

package/dist/cjs/sqm-program-explainer-step.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const utils = require('./utils-95e5317c.js');
-const sqmProgramExplainerStepView = require('./sqm-program-explainer-step-view-6a01cda0.js');
+const sqmProgramExplainerStepView = require('./sqm-program-explainer-step-view-f8e1cd12.js');
 
 const ProgramExplainerStep = class {
   constructor(hostRef) {

package/dist/cjs/{sqm-program-explainer-view-8a4af972.js → sqm-program-explainer-view-512737f3.js}

@@ -7,14 +7,20 @@ function ProgramExplainerView(props, children) {
   const style = {
     Container: {
       display: "flex",
-      "@media (max-width: 1024px)": {
+      flexDirection: "row",
+      "@media (max-width: 768px)": {
         flexDirection: "column",
       },
     },
+    Header: {
+      padding: "24px",
+      color: props.headerColor,
+      background: props.headerBackground,
+    },
     Card: {
       padding: "24px",
-      color: props.color,
-      background: props.background,
+      color: props.cardColor,
+      background: props.cardBackground,
     },
     Title: {
       fontSize: "28px",
@@ -34,12 +40,12 @@ function ProgramExplainerView(props, children) {
   console.log(props);
   return (index.h("div", null,
     index.h("style", { type: "text/css" }, styleString),
-    index.h("div", { class: sheet.classes.Card },
+    index.h("div", { class: sheet.classes.Header },
       index.h("div", { class: sheet.classes.Title }, props.header)),
     index.h("div", { class: sheet.classes.Container }, children),
     index.h("div", { class: sheet.classes.Card },
       index.h("div", { class: sheet.classes.Title }, props.cardTitle),
-      index.h("div", { class: sheet.classes.Description }, props.description))));
+      index.h("div", { class: sheet.classes.Description }, props.cardDescription))));
 }
 
 exports.ProgramExplainerView = ProgramExplainerView;

package/dist/cjs/sqm-program-explainer.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const utils = require('./utils-95e5317c.js');
-const sqmProgramExplainerView = require('./sqm-program-explainer-view-8a4af972.js');
+const sqmProgramExplainerView = require('./sqm-program-explainer-view-512737f3.js');
 
 const ProgramExplainer = class {
   constructor(hostRef) {

package/dist/collection/collection-manifest.json

@@ -3,7 +3,6 @@
     "./components/sqm-password-field/sqm-password-field.js",
     "./components/sqm-referral-table/sqm-referral-table.js",
     "./components/sqm-reward-exchange-list/sqm-reward-exchange-list.js",
-    "./components/sqm-rewards-table/sqm-rewards-table.js",
     "./components/sqm-asset-card/sqm-asset-card.js",
     "./components/sqm-big-stat/sqm-big-stat.js",
     "./components/sqm-brand/sqm-brand.js",
@@ -47,7 +46,15 @@
     "./components/sqm-referral-table/columns/sqm-referral-table-rewards-column.js",
     "./components/sqm-referral-table/columns/sqm-referral-table-status-column.js",
     "./components/sqm-referral-table/columns/sqm-referral-table-user-column.js",
-    "./components/sqm-rewards-table/sqm-rewards-table-column.js",
+    "./components/sqm-rewards-table/sqm-rewards-table.js",
+    "./components/sqm-rewards-table/cells/sqm-rewards-table-date-cell.js",
+    "./components/sqm-rewards-table/cells/sqm-rewards-table-rewards-cell.js",
+    "./components/sqm-rewards-table/cells/sqm-rewards-table-source-cell.js",
+    "./components/sqm-rewards-table/cells/sqm-rewards-table-status-cell.js",
+    "./components/sqm-rewards-table/columns/sqm-rewards-table-date-column.js",
+    "./components/sqm-rewards-table/columns/sqm-rewards-table-reward-column.js",
+    "./components/sqm-rewards-table/columns/sqm-rewards-table-source-column.js",
+    "./components/sqm-rewards-table/columns/sqm-rewards-table-status-column.js",
     "./components/sqm-route/sqm-route.js",
     "./components/sqm-router/sqm-router.js",
     "./components/sqm-share-button/sqm-share-button.js",

package/dist/collection/components/sqm-brand/sqm-brand.js

@@ -5,8 +5,8 @@ import { buildFontsCssUrl } from "../../fonts/GoogleFonts";
 import { autoColorScaleCss } from "../sqm-stencilbook/AutoColor";
 /**
  *
- * @uiName Big Stat
- * @slot the description of the component
+ * @uiName Brand Container
+ * @slot Controls the brand color and font of Mint Components wrapped by the container.
  */
 export class BrandComponent {
   constructor() {

package/dist/collection/components/sqm-program-explainer/ProgramExplainer.stories.js

@@ -6,10 +6,12 @@ export default {
 };
 const props = {
   header: "Klip Rewards",
+  headerColor: "black",
+  headerBackground: "#F3F0EC",
   cardTitle: "Earn rewards with our loyalty program",
-  description: "Earn points by completing tasks like uploading your first video or sharing videos with friends. Use your points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America.",
-  color: "black",
-  background: "#F3F0EC",
+  cardDescription: "Earn points by completing tasks like uploading your first video or sharing videos with friends. Use your points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America.",
+  cardColor: "black",
+  cardBackground: "var(--sl-color-primary-100)",
 };
 const steps1 = {
   cardTitle: "Invite your friends to Klip",

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

@@ -5,14 +5,20 @@ export function ProgramExplainerView(props, children) {
   const style = {
     Container: {
       display: "flex",
-      "@media (max-width: 1024px)": {
+      flexDirection: "row",
+      "@media (max-width: 768px)": {
         flexDirection: "column",
       },
     },
+    Header: {
+      padding: "24px",
+      color: props.headerColor,
+      background: props.headerBackground,
+    },
     Card: {
       padding: "24px",
-      color: props.color,
-      background: props.background,
+      color: props.cardColor,
+      background: props.cardBackground,
     },
     Title: {
       fontSize: "28px",
@@ -32,10 +38,10 @@ export function ProgramExplainerView(props, children) {
   console.log(props);
   return (h("div", null,
     h("style", { type: "text/css" }, styleString),
-    h("div", { class: sheet.classes.Card },
+    h("div", { class: sheet.classes.Header },
       h("div", { class: sheet.classes.Title }, props.header)),
     h("div", { class: sheet.classes.Container }, children),
     h("div", { class: sheet.classes.Card },
       h("div", { class: sheet.classes.Title }, props.cardTitle),
-      h("div", { class: sheet.classes.Description }, props.description))));
+      h("div", { class: sheet.classes.Description }, props.cardDescription))));
 }

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

@@ -30,7 +30,7 @@ export class ProgramExplainer {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Header",
+            "text": "Header Text",
             "name": "uiName"
           }],
         "text": ""
@@ -38,6 +38,52 @@ export class ProgramExplainer {
       "attribute": "header",
       "reflect": false
     },
+    "headerColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Header Text Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "header-color",
+      "reflect": false
+    },
+    "headerBackground": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Header Background Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "header-background",
+      "reflect": false
+    },
     "cardTitle": {
       "type": "string",
       "mutable": false,
@@ -50,7 +96,7 @@ export class ProgramExplainer {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Title",
+            "text": "Card Title",
             "name": "uiName"
           }],
         "text": ""
@@ -58,7 +104,7 @@ export class ProgramExplainer {
       "attribute": "card-title",
       "reflect": false
     },
-    "description": {
+    "cardDescription": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -70,15 +116,15 @@ export class ProgramExplainer {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Description",
+            "text": "Card Description",
             "name": "uiName"
           }],
         "text": ""
       },
-      "attribute": "description",
+      "attribute": "card-description",
       "reflect": false
     },
-    "color": {
+    "cardColor": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -90,7 +136,7 @@ export class ProgramExplainer {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Color",
+            "text": "Card Text Color",
             "name": "uiName"
           }, {
             "text": "color",
@@ -98,10 +144,10 @@ export class ProgramExplainer {
           }],
         "text": ""
       },
-      "attribute": "color",
+      "attribute": "card-color",
       "reflect": false
     },
-    "background": {
+    "cardBackground": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -113,7 +159,7 @@ export class ProgramExplainer {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Background",
+            "text": "Card Background Color",
             "name": "uiName"
           }, {
             "text": "color",
@@ -121,7 +167,7 @@ export class ProgramExplainer {
           }],
         "text": ""
       },
-      "attribute": "background",
+      "attribute": "card-background",
       "reflect": false
     }
   }; }

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

@@ -13,10 +13,3 @@ export const Example1 = () => {
   };
   return h(ProgramExplainerStepView, Object.assign({}, props));
 };
-// export const ActiveItem = () => {
-//   const props = {
-//     title: "hello",
-//     description: "world",
-//   };
-//   return <ProgramExplainerStepView {...props} />;
-// };

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

@@ -7,19 +7,19 @@ export function ProgramExplainerStepView(props) {
       display: "flex",
       flexDirection: "column",
       width: "100%",
-      height: "444px",
+      minHeight: "444px",
       color: props.color,
       background: props.background,
       padding: "24px",
-      "@media (max-width: 1024px)": {
+      "@media (max-width: 768px)": {
         flexDirection: "row",
         width: "auto",
-        height: "auto",
+        minHeight: "auto",
       },
     },
     Logo: {},
     Text: {
-      "@media (max-width: 1024px)": {
+      "@media (max-width: 768px)": {
         marginLeft: "24px",
       },
     },
@@ -29,7 +29,7 @@ export function ProgramExplainerStepView(props) {
       textTransform: "uppercase",
       lineHeight: "24px",
       marginTop: "24px",
-      "@media (max-width: 1024px)": {
+      "@media (max-width: 768px)": {
         margin: "0",
       },
     },
@@ -37,7 +37,7 @@ export function ProgramExplainerStepView(props) {
       fontSize: "16px",
       lineHeight: "28px",
       marginTop: "12px",
-      "@media (max-width: 1024px)": {
+      "@media (max-width: 768px)": {
         marginTop: "8px",
       },
     },
@@ -46,8 +46,20 @@ export function ProgramExplainerStepView(props) {
   const sheet = jss.createStyleSheet(style);
   const styleString = sheet.toString();
   console.log(props);
+  const vanillaStyle = `
+  :host{
+  display: flex;
+    width: 100%;
+  }
+  @media (max-width: 768px) {
+    :host{
+      display: block;
+    }
+  }`;
   return (h("div", { class: sheet.classes.Container },
-    h("style", { type: "text/css" }, styleString),
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
     h("div", { class: sheet.classes.Logo },
       h("div", { style: {
           width: "64px",

package/dist/collection/components/sqm-referral-table/ReferralTable.stories.js

@@ -33,6 +33,7 @@ const baseReward = {
   dateScheduledFor: 1628146800000,
   dateExpires: 1629010800000,
   dateCancelled: 134400,
+  dateRedeemed: 0,
   fuelTankCode: "ABC",
   fuelTankType: "Code",
   currency: "null",

package/dist/collection/components/sqm-referral-table/ReferralTableCell.stories.js

@@ -33,6 +33,7 @@ const rewardsData = {
   dateScheduledFor: 1628146800000,
   dateExpires: 1629010800000,
   dateCancelled: 134400,
+  dateRedeemed: 0,
   fuelTankCode: "ABC",
   fuelTankType: "Code",
   currency: "null",

package/dist/collection/components/sqm-referral-table/ReferralTableRewardsCell.stories.js

@@ -13,6 +13,7 @@ const baseReward = {
   dateScheduledFor: getDays(),
   dateExpires: getMonths(),
   dateCancelled: 134400,
+  dateRedeemed: 0,
   fuelTankCode: "ABC",
   fuelTankType: "Code",
   currency: "null",

package/dist/collection/components/sqm-reward-exchange-list/RewardExchangeListData.js

@@ -2,6 +2,18 @@ const baseResponse = (data, stage = "chooseReward", selectedItem = null, selecte
   states: {
     content: {
       text: {
+        continueText: "Continue",
+        cancelText: "Cancel",
+        continueToConfirmationText: "Continue to confirmation",
+        backText: "Back",
+        redeemText: "Redeem",
+        doneText: "Done",
+        chooseRewardTitle: "Choose reward",
+        chooseAmountTitle: "Amount",
+        confirmationTitle: "Confirm",
+        redeemTitle: "Confirm and redeem",
+        rewardRedeemedText: "Reward redeemed",
+        queryError: "An error occured trying to redeem this reward. Please try again.",
         notAvailableError: "{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {Not enough points} other {Not available} }",
       },
     },

package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.js

@@ -308,6 +308,7 @@ export function RewardExchangeView(props) {
             defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
           }, {
             unavailableReason: step.unavailableReasonCode,
+            sourceUnit: item.sourceUnit,
             sourceValue: step.prettySourceValue || item.prettySourceMinValue,
           }))))));
     })));
@@ -370,6 +371,7 @@ export function RewardExchangeView(props) {
                 }, {
                   unavailableReason: item.unavailableReason ||
                     item.unavailableReasonCode,
+                  sourceUnit: item.sourceUnit,
                   sourceValue: item.prettySourceValue ||
                     item.prettySourceMinValue,
                 }))))))));

package/dist/collection/components/sqm-rewards-table/UseRewardsTable.stories.js

@@ -49,5 +49,8 @@ export const RewardsTableNoProgram = createHookStory(() => {
     ignored: true,
   };
   return (h("sqm-rewards-table", null,
-    h("sqm-rewards-table-column", null)));
+    h("sqm-rewards-table-reward-column", null),
+    h("sqm-rewards-table-source-column", null),
+    h("sqm-rewards-table-status-column", null),
+    h("sqm-rewards-table-date-column", null)));
 });

package/dist/collection/components/sqm-rewards-table/cells/sqm-rewards-table-date-cell.js

@@ -0,0 +1,43 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import { DateTime } from "luxon";
+import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
+export class RewardTableDateCell {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    var _a;
+    // needs hook to use locale
+    const date = !this.date
+      ? "-"
+      : (_a = DateTime.fromMillis(this.date)) === null || _a === void 0 ? void 0 : _a.toLocaleString(DateTime.DATE_MED);
+    return h(TextSpanView, { type: "p" }, date);
+  }
+  static get is() { return "sqm-rewards-table-date-cell"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "date": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "date",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}