@stokr/components-library 3.0.16 → 3.0.17

package/dist/components/Modal/SuccessModal/SuccessModal.js

@@ -0,0 +1,170 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { createRoot } from "react-dom/client";
+import PropTypes from "prop-types";
+import { DotLottieReact } from "@lottiefiles/dotlottie-react";
+import { Modal } from "../Modal.js";
+import { SuccessModalContent, AnimationContainer, Title, Subtitle, ContentWrapper } from "./SuccessModal.styles.js";
+import successAnimation from "../../../static/animations/checked.lottie.js";
+import progressAnimation from "../../../static/animations/progress.lottie.js";
+const variantConfig = {
+  success: {
+    animation: successAnimation,
+    segment: [0, 50],
+    loop: false
+  },
+  progress: {
+    animation: progressAnimation,
+    segment: null,
+    loop: false
+  }
+};
+const SuccessModalComponent = ({
+  isOpen,
+  onClose,
+  variant = "success",
+  title,
+  subtitle,
+  content,
+  animationSrc,
+  loop,
+  autoplay = true,
+  segment,
+  speed = 1,
+  modalProps = {},
+  maxWidth = "800px"
+}) => {
+  const config = variantConfig[variant] || variantConfig.success;
+  const animationSource = animationSrc || config.animation;
+  const animationLoop = loop !== void 0 ? loop : config.loop;
+  const animationSegment = segment || config.segment;
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose?.();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose]);
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      isOpen,
+      onClose,
+      maxHeight: "90vh",
+      boxStyles: { minHeight: "unset" },
+      maxWidth,
+      ...modalProps,
+      children: /* @__PURE__ */ jsxs(SuccessModalContent, { children: [
+        /* @__PURE__ */ jsx(AnimationContainer, { children: /* @__PURE__ */ jsx(
+          DotLottieReact,
+          {
+            src: animationSource,
+            loop: animationLoop,
+            autoplay,
+            speed,
+            segment: animationSegment,
+            style: { width: "100%", height: "100%" }
+          }
+        ) }),
+        title && /* @__PURE__ */ jsx(Title, { children: title }),
+        subtitle && /* @__PURE__ */ jsx(Subtitle, { children: subtitle }),
+        content && /* @__PURE__ */ jsx(ContentWrapper, { children: content })
+      ] })
+    }
+  );
+};
+SuccessModalComponent.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  variant: PropTypes.oneOf(["success", "progress"]),
+  title: PropTypes.node,
+  subtitle: PropTypes.node,
+  content: PropTypes.node,
+  animationSrc: PropTypes.string,
+  loop: PropTypes.bool,
+  autoplay: PropTypes.bool,
+  segment: PropTypes.arrayOf(PropTypes.number),
+  speed: PropTypes.number,
+  modalProps: PropTypes.object,
+  maxWidth: PropTypes.string
+};
+let successContainer = null;
+let successRoot = null;
+const showSuccess = (options = {}) => {
+  const {
+    variant = "success",
+    title = "",
+    subtitle = "",
+    content = null,
+    animationSrc = null,
+    loop,
+    autoplay = true,
+    segment,
+    speed = 1,
+    autoClose = 0,
+    modalProps = {},
+    maxWidth = "800px"
+  } = options;
+  return new Promise((resolve) => {
+    if (!successContainer) {
+      successContainer = document.createElement("div");
+      successContainer.id = "success-modal-root";
+      document.body.appendChild(successContainer);
+      successRoot = createRoot(successContainer);
+    }
+    let isClosed = false;
+    const handleClose = () => {
+      if (isClosed) return;
+      isClosed = true;
+      renderModal(false);
+      setTimeout(() => {
+        renderModal(null);
+        resolve();
+      }, 350);
+    };
+    const renderModal = (isOpen) => {
+      if (isOpen === null) {
+        successRoot.render(null);
+        return;
+      }
+      successRoot.render(
+        /* @__PURE__ */ jsx(
+          SuccessModalComponent,
+          {
+            isOpen,
+            onClose: handleClose,
+            variant,
+            title,
+            subtitle,
+            content,
+            animationSrc,
+            loop,
+            autoplay,
+            segment,
+            speed,
+            modalProps,
+            maxWidth
+          }
+        )
+      );
+    };
+    renderModal(true);
+    if (autoClose > 0) {
+      setTimeout(() => {
+        handleClose();
+      }, autoClose);
+    }
+  });
+};
+const showProgress = (options = {}) => {
+  return showSuccess({ ...options, variant: "progress" });
+};
+export {
+  SuccessModalComponent as SuccessModal,
+  SuccessModalComponent,
+  showProgress,
+  showSuccess
+};

