@saasquatch/mint-components 1.6.1-9 → 1.6.2-0

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

@@ -0,0 +1,79 @@
+import { h } from "@stencil/core";
+import scenario from "./sqm-referral-card.feature";
+export default {
+  title: "Components/Referral Card",
+  parameters: {
+    scenario,
+  },
+};
+const media = (slot) => {
+  return (h("sqm-portal-container", { gap: "large", slot: slot },
+    h("sqm-hero-image", { header: "Get rewarded when your friend uses Klip", "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000227/squatch-assets/IqB7GeS.png" })));
+};
+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,
+      h("sub", null, "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")));
+};
+export const ReferralCardGeneric = () => {
+  return (h("sqm-referral-card", { "vertical-alignment": "center" },
+    h("sqm-portal-container", { slot: "left", gap: "x-small" },
+      h("div", { style: {
+          padding: "100px",
+          border: "1px dashed black",
+          background: "#eee",
+          color: "#333",
+          textAlign: "center",
+        } }, "PLACEHOLDER")),
+    h("sqm-portal-container", { slot: "right", gap: "x-small" },
+      h("div", { style: {
+          padding: "100px",
+          border: "1px dashed black",
+          background: "#eee",
+          color: "#333",
+          textAlign: "center",
+        } }, "PLACEHOLDER"))));
+};

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

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

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

@@ -0,0 +1,70 @@
+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
+ * @exampleGroup Referrals
+ * @slotEditor richtext
+ * @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 {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Vertical Aligment
+     * @uiType string
+     * @uiEnum ["start", "center", "end"]
+     * @uiEnumNames ["Top", "Center", "Bottom"]
+     */
+    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-qa-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": "[\"Top\", \"Center\", \"Bottom\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": ""
+      },
+      "attribute": "vertical-alignment",
+      "reflect": false,
+      "defaultValue": "\"start\""
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}