@saasquatch/mint-components 1.6.2-6 → 1.6.2-9

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

@@ -1,79 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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": {}
-  }; }
-}