@saasquatch/mint-components 1.5.0-3 → 1.5.0-33

package/CHANGELOG.md

@@ -7,41 +7,155 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.5.0] - 2022-01-10
+
+### Added
+
+- Added Components:
+
+  - \<sqm-brand>
+    - Takes in a brand colour, creates a colour palette from it and sets --sl-primary colour's accordingly to child components
+    - Takes in a brand font and applies it to child components
+  - \<sqm-card-feed>
+    - Applies a masonry style grid to child components (created for sqm-task-card)
+    - Child width and gap between children is configurable
+  - \<sqm-program-explainer>
+    - Designed to wrap \<sqm-program-explainer-step>
+    - Adds header and footer sections
+    - Text (titles and descriptions) and colours (background and text) are configurable
+  - \<sqm-program-explainer-step>
+    - Card to explain part of a customers program
+    - Icon, background colour, text colour, title and description text are configurable
+  - \<sqm-reward-exchange-list>
+    - Allows users to exchange rewards configured by Tenant level reward exchange rules
+    - Includes props for complete text editability
+    - Has a 4 step process, select exchange rule, select reward, confirm exchange, exchanged
+  - \<sqm-rewards-table>
+    - Displays a table of users rewards with help from column and cell components
+    - Program Id prop specifies from which programs to show rewards for, defaults to program context but shows rewards globally if no program is provided through prop or context
+    - Column titles are shown by default but can be hidden via prop
+    - 3 rewards are shown per page by default but is customizable via prop
+    - Mobile responsive functionality
+    - Includes props for mobile and table breakpoints, which trigger mobile friendly views
+    - Includes prop to hide column titles in mobile view
+    - \<sqm-rewards-table-date-column>
+      - Displays reward dates in a column using the \<sqm-rewards-table-date-cell>
+      - Includes prop to configure what date to show (date given, expires, cancelled, redeemed, scheduled for)
+      - Includes prop to configure column title text
+    - \<sqm-rewards-table-date-cell>
+      - Displays reward date
+    - \<sqm-rewards-table-reward-column>
+      - Displays rewards in a column using the \<sqm-rewards-table-rewards-cell>
+      - Includes prop to configure column title and other text
+    - \<sqm-rewards-table-rewards-cell>
+      - Displays the amount and type of a reward
+      - Displays how much of the reward is available/redeemed
+    - \<sqm-rewards-table-source-column>
+      - Displays reward sources in a column using the \<sqm-rewards-table-source-cell>
+      - Includes props to configure text elements used in the source cell
+      - Includes prop to configure column title
+    - \<sqm-rewards-table-source-cell>
+      - Displays the source of a reward (Program/Automated, Manual, Referral, Reward Exchange)
+    - \<sqm-rewards-status-column>
+      - Displays reward statuses in a column using the \<sqm-rewards-table-status-cell>
+      - Includes props to configure reward status text
+      - Includes prop to configure column title
+    - \<sqm-rewards-table-status-cell>
+      - Displays the status of a reward along with status information (expiry or pending date, etc)
+  - \<sqm-task-card>
+    - Displays Tasks which correspond to program goals for users to complete
+    - Users progress comes from custom field or program goal, configured by prop
+    - Includes prop to disable cards outside of an activities duration, default is no duration (always available)
+    - Includes props for text configuration like card title, description, CTA button text
+    - Includes CTA button to redirect users to where they need to complete the task (new tab or existing tab), route is configurable via prop
+    - Progress bar is hidden or shown by prop, hidden by default
+    - Includes text showing how many times a user has completed a task if repeatable, text is configurable
+
+### Changed
+
+- Changed Components:
+  - \<sqm-big-stat>
+    - Added hook functionality to query customfields
+    - Hooks now returns value (number) and statValue (string)
+    - Added loading state into the hook
+  - \<sqm-leaderboard> CHANGES IN PROGRESS - UPDATE ME
+  - \<sqm-portal-container>
+    - Added max width prop, defaults to 100%
+  - \<sqm-referral-table>
+    - Added empty state text prop
+    - Added mobile responsive functionality
+    - Added props for mobile and table breakpoints, which trigger mobile friendly views
+    - Added prop to hide column titles in mobile view
+  - \<sqm-share-button>
+    - Added prop to override button colour
+    - Added prop to override button text colour
+    - Added prop to override border radius
+    - Added default button colours for all share mediums --TO DO--
+  - \<sqm-share-code>
+    - Sends a "USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT" analytic with "DIRECT" share medium event on copy code click
+  - \<sqm-share-link>
+    - Sends a "USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT" analytic with "DIRECT" share medium event on copy link click
+
+## [1.4.0] - 2021-12-09
+
+### Changed
+
+- Updated version of component-boilerplate to prevent rare case of user context being deleted during register
+- Updated version of component-boilerplate to support new registration, password reset, and verify requests
+- Changed components:
+  - \<sqm-portal-email-verification>
+    - Added prop to customize what page a user is redirected to from their verify email, defaults to /verifyEmail
+  - \<sqm-portal-forgot-password>
+    - Added prop to customize what page a user is redirected to from their password reset email, defaults to /resetPassword
+    - Added prop to customize the login button redirection path, defaults to /login
+  - \<sqm-portal-login>
+    - Added prop to customize the register button redirection path, defaults to /register
+    - Added prop to customize the forgot password text link redirection path, defaults to /forgotPassword
+  - \<sqm-portal-register>
+    - Added prop to customize the login button redirection path, defaults to /login
+    - Added prop to customize what page a user is redirect to from their initial verify email, defaults to /verifyEmail
+  - \<sqm-portal-reset-password>
+    - Added prop to customize what path users are redirected to when oobcode validation fails, defaults to /
+  - \<sqm-portal-verify-email>
+    - Added prop to customize what path users are redirected to when oobcode validation fails, defaults to /
+  - \<sqm-big-stat>
+    - Added program ID prop to optionally be used instead of the default program context
+
 ## [1.3.0] - 2021-11-08
 
 ### Changed
 
 - Changed components:
   - \<sqm-share-button>
