@saasquatch/mint-components 2.1.9-9 → 2.1.9

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

@@ -1,7 +1,7 @@
 import { setUserIdentity } from "@saasquatch/component-boilerplate";
 import { useEffect } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
-import { CopyTextView } from "../views/copy-text-view";
+import { ShareLinkView } from "./sqm-share-link-view";
 import { useShareLink } from "./useShareLink";
 import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
 export default {
@@ -39,11 +39,11 @@ export const BareBonesView = createHookStory(() => {
   return (h("div", null,
     "Sharelink:",
     " ",
-    h("code", { style: { borderStyle: "solid", borderWidth: "1px", padding: "2px" } }, res.copyString)));
+    h("code", { style: { borderStyle: "solid", borderWidth: "1px", padding: "2px" } }, res.copyTextViewProps.copyString)));
 });
 export const RegularView = createHookStory(() => {
   setupGraphQL();
-  return (h(CopyTextView, Object.assign({}, useShareLink({
+  return (h(ShareLinkView, Object.assign({}, useShareLink({
     programId: "klip-referral-program",
     tooltiptext: "Copied to clipboard",
     tooltiplifespan: 1000,
@@ -51,9 +51,18 @@ export const RegularView = createHookStory(() => {
 });
 export const FastTooltip = createHookStory(() => {
   setupGraphQL();
-  return (h(CopyTextView, Object.assign({}, useShareLink({
+  return (h(ShareLinkView, Object.assign({}, useShareLink({
     programId: "klip-referral-program",
-    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: "Copied to clipboard",
     tooltiplifespan: 500,
   }))));
 });
+export const CustomizeUrlEnabled = createHookStory(() => {
+  setupGraphQL();
+  return (h(ShareLinkView, Object.assign({}, useShareLink({
+    programId: "klip-referral-program",
+    tooltiptext: "Copied to clipboard",
+    tooltiplifespan: 1000,
+    allowCustomization: true,
+  }))));
+});

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

@@ -0,0 +1,192 @@
+import { h } from "@stencil/core";
+import { intl } from "../../global/global";
+import { createStyleSheet } from "../../styling/JSS";
+import { CopyTextView } from "../views/copy-text-view";
+const vanillaStyle = `
+  :host {
+    display: block;
+    width: 100%;
+  }
+`;
+export function ShareLinkView(props) {
+  const { copyTextViewProps, allowCustomization, customizeLinkLabel, saveLabelText, cancelLabelText, isEditing, editValue, domainPrefix, editsRemaining, maxEdits, limitReached, validationError, isValidating, isSaving, characterLimit, minCharacters, charactersRemaining, editLimitText, editLimitReachedText, supportLinkText, customizeDisabled, customizeDisabledTooltip, onCustomizeClick, onEditValueChange, onSave, onCancel, minCharactersText, } = props;
+  const style = {
+    Container: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-xx-small)",
+      width: "100%",
+    },
+    CustomizeLinkText: {
+      paddingTop: "var(--sl-spacing-xx-small)",
+      margin: "0",
+      fontSize: "var(--sl-font-size-small)",
+      fontWeight: "600",
+      cursor: "pointer",
+      color: "var(--sl-color-neutral-900)",
+      textAlign: "left",
+      "&:hover": {
+        textDecoration: "underline",
+      },
+    },
+    CustomizeLinkDisabled: {
+      paddingTop: "var(--sl-spacing-xx-small)",
+      margin: "0",
+      fontSize: "var(--sl-font-size-small)",
+      fontWeight: "600",
+      color: "var(--sl-color-neutral-400)",
+      cursor: "default",
+      textAlign: "left",
+    },
+    EditContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-x-small)",
+      width: "100%",
+    },
+    EditInputWrapper: {
+      display: "flex",
+      alignItems: "center",
+      width: "100%",
+      border: "var(--sqm-border-thickness, 1px) solid var(--sqm-input-border-color, #d1d5db)",
+      borderRadius: "var(--sqm-border-radius-normal, 4px)",
+      background: "var(--sqm-input-background, #fff)",
+      overflow: "hidden",
+      "&:focus-within": {
+        borderColor: "#999999",
+        boxShadow: "0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color)",
+      },
+    },
+    DomainPrefix: {
+      padding: "0 0 0 var(--sl-spacing-medium)",
+      fontSize: "var(--sl-font-size-medium)",
+      color: "var(--sl-color-neutral-500)",
+      whiteSpace: "nowrap",
+      userSelect: "none",
+      lineHeight: "var(--sl-input-height-medium)",
+    },
+    EditInput: {
+      flex: "1",
+      border: "none",
+      outline: "none",
+      padding: "0 var(--sl-spacing-medium) 0 0",
+      fontSize: "var(--sl-font-size-medium)",
+      fontFamily: "var(--sl-font-sans)",
+      color: "var(--sl-input-color)",
+      background: "transparent",
+      lineHeight: "var(--sl-input-height-medium)",
+      minWidth: "0",
+    },
+    EditLabel: {
+      margin: "0",
+      fontSize: "var(--sl-font-size-small)",
+      color: "var(--sl-color-neutral-500)",
+    },
+    HelperText: {
+      paddingTop: "var(--sl-spacing-xx-small)",
+      margin: "0",
+      fontSize: "var(--sl-font-size-small)",
+      color: "var(--sl-color-neutral-500)",
+    },
+    ErrorText: {
+      margin: "0",
+      fontSize: "var(--sl-font-size-small)",
+      color: "var(--sqm-danger-color-text, #dc2626)",
+    },
+    ActionRow: {
+      display: "flex",
+      gap: "var(--sl-spacing-medium)",
+      alignItems: "center",
+    },
+    SaveButton: {
+      cursor: "pointer",
+      fontFamily: "var(--sl-font-sans)",
+      fontSize: "var(--sl-font-size-small)",
+      fontWeight: "600",
+      padding: "var(--sl-spacing-x-small) var(--sl-spacing-medium)",
+      borderRadius: "var(--sqm-border-radius-normal, 4px)",
+      border: "1px solid var(--sl-color-neutral-900)",
+      background: "var(--sl-color-neutral-900)",
+      color: "#fff",
+      "&:disabled": {
+        opacity: "0.5",
+        cursor: "default",
+      },
+    },
+    CancelButton: {
+      margin: "0",
+      fontSize: "var(--sl-font-size-small)",
+      fontWeight: "600",
+      cursor: "pointer",
+      background: "none",
+      border: "none",
+      fontFamily: "var(--sl-font-sans)",
+      color: "var(--sl-color-neutral-500)",
+      "&::part(label)": {
+        padding: "0",
+      },
+    },
+    LimitReachedContainer: {
+      display: "flex",
+      alignItems: "center",
+      gap: "var(--sl-spacing-x-small)",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  const errorMessageType = (validationError === null || validationError === void 0 ? void 0 : validationError.code) === "EXISTING_CODE_CONFLICT" ? "info" : "warning";
+  const showCharactersRemaining = charactersRemaining <= 14;
+  const editLimitMessage = intl.formatMessage({
+    id: "editLimitText",
+    defaultMessage: editLimitText,
+  }, { editsRemaining });
+  // Editing state
+  if (isEditing) {
+    return (h("div", { class: sheet.classes.Container },
+      h("style", { type: "text/css" },
+        styleString,
+        vanillaStyle),
+      h("p", { class: sheet.classes.EditLabel }, "Enter your link"),
+      h("div", { class: sheet.classes.EditInputWrapper },
+        h("span", { class: sheet.classes.DomainPrefix }, domainPrefix),
+        h("input", { class: sheet.classes.EditInput, type: "text", value: editValue, onInput: (e) => onEditValueChange(e.target.value), onKeyDown: (e) => {
+            if (e.key === "/" || e.key === "@")
+              e.preventDefault();
+          }, disabled: isSaving, maxLength: characterLimit })),
+      h("p", { class: sheet.classes.HelperText },
+        editLimitMessage,
+        " ",
+        charactersRemaining > 12 && minCharactersText,
+        showCharactersRemaining &&
+          ` Characters remaining: ${charactersRemaining}`),
+      validationError && (h("sqm-form-message", { type: errorMessageType, style: { paddingBottom: "var(--sl-spacing-xx-small)" } },
+        h("p", { part: "alert-title" }, validationError.title),
+        validationError.description)),
+      isValidating && h("p", { class: sheet.classes.HelperText }, "Validating..."),
+      h("div", { class: sheet.classes.ActionRow },
+        h("button", { class: sheet.classes.SaveButton, onClick: onSave, disabled: isSaving ||
+            isValidating ||
+            !!validationError ||
+            !editValue ||
+            editValue.length < minCharacters }, isSaving ? "Saving..." : saveLabelText),
+        h("sl-button", { type: "text", class: sheet.classes.CancelButton, onClick: onCancel, disabled: isSaving }, cancelLabelText))));
+  }
+  // Default / Customized / Limit reached states
+  return (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    h(CopyTextView, Object.assign({}, copyTextViewProps)),
+    allowCustomization &&
+      (customizeDisabled ? (h("sl-tooltip", { content: customizeDisabledTooltip, placement: "top", style: { display: "inline-block", width: "fit-content" } },
+        h("p", { class: sheet.classes.CustomizeLinkDisabled }, customizeLinkLabel))) : (h("div", { class: sheet.classes.LimitReachedContainer },
+        h("p", { class: limitReached
+            ? sheet.classes.CustomizeLinkDisabled
+            : sheet.classes.CustomizeLinkText, onClick: limitReached ? undefined : onCustomizeClick }, customizeLinkLabel),
+        allowCustomization && limitReached && (h("p", { class: sheet.classes.HelperText }, intl.formatMessage({
+          id: "editLimitReached",
+          defaultMessage: editLimitReachedText,
+        }, {
+          supportLink: (h("a", { target: "_blank", href: "https://help.impact.com/other/readme/get-help-and-support" }, supportLinkText)),
+        }))))))));
+}