@saasquatch/mint-components 1.5.0-8 → 1.5.0-83

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

@@ -1,66 +1,71 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 export function ProgramExplainerStepView(props) {
   const style = {
     Container: {
       display: "flex",
       flexDirection: "column",
       width: "100%",
-      height: "444px",
-      color: props.color,
-      background: props.background,
-      padding: "24px",
-      "@media (max-width: 1024px)": {
+      padding: "var(--sl-spacing-x-large)",
+      lineHeight: "var(--sl-line-height-dense)",
+      color: props.textColor || "var(--sl-color-neutral-900)",
+      background: props.backgroundColor || "var(--sl-color-primary-50)",
+      "@media (max-width: 499px)": {
         flexDirection: "row",
         width: "auto",
-        height: "auto",
+        paddingBottom: "var(--sl-spacing-large)",
       },
     },
-    Logo: {},
     Text: {
-      "@media (max-width: 1024px)": {
-        marginLeft: "24px",
+      "@media (max-width: 499px)": {
+        marginLeft: "var(--sl-spacing-large)",
       },
     },
-    Title: {
-      fontSize: "16px",
+    Header: {
+      fontSize: "var(--sl-font-size-large)",
       fontWeight: "var(--sl-font-weight-bold)",
-      textTransform: "uppercase",
-      lineHeight: "24px",
-      marginTop: "24px",
-      "@media (max-width: 1024px)": {
+      marginTop: "var(--sl-spacing-x-large)",
+      "@media (max-width: 499px)": {
         margin: "0",
       },
     },
     Description: {
-      fontSize: "16px",
-      lineHeight: "28px",
-      marginTop: "12px",
-      "@media (max-width: 1024px)": {
-        marginTop: "8px",
+      fontSize: "var(--sl-font-size-medium)",
+      marginTop: "var(--sl-spacing-small)",
+      "@media (max-width: 499px)": {
+        marginTop: "var(--sl-spacing-x-small)",
       },
     },
+    Media: {
+      width: "64px",
+      height: "64px",
+      borderRadius: "100%",
+      objectFit: "cover",
+      userSelect: "none",
+      background: "#FFF",
+      color: "var(--sl-color-primary-300)",
+      fontSize: "26px",
+      textAlign: "center",
+      lineHeight: "72px",
+    },
   };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  console.log(props);
+  const vanillaStyle = `
+  :host{
+    display: flex;
+    width: 100%;
+  }
+  @media (max-width: 499px) {
+    :host{
+      display: block;
+    }
+  }`;
   return (h("div", { class: sheet.classes.Container },
     h("style", { type: "text/css" }, styleString),
-    h("div", { class: sheet.classes.Logo },
-      h("div", { style: {
-          width: "64px",
-          height: "64px",
-          borderRadius: "100%",
-          background: "#F4F5F7",
-          color: "var(--sl-color-primary-400)",
-          textAlign: "center",
-          lineHeight: "72px",
-        } },
-        h("div", { style: { fontSize: "26px" } },
-          h("sl-icon", { name: props.icon })))),
+    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.Title }, props.cardTitle),
+      h("div", { class: sheet.classes.Header }, props.header),
       h("div", { class: sheet.classes.Description }, props.description))));
 }

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

@@ -16,7 +16,7 @@ export class ProgramExplainerStep {
   static get is() { return "sqm-program-explainer-step"; }
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
-    "cardTitle": {
+    "header": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -33,7 +33,7 @@ export class ProgramExplainerStep {
           }],
         "text": ""
       },
-      "attribute": "card-title",
+      "attribute": "header",
       "reflect": false
     },
     "description": {
@@ -56,7 +56,7 @@ export class ProgramExplainerStep {
       "attribute": "description",
       "reflect": false
     },
-    "color": {
+    "textColor": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -68,7 +68,7 @@ export class ProgramExplainerStep {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Color",
+            "text": "Text Color",
             "name": "uiName"
           }, {
             "text": "color",
@@ -76,10 +76,10 @@ export class ProgramExplainerStep {
           }],
         "text": ""
       },
-      "attribute": "color",
+      "attribute": "text-color",
       "reflect": false
     },
-    "background": {
+    "backgroundColor": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -91,12 +91,35 @@ export class ProgramExplainerStep {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Background",
+            "text": "Background Color",
             "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
           }],
         "text": ""
       },
