@saasquatch/mint-components 2.1.13 → 2.1.14-2

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -18844,6 +18844,59 @@ const UserInfoFormView = /*#__PURE__*/Object.freeze({
   DisabledForm: DisabledForm
 });
 
+const scenario$G = "@owner:zach @author:zach\nFeature: User Attribute\n  Displays a user's custom field value.\n\n  Background: A user exists\n    Given a user is logged in\n    And the user has custom fields\n\n  @motivating\n  Scenario: A custom field value is displayed\n    Given the component has prop \"value\" with value \"firstName\"\n    And the user has a custom field \"firstName\" with value \"John\"\n    When the component is rendered\n    Then the text \"John\" is displayed\n\n  @landmine\n  Scenario: Nothing is rendered when the custom field does not exist\n    Given the component has prop \"value\" with value \"nonExistentField\"\n    And the user does not have a custom field \"nonExistentField\"\n    Then component is not rendered\n    And nothing is displayed\n\n  @motivating\n  Scenario: Nothing is rendered while user data is loading\n    Given the component is loading user data\n    When the component is rendered\n    Then component is not rendered\n    And nothing is displayed\n\n  @motivating\n  Scenario Outline: Optional styling props can be applied to customize the text appearance\n    Given the component has prop <prop> with value <value>\n    When the component is rendered\n    Then the text is displayed with <cssProperty> set to <value>\n\n    Examples:\n      | prop         | value       | cssProperty |\n      | fontSize     | 24          | font-size   |\n      | color        | #E91E63   | color       |\n      | fontWeight   | 700         | font-weight |\n\n  @minutia\n  Scenario: Style props are optional and default to no custom styling\n    Given the component has no style props set\n    When the component is rendered\n    Then the text is displayed with default browser styles\n";
+
+const UserAttribute_stories = {
+  title: "Components/User Attribute",
+  parameters: {
+    scenario: scenario$G,
+  },
+};
+const Default$x = () => {
+  return (index.h("sqm-user-attribute", { demoData: {
+      loading: false,
+      value: "impact.com",
+    } }));
+};
+/*
+ Verifies that an sqm-user-attribute with no valid value
+ collapses completely and does not create extra space
+ (e.g. a double gap) in a flex layout.
+ */
+const InvalidValue = () => {
+  return (index.h("div", { style: { display: "flex", flexDirection: "column", gap: "16px" } },
+    index.h("div", { style: { background: "#e0e0e0", padding: "8px" } }, "Above"),
+    index.h("sqm-user-attribute", { demoData: {
+        loading: false,
+        value: null,
+      } }),
+    index.h("div", { style: { background: "#e0e0e0", padding: "8px" } }, "Below")));
+};
+const Loading$h = () => {
+  return (index.h("sqm-user-attribute", { demoData: {
+      loading: true,
+      value: "impact.com",
+    } }));
+};
+const WithCustomStyles = () => {
+  return (index.h("sqm-user-attribute", { demoData: {
+      loading: false,
+      value: "impact.com",
+      fontSize: 24,
+      color: "#4CAF50",
+      fontWeight: 700,
+    } }));
+};
+
+const UserAttribute = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': UserAttribute_stories,
+  Default: Default$x,
+  InvalidValue: InvalidValue,
+  Loading: Loading$h,
+  WithCustomStyles: WithCustomStyles
+});
+
 function deepFreeze(obj) {
     if (obj instanceof Map) {
         obj.clear = obj.delete = obj.set = function () {
@@ -21537,6 +21590,7 @@ const stories = [
   TaxAndCashRewardsTable,
   TaxAndCashReferralTableRewardsCell,
   TaxAndCashReferralTable$1,
+  UserAttribute,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {

package/dist/collection/collection-manifest.json

@@ -121,6 +121,7 @@
     "./components/sqm-timeline/sqm-timeline-entry.js",
     "./components/sqm-timeline/sqm-timeline.js",
     "./components/sqm-titled-section/sqm-titled-section.js",
+    "./components/sqm-user-attribute/sqm-user-attribute.js",
     "./components/sqm-user-name/sqm-user-name.js",
     "./components/sqm-widget-verification/sqm-widget-verification-controller.js",
     "./components/sqm-widget-verification/sqm-widget-verification.js",

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

@@ -107,6 +107,7 @@ import * as LeadFormDropdownField from "../sqm-lead-form/LeadFormDropdownField.s
 import * as LeadCheckboxField from "../sqm-lead-form/LeadCheckboxField.stories";
 import * as Skeleton from "../sqm-skeleton/Skeleton.stories";
 import * as UserInfoFormView from "../tax-and-cash/sqm-user-info-form/UserInfoFormView.stories";
+import * as UserAttribute from "../sqm-user-attribute/UserAttribute.stories";
 import { ShadowViewAddon } from "../../ShadowViewAddon";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
@@ -218,6 +219,7 @@ const stories = [
   TaxAndCashRewardsTable,
   TaxAndCashReferralTableRewardsCell,
   TaxAndCashReferralTable,
+  UserAttribute,
 ];
 /**
  * For internal documentation

package/dist/collection/components/sqm-user-attribute/UserAttribute.stories.js

@@ -0,0 +1,43 @@
+import { h } from "@stencil/core";
+import scenario from "./user-attribute.feature";
+export default {
+  title: "Components/User Attribute",
+  parameters: {
+    scenario,
+  },
+};
+export const Default = () => {
+  return (h("sqm-user-attribute", { demoData: {
+      loading: false,
+      value: "impact.com",
+    } }));
+};
+/*
+ Verifies that an sqm-user-attribute with no valid value
+ collapses completely and does not create extra space
+ (e.g. a double gap) in a flex layout.
+ */
+export const InvalidValue = () => {
+  return (h("div", { style: { display: "flex", flexDirection: "column", gap: "16px" } },
+    h("div", { style: { background: "#e0e0e0", padding: "8px" } }, "Above"),
+    h("sqm-user-attribute", { demoData: {
+        loading: false,
+        value: null,
+      } }),
+    h("div", { style: { background: "#e0e0e0", padding: "8px" } }, "Below")));
+};
+export const Loading = () => {
+  return (h("sqm-user-attribute", { demoData: {
+      loading: true,
+      value: "impact.com",
+    } }));
+};
+export const WithCustomStyles = () => {
+  return (h("sqm-user-attribute", { demoData: {
+      loading: false,
+      value: "impact.com",
+      fontSize: 24,
+      color: "#4CAF50",
+      fontWeight: 700,
+    } }));
+};

package/dist/collection/components/sqm-user-attribute/sqm-user-attribute-view.js

@@ -0,0 +1,19 @@
+import { h, Host } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+export function UserAttributeView(props) {
+  const style = {
+    P: {
+      margin: "0",
+      padding: "0",
+      fontSize: props.fontSize ? `${props.fontSize}px` : "inherit",
+      fontWeight: props.fontWeight || "inherit",
+      color: props.color || "var(--sqm-text)",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  const loadingSkeleton = (h("sqm-skeleton", { width: "200px", height: "20px" }));
+  return (h(Host, null,
+    h("style", null, styleString),
+    h("p", { class: sheet.classes.P, part: "sqm-base" }, props.loading ? loadingSkeleton : props.value)));
+}

package/dist/collection/components/sqm-user-attribute/sqm-user-attribute.js

@@ -0,0 +1,175 @@
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Host, Prop, State } from "@stencil/core";
+import deepmerge from "deepmerge";
+import { UserAttributeView, } from "./sqm-user-attribute-view";
+import { useUserAttribute } from "./useUserAttribute";
+/**
+ * @uiName User Attribute
+ * @exampleGroup Advanced
+ * @example User Attribute - <sqm-user-attribute value="lastSeenDate"></sqm-user-attribute>
+ */
+export class UserAttribute {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = isDemo() ? useCustomFieldsDemo(this) : useUserAttribute(this);
+    if (props.value == null) {
+      return h(Host, { style: { display: "none" } });
+    }
+    return h(UserAttributeView, Object.assign({}, props));
+  }
+  static get is() { return "sqm-user-attribute"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "value": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "string | number",
+        "resolved": "number | string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Custom field key",
+            "name": "uiName"
+          }, {
+            "text": "customFieldSelector",
+            "name": "uiWidget"
+          }],
+        "text": "The custom field key to display."
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "fontSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Font size",
+            "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Number in pixels."
+      },
+      "attribute": "font-size",
+      "reflect": false
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "color",
+      "reflect": false
+    },
+    "fontWeight": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Font weight",
+            "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }, {
+            "text": "[100, 200, 300, 400, 500, 600, 700, 800, 900]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Thin\", \"Extra Light\", \"Light\", \"Normal\", \"Medium\", \"Semi Bold\", \"Bold\", \"Extra Bold\", \"Heavy\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": "Font weight"
+      },
+      "attribute": "font-weight",
+      "reflect": false
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<UserAttributeViewProps>",
+        "resolved": "{ loading?: boolean; value?: string; fontSize?: number; color?: string; fontWeight?: number; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "UserAttributeViewProps": {
+            "location": "import",
+            "path": "./sqm-user-attribute-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function useCustomFieldsDemo(props) {
+  return deepmerge({
+    loading: false,
+    value: "Custom Field Value",
+    fontSize: props.fontSize,
+    color: props.color,
+    fontWeight: props.fontWeight,
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-user-attribute/useUserAttribute.js

@@ -0,0 +1,30 @@
+import { useQuery, useUserIdentity } from "@saasquatch/component-boilerplate";
+import { gql } from "graphql-request";
+import { DateTime } from "luxon";
+const GET_CUSTOM_FIELDS = gql `
+  query getCustomFields {
+    viewer {
+      ... on User {
+        customFields
+      }
+    }
+  }
+`;
+export function useUserAttribute(props) {
+  var _a, _b;
+  const user = useUserIdentity();
+  const res = useQuery(GET_CUSTOM_FIELDS, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const loading = res.loading;
+  const customFields = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.customFields;
+  let value = customFields === null || customFields === void 0 ? void 0 : customFields[props.value];
+  if (props.value === "lastSeenDate" && typeof value === "number") {
+    value = DateTime.fromMillis(value).toLocaleString(DateTime.DATE_MED);
+  }
+  return {
+    loading,
+    value,
+    fontSize: props.fontSize,
+    color: props.color,
+    fontWeight: props.fontWeight,
+  };
+}