@saasquatch/mint-components 1.6.8-0 → 1.6.8-2

package/dist/collection/components/sqm-leaderboard/sqm-leaderboard-view.js

@@ -61,11 +61,11 @@ export function LeaderboardView(props) {
   if (!states.hasLeaders)
     return elements.empty;
   let userSeenFlag = false;
-  return (h("div", { class: sheet.classes.Leaderboard },
+  return (h("div", { class: sheet.classes.Leaderboard, part: "sqm-leaderboard-container" },
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
-    h("table", null,
+    h("table", { part: "sqm-leaderboard-table" },
       h("tr", null,
         styles.showRank && h("th", { class: "Rank" }, styles.rankheading),
         h("th", { class: "User" }, styles.usersheading),

package/dist/collection/components/sqm-link-button/LinkButton.stories.js

@@ -0,0 +1,20 @@
+import { h } from "@stencil/core";
+import scenario from "./sqm-link-button.feature";
+import { LinkButtonView } from "./sqm-link-button-view";
+export default {
+  title: "Components/User Identifier",
+  parameters: {
+    scenario,
+  },
+};
+const defaultProps = {
+  buttonSlot: h("span", null, "Test Slot Content"),
+  link: "https://example.com",
+  openInNewTab: false,
+};
+export const Default = () => {
+  return h(LinkButtonView, Object.assign({}, defaultProps));
+};
+export const OpenInNewTab = () => {
+  return h(LinkButtonView, Object.assign({}, { ...defaultProps, openInNewTab: true }));
+};

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

@@ -0,0 +1,22 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+const style = {
+  Container: { display: "contents" },
+};
+const vanillaStyle = `
+:host{
+  display: inline;   
+}
+`;
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export function LinkButtonView(props) {
+  const { link, openInNewTab } = props;
+  return (h("span", { class: sheet.classes.Container },
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    h("sl-button", null,
+      h("a", { href: link, target: openInNewTab ? "_blank" : "" },
+        h("slot", null)))));
+}

package/dist/collection/components/sqm-link-button/sqm-link-button.js

@@ -0,0 +1,68 @@
+import { Component, h, Prop } from "@stencil/core";
+import { getProps } from "../../utils/utils";
+import { LinkButtonView } from "./sqm-link-button-view";
+/**
+ * @uiName Image
+ * @exampleGroup Common Components
+ * @example Image - <sqm-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000259/squatch-assets/tn47wOj.png" alignment="center"></sqm-image>
+ */
+export class Image {
+  constructor() {
+    /**
+     * @uiName User Identification Text
+     */
+    this.openInNewTab = false;
+  }
+  render() {
+    return h(LinkButtonView, Object.assign({}, getProps(this)));
+  }
+  static get is() { return "sqm-link-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "link": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "required"
+          }, {
+            "text": "User Identification Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "link",
+      "reflect": false
+    },
+    "openInNewTab": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "User Identification Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "open-in-new-tab",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}
+//TODO: Write a hook to resolve ICU strings

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

@@ -142,12 +142,12 @@ const vanillaStyle = `
 }
 `;
 export function NavigationSidebarView(props, children) {
-  return (h("div", { class: "container" },
+  return (h("div", { class: "container", part: "sqm-navigation-container" },
     h("style", null, vanillaStyle),
     h("input", Object.assign({ type: "checkbox", class: "toggler" }, props)),
     h("div", { class: "hamburger" },
       h("div", { class: "line" }),
       h("div", { class: "line" }),
       h("div", { class: "line" })),
-    h("div", { class: "menu-items" }, children)));
+    h("div", { class: "menu-items", part: "sqm-navigation-menu-items" }, children)));
 }

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

@@ -30,11 +30,11 @@ export function NavigationSidebarItemView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  return (h("a", { href: data.path, onClick: (e) => {
+  return (h("a", { part: "sqm-navigation-item-link", href: data.path, onClick: (e) => {
       e.preventDefault();
       navigation.push(data.path);
     }, class: sheet.classes.ItemContainer },
     h("style", { type: "text/css" }, styleString),
     h("sl-icon", { class: sheet.classes.Icon, name: data.icon }),
-    h("p", { class: sheet.classes.Label }, data.label)));
+    h("p", { class: sheet.classes.Label, part: "sqm-navigation-item-label" }, data.label)));
 }

package/dist/collection/components/sqm-password-field/sqm-password-field-view.js

@@ -24,7 +24,7 @@ const styleString = sheet.toString();
 export function PortalResetPasswordView(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
   const { states, callbacks } = props;
-  return (h("div", { class: sheet.classes.InputContainer },
+  return (h("div", { class: sheet.classes.InputContainer, part: "sqm-password-field-container" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

package/dist/collection/components/sqm-passwordless-registration/sqm-passwordless-registration.js

@@ -1,8 +1,8 @@
-import { isDemo } from "@saasquatch/component-boilerplate";
+import { isDemo, setUserIdentity, } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop, State } from "@stencil/core";
 import deepmerge from "deepmerge";
-import { PasswordlessRegistrationView, } from "./sqm-passwordless-registration-view";
+import { EmailRegistrationView, } from "../views/email-registration-view";
 import { usePasswordlessRegistration } from "./usePasswordlessRegistration";
 /**
  * @uiName Microsite Registration
@@ -38,10 +38,6 @@ export class PasswordlessRegistration {
      * @uiName Include name fields
      */
     this.includeName = false;
-    /**
-     * @uiName Include name fields
-     */
-    this.hidePoweredBy = false;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -55,12 +51,11 @@ export class PasswordlessRegistration {
       firstNameLabel: this.firstNameLabel,
       lastNameLabel: this.lastNameLabel,
       includeName: this.includeName,
-      hidePoweredBy: this.hidePoweredBy,
       // slots
       topSlot: h("slot", { name: "top-slot" }),
       bottomSlot: h("slot", { name: "bottom-slot" }),
     };
-    return (h(PasswordlessRegistrationView, { states: states, callbacks: callbacks, content: content }));
+    return (h(EmailRegistrationView, { states: states, callbacks: callbacks, content: content }));
   }
   static get is() { return "sqm-passwordless-registration"; }
   static get encapsulation() { return "shadow"; }
@@ -194,41 +189,20 @@ export class PasswordlessRegistration {
       "reflect": false,
       "defaultValue": "false"
     },
-    "hidePoweredBy": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Include name fields",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "hide-powered-by",
-      "reflect": false,
-      "defaultValue": "false"
-    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "DemoData<PasswordlessRegistrationViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; }; content?: { emailLabel?: string; firstNameLabel?: string; lastNameLabel?: string; registerLabel?: string; includeName?: boolean; hidePoweredBy?: boolean; topSlot?: VNode; bottomSlot?: VNode; }; }",
+        "original": "DemoData<EmailRegistrationViewProps>",
+        "resolved": "{ states?: { error: string; loading: boolean; }; content?: { emailLabel?: string; firstNameLabel?: string; lastNameLabel?: string; registerLabel?: string; includeName?: boolean; topSlot?: VNode; bottomSlot?: VNode; }; }",
         "references": {
           "DemoData": {
             "location": "import",
             "path": "../../global/demo"
           },
-          "PasswordlessRegistrationViewProps": {
+          "EmailRegistrationViewProps": {
             "location": "import",
-            "path": "./sqm-passwordless-registration-view"
+            "path": "../views/email-registration-view"
           }
         }
       },
@@ -251,16 +225,22 @@ export class PasswordlessRegistration {
   }; }
 }
 function useRegistrationDemo(props) {
+  console.debug("sqm-passwordless-registration: Running in debug mode...");
+  const onSubmit = () => {
+    setUserIdentity({
+      id: "referrer@example.com",
+      accountId: "referrer@example.com",
+      jwt: "eyJraWQiOiJlNjI2NzQxNy1jMzZlLTRlM2EtYjM5NS1lYTFmY2YyNmU3YzIiLCJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJjbVZtWlhKeVpYSkFaWGhoYlhCc1pTNWpiMjA9OmNtVm1aWEp5WlhKQVpYaGhiWEJzWlM1amIyMD1AdGVzdF9heGJndGF0dzF0Y2NwOnVzZXJzIiwicGFzc3dvcmRsZXNzIjp0cnVlLCJpc3MiOiJodHRwczovL3N0YWdpbmcucmVmZXJyYWxzYWFzcXVhdGNoLmNvbS8iLCJleHAiOjE2ODA4ODU5MTksImlhdCI6MTY4MDc5OTUxOX0.kjmTVVf_BTb-uMNKnadLyNLxMFwpkefsY02O3iAfBVIJJZZfeZMwunPlKsS3Vbp28aYRClBjH5Wj4pYxDn23D0CdZx8KNCqiJ8yF6149O9SPMkRseoJkliqS6LyvMOEDjGDkuLfcC8_hq1AHBXFt5BdCtWOk1gwf_5R9A0w5gXEIvprBzbNDLbuo88bVAlrmFNvfttXXryrpUeruMal7cBKuy02YblBrB4kKoyJiprU5GLEjciBA4A56u8TwQc0kbsPf2YcQaJsY_IvkC7S1u4sPyObpq6iF6Ed8UYHAo6nU5KjZXyVtoUyeIS11mf_6OtDO6LyMNHV2FtEUUDdPCg",
+    });
+  };
   return deepmerge({
     states: {
-      error: "",
       loading: false,
-      forgotPasswordPath: "/forgotPassword",
-      registerPath: "/register",
+      error: "",
     },
     callbacks: {
       submit: async (_event) => {
-        console.log("submit");
+        onSubmit();
       },
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });

package/dist/collection/components/sqm-passwordless-registration/usePasswordlessRegistration.js

@@ -1,8 +1,11 @@
-import jsonpointer from "jsonpointer";
+import { useUpsertPasswordlessUserMutation } from "@saasquatch/component-boilerplate";
 import { useState } from "@saasquatch/universal-hooks";
-import { useUpsertPasswordlessUserMutation, } from "@saasquatch/component-boilerplate";
+import jsonpointer from "jsonpointer";
 export function usePasswordlessRegistration() {
   var _a, _b, _c, _d, _e, _f, _g;
+  const cookie = new URLSearchParams(window.location.search);
+  const cookies = cookie === null || cookie === void 0 ? void 0 : cookie.get("_saasquatch");
+  console.log({ cookie });
   const [request, { loading, errors, data }] = useUpsertPasswordlessUserMutation();
   const [error, setError] = useState("");
   const submit = async (event) => {
@@ -16,6 +19,7 @@ export function usePasswordlessRegistration() {
       firstName: formData.firstName,
       lastName: formData.lastName,
       email: formData.email,
+      ...(cookies ? { cookies } : {}),
     };
     const result = await request(variables);
     if (result instanceof Error) {

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

@@ -3,8 +3,8 @@ const PopupContainerView = (props) => {
   const { states, callbacks } = props;
   const { styles } = states;
   return (h(Host, { class: "squatch-container" },
-    h("div", { style: { padding: props.states.styles.padding } },
-      styles.closeButton && (h("span", { class: "close squatch-header-close", "data-close-panel": "#squatch-panel", onClick: () => callbacks.closePopup() }, styles.closeButtonText)),
+    h("div", { style: { padding: props.states.styles.padding }, part: "sqm-popup-container" },
+      styles.closeButton && (h("span", { part: "sqm-popup-container-close-btn", class: "close squatch-header-close", "data-close-panel": "#squatch-panel", onClick: () => callbacks.closePopup() }, styles.closeButtonText)),
       h("slot", null),
       styles.poweredBy ? (h("a", { class: "sqh-attribution", href: "https://www.saasquatch.com/?utm_source=app&utm_medium=user-widget&utm_campaign=referral-widget", target: "_blank" }, "Powered By")) : (""))));
 };

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

@@ -48,7 +48,7 @@ export function PortalFooterView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  return (h("div", { class: sheet.classes.Container },
+  return (h("div", { class: sheet.classes.Container, part: "sqm-footer-container" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

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

@@ -23,7 +23,7 @@ const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PortalForgotPasswordView(props) {
   const { states, callbacks, content } = props;
-  return (h("div", { class: sheet.classes.Wrapper },
+  return (h("div", { class: sheet.classes.Wrapper, part: "sqm-forgot-password-container" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

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

@@ -39,11 +39,11 @@ const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PortalFrameView(props, children) {
   const { data, notFullScreen } = props;
-  return (h("div", { style: { minHeight: notFullScreen ? "100%" : "100vh" }, class: sheet.classes.Frame },
+  return (h("div", { style: { minHeight: notFullScreen ? "100%" : "100vh" }, class: sheet.classes.Frame, part: "sqm-portal-frame-container" },
     h("style", { type: "text/css" }, styleString),
-    h("div", { class: sheet.classes.HeaderWrapper },
+    h("div", { class: sheet.classes.HeaderWrapper, part: "sqm-portal-frame-header" },
       data.header,
       h("slot", { name: "sqm-navigation-menu" })),
     children,
-    h("div", { class: sheet.classes.FooterWrapper }, data.footer)));
+    h("div", { class: sheet.classes.FooterWrapper, part: "sqm-portal-frame-footer" }, data.footer)));
 }

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { AuthButtonsContainer, AuthColumn, AuthWrapper } from "../../global/mixins";
+import { AuthButtonsContainer, AuthColumn, AuthWrapper, } from "../../global/mixins";
 import { createStyleSheet } from "../../styling/JSS";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
 const style = {
@@ -27,7 +27,7 @@ const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PortalLoginView(props) {
   const { states, callbacks, content } = props;
-  return (h("div", { class: sheet.classes.Wrapper },
+  return (h("div", { class: sheet.classes.Wrapper, part: "sqm-portal-login-container" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

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

@@ -56,7 +56,7 @@ export function PortalProfileView(props) {
     type: "region",
   })
     : "";
-  return (h("div", { class: sheet.classes.Container },
+  return (h("div", { class: sheet.classes.Container, part: "sqm-portal-profile-container" },
     h("style", { type: "text/css" }, styleString),
     h(TextSpanView, Object.assign({}, { type: "h1" }), text.editProfileHeader),
     h(TextSpanView, Object.assign({}, { type: "h2" }), text.editProfileSubHeader),

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

@@ -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 },
+  return (h("div", { class: sheet.classes.Wrapper, part: "sqm-portal-register-container" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

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

@@ -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 },
+  return (h("div", { class: sheet.classes.Wrapper, part: "sqm-portal-registration-container" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

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

@@ -22,7 +22,7 @@ const styleString = sheet.toString();
 export function PortalVerifyEmailView(props) {
   const { states, data, callbacks } = props;
   if (states.verified) {
-    return (h("div", { class: sheet.classes.Wrapper },
+    return (h("div", { class: sheet.classes.Wrapper, part: "sqm-portal-verify-email-container" },
       h("style", { type: "text/css" },
         vanillaStyle,
         styleString),

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

@@ -34,11 +34,11 @@ export function ProgramExplainerView(props, children) {
       display: block;
     }
   }`;
-  return (h("div", { class: sheet.classes.Container },
+  return (h("div", { class: sheet.classes.Container, part: "sqm-program-explainer-container" },
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
     h("div", { class: sheet.classes.Header },
-      h("div", { class: sheet.classes.Header }, props.header)),
-    h("div", { class: sheet.classes.Grid }, children)));
+      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)));
 }

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

@@ -61,11 +61,11 @@ export function ProgramExplainerStepView(props) {
       display: block;
     }
   }`;
-  return (h("div", { class: sheet.classes.Container },
+  return (h("div", { class: sheet.classes.Container, part: "sqm-program-explainer-step-container" },
     h("style", { type: "text/css" }, styleString),
-    h("div", null, props.imageUrl ? (h("img", { class: sheet.classes.Media, src: props.imageUrl })) : (h("div", { class: sheet.classes.Media },
+    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("sl-icon", { name: props.icon })))),
     h("div", { class: sheet.classes.Text },
-      h("div", { class: sheet.classes.Header }, props.header),
-      h("div", { class: sheet.classes.Description }, props.description))));
+      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))));
 }

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

@@ -58,6 +58,18 @@ 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,10 +2,20 @@ import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 const style = {
   Container: {
-    "& p": { margin: "0" },
-    display: "flex",
+    border: "1px solid var(--sl-color-neutral-300)",
+    borderRadius: "var(--sl-border-radius-large)",
     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%",
@@ -24,8 +34,6 @@ const style = {
         width: "100%",
       },
     },
-    border: "1px solid var(--sl-color-neutral-300)",
-    borderRadius: "var(--sl-border-radius-large)",
     "@media (max-width: 499px)": {
       flexDirection: "column",
       border: "none",
@@ -40,15 +48,17 @@ const vanillaStyle = `
     }
   `;
 export function ReferralCardView(props) {
-  return (h("div", null,
+  return (h("div", { part: "sqm-referral-card-container", class: sheet.classes.Container },
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
-    h("div", { part: "sqm-base", class: sheet.classes.Container },
+    h("div", { class: sheet.classes.EndContainer }, props.slots.header),
+    h("div", { part: "sqm-columns", class: sheet.classes.ColumnContainer },
       h("div", { class: "left", style: {
           alignSelf: props.verticalAlignment,
         } }, props.slots.left),
       h("div", { class: "right", style: {
           alignSelf: props.verticalAlignment,
-        } }, props.slots.right))));
+        } }, props.slots.right)),
+    h("div", { class: sheet.classes.EndContainer }, props.slots.footer)));
 }

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"}]
+ * @slots [{"name":"left", "title":"Left Content"},{"name":"right", "title":"Right Content"},{"name":"header", "title":"Header Content"},{"name":"footer", "title":"Footer 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,6 +25,8 @@ 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-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", { class: sheet.classes.BoldText }, reward.prettyValue)),
+            h("span", { part: "sqm-reward-cell-bold-text", 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 }, DateTime.fromMillis(reward.dateGiven)
+              h("span", { class: sheet.classes.BoldText, part: "sqm-reward-cell-bold-text" }, 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 }, DateTime.fromMillis(reward.dateExpires)
+              h("span", { class: sheet.classes.BoldText, part: "sqm-reward-cell-bold-text" }, 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 }, DateTime.fromMillis(reward.dateCancelled)
+              h("span", { class: sheet.classes.BoldText, part: "sqm-reward-cell-bold-text" }, 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 }, DateTime.fromMillis(reward.dateScheduledFor)
+              h("span", { class: sheet.classes.BoldText, part: "sqm-reward-cell-bold-text" }, 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 }, DateTime.fromMillis(reward.dateExpires)
+              h("span", { class: sheet.classes.BoldText, part: "sqm-reward-cell-bold-text" }, 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 }, reward.fuelTankCode))))));
+            h("span", { class: sheet.classes.BoldText, part: "sqm-reward-cell-bold-text" }, reward.fuelTankCode))))));
     });
   }
   static get is() { return "sqm-referral-table-rewards-cell"; }