@stokr/components-library 3.0.16 → 3.0.18

package/dist/components/Layout/Layout.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import PropTypes from "prop-types";
+import { ThemeProvider } from "styled-components";
+import { GlobalStyle } from "../../styles/global.js";
+import theme from "../../styles/theme.js";
+import stdin_default from "../Header/Header.js";
+import stdin_default$1 from "../Footer/Footer.js";
+import { PageWrapper } from "../Grid/Grid.styles.js";
+const ProgressStatusContext = React__default.createContext();
+class Layout extends React__default.PureComponent {
+  handleProgressStatusChange = (page, status) => {
+    const { updateProgressStatusAC } = this.props;
+    updateProgressStatusAC(page, status);
+  };
+  render() {
+    const {
+      title = "",
+      progress = null,
+      loginHandler = () => {
+      },
+      signupHandler = () => {
+      },
+      signupFlow = false,
+      children,
+      footerColor = "red",
+      noFooter,
+      noHeader,
+      noLogout
+    } = this.props;
+    return /* @__PURE__ */ jsx(ThemeProvider, { theme: { ...theme }, children: /* @__PURE__ */ jsxs(PageWrapper, { children: [
+      /* @__PURE__ */ jsx(GlobalStyle, {}),
+      !noHeader && /* @__PURE__ */ jsx(
+        stdin_default,
+        {
+          progress,
+          signupFlow,
+          loginHandler,
+          signupHandler,
+          siteTitle: title,
+          noLogout
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ProgressStatusContext.Provider,
+        {
+          value: {
+            onProgressStatusChange: this.handleProgressStatusChange
+          },
+          children
+        }
+      ),
+      !noFooter && /* @__PURE__ */ jsx(stdin_default$1, { color: footerColor })
+    ] }) });
+  }
+}
+Layout.propTypes = {
+  title: PropTypes.string,
+  signupFlow: PropTypes.bool,
+  loginHandler: PropTypes.func,
+  signupHandler: PropTypes.func,
+  progress: PropTypes.bool,
+  footerColor: PropTypes.string,
+  children: PropTypes.node.isRequired
+};
+ProgressStatusContext.Consumer;
+export {
+  Layout
+};

package/dist/components/LearnMoreCarousel/LearnMoreCarousel.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import Slick from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import { Container, Offset, Wrapper } from "./LearnMoreCarousel.styles.js";
+const LearnMoreCarousel = ({ children, autoplay = 0, dots = false, arrows = false, isMobile = false }) => {
+  const settings = {
+    dots,
+    arrows,
+    infinite: false,
+    speed: 600,
+    autoplay: !!autoplay,
+    autoplaySpeed: autoplay,
+    slidesToShow: isMobile ? 1 : 2,
+    slidesToScroll: isMobile ? 1 : 1
+  };
+  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Offset, { children: /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(Slick, { ...settings, children }) }) }) });
+};
+LearnMoreCarousel.propTypes = {
+  children: PropTypes.node.isRequired,
+  autoplay: PropTypes.number,
+  dots: PropTypes.bool,
+  arrows: PropTypes.bool,
+  isMobile: PropTypes.bool
+};
+var stdin_default = LearnMoreCarousel;
+export {
+  LearnMoreCarousel,
+  stdin_default as default
+};

package/dist/components/LearnMoreCarousel/LearnMoreCarousel.styles.js