-      "attribute": "background",
+      "attribute": "background-color",
+      "reflect": false
+    },
+    "imageUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Image Url",
+            "name": "uiName"
+          }],
+        "text": "Displayed in place of an icon"
+      },
+      "attribute": "image-url",
       "reflect": false
     },
     "icon": {
@@ -108,13 +131,13 @@ export class ProgramExplainerStep {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [{
             "text": "Icon",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Options available at https://shoelace.style/components/icon"
       },
       "attribute": "icon",
       "reflect": false

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

@@ -0,0 +1,62 @@
+import { h } from "@stencil/core";
+import scenario from "./sqm-referral-card.feature";
+export default {
+  title: "Components/Referral Card",
+  parameters: {
+    scenario,
+  },
+};
+export const media = (slot) => {
+  return (h("sqm-portal-container", { gap: "large", slot: slot },
+    "Get rewarded when your friend uses Klip",
+    h("sqm-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829127/tenant_test_a7iws76wkk4az/tvazndfcipf4wyraefb3.png" })));
+};
+export const sharebutton = (slot) => {
+  return (h("sqm-portal-container", { gap: "large", slot: slot },
+    h("sqm-text", null, "Choose how you want to share:"),
+    h("sqm-text", null,
+      //@ts-ignore
+      h("p", { light: true }, "Your unique referral link:"),
+      h("sqm-share-code", null)),
+    h("sqm-portal-container", { gap: "x-small" },
+      h("sqm-share-button", { medium: "email" }, "Share via email"),
+      h("sqm-share-button", { medium: "facebook" }, "Share on Facebook"),
+      h("sqm-share-button", { medium: "twitter" }, "Tweet about us"))));
+};
+const timeline = (slot, count) => {
+  return (h("sqm-timeline", { slot: slot, icon: "circle" },
+    count > 0 && (h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" })),
+    count > 1 && (h("sqm-timeline-entry", { reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" })),
+    count > 2 && (h("sqm-timeline-entry", { reward: "$200", unit: "visa giftcard", desc: "Your friend qualifies as a good fit for Klip Team" })),
+    count > 3 && (h("sqm-timeline-entry", { reward: "$1000", unit: "visa giftcard", desc: "Your friend purchases Klip Team" }))));
+};
+export const ImageAndShareButtons = () => {
+  return (h("sqm-referral-card", null,
+    media("left"),
+    sharebutton("right")));
+};
+export const TimelineAndShareButtons = () => {
+  return (h("sqm-referral-card", null,
+    timeline("left", 3),
+    sharebutton("right")));
+};
+export const StartAlignment = () => {
+  return (h("sqm-referral-card", { "vertical-alignment": "start" },
+    timeline("left", 4),
+    sharebutton("right")));
+};
+export const CenterAlignment = () => {
+  return (h("sqm-referral-card", { "vertical-alignment": "center" },
+    timeline("left", 4),
+    sharebutton("right")));
+};
+export const EndAlignment = () => {
+  return (h("sqm-referral-card", { "vertical-alignment": "end" },
+    timeline("left", 4),
+    sharebutton("right")));
+};
+export const FlippedSlots = () => {
+  return (h("sqm-referral-card", null,
+    timeline("right", 3),
+    sharebutton("left")));
+};

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

@@ -0,0 +1,52 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+export function ReferralCardView(props) {
+  const style = {
+    Container: {
+      display: "flex",
+      color: "var(--sl-color-neutral-900)",
+      background: "var(--sl-color-neutral-0)",
+      "& .left": {
+        width: "50%",
+        padding: "var(--sl-spacing-large)",
+        paddingRight: "var(--sl-spacing-medium)",
+        alignSelf: props.verticalAlignment,
+        "@media (max-width: 499px)": {
+          width: "100%",
+          padding: "0",
+          marginBottom: "var(--sl-spacing-xx-large)",
+        },
+      },
+      "& .right": {
+        width: "50%",
+        padding: "var(--sl-spacing-large)",
+        paddingLeft: "var(--sl-spacing-medium)",
+        alignSelf: props.verticalAlignment,
+        "@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",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
+    :host{
+      display: block;   
+    }
+  `;
+  return (h("div", null,
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    h("div", { class: sheet.classes.Container },
+      h("div", { class: "left" }, props.slots.left),
+      h("div", { class: "right" }, props.slots.right))));
+}

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

@@ -0,0 +1,62 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import { getProps } from "../../utils/utils";
+import { ReferralCardView } from "./sqm-referral-card-view";
+/**
+ * @uiName Referral Card
+ */
+export class ReferralCard {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Vertical Aligment
+     * @uiType string
+     * @uiEnum ["start", "center", "end"]
+     */
+    this.verticalAlignment = "start";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const slots = {
+      left: h("slot", { name: "left" }),
+      right: h("slot", { name: "right" }),
+    };
+    return (h(ReferralCardView, Object.assign({}, getProps(this), { slots: slots }),
+      h("slot", null)));
+  }
+  static get is() { return "sqm-referral-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "verticalAlignment": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"start\" | \"center\" | \"end\"",
+        "resolved": "\"center\" | \"end\" | \"start\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Vertical Aligment",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"start\", \"center\", \"end\"]",
+            "name": "uiEnum"
+          }],
+        "text": ""
+      },
+      "attribute": "vertical-alignment",
+      "reflect": false,
+      "defaultValue": "\"start\""
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

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

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 export function ReferralIframeView(props) {
   const { states, data } = props;
   const { content } = states;
@@ -21,8 +20,7 @@ export function ReferralIframeView(props) {
     },
   };
   // JSS config
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   return (h("div", { class: sheet.classes.Container },
     h("style", { type: "text/css" }, styleString),