@saasquatch/mint-components 1.6.8 → 1.6.10-0

package/dist/collection/components/sqm-titled-section/sqm-titled-section.js

@@ -11,7 +11,7 @@ import { PortalSectionView } from "./sqm-portal-section-view";
 export class TitledSection {
   constructor() {
     /**
-     * @uiName Text Alignment
+     * @uiName Text alignment
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
@@ -20,7 +20,7 @@ export class TitledSection {
     /**
      * Margin applied to the bottom of the label slot
      *
-     * @uiName Label Bottom Margin
+     * @uiName Label bottom margin
      * @uiType string
      * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
@@ -29,7 +29,7 @@ export class TitledSection {
     /**
      * Padding applied to all 4 sides of the container
      *
-     * @uiName Section Padding
+     * @uiName Section padding
      * @uiType string
      * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
@@ -78,7 +78,7 @@ export class TitledSection {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Text Alignment",
+            "text": "Text alignment",
             "name": "uiName"
           }, {
             "text": "string",
@@ -113,7 +113,7 @@ export class TitledSection {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Label Bottom Margin",
+            "text": "Label bottom margin",
             "name": "uiName"
           }, {
             "text": "string",
@@ -148,7 +148,7 @@ export class TitledSection {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Section Padding",
+            "text": "Section padding",
             "name": "uiName"
           }, {
             "text": "string",

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

@@ -13,12 +13,12 @@ export class UserName {
   constructor() {
     this.ignored = true;
     /**
-     * @uiName Unknown User Name
+     * @uiName Unknown user name
      */
     this.fallback = "Anonymous User";
     /**
      * Text displayed while the participant’s name is loading.
-     * @uiName Loading Text
+     * @uiName Loading text
      */
     this.loadingText = "...";
     withHooks(this);
@@ -43,7 +43,7 @@ export class UserName {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Unknown User Name",
+            "text": "Unknown user name",
             "name": "uiName"
           }],
         "text": ""
@@ -64,7 +64,7 @@ export class UserName {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Loading Text",
+            "text": "Loading text",
             "name": "uiName"
           }],
         "text": "Text displayed while the participant\u2019s name is loading."

package/dist/collection/components/sqm-user-name/useUserName.js

@@ -1,14 +1,14 @@
 import { useQuery, useUserIdentity } from "@saasquatch/component-boilerplate";
 import { gql } from "graphql-request";
