@saasquatch/mint-components 1.6.8 → 1.6.9

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

@@ -104,11 +104,11 @@ export function HeroImageView(props, children) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  const vanillaStyle = `
-  :host{
-    display: block;
+  const vanillaStyle = `
+  :host{
+    display: block;
   }`;
-  return (h("div", { class: sheet.classes.Container },
+  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
@@ -116,7 +116,7 @@ export function HeroImageView(props, children) {
     props.layout === "columns" && ColumnView()));
   function OverlayView() {
     return (h("div", { class: sheet.classes.Background },
-      h("div", { class: sheet.classes.Overlay },
+      h("div", { class: sheet.classes.Overlay, part: "sqm-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
@@ -128,11 +128,11 @@ export function HeroImageView(props, children) {
     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
+          h("img", { class: sheet.classes.Image, src: props.imageUrl, part: "sqm-columns-image" })),
+        h("div", { class: "text-area", part: "sqm-columns-text-area" },
+          props.header && (h("div", { class: sheet.classes.Header, part: "sqm-columns-header" }, props.header)),
+          props.description && (h("div", { class: sheet.classes.Description, part: "sqm-columns-description" }, props.description)),
+          props.buttonText && (h("sl-button", { exportparts: "base: sqm-hero-image-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

@@ -11,49 +11,49 @@ import { HeroImageView } from "./sqm-hero-image-view";
 export class HeroImage {
   constructor() {
     /**
-     * @uiName Overlay Opacity
+     * @uiName Overlay opacity
      */
     this.overlayOpacity = "0.75";
     /**
-     * @uiName Image Layout
+     * @uiName Image layout
      * @uiType string
      * @uiEnum ["overlay", "columns"]
      * @uiEnumNames ["Overlay", "Two-column"]
      */
     this.layout = "overlay";
     /**
-     * @uiName Image Percentage
+     * @uiName Image percentage
      * @uiType number
      */
     this.imagePercentage = 50;
     /**
-     * @uiName Image Position
+     * @uiName Image position
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
      */
     this.imagePos = "center";
     /**
-     * @uiName Image Mobile Position
+     * @uiName Image mobile position
      * @uiType string
      * @uiEnum ["top", "bottom"]
      * @uiEnumNames ["Top", "Bottom"]
      */
     this.imageMobilePos = "top";
     /**
-     * @uiName Open Link in New Tab
+     * @uiName Open link in new tab
      * @default
      */
     this.buttonNewTab = false;
     /**
-     * @uiName Text Padding
+     * @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
+     * @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"]
@@ -107,7 +107,7 @@ export class HeroImage {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Overlay Color",
+            "text": "Overlay color",
             "name": "uiName"
           }, {
             "text": "color",
@@ -133,7 +133,7 @@ export class HeroImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Overlay Opacity",
+            "text": "Overlay opacity",
             "name": "uiName"
           }],
         "text": ""
@@ -154,7 +154,7 @@ export class HeroImage {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Text Color",
+            "text": "Text color",
             "name": "uiName"
           }, {
             "text": "color",
@@ -180,7 +180,7 @@ export class HeroImage {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Background Color",
+            "text": "Background color",
             "name": "uiName"
           }, {
             "text": "color",
@@ -206,7 +206,7 @@ export class HeroImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Image Layout",
+            "text": "Image layout",
             "name": "uiName"
           }, {
             "text": "string",
@@ -236,7 +236,7 @@ export class HeroImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Image Percentage",
+            "text": "Image percentage",
             "name": "uiName"
           }, {
             "text": "number",
@@ -260,7 +260,7 @@ export class HeroImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Image Position",
+            "text": "Image position",
             "name": "uiName"
           }, {
             "text": "string",
@@ -290,7 +290,7 @@ export class HeroImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Image Mobile Position",
+            "text": "Image mobile position",
             "name": "uiName"
           }, {
             "text": "string",
@@ -363,7 +363,7 @@ export class HeroImage {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Button Text",
+            "text": "Button text",
             "name": "uiName"
           }],
         "text": ""
@@ -383,7 +383,7 @@ export class HeroImage {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Button Link",
+            "text": "Button link",
             "name": "uiName"
           }],
         "text": ""
@@ -403,7 +403,7 @@ export class HeroImage {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Open Link in New Tab",
+            "text": "Open link in new tab",
             "name": "uiName"
           }, {
             "text": undefined,
@@ -432,7 +432,7 @@ export class HeroImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Text Padding",
+            "text": "Text padding",
             "name": "uiName"
           }, {
             "text": "string",
@@ -467,7 +467,7 @@ export class HeroImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Image Padding",
+            "text": "Image padding",
             "name": "uiName"
           }, {
             "text": "string",

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

@@ -18,15 +18,15 @@ export function ImageView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  const vanillaStyle = `
-    :host{
-      display: block;   
-    }
+  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 }))));
+    h("div", { class: sheet.classes.Container, part: "sqm-base" },
+      h("img", { part: "sqm-image", src: props.imageUrl, class: sheet.classes.Image }))));
 }

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

