@saasquatch/mint-components 2.1.8-1 → 2.1.8-2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/mint-components",
   "title": "Mint Components",
-  "version": "2.1.8-1",
+  "version": "2.1.8-2",
   "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",
   "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg",
   "raisins": "docs/raisins.json",

package/dist/collection/components/sqm-partner-info-modal/PartnerInfoModal.stories.js

@@ -1,143 +0,0 @@
-import { h } from "@stencil/core";
-import { PartnerInfoModalView, } from "./sqm-partner-info-modal-view";
-export default {
-  title: "Components/Partner Info Modal",
-};
-const demoCountries = [
-  { countryCode: "US", displayName: "United States" },
-  { countryCode: "CA", displayName: "Canada" },
-  { countryCode: "GB", displayName: "United Kingdom" },
-  { countryCode: "AU", displayName: "Australia" },
-  { countryCode: "DE", displayName: "Germany" },
-  { countryCode: "FR", displayName: "France" },
-  { countryCode: "JP", displayName: "Japan" },
-];
-const demoCurrencies = [
-  { currencyCode: "USD", displayName: "US Dollar" },
-  { currencyCode: "CAD", displayName: "Canadian Dollar" },
-  { currencyCode: "GBP", displayName: "British Pound" },
-  { currencyCode: "EUR", displayName: "Euro" },
-  { currencyCode: "AUD", displayName: "Australian Dollar" },
-];
-const noopCallbacks = {
-  onCountryChange: (e) => console.log("Country changed:", e),
-  onCurrencyChange: (e) => console.log("Currency changed:", e),
-  onCountrySearch: (v) => console.log("Country search:", v),
-  onCurrencySearch: (v) => console.log("Currency search:", v),
-  onSubmit: () => console.log("Submit"),
-  onClose: () => console.log("Close"),
-};
-const defaultText = {
-  modalBrandHeader: "Welcome to {brandName} Program!",
-  descriptionNewPartner: "We just need a bit more information about you before you start earning cash!",
-  descriptionExistingPartner: "We noticed you are already an Impact.com partner, please confirm your information.",
-  countryLabel: "Country",
-  currencyLabel: "Currency",
-  submitButtonLabel: "Submit",
-  confirmButtonLabel: "Confirm",
-  searchCountryPlaceholder: "Search for a country",
-  searchCurrencyPlaceholder: "Search for a currency",
-};
-const defaultProps = {
-  states: {
-    open: true,
-    loading: false,
-    submitting: false,
-    isExistingPartner: false,
-    countryCode: "",
-    currency: "",
-    error: "",
-    success: false,
-    brandName: "Test Brand",
-    filteredCountries: demoCountries,
-    filteredCurrencies: demoCurrencies,
-  },
-  callbacks: noopCallbacks,
-  text: defaultText,
-};
-export const NewPartnerEmpty = () => {
-  return h(PartnerInfoModalView, Object.assign({}, defaultProps));
-};
-export const NewPartnerPrefilled = () => {
-  const props = {
-    ...defaultProps,
-    states: {
-      ...defaultProps.states,
-      countryCode: "US",
-      currency: "",
-    },
-  };
-  return h(PartnerInfoModalView, Object.assign({}, props));
-};
-export const NewPartnerFullySelected = () => {
-  const props = {
-    ...defaultProps,
-    states: {
-      ...defaultProps.states,
-      countryCode: "US",
-      currency: "USD",
-    },
-  };
-  return h(PartnerInfoModalView, Object.assign({}, props));
-};
-export const ExistingPartnerConfirm = () => {
-  const props = {
-    ...defaultProps,
-    states: {
-      ...defaultProps.states,
-      isExistingPartner: true,
-      countryCode: "CA",
-      currency: "CAD",
-    },
-  };
-  return h(PartnerInfoModalView, Object.assign({}, props));
-};
-export const Submitting = () => {
-  const props = {
-    ...defaultProps,
-    states: {
-      ...defaultProps.states,
-      countryCode: "GB",
-      currency: "GBP",
-      submitting: true,
-    },
-  };
-  return h(PartnerInfoModalView, Object.assign({}, props));
-};
-export const WithError = () => {
-  const props = {
-    ...defaultProps,
-    states: {
-      ...defaultProps.states,
-      countryCode: "US",
-      currency: "USD",
-      error: "An error occurred while creating your partner account. Please try again.",
-    },
-  };
-  return h(PartnerInfoModalView, Object.assign({}, props));
-};
-export const ValidationError = () => {
-  const props = {
-    ...defaultProps,
-    states: {
-      ...defaultProps.states,
-      countryCode: "",
-      currency: "",
-      error: "Please select both a country and currency.",
-    },
-  };
-  return h(PartnerInfoModalView, Object.assign({}, props));
-};
-export const Closed = () => {
-  const props = {
-    ...defaultProps,
-    states: {
-      ...defaultProps.states,
-      open: false,
-    },
-  };
-  return h(PartnerInfoModalView, Object.assign({}, props));
-};
-export const FullStackDemo = () => {
-  return (h("sqm-partner-info-modal", { "brand-name": "Acme", "header-new-partner": "Welcome to {brandName} Program!", "description-new-partner": "We just need a bit more information about you before you start earning cash!", "submit-button-label": "Submit" }));
-};