-      - Exported "icon" part so it can be customizable in the future
-  - \<sqm-portal-change-password> 
-      - Changed sl-button in modal to be of type "primary" instead of "default"
-      - Swapped location of cancel and change password buttons
-      - Added padding between fields
-      - Changed hardcoded text into customizable props
-      - Changed password field input default label to "New Password"
-  - \<sqm-portal-profile> 
-      - Changed hardcoded text into customizable props
-      - Added padding text below header
-  - \<sqm-portal-reset-password> 
-      - Changed hardcoded text into customizable props
-      - Changed password field input default label to "New Password"
-  - \<sqm-portal-register> 
-      - Changed hardcoded text into customizable props
-      - Changed formData slot to add custom inputs to the top of form instead of the bottom
-      - Fixed bug causing the correct error validation message from being shown 
+    - Exported "icon" part so it can be customizable in the future
+  - \<sqm-portal-change-password>
+    - Changed sl-button in modal to be of type "primary" instead of "default"
+    - Swapped location of cancel and change password buttons
+    - Added padding between fields
+    - Changed hardcoded text into customizable props
+    - Changed password field input default label to "New Password"
+  - \<sqm-portal-profile>
+    - Changed hardcoded text into customizable props
+    - Added padding text below header
+  - \<sqm-portal-reset-password>
+    - Changed hardcoded text into customizable props
+    - Changed password field input default label to "New Password"
+  - \<sqm-portal-register>
+    - Changed hardcoded text into customizable props
+    - Changed formData slot to add custom inputs to the top of form instead of the bottom
+    - Fixed bug causing the correct error validation message from being shown
   - \<sqm-portal-email-verification>
