@stokr/components-library 3.0.16 → 3.0.17

package/dist/components/LearnMoreSection/LearnMore.js

@@ -0,0 +1,138 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PureComponent } from "react";
+import PropTypes from "prop-types";
+import { Collapse } from "react-collapse";
+import stdin_default$2 from "../TabsNav/TabsNav.js";
+import { Row, Column } from "../Grid/Grid.styles.js";
+import stdin_default$3 from "../Tabs/Tabs.js";
+import { Text } from "../Text/Text.styles.js";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import stdin_default from "../LearnMoreCarousel/LearnMoreCarousel.js";
+import { LearnMoreSlide } from "../LearnMoreCarousel/LearnMoreCarousel.styles.js";
+import { getMedia } from "../../styles/rwd.js";
+import "../LearnMorePage/LearnMore.js";
+import { Container, TitleContainer, SidebarSubHeading, TabTitle, Arrow, TabNav, TabArrow } from "./LearnMore.styles.js";
+import stdin_default$1 from "./LearnMoreItem.js";
+import { learnMoreCategoryPropTypes, learnMorePostPropTypes } from "../LearnMorePage/LearnMore.propTypes.js";
+import { Tab } from "../Tabs/Tabs.styles.js";
+class LearnMoreSection extends PureComponent {
+  state = {
+    activeTab: 0,
+    isMobile: false
+  };
+  componentDidMount() {
+    const { categories } = this.props;
+    if (categories?.[0]) {
+      this.onTabChange(categories[0].id);
+    }
+    window.addEventListener("resize", this.onResize);
+    this.onResizeTimeout();
+  }
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.onResize);
+  }
+  onTabChange = (tabId) => {
+    this.setState({
+      activeTab: tabId
+    });
+  };
+  onResize = () => {
+    clearTimeout(this.timeout);
+    this.timeout = setTimeout(this.onResizeTimeout, 200);
+  };
+  onResizeTimeout = () => {
+    this.setState({
+      isMobile: this.checkIsMobile()
+    });
+  };
+  checkIsMobile = () => !window.matchMedia(getMedia("Medium")).matches;
+  getItemsForSubcategories = (subcategories) => {
+    const { items } = this.props;
+    return subcategories.map((subcategory) => items.find((item) => item.id === subcategory.id));
+  };
+  render() {
+    const { categories } = this.props;
+    const { activeTab, isMobile } = this.state;
+    return isMobile ? /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsxs(Column, { children: [
+      /* @__PURE__ */ jsx(TitleContainer, { children: /* @__PURE__ */ jsxs(Text, { children: [
+        /* @__PURE__ */ jsx(SidebarSubHeading, { children: "INVESTMENT OPPORTUNITIES" }),
+        /* @__PURE__ */ jsx("h3", { children: "DISCOVER INVESTMENTS" })
+      ] }) }),
+      categories.map((category) => {
+        const items = this.getItemsForSubcategories(category.subcategories);
+        return /* @__PURE__ */ jsxs(ComponentWrapper, { noPadding: true, borderTop: true, children: [
+          /* @__PURE__ */ jsxs(TabTitle, { onClick: () => this.onTabChange(category.id), children: [
+            category.title,
+            /* @__PURE__ */ jsx(Arrow, { isOpened: activeTab === category.id })
+          ] }),
+          /* @__PURE__ */ jsx(Collapse, { isOpened: activeTab === category.id, children: /* @__PURE__ */ jsx(stdin_default, { dots: true, isMobile: true, children: items?.map((item) => /* @__PURE__ */ jsx(LearnMoreSlide, { children: /* @__PURE__ */ jsx(
+            stdin_default$1,
+            {
+              title: item.title,
+              content: item.excerpt,
+              coverSrc: item.cover,
+              postType: item.postType,
+              link: item.url,
+              videoSrc: item.videoSrc,
+              category: item.category
+            },
+            item.id
+          ) }, item.id)) }) })
+        ] }, category.id);
+      })
+    ] }) }) }) : /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs(Row, { children: [
+      /* @__PURE__ */ jsxs(Column, { part: 5, style: { height: "auto" }, children: [
+        /* @__PURE__ */ jsx(TitleContainer, { borderRight: true, borderBottom: true, children: /* @__PURE__ */ jsxs(Text, { responsiveFont: true, children: [
+          /* @__PURE__ */ jsx(SidebarSubHeading, { children: "INVESTMENT OPPORTUNITIES" }),
+          /* @__PURE__ */ jsx("h3", { children: "DISCOVER INVESTMENTS" })
+        ] }) }),
+        /* @__PURE__ */ jsx(stdin_default$2, { activeTab, children: categories?.map((category) => /* @__PURE__ */ jsxs(
+          TabNav,
+          {
+            borderBottom: true,
+            borderRight: true,
+            isActive: activeTab === category.id,
+            onClick: () => this.onTabChange(category.id),
+            children: [
+              /* @__PURE__ */ jsx(TabArrow, {}),
+              category?.title
+            ]
+          },
+          category.id
+        )) }),
+        /* @__PURE__ */ jsx(TitleContainer, { borderRight: true, children: /* @__PURE__ */ jsx(Text, {}) })
+      ] }),
+      /* @__PURE__ */ jsx(Column, { part: 11, children: /* @__PURE__ */ jsx(stdin_default$3, { activeTab, children: categories?.map((category) => {
+        const items = this.getItemsForSubcategories(category.subcategories);
+        return /* @__PURE__ */ jsx(Tab, { children: /* @__PURE__ */ jsxs(stdin_default, { arrows: true, dots: true, children: [
+          items?.map((item) => /* @__PURE__ */ jsx(LearnMoreSlide, { children: /* @__PURE__ */ jsx(
+            stdin_default$1,
+            {
+              title: item?.title,
+              content: item?.excerpt,
+              coverSrc: item?.cover,
+              postType: item?.postType,
+              link: item?.url,
+              videoSrc: item?.videoSrc,
+              category: item?.category
+            },
+            item?.id
+          ) }, item?.id)),
+          /* @__PURE__ */ jsx(LearnMoreSlide, {})
+        ] }) }, category.id);
+      }) }) })
+    ] }) });
+  }
+}
+LearnMoreSection.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape(learnMorePostPropTypes)).isRequired,
+  categories: PropTypes.arrayOf(
+    PropTypes.shape({
+      ...learnMoreCategoryPropTypes,
+      subcategories: PropTypes.arrayOf(PropTypes.shape(learnMoreCategoryPropTypes))
+    })
+  ).isRequired
+};
+export {
+  LearnMoreSection
+};

