@saasquatch/mint-components 1.5.0-99 → 1.5.0

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

@@ -7,50 +7,50 @@ export default {
   },
 };
 export const OverlayHeader = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643828752/tenant_test_a7iws76wkk4az/aag0ns2mstusdizs0g2x.png", header: "Klip Rewards", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const OverlayDescription = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643828752/tenant_test_a7iws76wkk4az/aag0ns2mstusdizs0g2x.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const OverlayButton = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643828752/tenant_test_a7iws76wkk4az/aag0ns2mstusdizs0g2x.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const OverlayPadding = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643828752/tenant_test_a7iws76wkk4az/aag0ns2mstusdizs0g2x.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "padding-image": "none", "padding-text": "xxx-small" }));
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "padding-image": "none", "padding-text": "xxx-small" }));
 };
 export const OverlayLong = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643828752/tenant_test_a7iws76wkk4az/aag0ns2mstusdizs0g2x.png", header: "Klip Rewards", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "button-text": "Start earning", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "button-text": "Start earning", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const OverlayLeft = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643828752/tenant_test_a7iws76wkk4az/aag0ns2mstusdizs0g2x.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "left", "padding-image": "none", "padding-text": "xxxx-large" }));
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "left", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const OverlayCenter = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643828752/tenant_test_a7iws76wkk4az/aag0ns2mstusdizs0g2x.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "center", "padding-image": "none", "padding-text": "xxxx-large" }));
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "center", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const OverlayRight = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643828752/tenant_test_a7iws76wkk4az/aag0ns2mstusdizs0g2x.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "right", "padding-image": "none", "padding-text": "xxxx-large" }));
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "right", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const OverlayCustomColors = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643828752/tenant_test_a7iws76wkk4az/aag0ns2mstusdizs0g2x.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", "text-color": "#fffc4b", "overlay-color": "#ff7f7f", "overlay-opacity": "0.9", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", "text-color": "#fffc4b", "overlay-color": "#ff7f7f", "overlay-opacity": "0.9", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const OverlayCustomOpacity = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643828752/tenant_test_a7iws76wkk4az/aag0ns2mstusdizs0g2x.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", "text-color": "#fffc4b", "overlay-color": "#ff7f7f", "overlay-opacity": "0.3", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", "text-color": "#fffc4b", "overlay-color": "#ff7f7f", "overlay-opacity": "0.3", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const Columns = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643828833/tenant_test_a7iws76wkk4az/ypmzuxldhnbvouujeuks.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "padding-image": "none", "padding-text": "xxxx-large" }));
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const ColumnsPadding = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643828833/tenant_test_a7iws76wkk4az/ypmzuxldhnbvouujeuks.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "padding-image": "xxxx-large", "padding-text": "large" }));
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "padding-image": "xxxx-large", "padding-text": "large" }));
 };
 export const ColumnsLong = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643828833/tenant_test_a7iws76wkk4az/ypmzuxldhnbvouujeuks.png", header: "Klip Rewards", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "button-text": "Start earning", layout: "columns", "padding-image": "none", "padding-text": "xxxx-large" }));
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png", header: "Klip Rewards", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "button-text": "Start earning", layout: "columns", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const ColumnsReverse = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643828833/tenant_test_a7iws76wkk4az/ypmzuxldhnbvouujeuks.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", imagePos: "right", imageMobilePos: "bottom", "padding-image": "none", "padding-text": "xxxx-large" }));
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", imagePos: "right", imageMobilePos: "bottom", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const ColumnsCustomPercentage = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643828952/tenant_test_a7iws76wkk4az/binv6fy0l94xbljk4qty.png", description: "Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!", layout: "columns", "image-percentage": "33%", "padding-image": "large", "padding-text": "large", "background-color": "" }));
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000248/squatch-assets/MVgOJn7.png", description: "Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!", layout: "columns", "image-percentage": "33%", "padding-image": "large", "padding-text": "large", "background-color": "#EFF8FE" }));
 };
 export const ColumnsCustomColors = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643828833/tenant_test_a7iws76wkk4az/ypmzuxldhnbvouujeuks.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "text-color": "#fffc4b", "background-color": "#ff7f7f", "padding-image": "none", "padding-text": "xxxx-large" }));
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "text-color": "#fffc4b", "background-color": "#ff7f7f", "padding-image": "none", "padding-text": "xxxx-large" }));
 };

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

