@saasquatch/mint-components 1.6.8-8 → 1.6.8

package/dist/collection/components/sqm-portal-profile/usePortalProfile.js

@@ -1,39 +1,39 @@
 import { useQuery, useMutation, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { gql } from "graphql-request";
 import { useEffect, useState } from "@saasquatch/universal-hooks";
-const GET_USER = gql `
-  query {
-    viewer {
-      ... on User {
-        id
-        accountId
-        firstName
-        lastName
-        email
-        countryCode
-      }
-    }
-  }
+const GET_USER = gql `
+  query {
+    viewer {
+      ... on User {
+        id
+        accountId
+        firstName
+        lastName
+        email
+        countryCode
+      }
+    }
+  }
 `;
-const UPSERT_USER = gql `
-  mutation (
-    $id: String!
-    $accountId: String!
-    $firstName: String!
-    $lastName: String!
-  ) {
-    upsertUser(
-      userInput: {
-        id: $id
-        accountId: $accountId
-        firstName: $firstName
-        lastName: $lastName
-      }
-    ) {
-      firstName
-      lastName
-    }
-  }
+const UPSERT_USER = gql `
+  mutation (
+    $id: String!
+    $accountId: String!
+    $firstName: String!
+    $lastName: String!
+  ) {
+    upsertUser(
+      userInput: {
+        id: $id
+        accountId: $accountId
+        firstName: $firstName
+        lastName: $lastName
+      }
+    ) {
+      firstName
+      lastName
+    }
+  }
 `;
 // view doesn't tolerate undefined, even when we're loading
 const defaultFormState = {

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

@@ -13,20 +13,20 @@ const style = {
   ButtonsContainer: AuthButtonsContainer,
   ErrorStyle: ErrorStyles,
 };
-const vanillaStyle = `
-sqm-portal-register {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-
-:host{
-  display: block;
-}
-
-:host([hidden]) {
-  display: none;
-}
+const vanillaStyle = `
+sqm-portal-register {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+
+:host{
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
 `;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -36,7 +36,7 @@ export function PortalRegisterView(props) {
   if (states.error) {
     window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
   }
-  return (h("div", { class: sheet.classes.Wrapper, part: "sqm-portal-register-container" },
+  return (h("div", { class: sheet.classes.Wrapper },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

package/dist/collection/components/sqm-portal-registration-form/sqm-portal-registration-form-view.js

@@ -13,20 +13,20 @@ const style = {
   ButtonsContainer: AuthButtonsContainer,
   ErrorStyle: ErrorStyles,
 };
-const vanillaStyle = `
-sqm-portal-register {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-
-:host{
-  display: block;
-}
-
-:host([hidden]) {
-  display: none;
-}
+const vanillaStyle = `
+sqm-portal-register {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+
+:host{
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
 `;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -36,7 +36,7 @@ export function PortalRegistrationFormView(props) {
   if (states.error) {
     window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
   }
-  return (h("div", { class: sheet.classes.Wrapper, part: "sqm-portal-registration-container" },
+  return (h("div", { class: sheet.classes.Wrapper },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

package/dist/collection/components/sqm-portal-registration-form/usePortalRegistrationForm.js

@@ -4,18 +4,18 @@ import { navigation, useQuery, useRegisterViaRegistrationFormMutation, } from "@
 import { AsYouType } from "libphonenumber-js";
 import { gql } from "graphql-request";
 import { useRegistrationFormState, } from "./useRegistrationFormState";
-const RegistrationFormQuery = gql `
-  query RegistrationFormQuery($key: String!) {
-    form(key: $key) {
-      key
-      type
-      initialData {
-        initialData
-        isEnabled
-        isEnabledErrorMessage
-      }
-    }
-  }
+const RegistrationFormQuery = gql `
+  query RegistrationFormQuery($key: String!) {
+    form(key: $key) {
+      key
+      type
+      initialData {
+        initialData
+        isEnabled
+        isEnabledErrorMessage
+      }
+    }
+  }
 `;
 export function usePortalRegistrationForm(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;

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

@@ -25,13 +25,13 @@ const style = {
     width: "100%",
   },
 };
-const vanillaStyle = `
-:host {
-  display: block;
-}
-:host([hidden]): {
-  display: none;
-}
+const vanillaStyle = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
 `;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();

package/dist/collection/components/sqm-portal-verify-email/sqm-portal-verify-email-view.js

@@ -9,20 +9,20 @@ const style = {
     width: "100%",
   },
 };
-const vanillaStyle = `
-:host {
-  display: block;
-}
-:host([hidden]): {
-  display: none;
-}
+const vanillaStyle = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
 `;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PortalVerifyEmailView(props) {
   const { states, data, callbacks } = props;
   if (states.verified) {
-    return (h("div", { class: sheet.classes.Wrapper, part: "sqm-portal-verify-email-container" },
+    return (h("div", { class: sheet.classes.Wrapper },
       h("style", { type: "text/css" },
         vanillaStyle,
         styleString),

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

@@ -24,21 +24,21 @@ export function ProgramExplainerView(props, children) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  const vanillaStyle = `
-  ::slotted(*){
-    display: flex;
-    width: 100%;
-  }
-  @media (max-width: 499px) {
-    ::slotted(*){
-      display: block;
-    }
+  const vanillaStyle = `
+  ::slotted(*){
+    display: flex;
+    width: 100%;
+  }
+  @media (max-width: 499px) {
+    ::slotted(*){
+      display: block;
+    }
   }`;
-  return (h("div", { class: sheet.classes.Container, part: "sqm-program-explainer-container" },
+  return (h("div", { class: sheet.classes.Container },
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
     h("div", { class: sheet.classes.Header },
-      h("div", { class: sheet.classes.Header, part: "sqm-program-explainer-header" }, props.header)),
-    h("div", { class: sheet.classes.Grid, part: "sqm-program-explainer-grid-container" }, children)));
+      h("div", { class: sheet.classes.Header }, props.header)),
+    h("div", { class: sheet.classes.Grid }, children)));
 }

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

@@ -51,21 +51,21 @@ export function ProgramExplainerStepView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  const vanillaStyle = `
-  :host{
-    display: flex;
-    width: 100%;
-  }
-  @media (max-width: 499px) {
-    :host{
-      display: block;
-    }
+  const vanillaStyle = `
+  :host{
+    display: flex;
+    width: 100%;
+  }
+  @media (max-width: 499px) {
+    :host{
+      display: block;
+    }
   }`;
-  return (h("div", { class: sheet.classes.Container, part: "sqm-program-explainer-step-container" },
+  return (h("div", { class: sheet.classes.Container },
     h("style", { type: "text/css" }, styleString),
-    h("div", null, props.imageUrl ? (h("img", { class: sheet.classes.Media, src: props.imageUrl, part: "sqm-program-explainer-step-media" })) : (h("div", { class: sheet.classes.Media, part: "sqm-program-explainer-step-media" },
+    h("div", null, props.imageUrl ? (h("img", { class: sheet.classes.Media, src: props.imageUrl })) : (h("div", { class: sheet.classes.Media },
       h("sl-icon", { name: props.icon })))),
     h("div", { class: sheet.classes.Text },
-      h("div", { class: sheet.classes.Header, part: "sqm-program-explainer-step-header" }, props.header),
-      h("div", { class: sheet.classes.Description, part: "sqm-program-explainer-step-description" }, props.description))));
+      h("div", { class: sheet.classes.Header }, props.header),
+      h("div", { class: sheet.classes.Description }, props.description))));
 }

package/dist/collection/components/sqm-referral-card/ReferralCard.stories.js

@@ -58,18 +58,6 @@ export const FlippedSlots = () => {
     timeline("right", 3),
     sharebutton("left")));
 };
-export const WithHeader = () => {
-  return (h("sqm-referral-card", null,
-    h("h3", { slot: "header" }, "Header slot content"),
-    timeline("right", 3),
-    sharebutton("left")));
-};
-export const WithFooter = () => {
-  return (h("sqm-referral-card", null,
-    timeline("right", 3),
-    sharebutton("left"),
-    h("sqm-portal-footer", { slot: "footer" })));
-};
 export const ReferralCardGeneric = () => {
   return (h("sqm-referral-card", { "vertical-alignment": "center" },
     h("sqm-portal-container", { slot: "left", gap: "x-small" },

package/dist/collection/components/sqm-referral-card/sqm-referral-card-view.js

@@ -2,20 +2,9 @@ import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 const style = {
   Container: {
-    border: "1px solid var(--sl-color-neutral-300)",
-    borderRadius: "var(--sl-border-radius-large)",
+    display: "flex",
     color: "var(--sl-color-neutral-900)",
     background: "var(--sl-color-neutral-0)",
-  },
-  EndContainer: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    padding: "0 var(--sl-spacing-large)",
-  },
-  ColumnContainer: {
-    "& p": { margin: "0" },
-    display: "flex",
     "& .left": {
       boxSizing: "border-box",
       width: "50%",
@@ -23,6 +12,8 @@ const style = {
       paddingRight: "var(--sl-spacing-medium)",
       "@media (max-width: 499px)": {
         width: "100%",
+        padding: "0",
+        marginBottom: "var(--sl-spacing-xx-large)",
       },
     },
     "& .right": {
@@ -32,8 +23,11 @@ const style = {
       paddingLeft: "var(--sl-spacing-medium)",
       "@media (max-width: 499px)": {
         width: "100%",
+        padding: "0",
       },
     },
+    border: "1px solid var(--sl-color-neutral-300)",
+    borderRadius: "var(--sl-border-radius-large)",
     "@media (max-width: 499px)": {
       flexDirection: "column",
       border: "none",
@@ -42,23 +36,21 @@ const style = {
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
-const vanillaStyle = `
-    :host{
-      display: block;   
-    }
+const vanillaStyle = `
+    :host{
+      display: block;   
+    }
   `;
 export function ReferralCardView(props) {
-  return (h("div", { part: "sqm-referral-card-container", class: sheet.classes.Container },
+  return (h("div", null,
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
-    h("div", { class: sheet.classes.EndContainer }, props.slots.header),
-    h("div", { part: "sqm-columns", class: sheet.classes.ColumnContainer },
+    h("div", { class: sheet.classes.Container },
       h("div", { class: "left", style: {
           alignSelf: props.verticalAlignment,
         } }, props.slots.left),
       h("div", { class: "right", style: {
           alignSelf: props.verticalAlignment,
-        } }, props.slots.right)),
-    h("div", { class: sheet.classes.EndContainer }, props.slots.footer)));
+        } }, props.slots.right))));
 }

package/dist/collection/components/sqm-referral-card/sqm-referral-card.js

@@ -5,7 +5,7 @@ import { ReferralCardView } from "./sqm-referral-card-view";
 /**
  * @uiName Referral Card
  * @exampleGroup Referrals
- * @slots [{"name":"left", "title":"Left Content"},{"name":"right", "title":"Right Content"},{"name":"header", "title":"Header Content"},{"name":"footer", "title":"Footer Content"}]
+ * @slots [{"name":"left", "title":"Left Content"},{"name":"right", "title":"Right Content"}]
  * @example Referral Card - <sqm-referral-card vertical-alignment="start"> <sqm-portal-container gap="large" slot="left" direction="column" display="grid" max-width="100%" padding="none" > <sqm-text >They’ll get a $50 credit towards a new account and you’ll get: </sqm-text> <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="Your friend purchases a Business plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Our sales team qualifies your friend as a good fit for our Enterprise plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases an Enterprise plan" icon="circle" > </sqm-timeline-entry> </sqm-timeline> </sqm-portal-container> <sqm-portal-container gap="large" slot="right" direction="column" display="grid" max-width="100%" padding="none" > <sqm-text>Choose how you want to share: </sqm-text> <sqm-text> <sub>Your unique referral link:</sub> <sqm-share-link tooltip-text="Copied to Clipboard" tooltip-lifespan="1000" > </sqm-share-link> </sqm-text> <sqm-portal-container gap="x-small" direction="column" display="grid" max-width="100%" padding="none" > <sqm-share-button medium="email" icon-slot="prefix" size="medium" type="default" > Share via email </sqm-share-button> <sqm-share-button medium="linkedin" icon-slot="prefix" size="medium" type="default" > Share on LinkedIn </sqm-share-button> <sqm-share-button medium="twitter" icon-slot="prefix" size="medium" type="default" > Share on Twitter </sqm-share-button> </sqm-portal-container> </sqm-portal-container> </sqm-referral-card>
  */
 export class ReferralCard {
@@ -25,8 +25,6 @@ export class ReferralCard {
     const slots = {
       left: h("slot", { name: "left" }),
       right: h("slot", { name: "right" }),
-      header: h("slot", { name: "header" }),
-      footer: h("slot", { name: "footer" }),
     };
     return (h(ReferralCardView, Object.assign({}, getProps(this), { slots: slots }),
       h("slot", null)));

package/dist/collection/components/sqm-referral-iframe/useReferralIframe.js

@@ -1,13 +1,13 @@
 import { useProgramId, useUserIdentity, useQuery, } from "@saasquatch/component-boilerplate";
 import { gql } from "graphql-request";
-const GET_USER_DETAILS = gql `
-  query getUser($programId: ID) {
-    viewer {
-      ... on User {
-        referralCode(programId: $programId)
-      }
-    }
-  }
+const GET_USER_DETAILS = gql `
+  query getUser($programId: ID) {
+    viewer {
+      ... on User {
+        referralCode(programId: $programId)
+      }
+    }
+  }
 `;
 export function useReferralIframe(props) {
   var _a;

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

@@ -121,7 +121,7 @@ export class ReferralTableRewardsCell {
         h("style", { type: "text/css" }, styleString),
         h("div", { slot: "summary", class: sheet.classes.DetailsContainer },
           h(TextSpanView, { type: "p" },
-            h("span", { part: "sqm-reward-cell-bold-text", class: sheet.classes.BoldText }, reward.prettyValue)),
+            h("span", { class: sheet.classes.BoldText }, reward.prettyValue)),
           h("div", { class: sheet.classes.BadgeContainer },
             state === "PENDING" && reward.dateScheduledFor ? (h("sl-badge", { class: slBadgeType === "primary"
                 ? sheet.classes.RedeemBadge
@@ -144,28 +144,28 @@ export class ReferralTableRewardsCell {
             h(TextSpanView, { type: "p" },
               this.rewardReceivedText,
               " ",
-              h("span", { class: sheet.classes.BoldText, part: "sqm-reward-cell-bold-text" }, DateTime.fromMillis(reward.dateGiven)
+              h("span", { class: sheet.classes.BoldText }, DateTime.fromMillis(reward.dateGiven)
                 .setLocale(luxonLocale(this.locale))
                 .toLocaleString(DateTime.DATE_MED))))),
           state === "EXPIRED" && reward.dateExpires && (h("div", null,
             h(TextSpanView, { type: "p" },
               statusText,
               " ",
-              h("span", { class: sheet.classes.BoldText, part: "sqm-reward-cell-bold-text" }, DateTime.fromMillis(reward.dateExpires)
+              h("span", { class: sheet.classes.BoldText }, DateTime.fromMillis(reward.dateExpires)
                 .setLocale(luxonLocale(this.locale))
                 .toLocaleString(DateTime.DATE_MED))))),
           state === "CANCELLED" && reward.dateCancelled && (h("div", null,
             h(TextSpanView, { type: "p" },
               statusText,
               " ",
-              h("span", { class: sheet.classes.BoldText, part: "sqm-reward-cell-bold-text" }, DateTime.fromMillis(reward.dateCancelled)
+              h("span", { class: sheet.classes.BoldText }, DateTime.fromMillis(reward.dateCancelled)
                 .setLocale(luxonLocale(this.locale))
                 .toLocaleString(DateTime.DATE_MED))))),
           state === "PENDING" && reward.dateScheduledFor && (h("div", null,
             h(TextSpanView, { type: "p" },
               statusText,
               " ",
-              h("span", { class: sheet.classes.BoldText, part: "sqm-reward-cell-bold-text" }, DateTime.fromMillis(reward.dateScheduledFor)
+              h("span", { class: sheet.classes.BoldText }, DateTime.fromMillis(reward.dateScheduledFor)
                 .setLocale(luxonLocale(this.locale))
                 .toLocaleString(DateTime.DATE_MED))))),
           " ",
@@ -173,13 +173,13 @@ export class ReferralTableRewardsCell {
             h(TextSpanView, { type: "p" },
               statusText,
               " ",
-              h("span", { class: sheet.classes.BoldText, part: "sqm-reward-cell-bold-text" }, DateTime.fromMillis(reward.dateExpires)
+              h("span", { class: sheet.classes.BoldText }, DateTime.fromMillis(reward.dateExpires)
                 .setLocale(luxonLocale(this.locale))
                 .toLocaleString(DateTime.DATE_MED))))),
           reward.fuelTankCode && (h("div", null,
             this.fuelTankText,
             " ",
-            h("span", { class: sheet.classes.BoldText, part: "sqm-reward-cell-bold-text" }, reward.fuelTankCode))))));
+            h("span", { class: sheet.classes.BoldText }, reward.fuelTankCode))))));
     });
   }
   static get is() { return "sqm-referral-table-rewards-cell"; }

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-date-column.js

@@ -99,10 +99,10 @@ export class ReferralTableDateColumn {
             "text": "string",
             "name": "uiType"
           }, {
-            "text": "[\"dateConverted\",\n\"dateReferralStarted\",\n\"dateFraudChecksCompleted\",\n\"dateModerated\",\n\"dateModified\",\n\"dateReferralEnded\",\n\"dateReferralPaid\",\n\"dateUserModified\"]",
+            "text": "[\"dateConverted\",\r\n\"dateReferralStarted\",\r\n\"dateFraudChecksCompleted\",\r\n\"dateModerated\",\r\n\"dateModified\",\r\n\"dateReferralEnded\",\r\n\"dateReferralPaid\",\r\n\"dateUserModified\"]",
             "name": "uiEnum"
           }, {
-            "text": "[\"Date Converted\",\n\"Date Referral Started\",\n\"Date Fraud Checks Completed\",\n\"Date Moderated\",\n\"Date Modified\",\n\"Date Referral Ended\",\n\"Date Referral Paid\",\n\"Date User Modified\"]",
+            "text": "[\"Date Converted\",\r\n\"Date Referral Started\",\r\n\"Date Fraud Checks Completed\",\r\n\"Date Moderated\",\r\n\"Date Modified\",\r\n\"Date Referral Ended\",\r\n\"Date Referral Paid\",\r\n\"Date User Modified\"]",
             "name": "uiEnumNames"
           }],
         "text": ""

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

@@ -78,7 +78,7 @@ export class ReferralTable {
             "text": "programSelector",
             "name": "uiWidget"
           }],
-        "text": "Filters to only show referrals in this program. Will default to filtering by the program context where\nthis table lives. If no program ID is set or provided by context, then shows all referrals from all programs.\nIf program ID is \"classic\", shows classic-only referrals"
+        "text": "Filters to only show referrals in this program. Will default to filtering by the program context where\r\nthis table lives. If no program ID is set or provided by context, then shows all referrals from all programs.\r\nIf program ID is \"classic\", shows classic-only referrals"
       },
       "attribute": "program-id",
       "reflect": false
@@ -258,7 +258,7 @@ export class ReferralTable {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "DemoData<GenericTableViewProps> & {\n    mockData?: { data: Referral[] };\n  }",
+        "original": "DemoData<GenericTableViewProps> & {\r\n    mockData?: { data: Referral[] };\r\n  }",
         "resolved": "Partial<Pick<GenericTableViewProps, \"states\" | \"data\" | \"elements\">> & { mockData?: { data: Referral[]; }; }",
         "references": {
           "DemoData": {