package/dist/components/LearnMoreSection/LearnMore.styles.js

@@ -0,0 +1,147 @@
+import styled, { css } from "styled-components";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import { TabsWrapper, StyledTabs } from "../TabsNav/TabsNav.styles.js";
+const Container = styled.div`
+  width: 100%;
+  overflow: hidden;
+
+  ${TabsWrapper} {
+    padding: 0 !important;
+  }
+
+  ${StyledTabs} {
+    border-bottom: none;
+  }
+`;
+const TabNav = styled(ComponentWrapper).withConfig({
+  shouldForwardProp: (props) => !["isActive"].includes(props)
+})`
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  cursor: pointer;
+
+  height: 104px;
+  letter-spacing: 0.6px;
+  line-height: 1.5;
+  padding: 44px 64px !important;
+
+  ${(props) => props.isActive && css`
+      border-right: none !important;
+
+      &::before {
+        content: '';
+        width: 8px;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        background: ${props.theme.cWarning};
+      }
+    `}
+`;
+const TabArrow = styled.i.attrs({
+  className: "ion ion-ios-arrow-forward"
+})`
+  color: ${(props) => props.theme.cWarning};
+  margin-right: 15px;
+`;
+styled.div`
+  width: 100%;
+
+  .slick-arrow {
+    width: 64px;
+    height: 48px;
+    background: ${(props) => props.theme.cWarning};
+    z-index: 10;
+    transition: 0.3s ease background;
+
+    &:hover,
+    &:focus {
+      background: ${(props) => props.theme.cWarningDark};
+
+      &::before {
+        color: ${(props) => props.theme.cWhite} !important;
+      }
+    }
+  }
+
+  .slick-arrow.slick-prev {
+    top: auto;
+    left: auto;
+    bottom: 0;
+    right: 64px;
+    transform: translate(0);
+  }
+
+  .slick-arrow.slick-next {
+    top: auto;
+    left: auto;
+    bottom: 0;
+    right: 0;
+    transform: translate(0);
+    border-left: 1px solid ${(props) => props.theme.cWarningDark};
+  }
+
+  .slick-dots {
+    width: auto;
+    right: 164px;
+    height: 36px;
+    bottom: 0;
+  }
+`;
+const TitleContainer = styled(ComponentWrapper)`
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+`;
+const TabTitle = styled.div`
+  padding: 42px 36px;
+  display: flex;
+  justify-content: space-between;
+  font-weight: 700;
+  text-transform: uppercase;
+  position: relative;
+  font-size: 11px;
+  line-height: 20px;
+  letter-spacing: 0.6px;
+`;
+const Arrow = styled.i.withConfig({
+  shouldForwardProp: (props) => !["isOpened"].includes(props)
+}).attrs({
+  className: "ion ion-ios-arrow-down"
+})`
+  &&& {
+    position: absolute;
+    top: 50%;
+    right: 32px;
+    transition: 0.3s transform;
+    transform: rotate(0);
+    text-align: center;
+    font-size: 16px;
+    line-height: 16px;
+    height: 16px;
+    margin-top: -8px;
+
+    ${(props) => props.isOpened && `
+      transform: rotate(180deg);
+    `}
+  }
+`;
+const SidebarSubHeading = styled.div`
+  font-size: 11px;
+  line-height: 24px;
+  letter-spacing: 2.1px;
+  text-transform: uppercase;
+  margin-bottom: 20px;
+`;
+export {
+  Arrow,
+  Container,
+  SidebarSubHeading,
+  TabArrow,
+  TabNav,
+  TabTitle,
+  TitleContainer
+};