@@ -3,6 +3,7 @@ import { createStyleSheet } from "../../styling/JSS";
 export function HeroImageView(props, children) {
   const overlay = Boolean((props.header || props.description || props.buttonText) &&
     props.layout === "overlay");
+  // Dependent on props, not feasiable to move out
   const style = {
     Container: {
       position: "relative",
@@ -12,7 +13,7 @@ export function HeroImageView(props, children) {
         height: "100%",
         position: "absolute",
         background: props.overlayColor || "var(--sl-color-primary-900)",
-        opacity: props.overlayOpacity || "0.75",
+        opacity: props.overlayOpacity,
       },
     },
     Image: {
@@ -33,10 +34,17 @@ export function HeroImageView(props, children) {
     },
     Overlay: {
       zIndex: "1",
-      padding: "var(--sl-spacing-" + props.paddingText + ")",
+      padding: "calc(var(--sl-spacing-" +
+        props.paddingText +
+        ") + var(--sl-spacing-" +
+        props.paddingImage +
+        "))",
       textAlign: "center",
       color: props.textColor || "var(--sl-color-neutral-0)",
       lineHeight: "var(--sl-line-height-dense)",
+      "@media (max-width: 599px)": {
+        padding: "var(--sl-spacing-" + props.paddingText + ")",
+      },
     },
     Column: {
       display: "flex",
@@ -48,7 +56,6 @@ export function HeroImageView(props, children) {
         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%",
         },
@@ -100,7 +107,6 @@ export function HeroImageView(props, children) {
   :host{
     display: block;
   }`;
-  console.log(props);
   return (h("div", { class: sheet.classes.Container },
     h("style", { type: "text/css" },
       vanillaStyle,

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

@@ -7,11 +7,6 @@ import { HeroImageView } from "./sqm-hero-image-view";
  */
 export class HeroImage {
   constructor() {
-    /**
-     * @uiName Overlay Color
-     * @uiWidget color
-     */
-    this.overlayColor = "var(--sl-color-primary-900)";
     /**
      * @uiName Overlay Opacity
      */
@@ -20,6 +15,7 @@ export class HeroImage {
      * @uiName Image Layout
      * @uiType string
      * @uiEnum ["overlay", "columns"]
+     * @uiEnumNames ["Overlay", "Two-column"]
      */
     this.layout = "overlay";
     /**
@@ -31,12 +27,14 @@ export class HeroImage {
      * @uiName Image Position
      * @uiType string
      * @uiEnum ["left", "center", "right"]
+     * @uiEnumNames ["Left", "Center", "Right"]
      */
     this.imagePos = "center";
     /**
      * @uiName Image Mobile Position
      * @uiType string
      * @uiEnum ["top", "bottom"]
+     * @uiEnumNames ["Top", "Bottom"]
      */
     this.imageMobilePos = "top";
     /**
@@ -47,12 +45,14 @@ export class HeroImage {
      * @uiName Text Padding
      * @uiType string
      * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["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"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
     this.paddingImage = "none";
     withHooks(this);
@@ -97,7 +97,7 @@ export class HeroImage {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [{
             "text": "Overlay Color",
@@ -109,8 +109,7 @@ export class HeroImage {
         "text": ""
       },
       "attribute": "overlay-color",
-      "reflect": false,
-      "defaultValue": "\"var(--sl-color-primary-900)\""
+      "reflect": false
     },
     "overlayOpacity": {
       "type": "string",
@@ -199,6 +198,9 @@ export class HeroImage {
           }, {
             "text": "[\"overlay\", \"columns\"]",
             "name": "uiEnum"
+          }, {
+            "text": "[\"Overlay\", \"Two-column\"]",
+            "name": "uiEnumNames"
           }],
         "text": ""
       },
@@ -250,6 +252,9 @@ export class HeroImage {
           }, {
             "text": "[\"left\", \"center\", \"right\"]",
             "name": "uiEnum"
+          }, {
+            "text": "[\"Left\", \"Center\", \"Right\"]",
+            "name": "uiEnumNames"
           }],
         "text": ""
       },
@@ -277,6 +282,9 @@ export class HeroImage {
           }, {
             "text": "[\"top\", \"bottom\"]",
             "name": "uiEnum"
+          }, {
+            "text": "[\"Top\", \"Bottom\"]",
+            "name": "uiEnumNames"
           }],
         "text": ""
       },
@@ -410,6 +418,9 @@ export class HeroImage {
           }, {
             "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
             "name": "uiEnum"
+          }, {
+            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
+            "name": "uiEnumNames"
           }],
         "text": ""
       },
@@ -442,6 +453,9 @@ export class HeroImage {
           }, {
             "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
             "name": "uiEnum"
+          }, {
+            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
+            "name": "uiEnumNames"
           }],
         "text": ""
       },

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

@@ -7,20 +7,20 @@ export default {
   },
 };
 export const Image = () => {
-  return (h("sqm-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643829007/tenant_test_a7iws76wkk4az/oxghbkf3aazwqz3xusry.png" }));
+  return (h("sqm-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000259/squatch-assets/tn47wOj.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" }));
+  return (h("sqm-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000259/squatch-assets/tn47wOj.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" }));
+  return (h("sqm-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000259/squatch-assets/tn47wOj.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" }));
+  return (h("sqm-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000259/squatch-assets/tn47wOj.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" }));
+  return (h("sqm-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000259/squatch-assets/tn47wOj.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" }));
+  return (h("sqm-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000255/squatch-assets/oIiVdMM.jpg", minHeight: "192px" }));
 };

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 export function ImageView(props) {
+  // Dependent on props, not feasiable to move out
   const style = {
     Container: {
       display: "flex",
@@ -17,7 +18,6 @@ export function ImageView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  console.log(props);
   const vanillaStyle = `
     :host{
       display: block;   

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

@@ -2,7 +2,7 @@ import { Component, h, Prop } from "@stencil/core";
 import { getProps } from "../../utils/utils";
 import { ImageView } from "./sqm-image-view";
 /**
- * @uiName Image Component
+ * @uiName Image
  */
 export class Image {
   constructor() {
@@ -10,6 +10,7 @@ export class Image {
      * @uiName Position Alignment
      * @uiType string
      * @uiEnum ["left", "center", "right"]
+     * @uiEnumNames ["Left", "Center", "Right"]
      */
     this.alignment = "center";
   }
@@ -62,6 +63,9 @@ export class Image {
           }, {
             "text": "[\"left\", \"center\", \"right\"]",
             "name": "uiEnum"
+          }, {
+            "text": "[\"Left\", \"Center\", \"Right\"]",
+            "name": "uiEnumNames"
           }],
         "text": ""
       },
@@ -107,7 +111,7 @@ export class Image {
             "text": "Minimum Height",
             "name": "uiName"
           }],
-        "text": "(optional) Helps with constraining minimum size"
+        "text": "(Optional) Helps with constraining the minimum image size. Can be a pixel value or a percentage i.e. \"500px\", \"33%\", etc."
       },
       "attribute": "min-height",
       "reflect": false