@stokr/components-library 3.0.54 → 3.0.56

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

@@ -1,208 +0,0 @@
-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

@@ -1,190 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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
-};