package/dist/components/LearnMoreSection/LearnMoreItem.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { useNavigate } from "react-router-dom";
+import stdin_default$1 from "../Background/Background.js";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import { Button } from "../Button/Button.styles.js";
+import { Container, Cover, Title, Content } from "./LearnMoreItem.styles.js";
+import { SidebarSubHeading } from "./LearnMore.styles.js";
+const LearnMoreItemSection = ({ title, content, link, coverSrc, category }) => {
+  let navigate = useNavigate();
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsx(Cover, { children: /* @__PURE__ */ jsx(stdin_default$1, { src: coverSrc, investmentOpportunities: true }) }),
+    /* @__PURE__ */ jsxs(ComponentWrapper, { noPaddingHorizontal: true, noPaddingBottom: true, children: [
+      /* @__PURE__ */ jsx(SidebarSubHeading, { children: category }),
+      /* @__PURE__ */ jsx(Title, { children: title })
+    ] }),
+    /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, noPaddingBottom: true, children: /* @__PURE__ */ jsx(Content, { children: content }) }),
+    /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, noPaddingBottom: true, children: /* @__PURE__ */ jsx(Button, { onClick: () => navigate(link), children: title === "ARTID" || title === "INFINITE-FLEET" || title === "BLOCKSTREAM MINING" || title === "MAZZANTI AUTOMOBILI" ? "FULL DETAILS" : `I'M INTERESTED` }) })
+  ] });
+};
+LearnMoreItemSection.propTypes = {
+  title: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
+  link: PropTypes.string.isRequired,
+  coverSrc: PropTypes.string.isRequired,
+  postType: PropTypes.string.isRequired
+};
+var stdin_default = LearnMoreItemSection;
+export {
+  LearnMoreItemSection,
+  stdin_default as default
+};

package/dist/components/LearnMoreSection/LearnMoreItem.styles.js