-      - Changed hardcoded text into customizable props
+    - Changed hardcoded text into customizable props
   - \<sqm-portal-verify-email>
-      - Fixed bug causing users to get stuck if no userIdent existed when verifying their email
+    - Fixed bug causing users to get stuck if no userIdent existed when verifying their email
 
 ### Added
 
 - Default affiliate portal templates now provided in [Stencilbook](https://mint-components.stencilbook.saasquat.ch)
-    - Default Portal
-    - Multi Program Portal
-    - Lead Submit Portal
-    - Portal Dashboard (program widget)
+  - Default Portal
+  - Multi Program Portal
+  - Lead Submit Portal
+  - Portal Dashboard (program widget)
 - New components added for default affiliate portals
   - \<sqm-portal-footer> Footer for providing FAQ, T&S, and support email
   - \<sqm-hero> One or two column landing page with an optional background
@@ -159,7 +273,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - \<sqm-popup-container>
   - \<sqm-stencilbook>
 
-[unreleased]: https://github.com/saasquatch/program-tools/compare/mint-components@1.3.0...HEAD
+[unreleased]: https://github.com/saasquatch/program-tools/compare/mint-components@1.4.0...HEAD
+[1.5.0]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.5.0
+[1.4.0]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.4.0
 [1.3.0]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.3.0
 [1.2.0]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.2.0
 [1.1.1]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.1.1

package/dist/cjs/{jss-preset-default.esm-6304d24f.js → JSS-95c698c1.js}

@@ -4269,5 +4269,7 @@ var create$1 = function create(options) {
   };
 };
 
-exports.create = create$1;
-exports.jss = jss;
+const jss$1 = create(create$1());
+const createStyleSheet = (...args) => jss$1.createStyleSheet(...args);
+
+exports.createStyleSheet = createStyleSheet;

package/dist/cjs/ShadowViewAddon-a56caef2.js

