@saasquatch/mint-components 1.5.0-0 → 1.5.0-101

package/dist/collection/components/sqm-timeline/sqm-timeline-entry.js

@@ -0,0 +1,203 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+import { useRequestRerender } from "../../tables/re-render";
+import { Circle, Gift } from "./SVGs";
+/**
+ * @uiName Timeline Entry
+ */
+export class TimelineReward {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Icon
+     * @uiType string
+     * @uiEnum ["gift", "circle"]
+     */
+    this.icon = "gift";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const style = {
+      TimelineReward: {
+        color: "var(--sl-color-neutral-900)",
+        lineHeight: "var(--sl-line-height-dense)",
+        "& .container": {
+          display: "flex",
+        },
+        "& .line": {
+          color: "transparent",
+          userSelect: "none",
+          background: "var(--sl-color-primary-300)",
+          width: "4px",
+          borderRadius: "4px",
+          margin: "-2px",
+          position: "relative",
+          left: "12px",
+          top: "34px",
+        },
+        "& .step": {
+          display: "flex",
+        },
+        "& .icon": {
+          position: "relative",
+          top: "4px",
+          zIndex: "1",
+          color: "var(--sl-color-primary-300)",
+          marginRight: "var(--sl-spacing-large)",
+        },
+        "& .reward": {
+          marginRight: "var(--sl-spacing-x-small)",
+          fontSize: "var(--sl-font-size-x-large)",
+          fontWeight: "var(--sl-font-weight-semibold)",
+        },
+        "& .unit": {
+          textTransform: "uppercase",
+          fontSize: "var(--sl-font-size-small)",
+        },
+        "& .description": {
+          fontSize: "var(--sl-font-size-medium)",
+        },
+      },
+    };
+    const sheet = createStyleSheet(style);
+    const styleString = sheet.toString();
+    const vanillaStyle = `
+	:host{
+		display: block;   
+	}
+	`;
+    useRequestRerender([this.reward]);
+    return (h("div", { class: sheet.classes.TimelineReward },
+      h("style", { type: "text/css" },
+        styleString,
+        vanillaStyle),
+      h("div", { class: "container" },
+        this.line && h("div", { class: "line" }, "."),
+        h("div", { class: "step" },
+          this.icon === "gift" && (h("div", { class: "icon" },
+            h(Gift, null))),
+          this.icon === "circle" && (h("div", { class: "icon" },
+            h(Circle, null))),
+          h("div", null,
+            h("div", null,
+              h("span", { class: "reward" }, this.reward),
+              h("span", { class: "unit" }, this.unit)),
+            h("div", { class: "description" }, this.desc))))));
+  }
+  static get is() { return "sqm-timeline-entry"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "reward": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Amount",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "reward",
+      "reflect": false
+    },
+    "unit": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Unit",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "unit",
+      "reflect": false
+    },
+    "desc": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Description",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "desc",
+      "reflect": false
+    },
+    "line": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }],
+        "text": ""
+      },
+      "attribute": "line",
+      "reflect": false
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Icon",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"gift\", \"circle\"]",
+            "name": "uiEnum"
+          }],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false,
+      "defaultValue": "\"gift\""
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

package/dist/collection/components/sqm-timeline/sqm-timeline.js

