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

package/dist/collection/components/sqm-hero-image/sqm-hero-image.js

@@ -0,0 +1,450 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop } from "@stencil/core";
+import { getProps } from "../../utils/utils";
+import { HeroImageView } from "./sqm-hero-image-view";
+/**
+ * @uiName Hero Image
+ */
+export class HeroImage {
+  constructor() {
+    /**
+     * @uiName Overlay Color
+     * @uiWidget color
+     */
+    this.overlayColor = "var(--sl-color-primary-900)";
+    /**
+     * @uiName Overlay Opacity
+     */
+    this.overlayOpacity = "0.75";
+    /**
+     * @uiName Image Layout
+     * @uiType string
+     * @uiEnum ["overlay", "columns"]
+     */
+    this.layout = "overlay";
+    /**
+     * @uiName Image Percentage
+     * @uiType number
+     */
+    this.imagePercentage = 50;
+    /**
+     * @uiName Image Position
+     * @uiType string
+     * @uiEnum ["left", "center", "right"]
+     */
+    this.imagePos = "center";
+    /**
+     * @uiName Image Mobile Position
+     * @uiType string
+     * @uiEnum ["top", "bottom"]
+     */
+    this.imageMobilePos = "top";
+    /**
+     * @uiName CTA Button Link Open in New Tab
+     */
+    this.buttonNewTab = false;
+    /**
+     * @uiName Text Padding
+     * @uiType string
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     */
+    this.paddingText = "xxxx-large";
+    /**
+     * @uiName Image Padding
+     * @uiType string
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     */
+    this.paddingImage = "none";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (h(HeroImageView, Object.assign({}, getProps(this)),
+      h("slot", null)));
+  }
+  static get is() { return "sqm-hero-image"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "imageUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Image Link",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "image-url",
+      "reflect": false
+    },
+    "overlayColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Overlay Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "overlay-color",
+      "reflect": false,
+      "defaultValue": "\"var(--sl-color-primary-900)\""
+    },
+    "overlayOpacity": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Overlay Opacity",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "overlay-opacity",
+      "reflect": false,
+      "defaultValue": "\"0.75\""
+    },
+    "textColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Text Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "text-color",
+      "reflect": false
+    },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Background Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "background-color",
+      "reflect": false
+    },
+    "layout": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"overlay\" | \"columns\"",
+        "resolved": "\"columns\" | \"overlay\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Image Layout",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"overlay\", \"columns\"]",
+            "name": "uiEnum"
+          }],
+        "text": ""
+      },
+      "attribute": "layout",
+      "reflect": false,
+      "defaultValue": "\"overlay\""
+    },
+    "imagePercentage": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Image Percentage",
+            "name": "uiName"
+          }, {
+            "text": "number",
+            "name": "uiType"
+          }],
+        "text": ""
+      },
+      "attribute": "image-percentage",
+      "reflect": false,
+      "defaultValue": "50"
+    },
+    "imagePos": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"left\" | \"center\" | \"right\"",
+        "resolved": "\"center\" | \"left\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Image Position",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"left\", \"center\", \"right\"]",
+            "name": "uiEnum"
+          }],
+        "text": ""
+      },
+      "attribute": "image-pos",
+      "reflect": false,
+      "defaultValue": "\"center\""
+    },
+    "imageMobilePos": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"top\" | \"bottom\"",
+        "resolved": "\"bottom\" | \"top\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Image Mobile Position",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"top\", \"bottom\"]",
+            "name": "uiEnum"
+          }],
+        "text": ""
+      },
+      "attribute": "image-mobile-pos",
+      "reflect": false,
+      "defaultValue": "\"top\""
+    },
+    "header": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Title Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "header",
+      "reflect": false
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Description Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": false
+    },
+    "buttonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "CTA Button Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "button-text",
+      "reflect": false
+    },
+    "buttonLink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "CTA Button Link",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "button-link",
+      "reflect": false
+    },
+    "buttonNewTab": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "CTA Button Link Open in New Tab",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "button-new-tab",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "paddingText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Spacing",
+        "resolved": "\"large\" | \"medium\" | \"none\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\" | \"xxxx-large\"",
+        "references": {
+          "Spacing": {
+            "location": "import",
+            "path": "../../global/mixins"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Text Padding",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
+            "name": "uiEnum"
+          }],
+        "text": ""
+      },
+      "attribute": "padding-text",
+      "reflect": false,
+      "defaultValue": "\"xxxx-large\""
+    },
+    "paddingImage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Spacing",
+        "resolved": "\"large\" | \"medium\" | \"none\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\" | \"xxxx-large\"",
+        "references": {
+          "Spacing": {
+            "location": "import",
+            "path": "../../global/mixins"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Image Padding",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
+            "name": "uiEnum"
+          }],
+        "text": ""
+      },
+      "attribute": "padding-image",
+      "reflect": false,
+      "defaultValue": "\"none\""
+    }
+  }; }
+}