@@ -0,0 +1,60 @@
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+import { Container as Container$1, Content as Content$1 } from "../Background/Background.styles.js";
+const Container = styled.div`
+  height: 100%;
+`;
+const Cover = styled.div`
+  width: 100%;
+
+  ${Container$1} {
+    width: 100%;
+    padding-top: 56.25%;
+  }
+
+  ${Content$1} {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: auto;
+    transform: translateY(-50%) translateX(-50%);
+  }
+`;
+styled(Link)`
+  width: 48px;
+  height: 48px;
+  color: ${(props) => props.theme.cWhite};
+  background: ${(props) => props.theme.cWarning};
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.3s background;
+
+  &:hover {
+    color: ${(props) => props.theme.cWhite};
+    background: ${(props) => props.theme.cWarningDark};
+  }
+`;
+styled.i.attrs({
+  className: "ion ion-md-play"
+})`
+  font-size: 16px;
+`;
+const Title = styled.div`
+  font-size: 16px;
+  font-weight: 600;
+`;
+const Content = styled.div`
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 1.5;
+  letter-spacing: 0.6px;
+  min-height: 100px;
+`;
+export {
+  Container,
+  Content,
+  Cover,
+  Title
+};

package/dist/components/LoginModal/LoginModal.js

@@ -0,0 +1,142 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import PropTypes from "prop-types";
+import { useLocation } from "react-router-dom";
+import { Formik } from "formik";
+import * as Yup from "yup";
+import { Modal } from "../Modal/Modal.js";
+import stdin_default$1 from "../Form/Form.js";
+import { Text } from "../Text/Text.styles.js";
+import { Input } from "../Input/Input.js";
+import stdin_default$2 from "../Input/InputPassword.js";
+import { Button } from "../Button/Button.styles.js";
+import { TextLink } from "../TextLink/TextLink.styles.js";
+import { Row, Column } from "../Grid/Grid.styles.js";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import { emailRegex } from "../../constants/globalVariables.js";
+import { ModalInner, ModalLinkWrap, ModalLink } from "../Modal/Modal.styles.js";
+import { FormField, FormError } from "../Form/Form.styles.js";
+const LoginModal = (props) => {
+  const [email, setEmail] = React__default.useState();
+  const location = useLocation();
+  React__default.useEffect(() => {
+    const { search } = location;
+    const query = new URLSearchParams(search);
+    const _email = query.get("email");
+    if (_email) {
+      setEmail(_email);
+    }
+  }, [location]);
+  const validationSchema = Yup.object().shape({
+    email: Yup.string().matches(emailRegex, "Oops, that's not a valid address").required("Oops, this can't be blank"),
+    password: Yup.string().min(6, "Password must be at least 6 characters").required("Password is required")
+  });
+  const {
+    popupError,
+    isModalOpen,
+    onModalClose,
+    onFormSend,
+    onModalSwitch,
+    onForgotPassword,
+    isActionLoading,
+    background
+  } = props;
+  return /* @__PURE__ */ jsx(Modal, { isOpen: isModalOpen, onClose: onModalClose, background, children: /* @__PURE__ */ jsxs(Row, { children: [
+    /* @__PURE__ */ jsxs(Column, { part: 8, children: [
+      /* @__PURE__ */ jsx(ModalInner, { modalTop: true, children: /* @__PURE__ */ jsxs(Text, { children: [
+        /* @__PURE__ */ jsx("h3", { children: "Log in" }),
+        /* @__PURE__ */ jsx("p", { children: "Come on in to stoke up innovation..." })
+      ] }) }),
+      /* @__PURE__ */ jsx(ModalInner, { modalBot: true, children: /* @__PURE__ */ jsxs(ModalLinkWrap, { children: [
+        "Don't have an account yet? ",
+        /* @__PURE__ */ jsx(ModalLink, { type: "button", to: "#", as: "button", onClick: onModalSwitch, children: "Sign up" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsx(ModalInner, { children: /* @__PURE__ */ jsx(
+      Formik,
+      {
+        initialValues: { email: email || "", password: "" },
+        validateOnChange: true,
+        validateOnBlur: true,
+        validationSchema,
+        onSubmit: (values) => {
+          onFormSend(values);
+        },
+        children: ({ values, errors, touched, handleChange, handleBlur }) => {
+          const submitDisabled = !values.email || !values.password || !!errors.email || !!errors.password || isActionLoading === "login";
+          return /* @__PURE__ */ jsxs(stdin_default$1, { children: [
+            /* @__PURE__ */ jsx(ComponentWrapper, { noPadding: true, children: /* @__PURE__ */ jsxs(FormField, { children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "sign-up-email",
+                  name: "email",
+                  type: "email",
+                  label: "Your email",
+                  value: values.email,
+                  onChange: handleChange,
+                  onBlur: handleBlur,
+                  error: !!errors.email,
+                  touched: !!touched.email,
+                  autoComplete: "email",
+                  autoFocus: true
+                }
+              ),
+              /* @__PURE__ */ jsx(FormError, { show: errors.email && touched.email, children: errors.email })
+            ] }) }),
+            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsxs(FormField, { children: [
+              /* @__PURE__ */ jsx(
+                stdin_default$2,
+                {
+                  id: "sign-up-password",
+                  name: "password",
+                  type: "password",
+                  label: "Password",
+                  value: values.password,
+                  onChange: handleChange,
+                  onBlur: handleBlur,
+                  error: !!errors.password,
+                  touched: !!touched.password,
+                  autoComplete: "current-password"
+                }
+              ),
+              /* @__PURE__ */ jsx(FormError, { show: errors.password && touched.password, children: errors.password })
+            ] }) }),
+            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Button, { type: "submit", id: "login-submit-btn", fluid: true, disabled: submitDisabled, children: isActionLoading === "login" ? "Logging in" : "Login" }) }),
+            /* @__PURE__ */ jsx(ComponentWrapper, { paddingVeticalHalf: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(FormError, { show: popupError.popup === "login", children: popupError.message }) }),
+            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
+              TextLink,
+              {
+                type: "button",
+                as: "button",
+                onClick: (...args) => {
+                  values.password = "";
+                  onForgotPassword(...args);
+                },
+                children: "Forgot password?"
+              }
+            ) })
+          ] });
+        }
+      }
+    ) }) })
+  ] }) });
+};
+LoginModal.propTypes = {
+  isModalOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onFormSend: PropTypes.func.isRequired,
+  onModalSwitch: PropTypes.func.isRequired,
+  onForgotPassword: PropTypes.func.isRequired,
+  isActionLoading: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  popupError: PropTypes.shape({
+    popup: PropTypes.string,
+    message: PropTypes.string
+  }).isRequired,
+  background: PropTypes.string
+};
+var stdin_default = LoginModal;
+export {
+  LoginModal,
+  stdin_default as default
+};

