@saasquatch/mint-components 1.15.0-14 → 1.15.0-16

package/dist/collection/components/sqm-share-button/ShareButton.stories.js

@@ -44,13 +44,15 @@ export const TextStyleWithoutIcon = () => {
   const props = { medium: "facebook", type: "text", hideicon: true };
   return h(ShareButtonView, Object.assign({}, props), "Share");
 };
-export const WithCustomColors = () => {
+export const WithCustomColorsAndBranding = () => {
   const props = {
     medium: "facebook",
     type: "text",
     backgroundcolor: "red",
     textcolor: "yellow",
     iconslot: "prefix",
+    border: "2px solid yellow",
+    borderradius: 30,
   };
   return h(ShareButtonView, Object.assign({}, props), "Facebook");
 };

package/dist/collection/components/sqm-share-button/sqm-share-button-view.js

@@ -24,15 +24,30 @@ const style = {
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
+// TODO: Figure out hover and active states
+// *::part(base):hover {
+// 	border-color: ${
+//     props.backgroundcolor
+//       ? props.backgroundcolor
+//       : props.medium
+//       ? medium[props.medium].color
+//       : ""
+//   }!important;
+// }
+// *::part(base):focus {
+// 	border-color: ${
+//     props.backgroundcolor
+//       ? props.backgroundcolor
+//       : props.medium
+//       ? medium[props.medium].color
+//       : ""
+//   }!important;
+// }
 export function ShareButtonView(props, children) {
   const vanillaStyle = `
-	*::part(base) {
-	border: none;
-			--sl-focus-ring-color-primary: ${props.backgroundcolor
-    ? props.backgroundcolor
-    : props.medium
-      ? medium[props.medium].color
-      : ""}80!important;
+	sl-button::part(base) {
+	  border: ${props.border || "none"};
+	
 
 	background: ${props.backgroundcolor
     ? props.backgroundcolor
@@ -47,21 +62,7 @@ export function ShareButtonView(props, children) {
 	border-radius: ${props.borderradius ? props.borderradius + "px" : ""};
 	}
 
-	*::part(base):hover {
-		border-color: ${props.backgroundcolor
-    ? props.backgroundcolor
-    : props.medium
-      ? medium[props.medium].color
-      : ""}D1!important;
-	}
 
-	*::part(base):focus {
-		border-color: ${props.backgroundcolor
-    ? props.backgroundcolor
-    : props.medium
-      ? medium[props.medium].color
-      : ""}D1!important;
-	}
 
 	*::part(label) {
 		position: relative;
@@ -71,7 +72,7 @@ export function ShareButtonView(props, children) {
   return props.hide ? (h(Host, { style: { display: "none" } })) : (h("div", null,
     h("style", { type: "text/css" }, styleString),
     h("style", { type: "text/css" }, vanillaStyle),
-    h("sl-button", { class: sheet.classes.buttonStyle, target: props.openInSameTab ? "_self" : "_blank", loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: !props.isPlainLink ? props.onClick : undefined, href: props.isPlainLink ? props.messageLink : undefined, exportparts: `base: ${props.type}sharebutton-base` },
+    h("sl-button", { class: sheet.classes.buttonStyle, target: props.openInSameTab ? "_self" : "_blank", loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: !props.isPlainLink ? props.onClick : undefined, href: props.isPlainLink ? props.messageLink : undefined, exportparts: `base: ${props.type}button-base` },
       !props.hideicon && (h("sl-icon", { slot: props.iconslot || "prefix", name: props.icon ? props.icon : medium[props.medium].icon, exportparts: "base: icon" })),
       !props.hidetext && children)));
 }

package/dist/collection/components/sqm-share-button/sqm-share-button.js

@@ -28,8 +28,8 @@ export class ShareButton {
     /**
      * @uiType string
      * @uiName Button style
-     * @uiEnum ["primary" , "success", "info", "warning", "danger", "default", "text" ]
-     * @uiEnumNames ["Primary", "Success", "Info", "Warning", "Danger", "Default", "Text"]
+     * @uiEnum ["primary", "secondary", "success", "info", "warning", "danger", "default", "text" ]
+     * @uiEnumNames ["Primary", "Secondary", "Success", "Info", "Warning", "Danger", "Default", "Text"]
      */
     this.type = "default";
     /**
@@ -41,11 +41,13 @@ export class ShareButton {
     this.iconslot = "prefix";
     /**
      * @uiName Hide icon
+     * @uiGroup Style
      * @default
      */
     this.hideicon = false;
     /**
      * @uiName Hide text
+     * @uiGroup Style
      * @default
      */
     this.hidetext = false;
@@ -148,6 +150,9 @@ export class ShareButton {
         "tags": [{
             "text": "Border radius",
             "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Configure border radius with pixel amount"
       },
@@ -174,12 +179,38 @@ export class ShareButton {
           }, {
             "text": "color",
             "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
       "attribute": "backgroundcolor",
       "reflect": false
     },
+    "border": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Border",
+            "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "border",
+      "reflect": false
+    },
     "textcolor": {
       "type": "string",
       "mutable": false,
@@ -200,6 +231,9 @@ export class ShareButton {
           }, {
             "text": "color",
             "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -220,6 +254,9 @@ export class ShareButton {
         "tags": [{
             "text": "Display pill",
             "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -250,8 +287,8 @@ export class ShareButton {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "| \"primary\"\n    | \"success\"\n    | \"info\"\n    | \"warning\"\n    | \"danger\"\n    | \"default\"\n    | \"text\"",
-        "resolved": "\"danger\" | \"default\" | \"info\" | \"primary\" | \"success\" | \"text\" | \"warning\"",
+        "original": "| \"primary\"\n    | \"secondary\"\n    | \"success\"\n    | \"info\"\n    | \"warning\"\n    | \"danger\"\n    | \"default\"\n    | \"text\"",
+        "resolved": "\"danger\" | \"default\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"text\" | \"warning\"",
         "references": {}
       },
       "required": false,
@@ -264,10 +301,10 @@ export class ShareButton {
             "text": "Button style",
             "name": "uiName"
           }, {
-            "text": "[\"primary\" , \"success\", \"info\", \"warning\", \"danger\", \"default\", \"text\" ]",
+            "text": "[\"primary\", \"secondary\", \"success\", \"info\", \"warning\", \"danger\", \"default\", \"text\" ]",
             "name": "uiEnum"
           }, {
-            "text": "[\"Primary\", \"Success\", \"Info\", \"Warning\", \"Danger\", \"Default\", \"Text\"]",
+            "text": "[\"Primary\", \"Secondary\", \"Success\", \"Info\", \"Warning\", \"Danger\", \"Default\", \"Text\"]",
             "name": "uiEnumNames"
           }],
         "text": ""
@@ -299,6 +336,9 @@ export class ShareButton {
           }, {
             "text": "[\"Small\", \"Medium\", \"Large\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -369,6 +409,9 @@ export class ShareButton {
         "tags": [{
             "text": "Hide icon",
             "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }, {
             "text": undefined,
             "name": "default"
@@ -393,6 +436,9 @@ export class ShareButton {
         "tags": [{
             "text": "Hide text",
             "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }, {
             "text": undefined,
             "name": "default"
@@ -490,7 +536,7 @@ export class ShareButton {
       "mutable": false,
       "complexType": {
         "original": "DemoData<ShareButtonViewProps>",
-        "resolved": "{ loading?: boolean; icon?: string; disabled?: boolean; onClick?: () => void; medium?: \"facebook\" | \"twitter\" | \"email\" | \"direct\" | \"linkedin\" | \"sms\" | \"fbmessenger\" | \"whatsapp\" | \"linemessenger\" | \"pinterest\" | \"reminder\" | \"unknown\"; pill?: boolean; type?: \"text\" | \"primary\" | \"warning\" | \"info\" | \"success\" | \"default\" | \"danger\"; size?: \"small\" | \"medium\" | \"large\"; hideicon?: boolean; hidetext?: boolean; iconslot?: \"prefix\" | \"suffix\"; hide?: boolean; borderradius?: number; backgroundcolor?: string; textcolor?: string; messageLink?: string; openInSameTab?: boolean; isPlainLink?: boolean; }",
+        "resolved": "{ loading?: boolean; icon?: string; disabled?: boolean; onClick?: () => void; medium?: \"facebook\" | \"twitter\" | \"email\" | \"direct\" | \"linkedin\" | \"sms\" | \"fbmessenger\" | \"whatsapp\" | \"linemessenger\" | \"pinterest\" | \"reminder\" | \"unknown\"; pill?: boolean; type?: \"text\" | \"primary\" | \"secondary\" | \"warning\" | \"info\" | \"success\" | \"default\" | \"danger\"; size?: \"small\" | \"medium\" | \"large\"; border?: string; hideicon?: boolean; hidetext?: boolean; iconslot?: \"prefix\" | \"suffix\"; hide?: boolean; borderradius?: number; backgroundcolor?: string; textcolor?: string; messageLink?: string; openInSameTab?: boolean; isPlainLink?: boolean; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-tabs/Tabs.stories.js

@@ -13,6 +13,13 @@ export const SimpleTabs = () => (h("div", { style: { maxWidth: "700px", margin:
         <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>
       </sqm-tabs>
     ` }));