@@ -0,0 +1,118 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import { useChildElements } from "../../tables/useChildElements";
+/**
+ * @uiName Timeline
+ */
+export class Timeline {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Icon
+     * @uiType string
+     * @uiEnum ["gift", "circle"]
+     */
+    this.icon = "gift";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    //@ts-ignore
+    const rewards = useChildElements();
+    //TODO: Change to methods or attributes instead of properties
+    rewards.forEach((reward, idx) => {
+      if (rewards.length > 1 && idx != rewards.length - 1) {
+        reward.line = true;
+      }
+      //TODO: Change to method
+      else
+        reward.line = false;
+      //TODO: Chango to method
+      reward.icon = this.icon;
+    });
+    const vanillaStyle = `
+		:host{
+			display: block;   
+		}
+
+		::slotted(*:not(:only-child):not(:last-child)) {
+			margin-bottom: var(--sl-spacing-xx-large);
+		}
+
+		// ::slotted(*:not(:only-child):not(:last-child))::before {
+		// 	display: block;
+		// 	content: "";
+		// 	height: 100%;
+		// 	background: var(--sl-color-primary-300);
+		// }
+
+		// ::slotted(*:not(:first-child))::before {
+		// 	display: block;
+		// 	position: relative;
+		// 	content: "";
+		// 	background: var(--sl-color-primary-300);
+		// 	height: 90px;
+		// 	width: 4px;
+		// 	top: 12px;
+		// 	left: 10px;
+		// 	margin-top: -44px;
+		// 	margin-bottom: 8px;
+		// 	border-radius: 4px;
+		// }
+
+
+    // ZH: Temporary Patch fix
+    // ::slotted(*:not(:first-child))::before {
+	// 		display: block;
+	// 		position: relative;
+	// 		content: "";
+	// 		background: var(--sl-color-primary-300);
+	// 		min-height: 150px;
+	// 		max-height: 300px;
+	// 		width: 4px;
+	// 		top: 12px;
+	// 		left: 10px;
+	// 		margin-top: -85px;
+	// 		margin-bottom: 8px;
+	// 		border-radius: 4px;
+	// 	}
+	`;
+    return (h("div", null,
+      h("style", { type: "text/css" }, vanillaStyle),
+      h("slot", null)));
+  }
+  static get is() { return "sqm-timeline"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Icon",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"gift\", \"circle\"]",
+            "name": "uiEnum"
+          }],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false,
+      "defaultValue": "\"gift\""
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

package/dist/collection/components/sqm-titled-section/TitledSection.stories.js