@@ -0,0 +1,208 @@
+import styled from "styled-components";
+import rwd from "../../styles/rwd.js";
+import theme from "../../styles/theme.js";
+const Container = styled.div`
+  overflow: hidden;
+`;
+const Offset = styled.div`
+  position: relative;
+  padding-top: 28px;
+  padding-bottom: 76px;
+  margin-right: 0;
+
+  ${rwd.Medium`
+    padding-top: 32px;
+    padding-bottom: 72px;
+    margin-right: 64px;
+  `}
+
+  ${rwd.Large`
+    padding-top: 64px;
+    padding-bottom: 88px;
+    margin-right: 128px;
+  `}
+`;
+const Wrapper = styled.div`
+  margin-right: 0;
+
+  ${rwd.Medium`
+    margin-right: -100%;
+  `}
+
+  .slick-list {
+    z-index: 0;
+  }
+
+  .slick-arrow {
+    z-index: 1;
+    width: 32px;
+    height: 48px;
+    background-color: ${() => theme.cWarning};
+    transition: background-color 0.2s;
+
+    ${rwd.Large`
+      width: 64px;
+    `}
+
+    &.slick-prev ,
+    &.slick-next {
+      top: 100%;
+      right: 50%;
+      margin-top: 40px;
+      transform: none;
+
+      ${rwd.Medium`
+        margin-top: 24px;
+      `}
+
+      ${rwd.Large`
+        margin-top: 40px;
+      `}
+
+      &:before {
+        font-family: 'Ionicons';
+        speak: none;
+        font-style: normal;
+        font-weight: normal;
+        font-variant: normal;
+        text-transform: none;
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        font-size: 20px;
+        line-height: 24px;
+        text-align: center;
+        opacity: 1;
+        color: ${() => theme.cWhite};
+      }
+
+      &:focus,
+      &:hover {
+        background-color: ${() => theme.cWarningDark};
+      }
+    }
+
+    &.slick-prev {
+      left: auto;
+      margin-right: -32px;
+
+      ${rwd.Large`
+        margin-right: -64px;
+      `}
+
+      &:before {
+        content: '\f3cf';
+      }
+    }
+
+    &.slick-next {
+      border-left: 1px solid ${() => theme.cWarningDark};
+      margin-right: -64px;
+
+      ${rwd.Large`
+        margin-right: -128px;
+      `}
+
+      &:before {
+        content: '\f3d1';
+      }
+    }
+  }
+
+  .slick-dots {
+    z-index: 1;
+    height: auto;
+    top: 100%;
+    margin-left: 8px;
+    text-align: center;
+    width: 100%;
+    margin-top: 28px;
+
+    ${rwd.Medium`
+      margin-top: 36px;
+      width: 50%;
+      padding-right: 32px;
+      text-align: right;
+      `}
+
+    ${rwd.Large`
+      margin-top: 52px;
+      padding-right: 36px;
+    `}
+
+    li {
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+      margin: 0;
+
+      button {
+        display: block;
+        padding: 8px;
+        width: 24px;
+        height: 24px;
+
+        &:before {
+          position: relative;
+          content: '';
+          display: block;
+          width: 8px;
+          height: 8px;
+          border-radius: 4px;
+          background-color: #eee;
+          opacity: 1;
+          transition: background-color 0.2s;
+        }
+
+        &:hover {
+          &:before {
+            background-color: #0050ca;
+          }
+        }
+      }
+
+      &.slick-active {
+        button {
+          &:before {
+            background-color: #ee220d;
+          }
+        }
+      }
+    }
+  }
+
+  .slick-track {
+    display: flex;
+    align-items: stretch;
+  }
+
+  .slick-slide {
+    height: auto;
+
+    & > div {
+      height: 100%;
+    }
+  }
+`;
+const LearnMoreSlide = styled.div`
+  outline: 0;
+  height: 100%;
+  padding-left: 32px;
+  padding-right: 32px;
+
+  ${rwd.Medium`
+    padding-left: 32px;
+    padding-right: 0;
+  `}
+
+  ${rwd.Large`
+    padding-left: 64px;
+    padding-right: 0;
+  `}
+`;
+export {
+  Container,
+  LearnMoreSlide,
+  Offset,
+  Wrapper
+};

package/dist/components/LearnMorePage/LearnMore.js

