@saasquatch/mint-components 1.5.0-7 → 1.5.0-70

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

@@ -0,0 +1,134 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+export function HeroImageView(props, children) {
+  const overlay = Boolean((props.header || props.description || props.buttonText) &&
+    props.layout === "overlay");
+  const style = {
+    Container: {
+      position: "relative",
+      "&:before": {
+        content: overlay ? '""' : "",
+        width: "100%",
+        height: "100%",
+        position: "absolute",
+        background: props.overlayColor || "var(--sl-color-primary-900)",
+        opacity: props.overlayOpacity || "0.75",
+      },
+    },
+    Image: {
+      display: "block",
+      maxWidth: props.maxWidth || "100%",
+      minHeight: props.minHeight || "300px",
+      objectFit: "cover",
+      margin: "auto",
+    },
+    Background: {
+      minHeight: props.minHeight,
+      backgroundImage: `url(${props.imageUrl})`,
+      backgroundSize: "cover",
+      backgroundPosition: props.imagePos || "center",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    Overlay: {
+      zIndex: "1",
+      padding: "var(--sl-spacing-" + props.paddingText + ")",
+      textAlign: "center",
+      color: props.textColor || "var(--sl-color-neutral-0)",
+      lineHeight: "var(--sl-line-height-dense)",
+    },
+    Column: {
+      display: "flex",
+      background: props.backgroundColor || "",
+      flexDirection: props.imagePos === "right" ? "row-reverse" : "row",
+      lineHeight: "var(--sl-line-height-dense)",
+      color: props.textColor || "var(--sl-color-neutral-900)",
+      "& .image-area": {
+        width: props.imagePercentage ? props.imagePercentage + "%" : "50%",
+        padding: "var(--sl-spacing-" + props.paddingImage + ")",
+        boxSizing: "border-box",
+        margin: props.maxHeight ? "auto" : "",
+        "@media (max-width: 599px)": {
+          width: "100%",
+        },
+      },
+      "& .text-area": {
+        width: props.imagePercentage
+          ? 100 - props.imagePercentage + "%"
+          : "50%",
+        padding: "var(--sl-spacing-" + props.paddingText + ")",
+        alignSelf: "center",
+        boxSizing: "border-box",
+        "@media (max-width: 599px)": {
+          width: "100%",
+          textAlign: "center",
+        },
+      },
+      "@media (max-width: 599px)": {
+        flexDirection: props.imageMobilePos === "bottom" ? "column-reverse" : "column",
+      },
+    },
+    Header: {
+      fontSize: "var(--sl-font-size-xxx-large)",
+      fontWeight: "var(--sl-font-weight-bold)",
+      "@media (max-width: 599px)": {
+        fontSize: "var(--sl-font-size-xx-large)",
+      },
+    },
+    Description: {
+      fontSize: "var(--sl-font-size-x-large)",
+      margin: "var(--sl-spacing-small) 0",
+      "@media (max-width: 599px)": {
+        fontSize: "var(--sl-font-size-large)",
+      },
+    },
+    Button: {
+      marginTop: "var(--sl-spacing-medium)",
+      "&::part(base)": {
+        padding: "0 var(--sl-spacing-x-large)",
+      },
+      "@media (max-width: 599px)": {
+        width: "100%",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
+  :host{
+    display: block;
+  }`;
+  console.log(props);
+  return (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    props.layout === "overlay" && OverlayView(),
+    props.layout === "columns" && ColumnView()));
+  function OverlayView() {
+    return (h("div", { class: sheet.classes.Background },
+      h("div", { class: sheet.classes.Overlay },
+        props.header && (h("div", { class: sheet.classes.Header }, props.header)),
+        props.description && (h("div", { class: sheet.classes.Description }, props.description)),
+        props.buttonText && (h("sl-button", { class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
+            ? window.open(props.buttonLink)
+            : window.open(props.buttonLink, "_parent") }, props.buttonText)),
+        children && children)));
+  }
+  function ColumnView() {
+    return (h("div", null,
+      h("div", { class: sheet.classes.Column },
+        h("div", { class: "image-area" },
+          h("img", { class: sheet.classes.Image, src: props.imageUrl, style: {
+              minHeight: props.minHeight || "100%",
+              maxHeight: props.maxHeight,
+            } })),
+        h("div", { class: "text-area" },
+          props.header && (h("div", { class: sheet.classes.Header }, props.header)),
+          props.description && (h("div", { class: sheet.classes.Description }, props.description)),
+          props.buttonText && (h("sl-button", { class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
+              ? window.open(props.buttonLink)
+              : window.open(props.buttonLink, "_parent") }, props.buttonText))))));
+  }
+}

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

@@ -0,0 +1,515 @@
+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 Maximum Image Width
+     */
+    this.maxWidth = "100%";
+    /**
+     * @uiName Overlay Color
+     * @uiWidget color
+     */
+    this.overlayColor = "var(--sl-color-primary-900)";
+    /**
+     * @uiName Overlay Opacity
+     */
+    this.overlayOpacity = "0.75";
+    /**
+     * @uiName Image Link
+     * @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 Padding Text
+     * @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 Padding Image
+     * @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
+    },
+    "minHeight": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Minimum Image Height",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "min-height",
+      "reflect": false
+    },
+    "maxHeight": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Maximum Image Height",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "max-height",
+      "reflect": false
+    },
+    "maxWidth": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Maximum Image Width",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "max-width",
+      "reflect": false,
+      "defaultValue": "\"100%\""
+    },
+    "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 Link",
+            "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": "Padding Text",
+            "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": "Padding Image",
+            "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,25 @@
+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 ImageAlignLeft = () => {
+  return h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", align: "left" });
+};
+export const ImageAlignCenter = () => {
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", align: "center" }));
+};
+export const ImageAlignRight = () => {
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", align: "right" }));
+};
+export const ImageMarginLeft = () => {
+  return h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", left: "100px" });
+};
+export const ImageMarginRight = () => {
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", right: "100px" }));
+};
+export const ImageBackground = () => {
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", "background-color": "firebrick" }));
+};