package/dist/collection/components/sqm-image/Image.stories.js

@@ -0,0 +1,28 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Image",
+};
+export const Image = () => {
+  return h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png" });
+};
+export const ImageAlignmentLeft = () => {
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", alignment: "left" }));
+};
+export const ImageAlignmentCenter = () => {
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", alignment: "center" }));
+};
+export const ImageAlignmentRight = () => {
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", alignment: "right" }));
+};
+export const ImageMarginLeft = () => {
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", left: "100px", alignment: "center" }));
+};
+export const ImageMarginRight = () => {
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", right: "100px", alignment: "center" }));
+};
+export const ImageBackground = () => {
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", "background-color": "firebrick", alignment: "center" }));
+};
+export const ImageSizeConstrained = () => {
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/oIiVdMM.jpg", minHeight: "192px", maxWidth: "192px" }));
+};

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

@@ -0,0 +1,33 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+export function ImageView(props) {
+  const style = {
+    Container: {
+      display: "flex",
+      width: "100%",
+      justifyContent: props.alignment || "center",
+      background: props.backgroundColor || "",
+    },
+    Image: {
+      maxWidth: props.maxWidth || "100%",
+      minHeight: props.minHeight || "100%",
+      objectFit: "cover",
+      marginLeft: props.left || "0",
+      marginRight: props.right || "0",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  console.log(props);
+  const vanillaStyle = `
+    :host{
+      display: block;   
+    }
+  `;
+  return (h("div", null,
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    h("div", { class: sheet.classes.Container },
+      h("img", { src: props.imageUrl, class: sheet.classes.Image }))));
+}

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

@@ -0,0 +1,180 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import { getProps } from "../../utils/utils";
+import { ImageView } from "./sqm-image-view";
+/**
+ * @uiName Image Component
+ */
+export class Image {
+  constructor() {
+    /**
+     * @uiName Position Alignment
+     * @uiType string
+     * @uiEnum ["left", "center", "right"]
+     */
+    this.alignment = "center";
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return h(ImageView, Object.assign({}, getProps(this)));
+  }
+  static get is() { return "sqm-image"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "imageUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Image Link",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "image-url",
+      "reflect": false
+    },
+    "left": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Left Margin",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "left",
+      "reflect": false
+    },
+    "right": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Right Margin",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "right",
+      "reflect": false
+    },
+    "alignment": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"left\" | \"center\" | \"right\"",
+        "resolved": "\"center\" | \"left\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Position Alignment",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"left\", \"center\", \"right\"]",
+            "name": "uiEnum"
+          }],
+        "text": ""
+      },
+      "attribute": "alignment",
+      "reflect": false,
+      "defaultValue": "\"center\""
+    },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Background Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "background-color",
+      "reflect": false
+    },
+    "minHeight": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Min Height",
+            "name": "uiName"
+          }],
+        "text": "(optional) Helps with constraining minimum size"
+      },
+      "attribute": "min-height",
+      "reflect": false
+    },
+    "maxWidth": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Max Width",
+            "name": "uiName"
+          }],
+        "text": "(optional) Helps with constraining maximum size"
+      },
+      "attribute": "max-width",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}