@@ -0,0 +1,217 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+const index_module = require('./index.module-548bf279.js');
+
+function LoadingSlot() {
+  return (index.h("slot", { name: "loading" },
+    index.h(LoadingRow, null),
+    index.h(LoadingRow, null),
+    index.h(LoadingRow, null),
+    index.h(LoadingRow, null)));
+}
+function LoadingRow() {
+  return (index.h("sqm-table-row", null,
+    index.h("sqm-table-cell", { colspan: 5 },
+      index.h("sl-skeleton", null))));
+}
+function LoadingSkeleton() {
+  return (index.h("div", { style: { width: "100%" } },
+    index.h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    index.h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    index.h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    index.h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    index.h("sl-skeleton", null)));
+}
+function EmptySlot({ label }) {
+  return (index.h("slot", { name: "empty" },
+    index.h(EmptySkeleton, { label: label })));
+}
+function EmptySkeleton({ label }) {
+  return (index.h("div", { style: { width: "100%" } },
+    index.h("sqm-text", null,
+      index.h("h3", { style: { color: "#777777" } }, label))));
+}
+
+function empty(styles) {
+  return (index.h("table", null,
+    index.h("tr", null,
+      styles.showRank && index.h("th", { class: "Rank" }, styles.rankheading),
+      index.h("th", { class: "User" }, styles.usersheading),
+      index.h("th", { class: "Score" }, styles.statsheading)),
+    index.h("tr", null,
+      index.h("td", { colSpan: 100 }, "No Users"))));
+}
+function loading() {
+  return (index.h("table", null, [...Array(10)].map(() => {
+    return (index.h("tr", null,
+      index.h("td", null,
+        index.h("sl-skeleton", null))));
+  })));
+}
+function LeaderboardView(props) {
+  var _a, _b, _c, _d, _e;
+  const { states, data, elements } = props;
+  const { styles } = states;
+  console.log(props);
+  let userSeenFlag = false;
+  if (states.loading)
+    return loading();
+  if (!states.hasLeaders)
+    return empty(styles);
+  return (index.h("div", null,
+    index.h("table", null,
+      index.h("tr", null,
+        styles.showRank && index.h("th", { class: "Rank" }, styles.rankheading),
+        index.h("th", { class: "User" }, styles.usersheading),
+        index.h("th", { class: "Score" }, styles.statsheading)), (_a = data.leaderboard) === null || _a === void 0 ? void 0 :
+      _a.map((user) => {
+        var _a, _b;
+        if (user.rowNumber === ((_a = data.userRank) === null || _a === void 0 ? void 0 : _a.rowNumber))
+          userSeenFlag = true;
+        return (index.h("tr", { class: user.rowNumber === ((_b = data.userRank) === null || _b === void 0 ? void 0 : _b.rowNumber) ? "highlight" : "" },
+          styles.showRank && index.h("td", { class: "Rank" }, user.rank),
+          index.h("td", { class: "User" }, `${user.firstName} ${user.lastInitial} `),
+          index.h("td", { class: "Score" }, user.value)));
+      }),
+      !userSeenFlag && data.showUser && (index.h("tr", null,
+        index.h("td", { colSpan: 100, class: "ellipses" },
+          index.h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
+      !userSeenFlag && data.showUser && (index.h("tr", { class: "highlight" },
+        styles.showRank && index.h("td", { class: "Rank" }, (_b = data.userRank) === null || _b === void 0 ? void 0 : _b.rank),
+        index.h("td", { class: "User" }, `${((_c = data.userRank) === null || _c === void 0 ? void 0 : _c.firstName) || "-"} ${((_d = data.userRank) === null || _d === void 0 ? void 0 : _d.lastInitial) || "-"} `),
+        index.h("td", { class: "Score" }, ((_e = data.userRank) === null || _e === void 0 ? void 0 : _e.value) || "0"))))));
+}
+
+const GET_LEADERBOARD = index_module.dist.gql `
+  query ($type: String!, $filter: UserLeaderboardFilterInput) {
+    userLeaderboard(type: $type, filter: $filter) {
+      dateModified
+      rows {
+        value
+        firstName
+        lastInitial
+        rank {
+          rank
+          denseRank
+          rowNumber
+        }
+      }
+    }
+  }
+`;
+const GET_RANK = index_module.dist.gql `
+  query ($type: String!, $filter: UserLeaderboardFilterInput) {
+    viewer {
+      ... on User {
+        firstName
+        lastInitial
+        leaderboardRank(type: $type, filter: $filter) {
+          value
+          rank
+          denseRank
+          rowNumber
+        }
+      }
+    }
+  }
+`;
+function useLeaderboard(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  const programId = index_module.M();
+  const user = index_module.ne();
+  const variables = {
+    type: props.leaderboardType,
+    filter: { programId_eq: programId },
+  };
+  if (props.interval) {
+    variables.filter["interval"] = props.interval;
+  }
+  const { data: leaderboardData, loading: loadingLeaderboard } = index_module.mn(GET_LEADERBOARD, variables, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data: rankData } = index_module.mn(GET_RANK, variables, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const leaderboardRows = (_a = leaderboardData === null || leaderboardData === void 0 ? void 0 : leaderboardData.userLeaderboard) === null || _a === void 0 ? void 0 : _a.rows;
+  const flattenedLeaderboard = getFlattenedLeaderboard(leaderboardRows);
+  const sortedLeaderboard = flattenedLeaderboard === null || flattenedLeaderboard === void 0 ? void 0 : flattenedLeaderboard.sort(function (a, b) {
+    return a.rank - b.rank;
+  });
+  function getFlattenedLeaderboard(leaderboardRows) {
+    return leaderboardRows === null || leaderboardRows === void 0 ? void 0 : leaderboardRows.flatMap((user) => {
+      var _a, _b;
+      return ({
+        value: user.value,
+        firstName: user.firstName || "Anonymous",
+        lastInitial: user.lastInitial,
+        rank: (_a = user.rank) === null || _a === void 0 ? void 0 : _a[props.rankType],
+        rowNumber: (_b = user.rank) === null || _b === void 0 ? void 0 : _b.rowNumber,
+      });
+    });
+  }
+  console.log(rankData);
+  const viewingUser = {
+    value: (_c = (_b = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _b === void 0 ? void 0 : _b.leaderboardRank) === null || _c === void 0 ? void 0 : _c.value,
+    firstName: (_d = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _d === void 0 ? void 0 : _d.firstName,
+    lastInitial: (_e = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _e === void 0 ? void 0 : _e.lastInitial,
+    rank: (_g = (_f = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _f === void 0 ? void 0 : _f.leaderboardRank) === null || _g === void 0 ? void 0 : _g[props.rankType],
+    rowNumber: (_j = (_h = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _h === void 0 ? void 0 : _h.leaderboardRank) === null || _j === void 0 ? void 0 : _j.rowNumber,
+  };
+  return {
+    states: {
+      loading: loadingLeaderboard,
+      hasLeaders: (sortedLeaderboard === null || sortedLeaderboard === void 0 ? void 0 : sortedLeaderboard.length) > 0,
+      styles: props,
+    },
+    data: {
+      leaderboard: sortedLeaderboard,
+      rankType: props.rankType,
+      userRank: viewingUser,
+      showUser: props.showUser,
+    },
+    elements: {
+      empty: props.empty,
+      loadingstate: props.loadingstate,
+    },
+  };
+}
+
+const map = new Map();
+function withShadowView(component) {
+  // TODO: Could only do this if rendered in a Stencilbook environment to prevent unintended side-effects
+  const element = index.getElement(component);
+  let renderFn = component["render"].bind(component);
+  const newRenderFn = () => {
+    const key = element.getAttribute("stencilbook-shadow-view");
+    if (key) {
+      const value = map.get(key);
+      if (value) {
+        return value;
+      }
+    }
+    return renderFn();
+  };
+  component["render"] = newRenderFn;
+}
+/**
+ * Any story that defines `parameters.tagname` will be used as a wrapper component around the view
+ */
+const ShadowViewAddon = ({ story }, children) => {
+  var _a;
+  let TagName = (_a = story.parent.parameters) === null || _a === void 0 ? void 0 : _a.tagname;
+  if (!TagName)
+    return children;
+  const randomInt = Math.round(Math.random() * 100000);
+  map.set(randomInt + "", children);
+  const RandomTagName = "stencilbook-shawdow-view-" + randomInt;
+  // This will only re-render when the tag name changes, so we use a random tag name every time.
+  // Altneratively we could try to trick Stencil to call `forceUpdate` every time.
+  return (index.h(RandomTagName, null,
+    index.h(TagName, { "stencilbook-shadow-view": randomInt })));
+};
+
+exports.EmptySkeleton = EmptySkeleton;
+exports.EmptySlot = EmptySlot;
+exports.LeaderboardView = LeaderboardView;
+exports.LoadingSkeleton = LoadingSkeleton;
+exports.LoadingSlot = LoadingSlot;
+exports.ShadowViewAddon = ShadowViewAddon;
+exports.useLeaderboard = useLeaderboard;
+exports.withShadowView = withShadowView;

package/dist/cjs/{global-6223fe8f.js → global-0dfbf15e.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const _extends = require('./extends-0302d27d.js');
-const index_module = require('./index.module-7dd4b981.js');
+const index_module = require('./index.module-548bf279.js');
 
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -26409,11 +26409,11 @@ html {
   --sl-line-height-dense: 1.4;
   --sl-line-height-normal: 1.8;
   --sl-line-height-loose: 2.2;
-  --sl-focus-ring-color-primary: #0ea5e954;
-  --sl-focus-ring-color-success: #22c55e54;
-  --sl-focus-ring-color-info: #6b728054;
-  --sl-focus-ring-color-warning: #f59e0b54;
-  --sl-focus-ring-color-danger: #ef444454;
+  --sl-focus-ring-color-primary: var(--sl-color-primary-100);
+  --sl-focus-ring-color-success: var(--sl-color-success-100);
+  --sl-focus-ring-color-info: var(--sl-color-info-100);
+  --sl-focus-ring-color-warning: var(--sl-color-warning-100);
+  --sl-focus-ring-color-danger: #var(--sl-color-danger-100);;
   --sl-focus-ring-width: 3px;
   --sl-button-font-size-small: var(--sl-font-size-x-small);
   --sl-button-font-size-medium: var(--sl-font-size-small);
@@ -26512,6 +26512,14 @@ a:visited {
 a:hover {
   color: var(--sl-color-primary-600);
 }
+// .terms-link,
+// .terms-link:visited {
+//   color: var(--sl-color-gray-500);
+//   text-decoration: none;
+// }
+// .terms-link:hover {
+//   color: var(--sl-color-gray-600);
+// }
 h2, .Title {
   font-size: var(--sl-font-size-large);
   font-weight: var(--sl-font-weight-semibold);
@@ -26620,72 +26628,6 @@ sl-input::part(label){
   color: var(--sl-color-gray-900);
 }
 
-// The following commented out styles should be moved to Service Titan
-
-// stn-row[topmargin="x-large"] {
-//   margin-top: var(--sl-spacing-x-large);
-// }
-
-// stn-wrapper-column {
-//   max-width: var(--sqm-content-max-width);
-//   margin: var(--sl-spacing-x-large) auto;
-//   background-color: var(--sqm-content-background);
-// }
-
-// stn-wrapper-column > :not(:first-child), stn-wrapper-item > :not(:first-child) {
-//   margin-top: var(--sl-spacing-medium);
-// }
-
-// stn-wrapper-item, stn-wrapper-column{
-//   display: flex;
-//   flex-direction: column;
-//   box-sizing: border-box;
-//   width: 100%;
-//   height: auto;
-// }
-// stn-wrapper-item {
-//   padding: var(--sl-spacing-large);
-//   background-color: var(--sqm-content-background);
-// }
-
-// stn-row {
-//   display: flex;
-// }
-
-// stn-row[gap="medium"] > :not(:first-child) {
-//   margin-left: var(--sl-spacing-medium);
-// }
-
-// stn-row[space="even"] > * {
-//   flex: 1 1 0;
-// }
-
-// *::part(erroralert-icon), *::part(successalert-icon){
-//   align-items: flex-start;
-//   padding-top: var(--sl-spacing-large);
-// }
-
-// *::part(erroralert-text){
-//   color: var(--sl-color-danger-500);
-// }
-
-// *::part(successalert-text) {
-//   color: var(--sl-color-success-600);
-// }
-
-// *::part(successalert-text),
-// *::part(erroralert-text) {
-//   font-size: var(--sl-font-size-medium);
-//   font-weight: var(--sl-font-weight-semibold);
-//   width: 100%;
-// }
-// *::part(successalert-subtext){
-//   font-size: var(--sl-font-size-medium);
-//   font-weight: var(--sl-font-weight-normal);
-//   color: var(--sl-color-gray-800);
-//   width: 100%;
-// }
-
 .FooterEmail{
   text-decoration: none;
   font-size: var(--sl-font-size-medium);
@@ -26709,7 +26651,7 @@ try {
   // SlAlert.register();
   registerIconLibrary("default", {
     // same link that shoelace uses internally
-    resolver: (name) => `https://fast.ssqt.io/npm/bootstrap-icons@1.2.0/icons/${name}.svg`,
+    resolver: (name) => `https://fast.ssqt.io/npm/bootstrap-icons@1.7.2/icons/${name}.svg`,
   });
   // SlAlert.register();
   customElements.define("sl-alert", alert_default2);