@saasquatch/mint-components 1.5.0-13 → 1.5.0-17

package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.js

@@ -21,41 +21,6 @@ export function RewardExchangeView(props) {
       padding: "var(--sl-spacing-medium)",
       position: "relative",
     },
-    CardContainer: {
-      "&:active": {
-      //boxShadow: "0 3px 10px #87ceeb6e!important",
-      },
-    },
-    Base: {
-      display: "flex",
-      cursor: "pointer",
-      textAlign: "center",
-      height: "120px",
-      "&::part(base)": {
-        boxShadow: "none",
-        width: "100%",
-        display: "flex",
-        margin: "0 auto",
-      },
-      "&::part(body)": {
-        padding: 0,
-        display: "flex",
-        width: "100%",
-      },
-    },
-    Drawer: {
-      "&::part(base)": {
-        minWidth: "400px",
-        maxWidth: "700px",
-        width: "50%",
-        margin: "0 auto",
-        right: "0",
-      },
-      "&::part(panel)": {
-        height: "85vh",
-        width: "100%",
-      },
-    },
     FullImage: {
       objectFit: "contain",
       maxWidth: "100%",
@@ -63,16 +28,6 @@ export function RewardExchangeView(props) {
       display: "flex",
       margin: "0 auto",
     },
-    PreviewImage: {
-      objectFit: "contain",
-      width: "120px",
-      height: "118px",
-      flex: 0.33,
-    },
-    InputBox: {
-      width: "100%",
-      marginBottom: "20px",
-    },
     Select: {
       "&::part(label)": {
         color: "var(--sl-color-primary-500)",
@@ -125,42 +80,39 @@ export function RewardExchangeView(props) {
         margin: "-9px",
       },
     },
-    Square: {
-      width: "120px",
-      height: "118px",
-      borderRadius: "3px 0 0 3px",
+    Image: {
+      padding: "var(--sl-spacing-small)",
+      minWidth: "96px",
+      maxWidth: "96px",
       "& .image": {
         width: "100%",
         height: "100%",
         objectFit: "contain",
-        borderRadius: "inherit",
+        borderRadius: "4px",
       },
       "& .image.subdued": {
         filter: "brightness(0.95)",
         opacity: "0.5",
       },
     },
-    Image: {
-      padding: "8px",
-      minWidth: "96px",
-      maxWidth: "96px",
+    Square: {
+      width: "120px",
+      height: "118px",
+      borderRadius: "3px 0 0 3px",
       "& .image": {
         width: "100%",
         height: "100%",
         objectFit: "contain",
-        borderRadius: "4px",
-      },
-      "& .image.subdued": {
-        filter: "brightness(0.95)",
-        opacity: "0.5",
+        borderRadius: "inherit",
       },
     },
     TextArea: {
       textAlign: "left",
-      padding: "12px",
+      padding: "var(--sl-spacing-small)",
+      paddingLeft: "0",
       "& .title": {
-        fontSize: "16px",
-        lineHeight: "20px",
+        fontSize: "var(--sl-font-size-medium)",
+        lineHeight: "var(--sl-line-height-dense)",
         fontWeight: "600",
         color: "var(--sl-color-neutral-1000)",
         display: "-webkit-box",
@@ -169,9 +121,9 @@ export function RewardExchangeView(props) {
         overflow: "hidden",
       },
       "& .amount": {
-        fontSize: "14px",
-        lineHeight: "18px",
-        marginTop: "8px",
+        fontSize: "var(--sl-font-size-small)",
+        lineHeight: "var(--sl-line-height-dense)",
+        marginTop: "var(--sl-spacing-x-small)",
         color: "var(--sl-color-neutral-500)",
         display: "-webkit-box",
         "-webkit-line-clamp": "1",
@@ -179,28 +131,31 @@ export function RewardExchangeView(props) {
         overflow: "hidden",
       },
       "& .error": {
-        fontSize: "14px",
-        lineHeight: "18px",
-        marginTop: "8px",
+        fontSize: "var(--sl-font-size-small)",
+        lineHeight: "var(--sl-line-height-dense)",
+        marginTop: "var(--sl-spacing-x-small)",
         fontWeight: "600",
         color: "var(--sl-color-warning-500)",
         display: "-webkit-box",
         "-webkit-line-clamp": "1",
         "-webkit-box-orient": "vertical",
         overflow: "hidden",
+        "& .icon": {
+          position: "relative",
+          top: "0.1em",
+          marginRight: "var(--sl-spacing-xx-small)",
+        },
       },
     },
     ChooseAmount: {
       margin: "var(--sl-spacing-medium) 0",
       "& .title": {
-        //fontSize: "var(--sl-font-size-large)",
-        fontSize: "113%",
+        fontSize: "var(--sl-font-size-large)",
         fontWeight: "var(--sl-font-weight-semibold)",
         color: "var(--sl-color-neutral-1000)",
       },
       "& .points": {
-        //fontSize: "var(--sl-font-size-large)",
-        fontSize: "113%",
+        fontSize: "var(--sl-font-size-large)",
         fontWeight: "var(--sl-font-weight-semibold)",
         color: "var(--sl-color-primary-500)",
       },
@@ -250,7 +205,7 @@ export function RewardExchangeView(props) {
           fontWeight: "var(--sl-font-weight-normal)",
           color: "var(--sl-color-neutral-1000)",
         },
-        "@media (max-width: 1024px)": {
+        "@media (max-width: 499px)": {
           width: "100%",
           marginRight: "0",
         },
@@ -262,7 +217,7 @@ export function RewardExchangeView(props) {
           fontWeight: "var(--sl-font-weight-normal)",
           color: "var(--sl-color-neutral-0)",
         },
-        "@media (max-width: 1024px)": {
+        "@media (max-width: 499px)": {
           width: "100%",
         },
       },
@@ -279,7 +234,7 @@ export function RewardExchangeView(props) {
   const sheet = jss.createStyleSheet(style);
   const styleString = sheet.toString();
   function getInput() {
-    var _a, _b;
+    var _a, _b, _c;
     const item = states.selectedItem;
     if (!item || (item === null || item === void 0 ? void 0 : item.ruleType) === "FIXED_GLOBAL_REWARD")
       return h("span", null, item === null || item === void 0 ? void 0 : item.prettySourceValue);
@@ -291,19 +246,22 @@ export function RewardExchangeView(props) {
         sourceUnit: item.sourceUnit,
       })));
     }
-    return (h("sl-select", { style: { width: "auto" }, label: "Select amount to receive", class: sheet.classes.Select, value: states.selectedStep, "onSl-select": (e) => {
+    return (h("sl-select", { style: { width: "auto" }, label: (_b = states === null || states === void 0 ? void 0 : states.content) === null || _b === void 0 ? void 0 : _b.text.selectText, class: sheet.classes.Select, value: states.selectedStep, "onSl-select": (e) => {
         var _a, _b, _c, _d, _e;
         return callbacks.setExchangeState({
           amount: (_c = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.sourceValue,
           selectedStep: (_e = (_d = e.detail) === null || _d === void 0 ? void 0 : _d.item) === null || _e === void 0 ? void 0 : _e.value,
         });
-      } }, (_b = item.steps) === null || _b === void 0 ? void 0 : _b.map((step) => {
+      } }, (_c = item.steps) === null || _c === void 0 ? void 0 : _c.map((step) => {
       var _a, _b;
       return (h("sl-menu-item", { value: step, disabled: !step.available },
         step.prettyDestinationValue,
         h("div", { slot: "suffix", style: { fontSize: "75%", float: "right" } },
           step.prettySourceValue,
-          step.unavailableReasonCode && (h("p", { style: { fontSize: "70%", color: "#F2994A" } }, intl.formatMessage({
+          step.unavailableReasonCode && (h("p", { style: {
+              fontSize: "70%",
+              color: "var(--sl-color-warning-500)",
+            } }, intl.formatMessage({
             id: "unavailableCode",
             defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
           }, {
@@ -324,12 +282,7 @@ export function RewardExchangeView(props) {
             : "none",
           borderRadius: "4px",
         };
-        const amount = item.ruleType === "FIXED_GLOBAL_REWARD"
-          ? item.prettySourceValue
-          : item.ruleType === "STEPPED_FIXED_GLOBAL_REWARD"
-            ? `${(_a = item.steps[0]) === null || _a === void 0 ? void 0 : _a.sourceValue} to ${(_b = item.steps.slice(-1).pop()) === null || _b === void 0 ? void 0 : _b.prettySourceValue}`
-            : `${item.prettySourceMinValue} to ${item.prettySourceMaxValue}`;
-        return (h("div", { key: item.key, class: item.available ? sheet.classes.CardContainer : "", style: style },
+        return (h("div", { key: item.key, style: style },
           h("sl-card", { class: sheet.classes.Card, style: {
               cursor: item.unavailableReasonCode
                 ? "not-allowed"
@@ -359,22 +312,32 @@ export function RewardExchangeView(props) {
                     "-webkit-line-clamp": item.unavailableReasonCode
                       ? "1"
                       : "2",
-                  } }, (_c = item.name) !== null && _c !== void 0 ? _c : ""),
+                  } }, (_a = item.name) !== null && _a !== void 0 ? _a : ""),
                 h("div", { class: "amount", style: {
                     "-webkit-line-clamp": item.unavailableReasonCode
                       ? "1"
                       : "2",
-                  } }, amount),
-                item.unavailableReasonCode && (h("div", { class: "error" }, intl.formatMessage({
-                  id: "unavailableCode",
-                  defaultMessage: (_e = (_d = states.content) === null || _d === void 0 ? void 0 : _d.text) === null || _e === void 0 ? void 0 : _e.notAvailableError,
+                  } }, intl.formatMessage({
+                  id: "sourceAmountMessage",
+                  defaultMessage: (_c = (_b = states.content) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c.sourceAmountMessage,
                 }, {
-                  unavailableReason: item.unavailableReason ||
-                    item.unavailableReasonCode,
-                  sourceUnit: item.sourceUnit,
-                  sourceValue: item.prettySourceValue ||
-                    item.prettySourceMinValue,
-                }))))))));
+                  ruleType: item.ruleType,
+                  sourceValue: item.prettySourceValue,
+                  sourceMinValue: item.prettySourceMinValue,
+                  sourceMaxValue: item.prettySourceMaxValue,
+                })),
+                item.unavailableReasonCode && (h("div", { class: "error" },
+                  h("sl-icon", { class: "icon", name: "exclamation-triangle-fill" }),
+                  intl.formatMessage({
+                    id: "unavailableCode",
+                    defaultMessage: (_e = (_d = states.content) === null || _d === void 0 ? void 0 : _d.text) === null || _e === void 0 ? void 0 : _e.notAvailableError,
+                  }, {
+                    unavailableReason: item.unavailableReason ||
+                      item.unavailableReasonCode,
+                    sourceUnit: item.sourceUnit,
+                    sourceValue: item.prettySourceValue ||
+                      item.prettySourceMinValue,
+                  }))))))));
       })),
       h("div", { class: sheet.classes.Button },
         h("sl-button", { class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText)),
@@ -401,36 +364,44 @@ export function RewardExchangeView(props) {
   function confirmation() {
     console.log(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name);
     return (h("div", null,
-      h("h2", { style: { margin: "20px 0" } }, states.content.text.redeemTitle),
+      h("h2", { style: { margin: "var(--sl-spacing-large) 0" } }, states.content.text.redeemTitle),
       h("div", { style: {
           textAlign: "center",
           marginBottom: "var(--sl-spacing-xxx-large)",
         } },
         h("p", null,
-          h("span", { style: { fontSize: "18px" } }, (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.prettySourceValue))),
+          h("span", { style: { fontSize: "var(--sl-font-size-large)" } }, (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.prettySourceValue))),
         h("p", null,
           h(ExchangeArrows, null)),
-        h("div", { class: sheet.classes.CardContainer, style: {
+        h("div", { style: {
             boxShadow: "none",
             marginBottom: "10px",
             flex: "1",
             minWidth: "100%",
           } },
-          h("sl-card", { style: { width: "auto", maxWidth: "350px", margin: "auto" }, class: sheet.classes.Card },
-            h("div", { class: sheet.classes.Square },
-              h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
-                  getAssetPath("./assets/placeholder.png") })),
-            h("div", { class: sheet.classes.TextArea, style: {
-                lineHeight: "18px",
-                alignSelf: "center",
-              } }, (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue) ? `${selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue} ${(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) || ""}`
-              : (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) || "")))),
+          h("sl-card", { class: sheet.classes.Card, style: {
+              width: "33%",
+              margin: "auto",
+            } },
+            h("div", { style: {
+                display: "flex",
+                width: "100%",
+                height: "120px",
+                borderRadius: "3px",
+                background: "rgba(0, 0, 0, 0)",
+              } },
+              h("div", { class: sheet.classes.Image },
+                h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
+                    getAssetPath("./assets/placeholder.png") })),
+              h("div", { class: sheet.classes.TextArea },
+                h("div", { class: "title" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name),
+                h("div", { class: "amount" }, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.destinationValue)))))),
       h("div", { class: sheet.classes.Button },
         h("sl-button", { class: "cancel", type: "text", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
         h("sl-button", { class: "continue", size: "large", loading: states.loading, onClick: callbacks.exchangeReward }, states.content.text.redeemText))));
   }
   function success() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     return (h("div", { class: sheet.classes.Success },
       h(Gift, null),
       h("div", { class: "title" }, states.content.text.rewardRedeemedText),
@@ -445,8 +416,11 @@ export function RewardExchangeView(props) {
       (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (h("div", { style: {
           width: "40%",
           margin: "-30px auto var(--sl-spacing-xxx-large) auto",
+          textAlign: "left",
+          color: "var(--sl-color-neutral-700)",
         } },
-        h(ShareLinkView, { shareString: data.fuelTankCode, tooltiptext: "Copied", open: states.open, onClick: callbacks.copyFuelTankCode }))),
+        "Promo code",
+        h(ShareLinkView, { shareString: data.fuelTankCode, tooltiptext: (_e = states === null || states === void 0 ? void 0 : states.content) === null || _e === void 0 ? void 0 : _e.text.toopTipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
       h("div", { class: sheet.classes.Button },
         h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
   }
@@ -471,8 +445,8 @@ export function RewardExchangeView(props) {
       h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
   function loading() {
-    return (h("div", { class: sheet.classes.Grid }, [...Array(8)].map(() => {
-      return (h("div", { class: sheet.classes.CardContainer },
+    return (h("div", { class: sheet.classes.Grid }, [...Array(states.content.text.skeletonCardNum)].map(() => {
+      return (h("div", null,
         h("sl-card", { class: sheet.classes.Card },
           h("div", { class: sheet.classes.CardLayout },
             h("div", null,
@@ -482,9 +456,12 @@ export function RewardExchangeView(props) {
                   margin: "9px",
                   "--border-radius": "4px",
                 } })),
-            h("div", { style: { margin: "12px 12px 0 0", width: "100%" } },
-              h("sl-skeleton", { style: { marginBottom: "12px" } }),
-              h("sl-skeleton", { style: { marginBottom: "12px" } }),
+            h("div", { style: {
+                margin: "var(--sl-spacing-small) var(--sl-spacing-small) 0 0",
+                width: "100%",
+              } },
+              h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
+              h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
               h("sl-skeleton", { style: { width: "45%" } }))))));
     })));
   }

package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list.js

@@ -22,11 +22,11 @@ export class SqmRewardExchangeList {
     /**
      * @uiName Choose Reward Progress Title
      */
-    this.chooseRewardTitle = "Choose reward";
+    this.chooseRewardTitle = "Rewards";
     /**
      * @uiName Choose Amount Progress Title
      */
-    this.chooseAmountTitle = "Amount";
+    this.chooseAmountTitle = "Select";
     /**
      * @uiName Confirmation Progress Title
      */
@@ -55,11 +55,28 @@ export class SqmRewardExchangeList {
      * @uiName Confirmation Title Text
      */
     this.redeemTitle = "Confirm and redeem";
+    /**
+     * @uiName Redemption Success Message
+     */
     this.redemptionSuccessText = "Successfully redeemed {sourceValue} for {destinationValue}";
+    /**
+     * @uiName Reward Exchange Amount Text
+     */
+    this.sourceAmountMessage = "{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}";
+    /**
+     * Shown when a user copies a fuel tank code
+     *
+     * @uiName Tool Tip Text
+     */
+    this.tooltiptext = "Copied";
     /**
      * @uiName Done Text
      */
     this.doneText = "Done";
+    /**
+     * @uiName Select Amount Text
+     */
+    this.selectText = "Select amount to receive";
     /**
      * @uiName Reward List Error Message
      */
@@ -72,6 +89,10 @@ export class SqmRewardExchangeList {
      * @uiName Not Enough Available Error Message
      */
     this.notEnoughError = "Not enough {sourceUnit} to redeem for this reward";
+    /**
+     * @uiName Number of Skeleton Cards
+     */
+    this.skeletonCardNum = 8;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -156,7 +177,7 @@ export class SqmRewardExchangeList {
       },
       "attribute": "choose-reward-title",
       "reflect": false,
-      "defaultValue": "\"Choose reward\""
+      "defaultValue": "\"Rewards\""
     },
     "chooseAmountTitle": {
       "type": "string",
@@ -177,7 +198,7 @@ export class SqmRewardExchangeList {
       },
       "attribute": "choose-amount-title",
       "reflect": false,
-      "defaultValue": "\"Amount\""
+      "defaultValue": "\"Select\""
     },
     "confirmationTitle": {
       "type": "string",
@@ -337,13 +358,58 @@ export class SqmRewardExchangeList {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "Redemption Success Message",
+            "name": "uiName"
+          }],
         "text": ""
       },
       "attribute": "redemption-success-text",
       "reflect": false,
       "defaultValue": "\"Successfully redeemed {sourceValue} for {destinationValue}\""
     },
+    "sourceAmountMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Exchange Amount Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "source-amount-message",
+      "reflect": false,
+      "defaultValue": "\"{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}\""
+    },
+    "tooltiptext": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Tool Tip Text",
+            "name": "uiName"
+          }],
+        "text": "Shown when a user copies a fuel tank code"
+      },
+      "attribute": "tooltiptext",
+      "reflect": false,
+      "defaultValue": "\"Copied\""
+    },
     "doneText": {
       "type": "string",
       "mutable": false,
@@ -365,6 +431,27 @@ export class SqmRewardExchangeList {
       "reflect": false,
       "defaultValue": "\"Done\""
     },
+    "selectText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Select Amount Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "select-text",
+      "reflect": false,
+      "defaultValue": "\"Select amount to receive\""
+    },
     "queryError": {
       "type": "string",
       "mutable": false,
@@ -428,6 +515,27 @@ export class SqmRewardExchangeList {
       "reflect": false,
       "defaultValue": "\"Not enough {sourceUnit} to redeem for this reward\""
     },
+    "skeletonCardNum": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Number of Skeleton Cards",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "skeleton-card-num",
+      "reflect": false,
+      "defaultValue": "8"
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,

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

@@ -35,6 +35,27 @@ export const TextStyleWithoutIcon = () => {
   const props = { medium: "facebook", type: "text", hideicon: true };
   return h(ShareButtonView, Object.assign({}, props), "Share");
 };
+export const WithCustomColors = () => {
+  const props = {
+    medium: "facebook",
+    type: "text",
+    backgroundcolor: "#3b5998",
+    textcolor: "#fff",
+    iconslot: "prefix",
+  };
+  return h(ShareButtonView, Object.assign({}, props), "Facebook");
+};
+export const WithCustomBorderRadius = () => {
+  const props = {
+    medium: "facebook",
+    type: "text",
+    backgroundcolor: "#3b5998",
+    textcolor: "#fff",
+    borderradius: 8,
+    iconslot: "prefix",
+  };
+  return h(ShareButtonView, Object.assign({}, props), "Facebook");
+};
 export const FullStackIcon = () => {
   return (h("div", null,
     h("sqm-share-button", { medium: "facebook", iconslot: "prefix" },

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

@@ -2,18 +2,26 @@ import { h, Host } from "@stencil/core";
 import jss from "jss";
 import preset from "jss-preset-default";
 import { HostBlock } from "../../global/mixins";
-const style = {
-  HostBlock: HostBlock,
-  buttonStyle: {
-    display: "block",
-  },
-};
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
-const styleString = sheet.toString();
 export function ShareButtonView(props, children) {
+  const vanillaStyle = `
+    *::part(base) {
+      background: ${props.backgroundcolor ? props.backgroundcolor : ""};
+      color: ${props.textcolor ? props.textcolor : ""};
+      border-radius: ${props.borderradius ? props.borderradius + "px" : ""};
+    }
+  `;
+  const style = {
+    HostBlock: HostBlock,
+    buttonStyle: {
+      display: "block",
+    },
+  };
+  jss.setup(preset());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
   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, loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: props.onClick, exportparts: `base: ${props.type}sharebutton-base` },
       !props.hideicon && (h("sl-icon", { slot: props.iconslot, name: props.icon ? props.icon : props.medium, exportparts: "icon" })),
       !props.hidetext && children)));