@@ -0,0 +1,190 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PureComponent, Fragment } from "react";
+import PropTypes from "prop-types";
+import { Collapse } from "react-collapse";
+import stdin_default$2 from "../TabsNav/TabsNav.js";
+import { Row } from "../Grid/Grid.styles.js";
+import stdin_default from "../ComponentScroll/ComponentScroll.js";
+import { getMedia } from "../../styles/rwd.js";
+import stdin_default$1 from "../BackButton/BackButton.js";
+import stdin_default$3 from "./LearnMoreItem.js";
+import { learnMoreCategoryPropTypes, learnMorePostPropTypes } from "./LearnMore.propTypes.js";
+import { Container, MobileMenuToggler, SidebarColumn, TitleContainer, SidebarHeading, SidebarTitle, TabNav, TabArrow, SubTabNav, ContentColumn } from "./LearnMore.styles.js";
+import { CompleteMarkTooltip, CompleteMarkContainer, CompleteMark } from "./LearnMore.shared.styles.js";
+import { withRouter } from "../../utils/withRouter.js";
+class LearnMoreClass extends PureComponent {
+  state = {
+    openedTab: "",
+    isMobile: false,
+    isSidebarExpanded: false
+  };
+  componentDidMount() {
+    this.setDefaultActiveTab();
+    window.addEventListener("resize", this.onResize);
+    this.onResizeTimeout();
+  }
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.onResize);
+  }
+  getActiveTab = (tabId) => {
+    const { categories } = this.props;
+    let activeTabObject = {};
+    if (!categories?.length) return activeTabObject;
+    categories?.find((category) => {
+      const { subcategories } = category;
+      if (subcategories?.length > 0) {
+        activeTabObject = subcategories.find((subcategory) => subcategory.id === tabId);
+        if (activeTabObject) {
+          return true;
+        }
+      }
+      if (category.id === tabId) {
+        activeTabObject = category;
+        return true;
+      }
+      return false;
+    });
+    return activeTabObject;
+  };
+  setDefaultActiveTab = () => {
+    const { activeCategory } = this.props;
+    this.toggleTab(activeCategory);
+  };
+  toggleTab = (tabId) => {
+    const { openedTab } = this.state;
+    if (openedTab === tabId) {
+      this.setState({
+        openedTab: ""
+      });
+      return;
+    }
+    this.setState({
+      openedTab: tabId
+    });
+  };
+  toggleSidebar = () => {
+    this.setState((prevState) => ({
+      isSidebarExpanded: !prevState.isSidebarExpanded
+    }));
+  };
+  onResize = () => {
+    clearTimeout(this.timeout);
+    this.timeout = setTimeout(this.onResizeTimeout, 200);
+  };
+  onResizeTimeout = () => {
+    this.setState({
+      isMobile: this.checkIsMobile()
+    });
+  };
+  checkIsMobile = () => !window.matchMedia(getMedia("Medium")).matches;
+  navigateToSubcategory = (subcategoryId) => {
+    const { categories, items } = this.props;
+    this.props.navigate(`/learn-more/${subcategoryId}`, {
+      state: {
+        learnMore: {
+          categories,
+          items
+        }
+      }
+    });
+  };
+  render() {
+    const { activeItem, items, categories, onMarkComplete = () => {
+    } } = this.props;
+    const { openedTab, isMobile, isSidebarExpanded } = this.state;
+    const activeTabObject = this.getActiveTab(activeItem) || {};
+    const activeItemObject = items?.find((post) => post.id === activeItem);
+    return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs(Row, { nowrap: true, children: [
+      isMobile && /* @__PURE__ */ jsxs(MobileMenuToggler, { isActive: isSidebarExpanded, onClick: this.toggleSidebar, children: [
+        /* @__PURE__ */ jsx("span", {}),
+        /* @__PURE__ */ jsx("span", {}),
+        /* @__PURE__ */ jsx("span", {})
+      ] }),
+      /* @__PURE__ */ jsx(SidebarColumn, { part: 6, isExpanded: isSidebarExpanded, children: /* @__PURE__ */ jsxs(stdin_default, { autoHeight: true, autoHeightMin: "100vh", autoHeightMax: "100vh", children: [
+        /* @__PURE__ */ jsxs(TitleContainer, { children: [
+          /* @__PURE__ */ jsx(SidebarHeading, { children: "INVESTING 101" }),
+          /* @__PURE__ */ jsx(SidebarTitle, { children: "LEARN MORE ABOUT INVESTING" }),
+          /* @__PURE__ */ jsx(stdin_default$1, { to: "/", children: "Back to previous page" })
+        ] }),
+        /* @__PURE__ */ jsx(stdin_default$2, { activeTab: activeItem, children: categories?.map((category) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            TabNav,
+            {
+              borderTop: true,
+              isActive: category.subcategories?.some((subcategory) => subcategory.id === activeItem),
+              complete: category.complete,
+              onClick: () => this.toggleTab(category.id),
+              children: [
+                /* @__PURE__ */ jsx(TabArrow, { isActive: openedTab === category.id }),
+                category.title,
+                /* @__PURE__ */ jsx(
+                  CompleteMarkTooltip,
+                  {
+                    disabled: !category.tooltip,
+                    position: "right center",
+                    content: category.tooltip,
+                    trigger: /* @__PURE__ */ jsx(CompleteMarkContainer, { inProgress: category.inProgress, complete: category.complete, children: /* @__PURE__ */ jsx(CompleteMark, {}) })
+                  }
+                )
+              ]
+            },
+            category.id
+          ),
+          /* @__PURE__ */ jsx(Collapse, { isOpened: openedTab === category.id, children: category.subcategories?.map((subcategory) => /* @__PURE__ */ jsxs(
+            SubTabNav,
+            {
+              isActive: activeItem === subcategory.id,
+              onClick: () => this.navigateToSubcategory(subcategory.id),
+              children: [
+                subcategory.title,
+                /* @__PURE__ */ jsx(
+                  CompleteMarkTooltip,
+                  {
+                    disabled: !subcategory.tooltip,
+                    position: "right center",
+                    content: subcategory.tooltip,
+                    trigger: /* @__PURE__ */ jsx(
+                      CompleteMarkContainer,
+                      {
+                        inProgress: subcategory.inProgress,
+                        complete: subcategory.complete,
+                        children: /* @__PURE__ */ jsx(CompleteMark, {})
+                      }
+                    )
+                  }
+                )
+              ]
+            },
+            subcategory.id
+          )) })
+        ] }, category.id)) })
+      ] }) }),
+      /* @__PURE__ */ jsx(ContentColumn, { part: 16, children: activeItemObject && /* @__PURE__ */ jsx(
+        stdin_default$3,
+        {
+          postItem: activeItemObject,
+          activeTabObject,
+          onMarkComplete
+        }
+      ) })
+    ] }) });
+  }
+}
+LearnMoreClass.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape(learnMorePostPropTypes)).isRequired,
+  categories: PropTypes.arrayOf(
+    PropTypes.shape({
+      ...learnMoreCategoryPropTypes,
+      subcategories: PropTypes.arrayOf(PropTypes.shape(learnMoreCategoryPropTypes))
+    })
+  ).isRequired,
+  onMarkComplete: PropTypes.func,
+  activeCategory: PropTypes.string.isRequired,
+  activeItem: PropTypes.string.isRequired
+};
+const LearnMore = withRouter(LearnMoreClass);
+export {
+  LearnMore,
+  learnMoreCategoryPropTypes,
+  learnMorePostPropTypes
+};