@@ -0,0 +1,237 @@
+import { h } from "@stencil/core";
+import { media, sharebutton } from "../sqm-referral-card/ReferralCard.stories";
+import scenario from "./sqm-titled-section.feature";
+export default {
+  title: "Components/Titled Section",
+  parameters: {
+    scenario,
+  },
+};
+export const AlignLeft = () => {
+  return (h("sqm-titled-section", { "text-align": "left" },
+    h("sqm-text", { slot: "label" },
+      h("h3", null, "Earn more rewards"),
+      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")),
+    h("sqm-text", { slot: "content" },
+      h("sqm-referral-card", null,
+        media("left"),
+        sharebutton("right")))));
+};
+export const AlignCenter = () => {
+  return (h("sqm-titled-section", { "text-align": "center" },
+    h("sqm-text", { slot: "label" },
+      h("h3", null, "Earn more rewards"),
+      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")),
+    h("sqm-text", { slot: "content" },
+      h("sqm-referral-card", null,
+        media("left"),
+        sharebutton("right")))));
+};
+export const AlignRight = () => {
+  return (h("sqm-titled-section", { "text-align": "right" },
+    h("sqm-text", { slot: "label" },
+      h("h3", null, "Earn more rewards"),
+      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")),
+    h("sqm-text", { slot: "content" },
+      h("sqm-referral-card", null,
+        media("left"),
+        sharebutton("right")))));
+};
+export const Padding = () => {
+  return (h("div", null,
+    h("h3", null, "None"),
+    h("sqm-titled-section", { padding: "none" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xxx-small"),
+    h("sqm-titled-section", { padding: "xxx-small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xx-small"),
+    h("sqm-titled-section", { padding: "xx-small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "x-small"),
+    h("sqm-titled-section", { padding: "x-small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "small"),
+    h("sqm-titled-section", { padding: "small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "medium"),
+    h("sqm-titled-section", { padding: "medium" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "large"),
+    h("sqm-titled-section", { padding: "large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "x-large"),
+    h("sqm-titled-section", { padding: "x-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xx-large"),
+    h("sqm-titled-section", { padding: "xx-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xxx-large"),
+    h("sqm-titled-section", { padding: "xxx-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xxxx-large"),
+    h("sqm-titled-section", { padding: "xxxx-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
+};
+export const LabelMargin = () => {
+  return (h("div", null,
+    h("h3", null, "None"),
+    h("sqm-titled-section", { "label-margin": "none" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xxx-small"),
+    h("sqm-titled-section", { "label-margin": "xxx-small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xx-small"),
+    h("sqm-titled-section", { "label-margin": "xx-small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "x-small"),
+    h("sqm-titled-section", { "label-margin": "x-small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "small"),
+    h("sqm-titled-section", { "label-margin": "small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "medium"),
+    h("sqm-titled-section", { "label-margin": "medium" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "large"),
+    h("sqm-titled-section", { "label-margin": "large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "x-large"),
+    h("sqm-titled-section", { "label-margin": "x-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xx-large"),
+    h("sqm-titled-section", { "label-margin": "xx-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xxx-large"),
+    h("sqm-titled-section", { "label-margin": "xxx-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xxxx-large"),
+    h("sqm-titled-section", { "label-margin": "xxxx-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
+};

package/dist/collection/components/sqm-titled-section/sqm-portal-section-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 PortalSectionView(props) {
   const style = {
     LabelContainer: {
@@ -9,13 +8,11 @@ export function PortalSectionView(props) {
         : `var(--sl-spacing-${props.labelMargin})`,
     },
     SectionContainer: {
-      padding: props.padding === "none"
-        ? "0"
-        : `var(--sl-spacing-${props.padding})`,
+      textAlign: props.textAlign || "left",
+      padding: props.padding === "none" ? "0" : `var(--sl-spacing-${props.padding})`,
     },
   };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   return (h("div", { class: sheet.classes.SectionContainer },
     h("style", { type: "text/css" }, styleString),

package/dist/collection/components/sqm-titled-section/sqm-titled-section.js

@@ -3,10 +3,16 @@ import { Component, h, Prop } from "@stencil/core";
 import { getProps } from "../../utils/utils";
 import { PortalSectionView } from "./sqm-portal-section-view";
 /**
- * @uiName Section (with title)
+ * @uiName Titled Section
  */
 export class TitledSection {
   constructor() {
+    /**
+     * @uiName Text Align
+     * @uiType string
+     * @uiEnum ["left", "center", "right"]
+     */
+    this.textAlign = "left";
     /**
      * @uiName Label margin style
      * @uiType string
@@ -41,12 +47,42 @@ export class TitledSection {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": ""
+        "tags": [{
+            "text": "Label",
+            "name": "uiName"
+          }],
+        "text": "Label for the section unless overwritten via the label slot."
       },
       "attribute": "label",
       "reflect": false
     },
+    "textAlign": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"left\" | \"center\" | \"right\"",
+        "resolved": "\"center\" | \"left\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Text Align",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"left\", \"center\", \"right\"]",
+            "name": "uiEnum"
+          }],
+        "text": ""
+      },
+      "attribute": "text-align",
+      "reflect": false,
+      "defaultValue": "\"left\""
+    },
     "labelMargin": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/sqm-user-name/sqm-user-name.js

@@ -5,7 +5,7 @@ import deepmerge from "deepmerge";
 import { UserNameView } from "./sqm-user-name-view";
 import { useUserName } from "./useUserName";
 /**
- * @uiName Navigation Link
+ * @uiName User Name
  */
 export class UserName {
   constructor() {

package/dist/collection/components/sqm-user-name/useUserName.js

@@ -1,5 +1,5 @@
 import { useQuery, useUserIdentity } from "@saasquatch/component-boilerplate";
-import gql from "graphql-tag";
+import { gql } from "graphql-request";
 const GET_USER_NAME = gql `
   query getUserName {
     viewer {

package/dist/collection/fonts/GoogleFonts.js

@@ -0,0 +1,12 @@
+/**
+ * Build a font CSS URL using the Google Fonts CSS API
+ *
+ * Docs: https://developers.google.com/fonts/docs/css2
+ *
+ * @param fonts - the font family or families to load
+ * @returns url to a .css file
+ */
+export function buildFontsCssUrl(...fonts) {
+  const queryString = fonts.map(f => `family=${encodeURIComponent(f)}`).join("&");
+  return `https://fonts.googleapis.com/css2?${queryString}`;
+}