package/dist/components/Modal/SuccessModal/SuccessModal.styles.js

@@ -0,0 +1,53 @@
+import styled from "styled-components";
+import { colors } from "../../../styles/colors.js";
+const SuccessModalContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 40px 24px;
+  max-height: calc(90vh - 60px); /* Account for modal padding/close button */
+  overflow-y: auto;
+`;
+const AnimationContainer = styled.div`
+  width: 80px;
+  height: 80px;
+  min-height: 80px;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-family: 'Open Sans';
+`;
+const Title = styled.h2`
+  margin: 0 0 16px 0;
+  font-size: 22px;
+  font-weight: 800;
+  color: ${colors.black};
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  line-height: 28px;
+  flex-shrink: 0;
+  font-family: 'Open Sans';
+`;
+const Subtitle = styled.p`
+  margin: 0 0 24px 0;
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 24px;
+  letter-spacing: 0.6px;
+  max-width: 550px;
+  flex-shrink: 0;
+`;
+const ContentWrapper = styled.div`
+  width: 100%;
+  margin-top: 8px;
+`;
+export {
+  AnimationContainer,
+  ContentWrapper,
+  Subtitle,
+  SuccessModalContent,
+  Title
+};

package/dist/components/MultiProgressBar/MultiProgressBar.js

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { Bar, BackBar, BarPart, FillProgress, FillBar } from "./MultiProgressBar.styles.js";
+const MultiProgressBar = ({ backParts, fillParts, fill }) => /* @__PURE__ */ jsxs(Bar, { children: [
+  /* @__PURE__ */ jsx(BackBar, { children: backParts?.map((part) => /* @__PURE__ */ jsx(BarPart, { percent: part.value, color: `back-${part.label}` }, part.label)) }),
+  /* @__PURE__ */ jsx(FillProgress, { percent: fill, children: /* @__PURE__ */ jsx(FillBar, { percent: fill, children: fillParts?.map((part) => /* @__PURE__ */ jsx(BarPart, { percent: part.value, color: `fill-${part.label}` }, part.label)) }) })
+] });
+const MultiProgressBarPropTypes = {
+  backParts: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.number.isRequired,
+      label: PropTypes.string.isRequired
+    })
+  ).isRequired,
+  fillParts: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.number.isRequired,
+      label: PropTypes.string.isRequired
+    })
+  ).isRequired,
+  fill: PropTypes.number.isRequired
+};
+MultiProgressBar.propTypes = MultiProgressBarPropTypes;
+var stdin_default = MultiProgressBar;
+export {
+  MultiProgressBar,
+  MultiProgressBarPropTypes,
+  stdin_default as default
+};

package/dist/components/MultiProgressBar/MultiProgressBar.styles.js

@@ -0,0 +1,105 @@
+import styled from "styled-components";
+const Bar = styled.div`
+  width: 100%;
+  position: relative;
+  display: block;
+  height: 10px;
+  background-color: #004bb7;
+  border-radius: 5px;
+  overflow: hidden;
+`;
+const BackBar = styled.div`
+  z-index: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  overflow: hidden;
+`;
+const FillBar = styled.div.withConfig({
+  shouldForwardProp: (props) => props !== "percent"
+})`
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  overflow: hidden;
+  transition: transform 0.3s;
+  transform: translateX(100%);
+
+  ${(props) => props.percent && `
+    transform: translateX(${100 - props.percent}%);
+  `}
+`;
+const FillProgress = styled.div.withConfig({
+  shouldForwardProp: (props) => props !== "percent"
+})`
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  overflow: hidden;
+  transition: transform 0.3s;
+  transform: translateX(-100%);
+
+  ${(props) => props.percent && `
+    transform: translateX(${props.percent - 100}%);
+  `}
+`;
+const BarPart = styled.div.withConfig({
+  shouldForwardProp: (props) => !["percent", "color"].includes(props)
+})`
+  display: block;
+  height: 100%;
+  float: left;
+  background-color: #000;
+  transition: width 0.3s;
+
+  ${(props) => `
+    width: ${props.percent || 0}%;
+  `}
+
+  ${(props) => props.color && `
+    ${props.color === "back-empty" ? `
+      background-color: transparent;
+    ` : ""}
+    ${props.color === "back-minimum" ? `
+      background-color: #4a90e2;
+    ` : ""}
+    ${props.color === "back-disabled" ? `
+      background-color: #4a90e2;
+      background-image: repeating-linear-gradient(-45deg, #004bb7, #004bb7 2px, #4a90e2 2px, #4a90e2 5px);
+    ` : ""}
+    ${props.color === "fill-empty" ? `
+      background-color: transparent;
+    ` : ""}
+    ${props.color === "fill-minimum" ? `
+      background-color: #fff;
+    ` : ""}
+    ${props.color === "fill-minimum-grey" ? `
+      background-color: #e1e1e1;
+    ` : ""}
+    ${props.color === "fill-bought" ? `
+      background-color: #69bd53;
+      background-image: linear-gradient(to left, #a9ef9c, #69bd53);
+    ` : ""}
+  `}
+`;
+export {
+  BackBar,
+  Bar,
+  BarPart,
+  FillBar,
+  FillProgress
+};

package/dist/components/Newsletter/Newsletter.js

@@ -0,0 +1,122 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import fetchDataPublic from "../../api/fetchDataPublic.js";
+import { Subscribe, LayoutWrapper, Container, SubscribeTitle, SubscribeForm, SubscribeInputBox, SubscribeInput, SubscribeInputError, SubscribeSubmit } from "./Newsletter.styles.js";
+const Newsletter = () => {
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    errorName: "",
+    errorEmail: "",
+    submitSuccess: false
+  });
+  const validateForm = () => {
+    const { name, email } = formData;
+    let errorName = "";
+    let errorEmail = "";
+    if (!name) {
+      errorName = "Oops, this can't be blank";
+    }
+    if (!email) {
+      errorEmail = "Oops, this can't be blank";
+    } else if (!/.+@.+\..+/.test(email)) {
+      errorEmail = "Oops, that's not a valid address";
+    }
+    setFormData((prev) => ({
+      ...prev,
+      errorName,
+      errorEmail
+    }));
+    return !errorName && !errorEmail;
+  };
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!validateForm()) {
+      return;
+    }
+    try {
+      await fetchDataPublic("emails/subscribe", {
+        name: formData.name,
+        email: formData.email,
+        listName: "newsletter"
+      });
+      setFormData({
+        name: "",
+        email: "",
+        errorName: "",
+        errorEmail: "",
+        submitSuccess: true
+      });
+      setTimeout(() => {
+        setFormData((prev) => ({
+          ...prev,
+          submitSuccess: false
+        }));
+      }, 5e3);
+    } catch (_error) {
+      console.log(`
+### ERROR ADDING SUBSCRIBER ###
+
+${e}`);
+    }
+  };
+  const isFormValid = () => {
+    const { name, email } = formData;
+    return name.trim() !== "" && email.trim() !== "" && /.+@.+\..+/.test(email);
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Subscribe, { children: /* @__PURE__ */ jsx(LayoutWrapper, { noBorder: true, minimal: true, children: /* @__PURE__ */ jsxs(Container, { compact: true, children: [
+    /* @__PURE__ */ jsx(SubscribeTitle, { as: "h3", children: "SIGN UP FOR THE STOKR NEWSLETTER" }),
+    /* @__PURE__ */ jsxs(SubscribeForm, { onSubmit: handleSubmit, id: "newsletter-form", children: [
+      /* @__PURE__ */ jsxs(SubscribeInputBox, { children: [
+        /* @__PURE__ */ jsx(
+          SubscribeInput,
+          {
+            name: "name",
+            type: "text",
+            placeholder: "Your Name",
+            value: formData.name,
+            onChange: handleChange,
+            "data-id": "newsletter-name-input"
+          }
+        ),
+        formData.errorName && /* @__PURE__ */ jsx(SubscribeInputError, { children: formData.errorName })
+      ] }),
+      /* @__PURE__ */ jsxs(SubscribeInputBox, { children: [
+        /* @__PURE__ */ jsx(
+          SubscribeInput,
+          {
+            name: "email",
+            type: "email",
+            placeholder: "Your Email",
+            value: formData.email,
+            onChange: handleChange,
+            "data-id": "newsletter-email-input"
+          }
+        ),
+        formData.errorEmail && /* @__PURE__ */ jsx(SubscribeInputError, { children: formData.errorEmail })
+      ] }),
+      /* @__PURE__ */ jsx(
+        SubscribeSubmit,
+        {
+          submitSuccess: formData.submitSuccess,
+          id: "newsletter-button-submit",
+          type: "submit",
+          disabled: !isFormValid(),
+          children: formData.submitSuccess ? "Success!" : "Submit"
+        }
+      )
+    ] })
+  ] }) }) }) });
+};
+var stdin_default = Newsletter;
+export {
+  Newsletter,
+  stdin_default as default
+};

package/dist/components/Newsletter/Newsletter.styles.js

@@ -0,0 +1,186 @@
+import styled, { css } from "styled-components";
+import rwd, { rwdMax } from "../../styles/rwd.js";
+import { BASE_MARGIN, MAX_WIDTH, GRAY_BASE_HEX, RED_BASE_HEX, WHITE_HEX } from "../../constants/style.js";
+import { Button } from "../Button/Button.styles.js";
+const withMarginsCss = css`
+  padding-left: ${BASE_MARGIN * 2}px;
+  padding-right: ${BASE_MARGIN * 2}px;
+
+  ${rwdMax.Medium`
+    padding: 0 ${BASE_MARGIN * 2}px;
+  `}
+  ${rwdMax.Mobile`
+    padding: 0 ${BASE_MARGIN * 2}px;
+  `}
+`;
+const Container = styled.div.withConfig({
+  shouldForwardProp: (props) => !["compact", "isMobile", "noPaddingHorizontal"].includes(props)
+})`
+  ${({ compact }) => !compact && withMarginsCss};
+  padding: ${({ isMobile }) => isMobile && "52px 32px 56px !important"};
+  padding: ${({ noPaddingHorizontal }) => noPaddingHorizontal && "52px 0px 56px !important"};
+`;
+const LayoutWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["notFullHeight", "minimal", "noBorder"].includes(props)
+})`
+  display: flex;
+  min-height: ${({ notFullHeight }) => notFullHeight ? "unset" : "100vh"};
+  flex-direction: column;
+  position: relative;
+  max-width: ${MAX_WIDTH}px;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+
+  ${rwd.Large`
+    border-right: 1px solid ${GRAY_BASE_HEX};
+    border-left: 1px solid ${GRAY_BASE_HEX};
+  `}
+
+  ${({ minimal }) => minimal && css`
+      min-height: 0;
+    `}
+  ${({ noBorder }) => noBorder && css`
+      border: none !important;
+    `}
+`;
+const Subscribe = styled.div`
+  padding: 72px 65px 68px;
+  background-color: ${RED_BASE_HEX};
+
+  ${rwdMax.MLarge`
+    padding: 68px ${BASE_MARGIN * 2}px;
+  `}
+`;
+const SubscribeTitle = styled.h3`
+  color: white;
+  font-family: 'Open Sans', 'Helvetica', 'Helvetica Neue', sans-serif;
+  font-size: 22px;
+  font-weight: 800;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: 1.27;
+  letter-spacing: 0.8px;
+  margin: 0 0 60px;
+`;
+const SubscribeInputBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+  position: relative;
+`;
+const SubscribeInput = styled.input`
+  text-transform: initial;
+  letter-spacing: 2.1px;
+  font-size: 11px;
+  white-space: nowrap;
+  line-height: 2.18;
+  color: white;
+  font-weight: 400;
+  flex: 1 0 auto;
+  margin-right: 56px;
+  padding: 8px 0;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  outline: none;
+
+  /* Override browser autofill styles */
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active {
+    -webkit-text-fill-color: white !important;
+    -webkit-box-shadow: 0 0 0 30px ${RED_BASE_HEX} inset !important;
+    transition: background-color 5000s ease-in-out 0s;
+    caret-color: white !important;
+  }
+
+  ${rwdMax.MLarge`
+    margin-right: 0;
+    display: block;
+    width: 100%;
+    margin-bottom: 36px;
+  `}
+
+  &::-webkit-input-placeholder {
+    color: white;
+    text-transform: uppercase;
+  }
+  &::-moz-placeholder {
+    color: white;
+    text-transform: uppercase;
+  }
+  &::placeholder {
+    color: white;
+    text-transform: uppercase;
+  }
+`;
+const SubscribeInputError = styled.p`
+  color: white;
+  font-size: 9px;
+  font-weight: 400;
+  letter-spacing: 1.8px;
+  margin: 9px 0;
+  position: absolute;
+  text-transform: uppercase;
+  top: 39px;
+`;
+const SubscribeSubmit = styled(Button).withConfig({
+  shouldForwardProp: (props) => !["submitSuccess"].includes(props)
+})`
+  padding-left: 40px;
+  padding-right: 40px;
+  background: ${RED_BASE_HEX};
+  font-size: 11px;
+  display: flex;
+  justify-content: center;
+  width: 136px; /* Fixed value so both states keep same width */
+
+  ${rwdMax.MLarge`
+    margin: 0 auto 0;
+    display: block;
+    padding-left: 48px;
+    padding-right: 48px;
+    width: unset;
+  `}
+
+  &&&& {
+    border-color: white;
+    color: white;
+
+    &:hover {
+      background: ${WHITE_HEX};
+      color: ${RED_BASE_HEX};
+    }
+
+    &:active,
+    &:focus {
+      background: ${RED_BASE_HEX};
+      color: ${WHITE_HEX};
+    }
+  }
+
+  ${({ submitSuccess }) => submitSuccess && `
+      background: ${WHITE_HEX} !important;
+      color: ${RED_BASE_HEX} !important;
+      pointer-events: none;
+  `}
+`;
+const SubscribeForm = styled.form`
+  display: flex;
+
+  ${rwdMax.MLarge`    display: block;
+  `}
+`;
+export {
+  Container,
+  LayoutWrapper,
+  Subscribe,
+  SubscribeForm,
+  SubscribeInput,
+  SubscribeInputBox,
+  SubscribeInputError,
+  SubscribeSubmit,
+  SubscribeTitle
+};

package/dist/components/NotificationCounter/NotificationCounter.styles.js

@@ -0,0 +1,38 @@
+import styled from "styled-components";
+import theme from "../../styles/theme.js";
+const NotificationCounter = styled.span.withConfig({
+  shouldForwardProp: (props) => !["avatar", "mobile", "mobileMenu"].includes(props)
+})`
+  display: inline-block;
+  vertical-align: middle;
+  color: ${() => theme.cWhite};
+  background-color: ${() => theme.cWarning};
+  border-radius: 50%;
+  min-width: 16px;
+  height: 16px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 16px;
+  text-align: center;
+
+  ${(props) => props.avatar && `
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1;
+  `}
+
+  ${(props) => props.mobile && `
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    z-index: 1;
+  `}
+  ${(props) => props.mobileMenu && `
+    margin:0 5px;
+  `}
+`;
+export {
+  NotificationCounter,
+  NotificationCounter as default
+};