+export const CustomColor = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
+     <sqm-tabs text-color="red">
+        <sqm-tab header="General">This is the general tab</sqm-tab>
+        <sqm-tab header="Custom">This is the custom tab</sqm-tab>
+        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>
+      </sqm-tabs>
+    ` }));
 export const ManyTabs = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
      <sqm-tabs>
         <sqm-tab header="General">This is the general tab</sqm-tab>

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-export const TabsView = ({ content, placement, }) => {
+export const TabsView = ({ content, placement, textColor = "var(--sqm-text)", }) => {
   // Vertical padding for top & bottom placement, horizontal for left & right.
   const padding = !placement || placement === "top" || placement === "bottom"
     ? "var(--sl-spacing-x-large) 0;"
@@ -8,7 +8,12 @@ export const TabsView = ({ content, placement, }) => {
     sl-tab-panel::part(base) {
       padding: ${padding};
     }
+
+    sl-tab::part(base) {
+      color: ${textColor};
+    }
   `;
+  console.log("text color is ", textColor);
   return (h(Host, null,
     h("style", { type: "text/css" }, vanillaStyle),
     h("sl-tab-group", { placement: placement }, content.tabs.map((tab) => {
@@ -19,7 +24,7 @@ export const TabsView = ({ content, placement, }) => {
             h("slot", { name: slotName }))));
       }
       return [
-        h("sl-tab", { slot: "nav", panel: slotName, id: tab.getAttribute("id") || slotName }, tab.getAttribute("header")),
+        h("sl-tab", { slot: "nav", panel: slotName, part: "tab", id: tab.getAttribute("id") || slotName }, tab.getAttribute("header")),
         h("sl-tab-panel", { name: slotName },
           h("slot", { name: slotName })),
       ];

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

@@ -19,8 +19,8 @@ export class Tabs {
   disconnectedCallback() { }
   render() {
     const { content } = useTabs();
-    const { placement } = getProps(this);
-    return (h(TabsView, { placement: placement, content: content },
+    const { placement, textColor } = getProps(this);
+    return (h(TabsView, { placement: placement, content: content, textColor: textColor },
       h("slot", null)));
   }
   static get is() { return "sqm-tabs"; }
@@ -54,6 +54,32 @@ export class Tabs {
       },
       "attribute": "placement",
       "reflect": false
+    },
+    "textColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Text color",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": "Tab text color"
+      },
+      "attribute": "text-color",
+      "reflect": false
     }
   }; }
 }