package/dist/components/LearnMorePage/LearnMore.propTypes.js

@@ -0,0 +1,20 @@
+import PropTypes from "prop-types";
+const learnMoreCategoryPropTypes = {
+  title: PropTypes.string.isRequired,
+  inProgress: PropTypes.bool,
+  complete: PropTypes.bool,
+  tooltip: PropTypes.node
+};
+const learnMorePostPropTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  excerpt: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
+  postType: PropTypes.oneOf(["video", "text"]),
+  cover: PropTypes.string,
+  videoSrc: PropTypes.string
+};
+export {
+  learnMoreCategoryPropTypes,
+  learnMorePostPropTypes
+};

package/dist/components/LearnMorePage/LearnMore.shared.styles.js

@@ -0,0 +1,56 @@
+import styled, { css } from "styled-components";
+import { Popup } from "semantic-ui-react";
+import theme from "../../styles/theme.js";
+const CompleteMark = styled.i.attrs({
+  className: "ion ion-md-checkmark"
+})`
+  margin: auto;
+`;
+const CompleteMarkContainer = styled.div.withConfig({
+  shouldForwardProp: (props) => !["inProgress", "complete", "large"].includes(props)
+})`
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  border: 1px dotted ${() => theme.cLightGrey};
+  margin-left: auto;
+
+  ${CompleteMark} {
+    display: none;
+  }
+
+  ${(props) => props.inProgress && `
+    border-style: solid;
+    border-color: ${theme.cLighterGreen};
+  `}
+
+  ${(props) => props.complete && css`
+      border-style: solid;
+      border-color: ${theme.cLighterGreen};
+      background: ${theme.cLighterGreen};
+
+      ${CompleteMark} {
+        display: block;
+        color: ${theme.cDarkGreen};
+      }
+    `}
+
+  ${(props) => props.large && css`
+      width: 40px;
+      height: 40px;
+
+      ${CompleteMark} {
+        font-size: 2em;
+      }
+    `}
+`;
+const CompleteMarkTooltip = styled(Popup)`
+  margin-left: auto;
+  padding-left: 8px;
+`;
+export {
+  CompleteMark,
+  CompleteMarkContainer,
+  CompleteMarkTooltip
+};