-const GET_USER_NAME = gql `
-  query getUserName {
-    viewer {
-      ... on User {
-        firstName
-        lastName
-      }
-    }
-  }
+const GET_USER_NAME = gql `
+  query getUserName {
+    viewer {
+      ... on User {
+        firstName
+        lastName
+      }
+    }
+  }
 `;
 export function useUserName(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;

package/dist/collection/components/views/EmailRegistration.stories.js

@@ -0,0 +1,80 @@
+import { h } from "@stencil/core";
+import { EmailRegistrationView, } from "./email-registration-view";
+// import scenario from "./ShareCode.feature";
+export default {
+  title: "Components/Email Registration",
+  parameters: {
+  // scenario,
+  },
+};
+const defaultProps = {
+  states: {
+    error: "",
+    loading: false,
+  },
+  callbacks: {
+    submit: async (e) => await e,
+  },
+  content: {
+    invalidEmailErrorMessage: "Must be a valid email address",
+    requiredFieldErrorMessage: "Cannot be empty",
+    paddingTop: "large",
+    paddingRight: "large",
+    paddingBottom: "large",
+    paddingLeft: "large",
+  },
+};
+export const Default = () => h(EmailRegistrationView, Object.assign({}, defaultProps));
+export const HasFirstNameLastName = () => (h(EmailRegistrationView, Object.assign({}, {
+  ...defaultProps,
+  content: {
+    ...defaultProps.content,
+    includeName: true,
+  },
+})));
+export const WithSlots = () => (h(EmailRegistrationView, Object.assign({}, {
+  ...defaultProps,
+  content: {
+    ...defaultProps.content,
+    topSlot: h("div", null, "Hello this is the top slot"),
+    bottomSlot: h("div", null, "Hello this is the bottom slot"),
+  },
+})));
+export const NoBorder = () => (h(EmailRegistrationView, Object.assign({}, {
+  ...defaultProps,
+  content: {
+    ...defaultProps.content,
+    hideBorder: true,
+  },
+})));
+export const BackgroundColor = () => (h(EmailRegistrationView, Object.assign({}, {
+  ...defaultProps,
+  content: {
+    ...defaultProps.content,
+    backgroundColor: "aquamarine",
+  },
+})));
+export const Loading = () => (h(EmailRegistrationView, Object.assign({}, {
+  ...defaultProps,
+  states: {
+    error: "",
+    loading: true,
+  },
+})));
+export const Error = () => (h(EmailRegistrationView, Object.assign({}, {
+  ...defaultProps,
+  states: {
+    error: "Something went wrong. Please try again.",
+    loading: false,
+  },
+})));
+export const EmptyEmailError = () => (h(EmailRegistrationView, Object.assign({}, {
+  ...defaultProps,
+  states: {
+    error: "Something went wrong. Please try again.",
+    loading: false,
+    registrationFormState: {
+      validationErrors: { email: "Email cannot be empty" },
+    },
+  },
+})));

package/dist/collection/components/views/copy-text-view.js

@@ -0,0 +1,76 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+import { HostBlock } from "../../global/mixins";
+const style = {
+  HostBlock: HostBlock,
+  inputStyle: {
+    "&::part(input)": { textOverflow: "ellipsis", width: "100%" },
+    "&::part(base)": { cursor: "pointer", overflow: "visible" },
+    width: "100%",
+  },
+  inputErrorStyle: {
+    "&::part(base)": {
+      border: "2px solid red",
+    },
+  },
+  containerStyle: {
+    display: "flex",
+    alignItems: "center",
+    gap: "var(--sl-spacing-x-small)",
+    width: "100%",
+  },
+  errorTextStyle: {
+    margin: "0",
+    color: "var(--sl-color-danger-500)",
+  },
+};
+const vanillaStyle = `
+  :host{
+    display: block;   
+    width: 100%;
+  }
+`;
+const textAlignStyle = {
+  right: `
+sl-input::part(input){
+  text-align: right;
+}`,
+  center: `  
+sl-input::part(input){
+  text-align: center;
+}`,
+  left: ``,
+};
+const disabledStyles = `
+  sl-input::part(input){
+    cursor: default;
+  }
+`;
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export function CopyTextView(props) {
+  const { buttonStyle = "icon" } = props;
+  const error = !props.loading && props.error;
+  const inputText = error ? props.inputPlaceholderText : props.copyString;
+  const disabled = error || props.loading || props.disabled;
+  const tooltipPlacement = props.buttonStyle === "button-below"
+    ? "bottom"
+    : props.buttonStyle === "button-outside"
+      ? "top"
+      : "top-end";
+  const copyButton = (h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: tooltipPlacement, disabled: props.disabled, open: props.open, skidding: props.buttonStyle === "icon" ? -5 : 0, slot: "suffix" }, buttonStyle === "icon" ? (h("sl-icon-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, name: "files", disabled: disabled })) : (h("sl-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: "medium", style: { width: `${buttonStyle === "button-below" && "100%"}` }, disabled: disabled, type: "primary" }, props.copyButtonLabel || "Copy"))));
+  return (h("div", null,
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle,
+      textAlignStyle[props.textAlign],
+      disabled && disabledStyles),
+    h("div", { class: sheet.classes.containerStyle, style: {
+        flexDirection: `${buttonStyle === "button-below" ? "column" : "row"}`,
+      } },
+      h("sl-input", { class: `${sheet.classes.inputStyle} ${error ? sheet.classes.inputErrorStyle : ""}`, exportparts: "label: input-label", value: props.loading ? "Loading..." : inputText, readonly: true, disabled: disabled },
+        buttonStyle === "icon" && copyButton,
+        error && (h("p", { slot: "help-text", class: sheet.classes.errorTextStyle }, props.errorText))),
+      (buttonStyle === "button-outside" || buttonStyle === "button-below") &&
+        copyButton)));
+}

package/dist/collection/components/views/email-registration-view.js

@@ -0,0 +1,74 @@
+import { h } from "@stencil/core";
+import { AuthButtonsContainer, AuthColumn, AuthWrapper, ErrorStyles, gap, } from "../../global/mixins";
+import { createStyleSheet } from "../../styling/JSS";
+const style = {
+  Wrapper: {
+    ...AuthWrapper,
+    ...gap({ direction: "column", size: "var(--sl-spacing-small)" }),
+  },
+  Column: AuthColumn,
+  ForgotButtonContainer: {
+    display: "inline",
+    cursor: "pointer",
+    "font-size": "13px",
+    "font-weight": "600",
+    color: "#AAAAAA",
+    margin: "0",
+  },
+  ButtonsContainer: AuthButtonsContainer,
+  ErrorStyle: ErrorStyles,
+};
+const vanillaStyle = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
+a svg {
+  margin: 0 auto;
+  display: block;
+}
+`;
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export function EmailRegistrationView(props) {
+  var _a, _b, _c, _d;
+  const { states, callbacks, content } = props;
+  const emailValidationRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  return (h("div", { class: sheet.classes.Wrapper, style: {
+      border: `${content.hideBorder ? "none" : "1px solid #eaeaea"}`,
+      backgroundColor: content.backgroundColor,
+      "padding-top": `var(--sl-spacing-${content.paddingTop})`,
+      "padding-right": `var(--sl-spacing-${content.paddingRight})`,
+      "padding-bottom": `var(--sl-spacing-${content.paddingBottom})`,
+      "padding-left": `var(--sl-spacing-${content.paddingLeft})`,
+    } },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    content.topSlot,
+    h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit },
+      props.states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
+        h("div", { part: "erroralert-text" }, props.states.error))),
+      content.includeName && (h("sl-input", { exportparts: "label: input-label", type: "name", name: "/firstName", label: content.firstNameLabel || "First Name", disabled: states.loading })),
+      content.includeName && (h("sl-input", { exportparts: "label: input-label", type: "name", name: "/lastName", label: content.lastNameLabel || "Last Name", disabled: states.loading })),
+      h("sl-input", Object.assign({ exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
+          if (!value) {
+            return content.requiredFieldErrorMessage;
+          }
+          if (!value.match(emailValidationRegex)) {
+            return content.invalidEmailErrorMessage;
+          }
+        } }, (((_b = (_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
+        class: sheet.classes.ErrorStyle,
+        helpText: ((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
+          content.requiredFieldErrorMessage,
+      }
+        : []))),
+      h("div", { class: sheet.classes.ButtonsContainer, style: {
+          paddingTop: `${content.includeName ? "var(--sl-spacing-medium)" : "0"}`,
+        } },
+        h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.registerLabel || "Registration"))),
+    content.bottomSlot));
+}