package/dist/esm/{ShadowViewAddon-3651cb42.js → ShadowViewAddon-967f1f54.js}

@@ -38,15 +38,30 @@ const style = {
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
+// TODO: Figure out hover and active states
+// *::part(base):hover {
+// 	border-color: ${
+//     props.backgroundcolor
+//       ? props.backgroundcolor
+//       : props.medium
+//       ? medium[props.medium].color
+//       : ""
+//   }!important;
+// }
+// *::part(base):focus {
+// 	border-color: ${
+//     props.backgroundcolor
+//       ? props.backgroundcolor
+//       : props.medium
+//       ? medium[props.medium].color
+//       : ""
+//   }!important;
+// }
 function ShareButtonView(props, children) {
   const vanillaStyle = `
-	*::part(base) {
-	border: none;
-			--sl-focus-ring-color-primary: ${props.backgroundcolor
-    ? props.backgroundcolor
-    : props.medium
-      ? medium[props.medium].color
-      : ""}80!important;
+	sl-button::part(base) {
+	  border: ${props.border || "none"};
+	
 
 	background: ${props.backgroundcolor
     ? props.backgroundcolor
@@ -61,21 +76,7 @@ function ShareButtonView(props, children) {
 	border-radius: ${props.borderradius ? props.borderradius + "px" : ""};
 	}
 
-	*::part(base):hover {
-		border-color: ${props.backgroundcolor
-    ? props.backgroundcolor
-    : props.medium
-      ? medium[props.medium].color
-      : ""}D1!important;
-	}
 
-	*::part(base):focus {
-		border-color: ${props.backgroundcolor
-    ? props.backgroundcolor
-    : props.medium
-      ? medium[props.medium].color
-      : ""}D1!important;
-	}
 
 	*::part(label) {
 		position: relative;
@@ -85,7 +86,7 @@ function ShareButtonView(props, children) {
   return props.hide ? (h(Host, { style: { display: "none" } })) : (h("div", null,
     h("style", { type: "text/css" }, styleString),
     h("style", { type: "text/css" }, vanillaStyle),
-    h("sl-button", { class: sheet.classes.buttonStyle, target: props.openInSameTab ? "_self" : "_blank", loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: !props.isPlainLink ? props.onClick : undefined, href: props.isPlainLink ? props.messageLink : undefined, exportparts: `base: ${props.type}sharebutton-base` },
+    h("sl-button", { class: sheet.classes.buttonStyle, target: props.openInSameTab ? "_self" : "_blank", loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: !props.isPlainLink ? props.onClick : undefined, href: props.isPlainLink ? props.messageLink : undefined, exportparts: `base: ${props.type}button-base` },
       !props.hideicon && (h("sl-icon", { slot: props.iconslot || "prefix", name: props.icon ? props.icon : medium[props.medium].icon, exportparts: "base: icon" })),
       !props.hidetext && children)));
 }
@@ -4005,29 +4006,29 @@ function CardFeedView(props, children) {
     h("div", { class: sheet.classes.Container, part: "sqm-base" }, children)));
 }
 
-const style$a = {
-  HostBlock: HostBlock,
-  couponCodeLabel: {
-    margin: "var(--sl-spacing-x-small) 0",
-    color: "var(--sqm-text-subdued)",
-    fontSize: "var(--sl-font-size-small)",
-  },
-};
-const vanillaStyle$6 = `
+function CouponCodeView(props) {
+  const error = !props.loading && props.error;
+  const style = {
+    HostBlock: HostBlock,
+    couponCodeLabel: {
+      margin: "var(--sl-spacing-x-small) 0",
+      color: props.textColor || "var(--sqm-text-subdued)",
+      fontSize: "var(--sl-font-size-small)",
+    },
+  };
+  const vanillaStyle = `
   :host{
     display: block;   
     width: 100%;
   }
 `;
-const sheet$a = createStyleSheet(style$a);
-const styleString$a = sheet$a.toString();
-function CouponCodeView(props) {
-  const error = !props.loading && props.error;
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
   return (h("div", null,
     h("style", { type: "text/css" },
-      styleString$a,
-      vanillaStyle$6),
-    h("p", { class: sheet$a.classes.couponCodeLabel, style: { textAlign: props.textAlign } }, props.couponCodeLabel),
+      styleString,
+      vanillaStyle),
+    h("p", { class: sheet.classes.couponCodeLabel, style: { textAlign: props.textAlign } }, props.couponCodeLabel),
     error ? (h("sqm-form-message", { type: props.errorType, exportparts: "erroralert-icon" },
       h("div", { part: "erroralert-text" }, props.errorText))) : (h(CopyTextView, Object.assign({}, props)))));
 }