@saasquatch/mint-components 1.4.2 → 1.5.0-100

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

@@ -0,0 +1,132 @@
+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",
+      width: "100%",
+      height: "100%",
+      maxWidth: "max-content",
+      objectFit: "cover",
+      margin: "auto",
+    },
+    Background: {
+      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",
+          padding: "calc(0.5*var(--sl-spacing-" + props.paddingText + "))",
+        },
+      },
+      "@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 })),
+        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,453 @@
+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": "ImageUpload",
+            "name": "uiWidget"
+          }, {
+            "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,26 @@
+import { h } from "@stencil/core";
+import scenario from "./sqm-image.feature";
+export default {
+  title: "Components/Image",
+  parameters: {
+    scenario,
+  },
+};
+export const Image = () => {
+  return (h("sqm-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829007/tenant_test_a7iws76wkk4az/oxghbkf3aazwqz3xusry.png" }));
+};
+export const ImageAlignmentLeft = () => {
+  return (h("sqm-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829007/tenant_test_a7iws76wkk4az/oxghbkf3aazwqz3xusry.png", alignment: "left" }));
+};
+export const ImageAlignmentCenter = () => {
+  return (h("sqm-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829007/tenant_test_a7iws76wkk4az/oxghbkf3aazwqz3xusry.png", alignment: "center" }));
+};
+export const ImageAlignmentRight = () => {
+  return (h("sqm-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829007/tenant_test_a7iws76wkk4az/oxghbkf3aazwqz3xusry.png", alignment: "right" }));
+};
+export const ImageBackground = () => {
+  return (h("sqm-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829007/tenant_test_a7iws76wkk4az/oxghbkf3aazwqz3xusry.png", "background-color": "firebrick", alignment: "center" }));
+};
+export const MinimumHeight = () => {
+  return (h("sqm-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829038/tenant_test_a7iws76wkk4az/fpqigwukfrsp12mc7kur.jpg", minHeight: "192px" }));
+};

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

@@ -0,0 +1,32 @@
+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: {
+      minHeight: props.minHeight || "100%",
+      width: "100%",
+      maxWidth: "max-content",
+      objectFit: "cover",
+    },
+  };
+  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 }))));
+}