@@ -9,7 +9,7 @@ import { ImageView } from "./sqm-image-view";
 export class Image {
   constructor() {
     /**
-     * @uiName Position Alignment
+     * @uiName Position alignment
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
@@ -43,7 +43,7 @@ export class Image {
             "text": undefined,
             "name": "required"
           }, {
-            "text": "Image Link",
+            "text": "Image link",
             "name": "uiName"
           }],
         "text": ""
@@ -63,7 +63,7 @@ export class Image {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Position Alignment",
+            "text": "Position alignment",
             "name": "uiName"
           }, {
             "text": "string",
@@ -93,7 +93,7 @@ export class Image {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Background Color",
+            "text": "Background color",
             "name": "uiName"
           }, {
             "text": "color",
@@ -119,7 +119,7 @@ export class Image {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Minimum Height",
+            "text": "Minimum height",
             "name": "uiName"
           }],
         "text": "(Optional) Helps with constraining the minimum image size. Can be a pixel value or a percentage i.e. \"500px\", \"33%\", etc."

package/dist/collection/components/sqm-input-field/InputField.stories.js

@@ -38,7 +38,12 @@ const defaultRegisterProps = {
   refs: {
     formRef: {},
   },
-  content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
+  content: {
+    pageLabel: "Register",
+    confirmPasswordLabel: "Confirm Password",
+    requiredFieldErrorMessage: "Cannot be empty",
+    invalidEmailErrorMessage: "Must be a valid email address",
+  },
 };
 export const Default = () => h(InputFieldView, Object.assign({}, defaultProps));
 export const CustomLabel = () => (h(InputFieldView, Object.assign({}, defaultProps, { content: { ...defaultProps.content, fieldLabel: "My Label" } })));

package/dist/collection/components/sqm-input-field/sqm-input-field-view.js

@@ -9,12 +9,12 @@ const style = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
+const vanillaStyle = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
 `;
 jss.setup(preset());
 const sheet = jss.createStyleSheet(style);
@@ -23,7 +23,7 @@ export function InputFieldView(props) {
   var _a, _b, _c, _d, _e, _f, _g;
   const { states, content } = props;
   const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  return (h("div", { class: sheet.classes.FieldContainer },
+  return (h("div", { class: sheet.classes.FieldContainer, part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

package/dist/collection/components/sqm-input-field/sqm-input-field.js

@@ -16,14 +16,14 @@ export class InputField {
   constructor() {
     this.ignored = true;
     /**
-     * @uiName Input Type
+     * @uiName Input type
      * @uiType string
      * @uiEnum ["text", "date", "tel"]
      * @uiEnumNames ["Text", "Date", "Phone Number"]
      */
     this.fieldType = "text";
     /**
-     * @uiName Required Error Message
+     * @uiName Required error message
      */
     this.errorMessage = "Cannot be empty";
     /**
@@ -64,7 +64,7 @@ export class InputField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Input Name Attribute",
+            "text": "Input name attribute",
             "name": "uiName"
           }, {
             "text": undefined,
@@ -87,7 +87,7 @@ export class InputField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Input Label",
+            "text": "Input label",
             "name": "uiName"
           }],
         "text": ""
@@ -107,7 +107,7 @@ export class InputField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Input Type",
+            "text": "Input type",
             "name": "uiName"
           }, {
             "text": "string",
@@ -137,7 +137,7 @@ export class InputField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Required Error Message",
+            "text": "Required error message",
             "name": "uiName"
           }],
         "text": ""