@saasquatch/mint-components 1.15.0-4 → 1.15.0-40

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

@@ -31,19 +31,30 @@ export class ShareLink {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
      * @uiName Copy button label
      */
     this.copyButtonLabel = "Copy Link";
+    /**
+     * The type of the button that is used (primary, secondary, or tertiary).
+     * @uiName Button Type
+     * @uiType string
+     * @uiEnum ["primary", "secondary", "tertiary"]
+     * @uiEnumNames ["Primary", "Secondary", "Tertiary"]
+     * @uiGroup Style
+     */
+    this.buttonType = "primary";
     /**
      * Set the copy button style and placement
      *
-     * @uiName Style
+     * @uiName Button style
      * @uiType string
      * @uiEnum ["icon", "button-outside", "button-below"]
      * @uiEnumNames ["Icon", "Button outside", "Button below"]
+     * @uiGroup Style
      */
     this.buttonStyle = "icon";
     withHooks(this);
@@ -147,6 +158,9 @@ export class ShareLink {
           }, {
             "text": "[\"Left\", \"Center\", \"Right\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Change the text alignment"
       },
@@ -175,6 +189,152 @@ export class ShareLink {
       "reflect": false,
       "defaultValue": "\"Copy Link\""
     },
+    "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": "color",
+            "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Background color of share link container"
+      },
+      "attribute": "background-color",
+      "reflect": false
+    },
+    "borderColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Border color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Border color of share link container (default is set to 1px solid transparent)"
+      },
+      "attribute": "border-color",
+      "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": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Color of the text and copy icon"
+      },
+      "attribute": "text-color",
+      "reflect": false
+    },
+    "borderRadius": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Border Radius",
+            "name": "uiName"
+          }, {
+            "text": "number",
+            "name": "uiType"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "The border radius on the share link container (in pixels)"
+      },
+      "attribute": "border-radius",
+      "reflect": false
+    },
+    "buttonType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"primary\" | \"secondary\" | \"tertiary\"",
+        "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Button Type",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"primary\", \"secondary\", \"tertiary\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Primary\", \"Secondary\", \"Tertiary\"]",
+            "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "The type of the button that is used (primary, secondary, or tertiary)."
+      },
+      "attribute": "button-type",
+      "reflect": false,
+      "defaultValue": "\"primary\""
+    },
     "buttonStyle": {
       "type": "string",
       "mutable": false,
@@ -187,7 +347,7 @@ export class ShareLink {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Style",
+            "text": "Button style",
             "name": "uiName"
           }, {
             "text": "string",
@@ -198,6 +358,9 @@ export class ShareLink {
           }, {
             "text": "[\"Icon\", \"Button outside\", \"Button below\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Set the copy button style and placement"
       },
@@ -210,7 +373,7 @@ export class ShareLink {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; textColor?: string; buttonType?: \"primary\" | \"secondary\" | \"tertiary\"; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; borderRadius?: string; borderColor?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -245,7 +408,12 @@ function useDemoShareLink(props) {
     tooltiptext: props.tooltiptext,
     textAlign: props.textAlign,
     buttonStyle: props.buttonStyle,
+    backgroundColor: props.backgroundColor,
+    textColor: props.textColor,
+    borderRadius: props.borderRadius,
+    buttonType: props.buttonType,
     copyButtonLabel: props.copyButtonLabel,
+    borderColor: props.borderColor,
     rewardStatus: "AVAILABLE",
     open,
     onClick: () => {

package/dist/collection/components/sqm-stat-container/sqm-stat-container-view.js

@@ -5,25 +5,37 @@ export function StatContainerView(props, children) {
     const spaceValue = getComputedStyle(document.documentElement).getPropertyValue(`--sl-spacing-${props.space}`);
     return `${Math.floor(parseInt(spaceValue) / 2)}rem`;
   };
-  // Dependent on props, not feasiable to move out
+  // take alignment variable and convert it to CSS flexbox alignment
+  const alignment = props.alignment === "center"
+    ? "center"
+    : props.alignment === "right"
+      ? "flex-end"
+      : "flex-start";
+  // Dependent on props, not feasible to move out
   const style = {
     StatContainer: {
       width: "100%",
-      display: props.display || "grid",
-      "grid-template-columns": "repeat(auto-fill, minmax(130px, auto))",
-      gap: divideSpace(),
-      // First set of styles applies when shadow DOM is disabled, second set applies when shadow DOM is enabled
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: "center",
+      justifyContent: alignment,
+      flexDirection: "row",
+      gap: `var(--sl-spacing-${props.gap})`,
+      // Apply border styles conditionally based on the hideBorder prop
       "& > *": {
-        "border-right": "1px solid #EAEAEA",
+        "border-right": props.hideBorder
+          ? "none"
+          : "1px solid var(--sqm-text-subdued)",
         "padding-right": divideSpace(),
       },
       "& > :last-child": {
         "border-right": "none",
       },
       "& > ::slotted(*)": {
-        "border-right": "1px solid #EAEAEA",
+        "border-right": props.hideBorder
+          ? "none"
+          : "1px solid var(--sqm-text-subdued)",
         "padding-right": divideSpace(),
-        height: "100%",
       },
       "& > ::slotted(*:last-child)": {
         "border-right": "none",

package/dist/collection/components/sqm-stat-container/sqm-stat-container.js

@@ -21,12 +21,29 @@ export class StatContainer {
      */
     this.space = "xxx-large";
     /**
+     * @undocumented
      * @uiName Display
      * @uiType string
      * @uiEnum ["grid", "flex"]
      * @uiEnumNames ["Grid", "Flex"]
      */
-    this.display = "grid";
+    this.display = "flex";
+    /**
+     * Controls the alignment of the flexbox
+     *
+     * @uiName Alignment
+     * @uiType string
+     * @uiEnum ["left", "right", "center"]
+     * @uiEnumNames ["Left", "Right", "Center"]
+     */
+    this.alignment = "center";
+    /**
+     * @uiName Gap
+     * @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.gap = "x-large";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -84,6 +101,9 @@ export class StatContainer {
       "optional": false,
       "docs": {
         "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
             "text": "Display",
             "name": "uiName"
           }, {
@@ -100,7 +120,95 @@ export class StatContainer {
       },
       "attribute": "display",
       "reflect": false,
-      "defaultValue": "\"grid\""
+      "defaultValue": "\"flex\""
+    },
+    "hideBorder": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Hide border",
+            "name": "uiName"
+          }, {
+            "text": "boolean",
+            "name": "uiType"
+          }],
+        "text": "Hide the seperating border between stats"
+      },
+      "attribute": "hide-border",
+      "reflect": false
+    },
+    "alignment": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"left\" | \"right\" | \"center\"",
+        "resolved": "\"center\" | \"left\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Alignment",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"left\", \"right\", \"center\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Left\", \"Right\", \"Center\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": "Controls the alignment of the flexbox"
+      },
+      "attribute": "alignment",
+      "reflect": false,
+      "defaultValue": "\"center\""
+    },
+    "gap": {
+      "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": "Gap",
+            "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": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": ""
+      },
+      "attribute": "gap",
+      "reflect": false,
+      "defaultValue": "\"x-large\""
     }
   }; }
   static get states() { return {

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

@@ -97,6 +97,7 @@ import * as BaseRegistrationForm from "../sqm-base-registration/BaseRegistration
 import * as PortalRegistrationForm from "../sqm-portal-registration-form/PortalRegistrationForm.stories";
 import * as PortalGoogleRegistrationFormStories from "../sqm-portal-google-registration-form/PortalGoogleRegistrationForm.stories";
 import * as QRCode from "../sqm-qr-code/QRCode.stories";
+import * as Text from "../sqm-text/Text.stories";
 import * as Themes from "./Themes";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
@@ -199,6 +200,7 @@ const stories = [
   PayoutButtonScroll,
   PayoutStatusAlert,
   QRCode,
+  Text,
 ];
 /**
  * For internal documentation

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,6 +8,18 @@ export const TabsView = ({ content, placement, }) => {
     sl-tab-panel::part(base) {
       padding: ${padding};
     }
+
+    sl-tab::part(base) {
+      color: ${textColor};
+    }
+
+    sl-tab-group {
+      --sl-color-primary-500: var(--sqm-accent-color-icon);
+    }
+
+    sl-tab-group::part(tabs) {
+      border-bottom: 2px solid var(--sqm-border-color);
+    }
   `;
   return (h(Host, null,
     h("style", { type: "text/css" }, vanillaStyle),
@@ -19,7 +31,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/collection/components/sqm-task-card/DetailsView.js

@@ -2,6 +2,12 @@ import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 export const style = {
   Description: {
+    "& .icon": {
+      color: "var(--sqm-text)",
+      "&:hover": {
+        color: "var(--sqm-accent-color-icon)",
+      },
+    },
     "& input[type=checkbox]": {
       display: "none",
     },
@@ -12,7 +18,7 @@ export const style = {
       position: "absolute",
       top: "var(--sl-spacing-medium)",
       right: "var(--sl-spacing-medium)",
-      color: "var(--sl-color-neutral-700)",
+      color: "var(--sqm-text)",
       fontSize: "var(--sl-font-size-large)",
       "& :hover": {
         color: "var(--sl-color-primary-700)",
@@ -48,6 +54,6 @@ export function Details(props) {
     h("span", { class: sheet.classes.Description },
       h("input", { type: "checkbox", id: "details-" + rid }),
       h("label", { class: "details", htmlFor: "details-" + rid },
-        h("sl-icon", { exportparts: "base: chevron-icon", name: "chevron-down" })),
+        h("sl-icon", { class: "icon", exportparts: "base: chevron-icon", name: "chevron-down" })),
       h("span", { class: "summary", "progress-bar": props.progressBar }, props.content.description))));
 }

package/dist/collection/components/sqm-task-card/progress-bar/progress-bar-view.js

@@ -48,7 +48,8 @@ const style = {
       width: "100%",
       height: "4px",
       borderRadius: "4px",
-      backgroundColor: "var(--sl-color-primary-300)",
+      backgroundColor: "var(--sqm-accent-color-icon)",
+      background: "red",
     },
     "& .progress": {
       display: "block",
@@ -61,7 +62,7 @@ const style = {
       width: "12px",
       height: "12px",
       display: "flex",
-      backgroundColor: "var(--sl-color-primary-300)",
+      backgroundColor: "var(--sqm-accent-color-icon)",
       borderRadius: "50%",
       position: "relative",
       left: "47%",