package/dist/components/MainMenu/DynamicMainMenu.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { Collapse } from "react-collapse";
+import { StyledMainMenu, MainMenuContainer, MainMenuOptions, MainMenuOption } from "./MainMenu.styles.js";
+const DynamicMainMenu = (props) => {
+  const spanStyleForMenu = {
+    letterSpacing: "2px",
+    cursor: "pointer"
+  };
+  const { options = [], isMenuActive = false } = props;
+  return /* @__PURE__ */ jsx(StyledMainMenu, { children: /* @__PURE__ */ jsx(Collapse, { isOpened: isMenuActive, children: /* @__PURE__ */ jsx(MainMenuContainer, { children: /* @__PURE__ */ jsx(MainMenuOptions, { children: options?.map((item, index) => {
+    return /* @__PURE__ */ jsx(
+      MainMenuOption,
+      {
+        type: "button",
+        as: "button",
+        button: true,
+        onClick: item.onClick,
+        noBorder: true,
+        children: /* @__PURE__ */ jsx("span", { style: spanStyleForMenu, children: item.name })
+      },
+      item.name + index.toString()
+    );
+  }) }) }) }) });
+};
+const optionsShape = PropTypes.shape({
+  name: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired
+});
+DynamicMainMenu.propTypes = {
+  isMenuActive: PropTypes.bool.isRequired,
+  options: PropTypes.arrayOf(optionsShape)
+};
+var stdin_default = DynamicMainMenu;
+export {
+  stdin_default as default
+};