@saasquatch/mint-components 1.5.0-0 → 1.5.0-101

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

@@ -1,20 +1,76 @@
 import { h, Host } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 import { HostBlock } from "../../global/mixins";
-const style = {
-  HostBlock: HostBlock,
-  buttonStyle: {
-    display: "block",
-  },
+const medium = {
+  facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
+  twitter: { color: "#1da1f2", text: "#fff", icon: "twitter" },
+  email: { color: "#666666", text: "#fff", icon: "envelope" },
+  direct: { color: "var(--sl-color-primary-500)", text: "#fff", icon: "send" },
+  linkedin: { color: "#0077b5", text: "#fff", icon: "linkedin" },
+  sms: { color: "#34DA50", text: "#fff", icon: "chat" },
+  fbmessenger: { color: "#0084ff", text: "#fff", icon: "messenger" },
+  whatsapp: { color: "#25d366", text: "#fff", icon: "whatsapp" },
+  linemessenger: { color: "#00B300", text: "#fff", icon: "line" },
+  pinterest: { color: "#e60023", text: "#fff", icon: "pinterest" },
 };
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
-const styleString = sheet.toString();
 export function ShareButtonView(props, children) {
+  const vanillaStyle = `
+    *::part(base) {
+			--sl-focus-ring-color-primary: ${props.backgroundcolor
+    ? props.backgroundcolor
+    : props.medium
+      ? medium[props.medium].color
+      : ""}80!important;
+
+      background: ${props.backgroundcolor
+    ? props.backgroundcolor
+    : props.medium
+      ? medium[props.medium].color
+      : ""};
+      color: ${props.textcolor
+    ? props.textcolor
+    : props.medium
+      ? medium[props.medium].text
+      : ""};
+      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;
+		top: 2%;
+	}
+  `;
+  const style = {
+    HostBlock: HostBlock,
+    buttonStyle: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      lineHeight: "0",
+    },
+  };
+  const sheet = 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.hideicon && (h("sl-icon", { slot: props.iconslot || "prefix", name: props.icon ? props.icon : medium[props.medium].icon, exportparts: "icon" })),
       !props.hidetext && children)));
 }

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

@@ -70,10 +70,10 @@ export class ShareButton {
             "text": "string",
             "name": "uiType"
           }, {
-            "text": "[\"facebook\", \"twitter\", \"email\", \"direct\", \"linkedin\", \"sms\", \"fbmessenger\", \"whatsapp\", \"linemessenger\", \"pinterest\", \"reminder\", \"unknown\" ]",
+            "text": "[\"facebook\", \"twitter\", \"email\", \"direct\", \"linkedin\", \"sms\", \"fbmessenger\", \"whatsapp\", \"linemessenger\", \"pinterest\" ]",
             "name": "uiEnum"
           }, {
-            "text": "[\"Facebook\", \"Twitter\", \"Email\", \"Web Share Sheet\", \"Linkedin\", \"SMS\", \"Facebook Messenger\", \"Whatsapp\", \"Line Messenger\", \"Pinterest\", \"Reminder\", \"Unknown\"]",
+            "text": "[\"Facebook\", \"Twitter\", \"Email\", \"Web Share Sheet\", \"Linkedin\", \"SMS\", \"Facebook Messenger\", \"Whatsapp\", \"Line Messenger\", \"Pinterest\"]",
             "name": "uiEnumNames"
           }],
         "text": "The social medium to share on. Share messages and links\r\nwill be pulled from your program config and tagged for analytics."
@@ -101,6 +101,72 @@ export class ShareButton {
       "attribute": "program-id",
       "reflect": false
     },