package/dist/collection/components/sqm-partner-info-modal/sqm-partner-info-modal-view.js

@@ -1,90 +0,0 @@
-import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
-import { intl } from "../../global/global";
-const style = {
-  Dialog: {
-    "&::part(panel)": {
-      maxWidth: "480px",
-    },
-    "&::part(title)": {
-      fontSize: "var(--sl-font-size-x-large)",
-      fontWeight: "600",
-      padding: "var(--sl-spacing-x-large) var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
-    },
-    "&::part(body)": {
-      padding: "var(--sl-spacing-small) var(--sl-spacing-x-large)",
-      fontSize: "var(--sl-font-size-small)",
-      overflow: "visible",
-    },
-    "&::part(footer)": {
-      display: "flex",
-      flexDirection: "column",
-      gap: "var(--sl-spacing-small)",
-      padding: "var(--sl-spacing-small) var(--sl-spacing-x-large) var(--sl-spacing-x-large)",
-    },
-    "&::part(overlay)": {
-      background: "rgba(0, 0, 0, 0.5)",
-    },
-    "&::part(close-button)": {
-      display: "none",
-    },
-  },
-  FormFields: {
-    display: "flex",
-    gap: "var(--sl-spacing-medium)",
-    marginTop: "var(--sl-spacing-medium)",
-    "& > *": {
-      flex: 1,
-    },
-  },
-  ErrorMessage: {
-    color: "var(--sqm-danger-color-text, #d32f2f)",
-    fontSize: "var(--sl-font-size-small)",
-    marginTop: "var(--sl-spacing-x-small)",
-  },
-  SearchInput: {
-    "&::part(base)": {
-      border: "none",
-      borderBottom: "1px solid var(--sl-color-neutral-300)",
-      borderRadius: "0",
-    },
-  },
-};
-export function PartnerInfoModalView(props) {
-  var _a, _b;
-  const { states, callbacks, text } = props;
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
-  const description = states.isExistingPartner
-    ? text.descriptionExistingPartner
-    : text.descriptionNewPartner;
-  const buttonLabel = states.isExistingPartner
-    ? text.confirmButtonLabel
-    : text.submitButtonLabel;
-  return (h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, noHeader: false, label: intl.formatMessage({
-      id: "modalBrandHeader",
-      defaultMessage: text.modalBrandHeader,
-    }, { brandName: states.brandName }), "onSl-request-close": (e) => {
-      e.preventDefault();
-    }, "onSl-hide": (e) => {
-      var _a;
-      // Prevent closing when clicking outside the dialog but not dropdowns
-      if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === "SL-DIALOG") {
-        e.preventDefault();
-      }
-    } },
-    h("style", { type: "text/css" }, styleString),
-    h("p", null, description),
-    h("div", { class: sheet.classes.FormFields },
-      h("sl-select", { exportparts: "label: input-label, base: input-base", label: text.countryLabel, value: states.countryCode, disabled: states.submitting, required: true, "onSl-select": callbacks.onCountryChange },
-        h("sl-input", { class: sheet.classes.SearchInput, placeholder: text.searchCountryPlaceholder, onKeyDown: (e) => e.stopPropagation(), "onSl-input": (e) => { var _a; return callbacks.onCountrySearch(((_a = e.target) === null || _a === void 0 ? void 0 : _a.value) || ""); } }), (_a = states.filteredCountries) === null || _a === void 0 ? void 0 :
-        _a.map((c) => (h("sl-menu-item", { value: c.countryCode }, c.displayName)))),
-      h("sl-select", { exportparts: "label: input-label, base: input-base", label: text.currencyLabel, value: states.currency, disabled: states.submitting, required: true, "onSl-select": callbacks.onCurrencyChange },
-        h("sl-input", { class: sheet.classes.SearchInput, placeholder: text.searchCurrencyPlaceholder, onKeyDown: (e) => e.stopPropagation(), "onSl-input": (e) => { var _a; return callbacks.onCurrencySearch(((_a = e.target) === null || _a === void 0 ? void 0 : _a.value) || ""); } }), (_b = states.filteredCurrencies) === null || _b === void 0 ? void 0 :
-        _b.map((c) => (h("sl-menu-item", { value: c.currencyCode },
-          c.currencyCode,
-          " - ",
-          c.displayName))))),
-    states.error && h("p", { class: sheet.classes.ErrorMessage }, states.error),
-    h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting || !states.countryCode || !states.currency, onClick: callbacks.onSubmit, style: { width: "100%" }, exportparts: "base: primarybutton-base" }, buttonLabel)));
-}