@saasquatch/mint-components 1.5.0-113 → 1.5.0-117

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

@@ -10,8 +10,8 @@ export const ShareCode = () => {
   return h("sqm-share-code", null);
 };
 export const CustomTooltipText = () => {
-  return h("sqm-share-code", { tooltiptext: "CUSTOM TOOLTIP TEXT" });
+  return h("sqm-share-code", { tooltipText: "CUSTOM TOOLTIP TEXT" });
 };
 export const CustomTooltipDuration = () => {
-  return h("sqm-share-code", { tooltiplifespan: 5000 });
+  return h("sqm-share-code", { tooltipLifespan: 5000 });
 };

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

@@ -16,13 +16,13 @@ export class ShareCode {
      *
      * @uiName Tooltip text
      */
-    this.tooltiptext = "Copied to Clipboard";
+    this.tooltipText = "Copied to Clipboard";
     /**
      * The number of milliseconds that the tooltip will appear for
      *
      * @uiName Tooltip lifespan
      */
-    this.tooltiplifespan = DEFAULT_TOOLTIP_LIFESPAN;
+    this.tooltipLifespan = DEFAULT_TOOLTIP_LIFESPAN;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -56,7 +56,7 @@ export class ShareCode {
       "attribute": "program-id",
       "reflect": false
     },
-    "tooltiptext": {
+    "tooltipText": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -77,7 +77,7 @@ export class ShareCode {
       "reflect": false,
       "defaultValue": "\"Copied to Clipboard\""
     },
-    "tooltiplifespan": {
+    "tooltipLifespan": {
       "type": "number",
       "mutable": false,
       "complexType": {
@@ -103,7 +103,7 @@ export class ShareCode {
       "mutable": false,
       "complexType": {
         "original": "DemoData<ShareLinkViewProps>",
-        "resolved": "{ disabled?: boolean; onClick?: () => void; shareString?: string; open?: boolean; tooltiptext?: string; }",
+        "resolved": "{ disabled?: boolean; onClick?: () => void; shareString?: string; open?: boolean; tooltipText?: string; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -135,14 +135,14 @@ function useDemoShareCode(props) {
   const shareString = "SHARECODE001";
   return deepmerge({
     shareString,
-    tooltiptext: props.tooltiptext,
+    tooltipText: props.tooltipText,
     open,
     onClick: () => {
       // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
       // Only if called from a user-initiated event
       navigator.clipboard.writeText(shareString);
       setOpen(true);
-      setTimeout(() => setOpen(false), props.tooltiplifespan);
+      setTimeout(() => setOpen(false), props.tooltipLifespan);
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

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

@@ -31,7 +31,7 @@ export function useShareCode(props) {
     // Only if called from a user-initiated event
     navigator.clipboard.writeText(shareString);
     setOpen(true);
-    setTimeout(() => setOpen(false), props.tooltiplifespan);
+    setTimeout(() => setOpen(false), props.tooltipLifespan);
     sendLoadEvent({
       eventMeta: {
         programId,

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

@@ -11,14 +11,14 @@ export const Default = () => {
   const props = {
     shareString: "https://noah.example.com",
     open: false,
-    tooltiptext: "Copied!",
+    tooltipText: "Copied!",
   };
   return h(ShareLinkView, Object.assign({}, props));
 };
 export const Tooltip = () => {
   const props = {
     shareString: "https://noah.example.com",
-    tooltiptext: "Some text for the tooltip",
+    tooltipText: "Some text for the tooltip",
     open: true,
   };
   return h(ShareLinkView, Object.assign({}, props));
@@ -28,7 +28,7 @@ export const Disabled = () => {
     shareString: "https://noah.example.com",
     disabled: true,
     open: true,
-    tooltiptext: "Copied!",
+    tooltipText: "Copied!",
   };
   return h(ShareLinkView, Object.assign({}, props));
 };

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

@@ -34,7 +34,7 @@ export const BareBonesView = createHookStory(() => {
   const res = useShareLink({
     programId: "sam-partner-test-2",
     tooltiplifespan: 0,
-    tooltiptext: "",
+    tooltipText: "",
   });
   return (h("div", null,
     "Sharelink:",
@@ -45,7 +45,7 @@ export const RegularView = createHookStory(() => {
   setupGraphQL();
   return (h(ShareLinkView, Object.assign({}, useShareLink({
     programId: "sam-partner-test-2",
-    tooltiptext: "Copied to clipboard",
+    tooltipText: "Copied to clipboard",
     tooltiplifespan: 1000,
   }))));
 });
@@ -53,7 +53,7 @@ export const FastTooltip = createHookStory(() => {
   setupGraphQL();
   return (h(ShareLinkView, Object.assign({}, useShareLink({
     programId: "sam-partner-test-2",
-    tooltiptext: "⠀⠀⠀⠀⠀⠀⠀⠀⠀HELLO THERE!!!\n⠀⠀⠀⡯⡯⡾⠝⠘⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢊⠘⡮⣣⠪⠢⡑⡌\n⠀⠀⠀⠟⠝⠈⠀⠀⠀⠡⠀⠠⢈⠠⢐⢠⢂⢔⣐⢄⡂⢔⠀⡁⢉⠸⢨⢑⠕⡌\n⠀⠀⡀⠁⠀⠀⠀⡀⢂⠡⠈⡔⣕⢮⣳⢯⣿⣻⣟⣯⣯⢷⣫⣆⡂⠀⠀⢐⠑⡌\n⢀⠠⠐⠈⠀⢀⢂⠢⡂⠕⡁⣝⢮⣳⢽⡽⣾⣻⣿⣯⡯⣟⣞⢾⢜⢆⠀⡀⠀⠪\n⣬⠂⠀⠀⢀⢂⢪⠨⢂⠥⣺⡪⣗⢗⣽⢽⡯⣿⣽⣷⢿⡽⡾⡽⣝⢎⠀⠀⠀⢡\n⣿⠀⠀⠀⢂⠢⢂⢥⢱⡹⣪⢞⡵⣻⡪⡯⡯⣟⡾⣿⣻⡽⣯⡻⣪⠧⠑⠀⠁⢐\n⣿⠀⠀⠀⠢⢑⠠⠑⠕⡝⡎⡗⡝⡎⣞⢽⡹⣕⢯⢻⠹⡹⢚⠝⡷⡽⡨⠀⠀⢔\n⣿⡯⠀⢈⠈⢄⠂⠂⠐⠀⠌⠠⢑⠱⡱⡱⡑⢔⠁⠀⡀⠐⠐⠐⡡⡹⣪⠀⠀⢘\n⣿⣽⠀⡀⡊⠀⠐⠨⠈⡁⠂⢈⠠⡱⡽⣷⡑⠁⠠⠑⠀⢉⢇⣤⢘⣪⢽⠀⢌⢎\n⣿⢾⠀⢌⠌⠀⡁⠢⠂⠐⡀⠀⢀⢳⢽⣽⡺⣨⢄⣑⢉⢃⢭⡲⣕⡭⣹⠠⢐⢗\n⣿⡗⠀⠢⠡⡱⡸⣔⢵⢱⢸⠈⠀⡪⣳⣳⢹⢜⡵⣱⢱⡱⣳⡹⣵⣻⢔⢅⢬⡷\n⣷⡇⡂⠡⡑⢕⢕⠕⡑⠡⢂⢊⢐⢕⡝⡮⡧⡳⣝⢴⡐⣁⠃⡫⡒⣕⢏⡮⣷⡟\n⣷⣻⣅⠑⢌⠢⠁⢐⠠⠑⡐⠐⠌⡪⠮⡫⠪⡪⡪⣺⢸⠰⠡⠠⠐⢱⠨⡪⡪⡰\n⣯⢷⣟⣇⡂⡂⡌⡀⠀⠁⡂⠅⠂⠀⡑⡄⢇⠇⢝⡨⡠⡁⢐⠠⢀⢪⡐⡜⡪⡊\n⣿⢽⡾⢹⡄⠕⡅⢇⠂⠑⣴⡬⣬⣬⣆⢮⣦⣷⣵⣷⡗⢃⢮⠱⡸⢰⢱⢸⢨⢌\n⣯⢯⣟⠸⣳⡅⠜⠔⡌⡐⠈⠻⠟⣿⢿⣿⣿⠿⡻⣃⠢⣱⡳⡱⡩⢢⠣⡃⠢⠁\n⡯⣟⣞⡇⡿⣽⡪⡘⡰⠨⢐⢀⠢⢢⢄⢤⣰⠼⡾⢕⢕⡵⣝⠎⢌⢪⠪⡘⡌⠀\n⡯⣳⠯⠚⢊⠡⡂⢂⠨⠊⠔⡑⠬⡸⣘⢬⢪⣪⡺⡼⣕⢯⢞⢕⢝⠎⢻⢼⣀⠀\n⠁⡂⠔⡁⡢⠣⢀⠢⠀⠅⠱⡐⡱⡘⡔⡕⡕⣲⡹⣎⡮⡏⡑⢜⢼⡱⢩⣗⣯⣟\n⢀⢂⢑⠀⡂⡃⠅⠊⢄⢑⠠⠑⢕⢕⢝⢮⢺⢕⢟⢮⢊⢢⢱⢄⠃⣇⣞⢞⣞⢾\n⢀⠢⡑⡀⢂⢊⠠⠁⡂⡐⠀⠅⡈⠪⠪⠪⠣⠫⠑⡁⢔⠕⣜⣜⢦⡰⡎⡯⡾⡽",
+    tooltipText: "⠀⠀⠀⠀⠀⠀⠀⠀⠀HELLO THERE!!!\n⠀⠀⠀⡯⡯⡾⠝⠘⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢊⠘⡮⣣⠪⠢⡑⡌\n⠀⠀⠀⠟⠝⠈⠀⠀⠀⠡⠀⠠⢈⠠⢐⢠⢂⢔⣐⢄⡂⢔⠀⡁⢉⠸⢨⢑⠕⡌\n⠀⠀⡀⠁⠀⠀⠀⡀⢂⠡⠈⡔⣕⢮⣳⢯⣿⣻⣟⣯⣯⢷⣫⣆⡂⠀⠀⢐⠑⡌\n⢀⠠⠐⠈⠀⢀⢂⠢⡂⠕⡁⣝⢮⣳⢽⡽⣾⣻⣿⣯⡯⣟⣞⢾⢜⢆⠀⡀⠀⠪\n⣬⠂⠀⠀⢀⢂⢪⠨⢂⠥⣺⡪⣗⢗⣽⢽⡯⣿⣽⣷⢿⡽⡾⡽⣝⢎⠀⠀⠀⢡\n⣿⠀⠀⠀⢂⠢⢂⢥⢱⡹⣪⢞⡵⣻⡪⡯⡯⣟⡾⣿⣻⡽⣯⡻⣪⠧⠑⠀⠁⢐\n⣿⠀⠀⠀⠢⢑⠠⠑⠕⡝⡎⡗⡝⡎⣞⢽⡹⣕⢯⢻⠹⡹⢚⠝⡷⡽⡨⠀⠀⢔\n⣿⡯⠀⢈⠈⢄⠂⠂⠐⠀⠌⠠⢑⠱⡱⡱⡑⢔⠁⠀⡀⠐⠐⠐⡡⡹⣪⠀⠀⢘\n⣿⣽⠀⡀⡊⠀⠐⠨⠈⡁⠂⢈⠠⡱⡽⣷⡑⠁⠠⠑⠀⢉⢇⣤⢘⣪⢽⠀⢌⢎\n⣿⢾⠀⢌⠌⠀⡁⠢⠂⠐⡀⠀⢀⢳⢽⣽⡺⣨⢄⣑⢉⢃⢭⡲⣕⡭⣹⠠⢐⢗\n⣿⡗⠀⠢⠡⡱⡸⣔⢵⢱⢸⠈⠀⡪⣳⣳⢹⢜⡵⣱⢱⡱⣳⡹⣵⣻⢔⢅⢬⡷\n⣷⡇⡂⠡⡑⢕⢕⠕⡑⠡⢂⢊⢐⢕⡝⡮⡧⡳⣝⢴⡐⣁⠃⡫⡒⣕⢏⡮⣷⡟\n⣷⣻⣅⠑⢌⠢⠁⢐⠠⠑⡐⠐⠌⡪⠮⡫⠪⡪⡪⣺⢸⠰⠡⠠⠐⢱⠨⡪⡪⡰\n⣯⢷⣟⣇⡂⡂⡌⡀⠀⠁⡂⠅⠂⠀⡑⡄⢇⠇⢝⡨⡠⡁⢐⠠⢀⢪⡐⡜⡪⡊\n⣿⢽⡾⢹⡄⠕⡅⢇⠂⠑⣴⡬⣬⣬⣆⢮⣦⣷⣵⣷⡗⢃⢮⠱⡸⢰⢱⢸⢨⢌\n⣯⢯⣟⠸⣳⡅⠜⠔⡌⡐⠈⠻⠟⣿⢿⣿⣿⠿⡻⣃⠢⣱⡳⡱⡩⢢⠣⡃⠢⠁\n⡯⣟⣞⡇⡿⣽⡪⡘⡰⠨⢐⢀⠢⢢⢄⢤⣰⠼⡾⢕⢕⡵⣝⠎⢌⢪⠪⡘⡌⠀\n⡯⣳⠯⠚⢊⠡⡂⢂⠨⠊⠔⡑⠬⡸⣘⢬⢪⣪⡺⡼⣕⢯⢞⢕⢝⠎⢻⢼⣀⠀\n⠁⡂⠔⡁⡢⠣⢀⠢⠀⠅⠱⡐⡱⡘⡔⡕⡕⣲⡹⣎⡮⡏⡑⢜⢼⡱⢩⣗⣯⣟\n⢀⢂⢑⠀⡂⡃⠅⠊⢄⢑⠠⠑⢕⢕⢝⢮⢺⢕⢟⢮⢊⢢⢱⢄⠃⣇⣞⢞⣞⢾\n⢀⠢⡑⡀⢂⢊⠠⠁⡂⡐⠀⠅⡈⠪⠪⠪⠣⠫⠑⡁⢔⠕⣜⣜⢦⡰⡎⡯⡾⡽",
     tooltiplifespan: 500,
   }))));
 });

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

@@ -12,7 +12,7 @@ const styleString = sheet.toString();
 export function ShareLinkView(props) {
   return (h("div", null,
     h("style", { type: "text/css" }, styleString),
-    h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: "top-end", disabled: props.disabled, open: props.open },
+    h("sl-tooltip", { trigger: "manual", content: props.tooltipText, placement: "top-end", disabled: props.disabled, open: props.open },
       h("sl-input", { class: sheet.classes.inputStyle, exportparts: "label: input-label", value: props.shareString, readonly: true },
         h("sl-icon-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, slot: "suffix", name: "files", disabled: props.disabled })))));
 }

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

@@ -16,7 +16,7 @@ export class ShareLink {
      *
      * @uiName Tooltip text
      */
-    this.tooltiptext = "Copied to Clipboard";
+    this.tooltipText = "Copied to Clipboard";
     /**
      * The number of milliseconds that the tooltip will appear for
      *
@@ -56,7 +56,7 @@ export class ShareLink {
       "attribute": "program-id",
       "reflect": false
     },
-    "tooltiptext": {
+    "tooltipText": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -103,7 +103,7 @@ export class ShareLink {
       "mutable": false,
       "complexType": {
         "original": "DemoData<ShareLinkViewProps>",
-        "resolved": "{ disabled?: boolean; onClick?: () => void; shareString?: string; open?: boolean; tooltiptext?: string; }",
+        "resolved": "{ disabled?: boolean; onClick?: () => void; shareString?: string; open?: boolean; tooltipText?: string; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -135,7 +135,7 @@ function useDemoShareLink(props) {
   const shareString = "https://www.example.com/sharelink/abc";
   return deepmerge({
     shareString,
-    tooltiptext: props.tooltiptext,
+    tooltipText: props.tooltipText,
     open,
     onClick: () => {
       // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility

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

@@ -5,6 +5,7 @@ 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
   const style = {
     StatContainer: {
       width: "100%",

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

@@ -20,6 +20,7 @@ import * as UseRewardExchangeList from "../sqm-reward-exchange-list/UseRewardExc
 import * as UseRewardsTable from "../sqm-rewards-table/UseRewardsTable.stories";
 import * as UseTaskCard from "../sqm-task-card/UseTaskCard.stories";
 import * as NewPortal from "../../stories/NewPortal.stories";
+import * as Widget from "../../stories/Widget.stories";
 import * as SidebarItem from "../sqm-navigation-sidebar-item/SidebarItem.stories";
 import * as NavigationSidebar from "../sqm-navigation-sidebar/NavigationSidebar.stories";
 import * as PortalLogin from "../sqm-portal-login/PortalLogin.stories";
@@ -103,6 +104,7 @@ const stories = [
   PasswordField,
   TaskCard,
   PortalTemplates,
+  Widget,
   ProgramMenu,
   PoweredByImg,
   PortalFooter,

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

@@ -4,7 +4,7 @@ import { getProps } from "../../utils/utils";
 import { TabsView } from "./sqm-tabs-view";
 import { useTabs } from "./useTabs";
 /**
- * @uiName Tabs
+ * @uiName Tab Group
  */
 export class Tabs {
   constructor() {

package/dist/collection/components/sqm-task-card/DetailsView.js

@@ -43,7 +43,7 @@ const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function Details(props) {
   const rid = Math.random().toString(36).slice(2);
-  return (h("div", null,
+  return (h("div", { style: { opacity: props.opacity } },
     h("style", { type: "text/css" }, styleString),
     h("span", { class: sheet.classes.Description },
       h("input", { type: "checkbox", id: "details-" + rid }),

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

@@ -6,3 +6,10 @@ export const Gift = () => {
     h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.5 9V10H14.5V9H1.5Z", fill: "#BE9720" }),
     h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14 2.70949C14 3.59565 12.6694 4.93746 12 5H9V16H7.00179V5H4.58792C3.21247 4.70182 2 3.64537 2 2.52072C2 1.42474 2.47603 0.556701 3.34184 0.182041C4.16921 -0.175986 5.12452 0.0203328 5.87976 0.544666C6.80676 1.18825 7.32679 2.3963 7.79856 3.49226C7.83996 3.58845 7.88099 3.68378 7.9219 3.77778C7.96173 3.68865 8.00186 3.59793 8.0425 3.50608C8.50995 2.44948 9.04359 1.24325 9.9404 0.59563C10.7332 0.0231438 11.741 -0.193157 12.6121 0.198945C13.5129 0.604397 14 1.53453 14 2.70949ZM10.6123 1.5C11.0928 1.15305 11.668 1.09012 12.1597 1.5C12.5879 1.85694 12.6108 2.02497 12.6658 2.42926L12.6755 2.5C12.6755 3.09851 12.1597 4 11.6439 4C11.2785 4 10.9914 3.99691 10.7224 3.99402C10.2319 3.98875 9.80131 3.98412 9.06496 4C9.20533 3.72786 9.31743 3.46669 9.42434 3.21761C9.71026 2.55143 9.95907 1.97176 10.6123 1.5ZM4.93861 1.5C4.70607 1.33855 4.17281 1.4106 3.95166 1.5063C3.76894 1.58537 3.49602 1.82658 3.49602 2.52072C3.49602 3.19524 4.58792 3.77778 4.58792 3.77778C4.58792 3.77778 5.45441 4 7.00179 4C6.47506 2.69451 5.7289 2.04867 4.93861 1.5Z", fill: "#EB5757" })));
 };
+export const GreyGift = () => {
+  return (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("path", { d: "M15 5H12.4508H9V16H13.5C14.0523 16 14.5 15.5523 14.5 15V9H15C15.5523 9 16 8.55228 16 8V6C16 5.44772 15.5523 5 15 5Z", fill: "#C9C9C9" }),
+    h("path", { d: "M1.5 9V15C1.5 15.5523 1.94772 16 2.5 16H7V5H4.64242H1C0.447715 5 0 5.44772 0 6V8C0 8.55228 0.447715 9 1 9H1.5Z", fill: "#C9C9C9" }),
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.5 9V10H14.5V9H1.5Z", fill: "#A5A3A3" }),
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14 2.70949C14 3.59565 12.6694 4.93746 12 5H9V16H7.00179V5H4.58792C3.21247 4.70182 2 3.64537 2 2.52072C2 1.42474 2.47603 0.556701 3.34184 0.182041C4.16921 -0.175986 5.12452 0.0203328 5.87976 0.544666C6.80676 1.18825 7.32679 2.3963 7.79856 3.49226C7.83996 3.58845 7.88099 3.68378 7.9219 3.77778C7.96173 3.68865 8.00186 3.59793 8.0425 3.50608C8.50995 2.44948 9.04359 1.24325 9.9404 0.59563C10.7332 0.0231438 11.741 -0.193157 12.6121 0.198945C13.5129 0.604397 14 1.53453 14 2.70949ZM10.6123 1.5C11.0928 1.15305 11.668 1.09012 12.1597 1.5C12.5879 1.85694 12.6108 2.02497 12.6658 2.42926L12.6755 2.5C12.6755 3.09851 12.1597 4 11.6439 4C11.2785 4 10.9914 3.99691 10.7224 3.99402C10.2319 3.98875 9.80131 3.98412 9.06496 4C9.20533 3.72786 9.31743 3.46669 9.42434 3.21761C9.71026 2.55143 9.95907 1.97176 10.6123 1.5ZM4.93861 1.5C4.70607 1.33855 4.17281 1.4106 3.95166 1.5063C3.76894 1.58537 3.49602 1.82658 3.49602 2.52072C3.49602 3.19524 4.58792 3.77778 4.58792 3.77778C4.58792 3.77778 5.45441 4 7.00179 4C6.47506 2.69451 5.7289 2.04867 4.93861 1.5Z", fill: "#828282" })));
+};

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../../styling/JSS";
-import { Gift } from "./SVGs";
+import { Gift, GreyGift } from "./SVGs";
 const style = {
   ProgressBar: {
     "& .progress-bar": {
@@ -13,17 +13,34 @@ const style = {
       lineHeight: "45px",
       userSelect: "none",
     },
+    "& .progress-bar.repeatable-steps": {
+      marginLeft: "var(--sl-spacing-x-small)",
+    },
     "&[data-steps]": {
       marginTop: "calc(-1*var(--sl-spacing-x-small))",
     },
     "&[data-steps]  .progress-bar": {
       marginTop: "var(--sl-spacing-medium)",
     },
-    "&[data-expired]  .progress-bar": {
-      filter: "grayscale(1)",
+    "&[data-expired]  .progress::after": {
+      backgroundColor: "#bfbfbf",
     },
-    "& .progress-bar.repeatable-steps": {
-      marginLeft: "var(--sl-spacing-x-small)",
+    "&[data-expired]  .filled::after": {
+      backgroundColor: "#bfbfbf",
+    },
+    "&[data-complete] .filled::after .progress::after": {
+      backgroundColor: "var(--sl-color-primary-200)",
+    },
+    "& .gift": {
+      textAlign: "center",
+      marginLeft: "-100px",
+      marginRight: "-100px",
+      position: "relative",
+      top: "-18px",
+    },
+    "& .gift.start": {
+      transform: "scale(80%)",
+      top: "-20px",
     },
     "& .filled:after": {
       content: '""',
@@ -94,29 +111,15 @@ const style = {
       borderRadius: "4px",
       backgroundColor: "#E0E0E0",
     },
-    "& .gift.bw": {
-      filter: "grayscale(100%)",
-    },
-    "& .gift.start": {
-      transform: "scale(80%)",
-      top: "-20px",
-    },
-    "& .gift": {
-      textAlign: "center",
-      marginLeft: "-100px",
-      marginRight: "-100px",
-      position: "relative",
-      top: "-18px",
-    },
   },
 };
 const sheet = createStyleSheet(style, { classNamePrefix: "sqm-prog-bar" });
 const styleString = sheet.toString();
 export function ProgressBarView(props) {
-  const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, expired = false, finite = 0, } = props;
+  const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, complete = false, expired = false, finite = 0, opacity = "1", } = props;
   let aggregate = buildProgressBar(repeatable, steps, props);
   const { columns, items } = aggregate;
-  return (h("div", { class: sheet.classes.ProgressBar, "data-expired": expired, "data-steps": steps, "data-done": goal <= progress },
+  return (h("div", { class: sheet.classes.ProgressBar, "data-expired": expired, "data-complete": complete, "data-steps": steps, "data-done": goal <= progress, style: { opacity: opacity } },
     h("style", { type: "text/css" }, styleString),
     h("div", { class: (!Boolean(finite) && progress >= 2 * goal) ||
         (Boolean(finite) && progress > 2 * goal)
@@ -145,7 +148,7 @@ function buildProgressBar(repeatable, steps, props) {
     }
   }
 }
-function addSteps({ progress, goal }) {
+function addSteps({ progress, goal, expired }) {
   const items = [];
   const columns = [];
   let ratio = 1 / goal;
@@ -168,21 +171,22 @@ function addSteps({ progress, goal }) {
     columns.push("0fr");
     items.push(h("div", { class: "filled" }));
     items.push(h("div", { class: "progress bg" }, goal));
-    items.push(h("div", { class: "gift" }, h(Gift, null)));
+    items.push(h("div", { class: "gift" }, expired ? h(GreyGift, null) : h(Gift, null)));
   }
   // reward fail
   else {
     columns.push("0fr");
     items.push(h("div", { class: "remain" }));
     items.push(h("div", { class: "empty bg" }, goal));
-    items.push(h("div", { class: "gift bw" }, h(Gift, null)));
+    items.push(h("div", { class: "gift" },
+      h(GreyGift, null)));
   }
   return {
     items,
     columns: columns.join(" "),
   };
 }
-function addLinearRepeatable({ progress, goal, progressBarUnit, finite, }) {
+function addLinearRepeatable({ progress, goal, progressBarUnit, finite, expired, }) {
   let repetitions = Math.floor(progress / goal);
   let ratio = ((progress % goal) / goal) * 0.5;
   const items = [];
@@ -194,11 +198,10 @@ function addLinearRepeatable({ progress, goal, progressBarUnit, finite, }) {
     items.push(h("div", { class: progress == goal ? "progress top bg" : "progress top" }, progressBarUnit + progress));
     items.push(h("div", { class: "remain" }));
     items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
-    items.push(h("div", { class: progress == goal ? "gift" : "gift bw" },
-      h(Gift, null)));
+    items.push(h("div", { class: "gift" }, progress == goal ? expired ? h(GreyGift, null) : h(Gift, null) : h(GreyGift, null)));
     items.push(h("div", { class: "remain" }));
     items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
-    items.push(h("div", { class: "gift bw" }, h(Gift, null)));
+    items.push(h("div", { class: "gift" }, h(GreyGift, null)));
   }
   // single repetition
   else if (repetitions == 1) {
@@ -206,18 +209,18 @@ function addLinearRepeatable({ progress, goal, progressBarUnit, finite, }) {
       "0.5fr 0fr 0fr " + ratio + "fr 0fr " + (0.5 - ratio) + "fr 0fr 0fr";
     items.push(h("div", { class: "filled" }));
     items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
-    items.push(h("div", { class: "gift" }, h(Gift, null)));
+    items.push(h("div", { class: "gift" }, expired ? h(GreyGift, null) : h(Gift, null)));
     items.push(h("div", { class: "filled" }));
     items.push(h("div", { class: progress == goal ? "progress top bg" : "progress top" }, progress == goal ? "" : progressBarUnit + progress));
     items.push(h("div", { class: "remain" }));
     items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
-    items.push(h("div", { class: "gift bw" }, h(Gift, null)));
+    items.push(h("div", { class: "gift" }, h(GreyGift, null)));
   }
   // finite repetition hit
   else if (finite && repetitions >= finite) {
     if (repetitions > 2) {
       items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (finite - 2)));
-      items.push(h("div", { class: "gift start" }, h(Gift, null)));
+      items.push(h("div", { class: "gift start" }, expired ? h(GreyGift, null) : h(Gift, null)));
       columns = "0fr 0fr 0.5fr 0fr 0fr 0.5fr 0fr 0fr";
     }
     else {
@@ -225,10 +228,10 @@ function addLinearRepeatable({ progress, goal, progressBarUnit, finite, }) {
     }
     items.push(h("div", { class: "filled" }));
     items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (finite - 1)));
-    items.push(h("div", { class: "gift" }, h(Gift, null)));
+    items.push(h("div", { class: "gift" }, expired ? h(GreyGift, null) : h(Gift, null)));
     items.push(h("div", { class: "filled" }));
     items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * finite));
-    items.push(h("div", { class: "gift" }, h(Gift, null)));
+    items.push(h("div", { class: "gift" }, expired ? h(GreyGift, null) : h(Gift, null)));
   }
   // multiple repetitions
   else {
@@ -239,19 +242,19 @@ function addLinearRepeatable({ progress, goal, progressBarUnit, finite, }) {
         (0.5 - ratio) +
         "fr 0fr 0fr";
     items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions - 1)));
-    items.push(h("div", { class: "gift start" }, h(Gift, null)));
+    items.push(h("div", { class: "gift start" }, expired ? h(GreyGift, null) : h(Gift, null)));
     items.push(h("div", { class: "filled" }));
     items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * repetitions));
-    items.push(h("div", { class: "gift" }, h(Gift, null)));
+    items.push(h("div", { class: "gift" }, expired ? h(GreyGift, null) : h(Gift, null)));
     items.push(h("div", { class: "filled" }));
     items.push(h("div", { class: progress == goal * repetitions ? "progress top bg" : "progress top" }, progress == goal * repetitions ? "" : progressBarUnit + progress));
     items.push(h("div", { class: "remain" }));
     items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions + 1)));
-    items.push(h("div", { class: "gift bw" }, h(Gift, null)));
+    items.push(h("div", { class: "gift" }, h(GreyGift, null)));
   }
   return { items, columns };
 }
-function addStepsRepeatable({ progress, goal, finite, }) {
+function addStepsRepeatable({ progress, goal, finite, expired, }) {
   const items = [];
   const columns = [];
   let repetitions = Math.floor(progress / goal);
@@ -266,14 +269,14 @@ function addStepsRepeatable({ progress, goal, finite, }) {
           columns.push("0fr");
           items.push(h("div", { class: "remain" }));
           items.push(h("div", { class: "empty bg" }, goal));
-          items.push(h("div", { class: "gift bw" }, h(Gift, null)));
+          items.push(h("div", { class: "gift" }, h(GreyGift, null)));
         }
         else if (i == goal * 2) {
           columns.push("0fr");
           columns.push("0fr");
           items.push(h("div", { class: "remain" }));
           items.push(h("div", { class: "empty bg" }, goal * 2));
-          items.push(h("div", { class: "gift bw" }, h(Gift, null)));
+          items.push(h("div", { class: "gift" }, h(GreyGift, null)));
         }
         else {
           items.push(h("div", { class: "remain" }));
@@ -284,7 +287,7 @@ function addStepsRepeatable({ progress, goal, finite, }) {
         columns.push("0fr");
         items.push(h("div", { class: "filled" }));
         items.push(h("div", { class: "progress bg" }, i));
-        items.push(h("div", { class: "gift" }, h(Gift, null)));
+        items.push(h("div", { class: "gift" }, expired ? h(GreyGift, null) : h(Gift, null)));
       }
       else {
         items.push(h("div", { class: "filled" }));
@@ -299,7 +302,7 @@ function addStepsRepeatable({ progress, goal, finite, }) {
       columns.push("0fr");
       columns.push("0fr");
       items.push(h("div", { class: "progress bg" }, goal * (finite - 2)));
-      items.push(h("div", { class: "gift start" }, h(Gift, null)));
+      items.push(h("div", { class: "gift start" }, expired ? h(GreyGift, null) : h(Gift, null)));
     }
     for (let i = 1; i < goal * 2 + 1; i++) {
       columns.push(ratio + "fr");
@@ -309,21 +312,21 @@ function addStepsRepeatable({ progress, goal, finite, }) {
           columns.push("0fr");
           items.push(h("div", { class: "remain" }));
           items.push(h("div", { class: "progress bg" }, goal * (finite - 1)));
-          items.push(h("div", { class: "gift bw" }, h(Gift, null)));
+          items.push(h("div", { class: "gift" }, h(GreyGift, null)));
         }
       }
       else if (i == goal) {
         columns.push("0fr");
         items.push(h("div", { class: "filled" }));
         items.push(h("div", { class: "progress bg" }, goal * (finite - 1)));
-        items.push(h("div", { class: "gift" }, h(Gift, null)));
+        items.push(h("div", { class: "gift" }, expired ? h(GreyGift, null) : h(Gift, null)));
       }
       else if (i == goal * 2) {
         columns.push("0fr");
         columns.push("0fr");
         items.push(h("div", { class: "filled" }));
         items.push(h("div", { class: "progress bg" }, goal * finite));
-        items.push(h("div", { class: "gift" }, h(Gift, null)));
+        items.push(h("div", { class: "gift" }, expired ? h(GreyGift, null) : h(Gift, null)));
       }
       else {
         items.push(h("div", { class: "filled" }));
@@ -338,7 +341,7 @@ function addStepsRepeatable({ progress, goal, finite, }) {
     columns.push("0fr");
     columns.push("0fr");
     items.push(h("div", { class: "progress bg" }, goal * (repetitions - 1)));
-    items.push(h("div", { class: "gift start" }, h(Gift, null)));
+    items.push(h("div", { class: "gift start" }, expired ? h(GreyGift, null) : h(Gift, null)));
     for (let i = 1; i < goal * 2 + 1; i++) {
       columns.push(ratio + "fr");
       columns.push("0fr");
@@ -347,7 +350,7 @@ function addStepsRepeatable({ progress, goal, finite, }) {
           columns.push("0fr");
           items.push(h("div", { class: "filled" }));
           items.push(h("div", { class: "progress bg" }, i + goal * (repetitions - 1)));
-          items.push(h("div", { class: "gift" }, h(Gift, null)));
+          items.push(h("div", { class: "gift" }, expired ? h(GreyGift, null) : h(Gift, null)));
         }
         else {
           items.push(h("div", { class: "filled" }));
@@ -360,7 +363,7 @@ function addStepsRepeatable({ progress, goal, finite, }) {
           columns.push("0fr");
           items.push(h("div", { class: "remain" }));
           items.push(h("div", { class: "empty bg" }, i + goal * (repetitions - 1)));
-          items.push(h("div", { class: "gift bw" }, h(Gift, null)));
+          items.push(h("div", { class: "gift" }, h(GreyGift, null)));
         }
         else {
           items.push(h("div", { class: "remain" }));
@@ -375,7 +378,7 @@ function addStepsRepeatable({ progress, goal, finite, }) {
   }
   return { items, columns: columns.join(" ") };
 }
-function addLinear({ progress, goal, progressBarUnit, }) {
+function addLinear({ progress, goal, progressBarUnit, expired }) {
   const items = [];
   let columns = "";
   const ratio = progress / goal;
@@ -387,8 +390,7 @@ function addLinear({ progress, goal, progressBarUnit, }) {
     : progressBarUnit + clamp(progress, 0, goal)));
   items.push(h("div", { class: "remain" }));
   items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
-  items.push(h("div", { class: clamp(progress, 0, goal) == goal ? "gift" : "gift bw" },
-    h(Gift, null)));
+  items.push(h("div", { class: "gift" }, clamp(progress, 0, goal) == goal ? (expired ? (h(GreyGift, null)) : (h(Gift, null))) : (h(GreyGift, null))));
   return { items, columns };
 }
 function clamp(x, min, max) {

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

@@ -114,6 +114,12 @@ const style = {
     },
   },
   Footer: {
+    "&[data-subdue] .success": {
+      color: "var(--sl-color-primary-300)",
+    },
+    "&[data-subdue] .neutral": {
+      color: "var(--sl-color-neutral-300)",
+    },
     display: "flex",
     "& .icon": {
       fontSize: "var(--sl-font-size-xx-small)",
@@ -151,7 +157,6 @@ const style = {
     "& .datetime": {
       display: "block",
       marginTop: "var(--sl-spacing-xx-small)",
-      color: "var(--sl-color-neutral-400)",
     },
   },
 };
@@ -225,8 +230,8 @@ export function TaskCardView(props) {
         : taskComplete
           ? "main complete"
           : "main" },
-      h("div", { class: taskComplete || taskUnavailable ? "container subdued" : "container" },
-        h("div", { class: sheet.classes.Header }, states.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
+      h("div", { class: "container", "data-subdue": taskComplete || taskUnavailable },
+        h("div", { class: sheet.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
           showComplete && (h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled : checkmark_circle)),
           h("span", { class: "value" }, content.rewardAmount),
           h("span", { class: "text" }, content.rewardUnit)))),
@@ -238,22 +243,23 @@ export function TaskCardView(props) {
                   ? "var(--sl-spacing-xx-large)"
                   : ""
               : "",
+            opacity: taskComplete || taskUnavailable ? "0.45" : "1",
           } }, content.cardTitle)),
-        states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && h(Details, Object.assign({}, props))),
-        content.showProgressBar && states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { complete: taskComplete, expired: taskUnavailable })))),
-        h("div", { class: sheet.classes.Footer }, states.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
+        states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
+        content.showProgressBar && states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.45" : "1", complete: taskComplete, expired: taskUnavailable })))),
+        h("div", { class: sheet.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
           h("span", { class: "text" },
             content.repeatable && (h("div", null,
               h("span", { class: repetitions > 0
                   ? taskUnavailable
                     ? "icon neutral"
                     : "icon success"
-                  : "icon" }, arrow_left_right),
+                  : "icon neutral", "data-subdue": taskComplete || taskUnavailable }, arrow_left_right),
               h("span", { class: repetitions > 0
                   ? taskUnavailable
                     ? "neutral"
                     : "success"
-                  : "" }, intl.formatMessage({
+                  : "neutral", "data-subdue": taskComplete || taskUnavailable }, intl.formatMessage({
                 id: "completedMessage",
                 defaultMessage: content.completedText,
               }, {
@@ -262,7 +268,7 @@ export function TaskCardView(props) {
                   ? Math.min(repetitions, content.finite)
                   : repetitions,
               })))),
-            dateEnd && !taskUnavailable && (h("span", { class: "datetime" }, intl.formatMessage({
+            dateEnd && !taskUnavailable && (h("span", { class: "datetime neutral", "data-subdue": taskComplete || taskUnavailable }, intl.formatMessage({
               id: "expiryMessage",
               defaultMessage: content.expiryMessage,
             }, {
@@ -274,5 +280,7 @@ export function TaskCardView(props) {
               ? "action neutral"
               : taskComplete
                 ? "action disabled"
-                : "action", type: "primary", size: "small", onClick: callbacks.onClick, loading: states.loadingEvent, disabled: taskComplete || taskUnavailable }, content.buttonText))))))));
+                : "action", type: "primary", size: "small", onClick: callbacks.onClick, loading: states.loadingEvent, disabled: taskComplete || taskUnavailable, style: {
+              opacity: taskComplete || taskUnavailable ? "0.45" : "1",
+            } }, content.buttonText))))))));
 }

package/dist/collection/components/sqm-task-card/sqm-task-card.js

@@ -45,6 +45,8 @@ export class TaskCard {
      */
     this.showProgressBar = false;
     /**
+     * Sets the goal for progress to be completed. If repeatable is checked, repeatable goals will be increments of this.
+     *
      * @uiName Goal Completion Number
      */
     this.goal = 1;
@@ -281,7 +283,7 @@ export class TaskCard {
             "text": "Goal Completion Number",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Sets the goal for progress to be completed. If repeatable is checked, repeatable goals will be increments of this."
       },
       "attribute": "goal",
       "reflect": false,