+    "borderradius": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Configure border radius with pixel amount",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "borderradius",
+      "reflect": false
+    },
+    "backgroundcolor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Button background color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "backgroundcolor",
+      "reflect": false
+    },
+    "textcolor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Button text color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "textcolor",
+      "reflect": false
+    },
     "pill": {
       "type": "boolean",
       "mutable": false,
@@ -242,7 +308,7 @@ export class ShareButton {
             "text": "Icon used in button. Will try to select an icon based on the share medium if left empty.",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Options available at https://shoelace.style/components/icon"
       },
       "attribute": "icon",
       "reflect": false
@@ -334,7 +400,7 @@ export class ShareButton {
       "mutable": false,
       "complexType": {
         "original": "DemoData<ShareButtonViewProps>",
-        "resolved": "{ loading?: boolean; medium?: \"facebook\" | \"twitter\" | \"email\" | \"direct\" | \"linkedin\" | \"sms\" | \"fbmessenger\" | \"whatsapp\" | \"linemessenger\" | \"pinterest\" | \"reminder\" | \"unknown\"; disabled?: boolean; pill?: boolean; type?: \"text\" | \"primary\" | \"success\" | \"info\" | \"warning\" | \"danger\" | \"default\"; size?: \"small\" | \"medium\" | \"large\"; icon?: string; hideicon?: boolean; hidetext?: boolean; iconslot?: \"prefix\" | \"suffix\"; onClick?: () => void; hide?: boolean; }",
+        "resolved": "{ loading?: boolean; medium?: \"facebook\" | \"twitter\" | \"email\" | \"direct\" | \"linkedin\" | \"sms\" | \"fbmessenger\" | \"whatsapp\" | \"linemessenger\" | \"pinterest\" | \"reminder\" | \"unknown\"; disabled?: boolean; pill?: boolean; type?: \"text\" | \"primary\" | \"success\" | \"info\" | \"warning\" | \"danger\" | \"default\"; size?: \"small\" | \"medium\" | \"large\"; icon?: string; hideicon?: boolean; hidetext?: boolean; iconslot?: \"prefix\" | \"suffix\"; onClick?: () => void; hide?: boolean; borderradius?: number; backgroundcolor?: string; textcolor?: string; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -363,16 +429,8 @@ export class ShareButton {
 }
 function useDemoShareButton(props) {
   return deepmerge({
-    medium: props.medium,
+    ...props,
     loading: false,
-    disabled: props.disabled,
-    pill: props.pill,
-    type: props.type,
-    size: props.size,
-    hideicon: props.hideicon,
-    hidetext: props.hidetext,
-    iconslot: props.iconslot,
-    icon: props.icon,
     hide: false,
     onClick: () => {
       // TODO: Provide visual feedback

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

@@ -1,5 +1,5 @@
 import { useEngagementMedium, useUserIdentity, useQuery, } from "@saasquatch/component-boilerplate";
-import gql from "graphql-tag";
+import { gql } from "graphql-request";
 import { useProgramId, getEnvironmentSDK, } from "@saasquatch/component-boilerplate";
 const MessageLinkQuery = gql `
   query (

package/dist/collection/components/sqm-share-code/ShareCode.stories.js

@@ -0,0 +1,17 @@
+import { h } from "@stencil/core";
+import scenario from "./ShareCode.feature";
+export default {
+  title: "Components/Share Code",
+  parameters: {
+    scenario,
+  },
+};
+export const ShareCode = () => {
+  return h("sqm-share-code", null);
+};
+export const CustomTooltipText = () => {
+  return h("sqm-share-code", { tooltiptext: "CUSTOM TOOLTIP TEXT" });
+};
+export const CustomTooltipDuration = () => {
+  return h("sqm-share-code", { tooltiplifespan: 5000 });
+};

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

@@ -132,7 +132,7 @@ export class ShareCode {
 }
 function useDemoShareCode(props) {
   const [open, setOpen] = useState(false);
-  const shareString = "https://www.example.com/sharelink/abc";
+  const shareString = "SHARECODE001";
   return deepmerge({
     shareString,
     tooltiptext: props.tooltiptext,

package/dist/collection/components/sqm-share-code/useShareCode.js

@@ -1,4 +1,4 @@
-import { useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useEngagementMedium, useMutation, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
 const MessageLinkQuery = gql `
@@ -10,11 +10,18 @@ const MessageLinkQuery = gql `
     }
   }
 `;
+const WIDGET_ENGAGEMENT_EVENT = gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
+`;
 export function useShareCode(props) {
   var _a, _b;
   const programId = useProgramId();
   const user = useUserIdentity();
+  const engagementMedium = useEngagementMedium();
   const { data } = useQuery(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = useMutation(WIDGET_ENGAGEMENT_EVENT);
   const shareString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.referralCode) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
@@ -25,6 +32,18 @@ export function useShareCode(props) {
     navigator.clipboard.writeText(shareString);
     setOpen(true);
     setTimeout(() => setOpen(false), props.tooltiplifespan);
+    sendLoadEvent({
+      eventMeta: {
+        programId,
+        id: user === null || user === void 0 ? void 0 : user.id,
+        accountId: user === null || user === void 0 ? void 0 : user.accountId,
+        type: "USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT",
+        meta: {
+          engagementMedium,
+          shareMedium: "DIRECT",
+        },
+      },
+    });
   }
   return { ...props, onClick, open, shareString };
 }

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

@@ -1,7 +1,11 @@
 import { h } from "@stencil/core";
 import { ShareLinkView } from "./sqm-share-link-view";
+import scenario from "./ShareLink.feature";
 export default {
   title: "Components/Share Link",
+  parameters: {
+    scenario,
+  },
 };
 export const Default = () => {
   const props = {

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

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 import { HostBlock } from "../../global/mixins";
 const style = {
   HostBlock: HostBlock,
@@ -8,8 +7,7 @@ const style = {
     "&::part(base)": { background: "white", opacity: "1", cursor: "pointer" },
   },
 };
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function ShareLinkView(props) {
   return (h("div", null,

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

@@ -1,4 +1,4 @@
-import { useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useEngagementMedium, useMutation, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
 const MessageLinkQuery = gql `
@@ -10,11 +10,18 @@ const MessageLinkQuery = gql `
     }
   }
 `;
+const WIDGET_ENGAGEMENT_EVENT = gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
+`;
 export function useShareLink(props) {
   var _a, _b;
   const { programId = useProgramId() } = props;
   const user = useUserIdentity();
+  const engagementMedium = useEngagementMedium();
   const { data } = useQuery(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = useMutation(WIDGET_ENGAGEMENT_EVENT);
   const shareString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
@@ -25,6 +32,18 @@ export function useShareLink(props) {
     navigator.clipboard.writeText(shareString);
     setOpen(true);
     setTimeout(() => setOpen(false), props.tooltiplifespan);
+    sendLoadEvent({
+      eventMeta: {
+        programId,
+        id: user === null || user === void 0 ? void 0 : user.id,
+        accountId: user === null || user === void 0 ? void 0 : user.accountId,
+        type: "USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT",
+        meta: {
+          engagementMedium,
+          shareMedium: "DIRECT",
+        },
+      },
+    });
   }
   return { ...props, onClick, open, shareString };
 }

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

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 export function StatContainerView(props, children) {
   const divideSpace = () => {
     const spaceValue = getComputedStyle(document.documentElement).getPropertyValue(`--sl-spacing-${props.space}`);
@@ -26,7 +25,7 @@ export function StatContainerView(props, children) {
         height: "100%",
       },
       "& > ::slotted(*:last-child)": {
-        "border-right": "1px solid #ffffff",
+        "border-right": "none",
       },
     },
     StatFrame: {
@@ -38,8 +37,7 @@ export function StatContainerView(props, children) {
       "margin-left": "-1px",
     },
   };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   return (h("div", { class: sheet.classes.StatFrame },
     h("div", { class: sheet.classes.StatContainer },

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

@@ -1,26 +1,49 @@
-import chroma from "chroma-js";
-export function autoColorScaleCss(color, name = "primary") {
-  if (!chroma.valid(color)) {
-    return;
+import { ColorError, guard, hsla, parseToHsla } from "color2k";
+const colorScale = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+const lScale = [
+  0.95,
+  0.86,
+  0.76,
+  0.66,
+  0.56,
+  0.46,
+  0.39,
+  0.32,
+  0.25,
+  0.18,
+  0.15,
+];
+// https://github.com/ricokahler/color2k/blob/main/src/parseToRgba.ts
+const hslaRegex = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i;
+function niceParseToHsla(color) {
+  const normalizedColor = color.trim();
+  const hslaMatch = hslaRegex.exec(normalizedColor);
+  if (hslaMatch) {
+    const [h, s, l, a] = Array.from(hslaMatch).slice(1).map(parseFloat);
+    if (guard(0, 100, s) !== s)
+      throw new ColorError(color);
+    if (guard(0, 100, l) !== l)
+      throw new ColorError(color);
+    return [h, s / 100, l, a || 1];
   }
-  const colorScale = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
-  const hex = chroma(color).hex();
-  const scale = chroma
-    .scale([
-    chroma(hex).luminance(0.95),
-    chroma(hex).luminance(0.84),
-    chroma(hex).luminance(0.73),
-    chroma(hex).luminance(0.62),
-    chroma(hex).luminance(0.49),
-    chroma(hex).luminance(0.35),
-    chroma(hex).luminance(0.23),
-    chroma(hex).luminance(0.15),
-    chroma(hex).luminance(0.1),
-    chroma(hex).luminance(0.05),
-    chroma(hex).luminance(0.02),
-  ])
-    .colors(colorScale.length);
-  return scale
-    .map((color, index) => `--sl-color-${name}-${colorScale[index]}: ${chroma(color).hex()};`)
-    .join("\n");
+  // Warning -- converts to RGB first, so is lossy
+  return parseToHsla(color);
+}
+function generateScale(color, name = "primary") {
+  const [h, s, l, a] = niceParseToHsla(color);
+  return lScale
+    .map((l) => hsla(h, s, l, a))
+    .map((color, index) => {
+    return `--sl-color-${name}-${colorScale[index]}: ${color};\n`;
+  });
+}
+/**
+ * Generated a Shoelace color scale css string from a base color
+ *
+ * @param color
+ * @param name
+ * @returns
+ */
+export function autoColorScaleCss(color, name = "primary") {
+  return generateScale(color, name).join("\n");
 }

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

@@ -14,6 +14,7 @@ export const ResizerStylesheet = `
     padding: 12px;
     height: fit-content;
     overflow: hidden;
+	width: 100%;
 }
 
 .resizer{

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

@@ -26,7 +26,7 @@ export const Netflix = `
 `;
 export const SaaSquatchCorporate = `
 :root{
-    ${autoColorScaleCss("green")}
+    ${autoColorScaleCss("#65bd60")}
     --sl-font-sans: Arial;
 }
 `;
@@ -36,3 +36,9 @@ export const NYTimes = `
     --sl-font-sans: Georgia, 'Times New Roman', serif;
 }
 `;
+export const Klip = `
+:root{
+    ${autoColorScaleCss("#4225C4")};
+}
+
+`;

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

@@ -45,6 +45,22 @@ import * as Hero from "../sqm-hero/Hero.stories";
 import * as ReferralIframe from "../sqm-referral-iframe/ReferralIframe.stories";
 import * as NameFields from "../sqm-name-fields/NameFields.stories";
 import * as RewardExchangeList from "../sqm-reward-exchange-list/RewardExchangeList.stories";
+import * as ProgramExplainer from "../sqm-program-explainer/ProgramExplainer.stories";
+import * as ProgramExplainerStep from "../sqm-program-explainer-step/ProgramExplainerStep.stories";
+import * as BrandStories from "../sqm-brand/SqmBrand.stories";
+import * as CardFeed from "../sqm-card-feed/CardFeed.stories";
+import * as PortalContainer from "../sqm-portal-container/PortalContainer.stories";
+import * as RewardsTableCell from "../sqm-rewards-table/RewardsTableCell.stories";
+import * as RewardsTable from "../sqm-rewards-table/RewardsTable.stories";
+import * as UseReferralTable from "../sqm-referral-table/UseReferralTable.stories";
+import * as HeroImage from "../sqm-hero-image/HeroImage.stories";
+import * as ReferralCard from "../sqm-referral-card/ReferralCard.stories";
+import * as Timeline from "../sqm-timeline/Timeline.stories";
+import * as Image from "../sqm-image/Image.stories";
+import * as TitledSection from "../sqm-titled-section/TitledSection.stories";
+import * as Scroll from "../sqm-scroll/Scroll.stories";
+import * as Tabs from "../sqm-tabs/Tabs.stories";
+import * as ShareCode from "../sqm-share-code/ShareCode.stories";
 import * as Themes from "./Themes";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
@@ -95,6 +111,22 @@ const stories = [
   UseRewardExchangeList,
   UseTaskCard,
   UseRewardsTable,
+  ProgramExplainer,
+  ProgramExplainerStep,
+  BrandStories,
+  CardFeed,
+  PortalContainer,
+  RewardsTableCell,
+  RewardsTable,
+  UseReferralTable,
+  HeroImage,
+  ReferralCard,
+  Timeline,
+  Image,
+  TitledSection,
+  Scroll,
+  Tabs,
+  ShareCode,
 ];
 /**
  * For internal documentation

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

@@ -0,0 +1,4 @@
+import { h, Host } from "@stencil/core";
+export const TabView = ({}, children) => {
+  return h(Host, null, children);
+};

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

@@ -0,0 +1,28 @@
+import { Component, h, Prop } from "@stencil/core";
+import { TabView } from "./sqm-tab-view";
+export class Tab {
+  render() {
+    return (h(TabView, null,
+      h("slot", null)));
+  }
+  static get is() { return "sqm-tab"; }
+  static get properties() { return {
+    "header": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "header",
+      "reflect": false
+    }
+  }; }
+}