@stokr/components-library 3.0.55 → 3.0.56

package/dist/components/LearnMorePage/LearnMoreItem.js

@@ -1,57 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Fragment } from "react";
-import PropTypes from "prop-types";
-import DOMPurify from "dompurify";
-import stdin_default$1 from "../Background/Background.js";
-import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
-import { Button } from "../Button/Button.styles.js";
-import { learnMoreCategoryPropTypes, learnMorePostPropTypes } from "./LearnMore.propTypes.js";
-import { ArticleWrapper, VideoCover, VideoPlay, VideoPlayIcon, VideoTitleRow, TitleText, CompleteWrapper, ContentText } from "./LearnMoreItem.styles.js";
-import { CompleteMarkContainer, CompleteMark } from "./LearnMore.shared.styles.js";
-const LearnMoreItem = ({ postItem, activeTabObject, onMarkComplete }) => /* @__PURE__ */ jsxs(ArticleWrapper, { postType: postItem.postType, children: [
-  postItem.postType === "video" && /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(VideoCover, { children: /* @__PURE__ */ jsx(stdin_default$1, { src: postItem.cover, children: /* @__PURE__ */ jsx(VideoPlay, { children: /* @__PURE__ */ jsx(VideoPlayIcon, {}) }) }) }),
-    /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingRight: true, noPaddingBottom: true, children: /* @__PURE__ */ jsxs(VideoTitleRow, { children: [
-      /* @__PURE__ */ jsx(TitleText, { postType: postItem.postType, children: /* @__PURE__ */ jsx("h3", { children: postItem.title }) }),
-      /* @__PURE__ */ jsxs(CompleteWrapper, { children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            primary: !activeTabObject.complete,
-            secondary: activeTabObject.complete,
-            onClick: () => onMarkComplete(activeTabObject.id),
-            children: activeTabObject.complete ? "Watched" : "Mark as watched"
-          }
-        ),
-        /* @__PURE__ */ jsx(CompleteMarkContainer, { large: true, inProgress: activeTabObject.inProgress, complete: activeTabObject.complete, children: /* @__PURE__ */ jsx(CompleteMark, {}) })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsx(ComponentWrapper, { children: /* @__PURE__ */ jsx(ContentText, { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(postItem.content ?? "") } }) })
-  ] }),
-  postItem.postType === "text" && /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingRight: true, noPaddingBottom: true, children: /* @__PURE__ */ jsx(TitleText, { postType: postItem.postType, children: /* @__PURE__ */ jsx("h3", { children: postItem.title }) }) }),
-    /* @__PURE__ */ jsx(ComponentWrapper, { children: /* @__PURE__ */ jsx(ContentText, { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(postItem.content ?? "") } }) }),
-    /* @__PURE__ */ jsx(ComponentWrapper, { children: /* @__PURE__ */ jsxs(CompleteWrapper, { center: true, children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          primary: !activeTabObject.complete,
-          secondary: activeTabObject.complete,
-          onClick: () => onMarkComplete(activeTabObject.id),
-          children: activeTabObject.complete ? "Already Read" : "Mark as read"
-        }
-      ),
-      /* @__PURE__ */ jsx(CompleteMarkContainer, { large: true, inProgress: activeTabObject.inProgress, complete: activeTabObject.complete, children: /* @__PURE__ */ jsx(CompleteMark, {}) })
-    ] }) })
-  ] })
-] });
-LearnMoreItem.propTypes = {
-  postItem: PropTypes.shape(learnMorePostPropTypes).isRequired,
-  activeTabObject: PropTypes.shape(learnMoreCategoryPropTypes).isRequired,
-  onMarkComplete: PropTypes.func.isRequired
-};
-var stdin_default = LearnMoreItem;
-export {
-  LearnMoreItem,
-  stdin_default as default
-};

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

@@ -1,234 +0,0 @@
-import styled, { css } from "styled-components";
-import { Text } from "../Text/Text.styles.js";
-import rwd from "../../styles/rwd.js";
-import { Button } from "../Button/Button.styles.js";
-import { Container, Content } from "../Background/Background.styles.js";
-import { CompleteMarkContainer } from "./LearnMore.shared.styles.js";
-import theme from "../../styles/theme.js";
-const ArticleWrapper = styled.div.withConfig({
-  shouldForwardProp: (props) => !["postType"].includes(props)
-})`
-  padding: 32px;
-  position: relative;
-
-  ${rwd.Medium`
-    padding: 64px;
-  `}
-
-  ${rwd.XLarge`
-    padding: 128px;
-  `}
-
-  ${(props) => props.postType === "text" && css`
-      padding-right: 64px;
-
-      ${rwd.Large`
-      padding-right: 128px;
-    `}
-
-      ${rwd.XLarge`
-      padding-right: 224px;
-    `}
-    `}
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: 1px;
-    background: ${() => theme.cGrey};
-
-    ${(props) => props.postType === "video" && css`
-        top: 32px;
-        left: 48px;
-        bottom: 0;
-
-        ${rwd.Medium`
-        top: 64px;
-        left: 64px;
-      `}
-
-        ${rwd.Large`
-        left: 96px;
-      `}
-
-      ${rwd.XLarge`
-        top: 128px;
-        left: 160px;
-      `}
-      `}
-
-    ${(props) => props.postType === "text" && css`
-        top: 0;
-        right: 48px;
-        bottom: 0;
-
-        ${rwd.Medium`
-        right: 32px;
-      `}
-
-        ${rwd.Large`
-        right: 96px;
-      `}
-
-      ${rwd.XLarge`
-        right: 192px;
-      `}
-      `}
-  }
-`;
-const VideoTitleRow = styled.div`
-  display: flex;
-  flex-direction: column;
-
-  ${rwd.XLarge`
-    align-items: center;
-    flex-direction: row;
-  `}
-`;
-const VideoCover = styled.div`
-  width: 100%;
-
-  ${Container} {
-    width: 100%;
-    padding-top: 56.25%;
-  }
-
-  ${Content} {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: auto;
-    transform: translateY(-50%) translateX(-50%);
-  }
-`;
-const VideoPlay = styled.div`
-  width: 48px;
-  height: 48px;
-  color: ${() => theme.cWhite};
-  background: ${() => theme.cWarning};
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: 0.3s background;
-
-  &:hover {
-    color: ${() => theme.cWhite};
-    background: ${() => theme.cWarningDark};
-  }
-`;
-const VideoPlayIcon = styled.i.attrs({
-  className: "ion ion-md-play"
-})`
-  font-size: 16px;
-`;
-const TitleText = styled(Text).withConfig({
-  shouldForwardProp: (props) => !["postType"].includes(props)
-})`
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: 6px;
-    background: ${() => theme.cPrimary};
-    top: 0;
-    bottom: 0;
-
-    ${(props) => props.postType === "video" && css`
-        transform: translateX(1px);
-        left: -16px;
-
-        ${rwd.Medium`
-        left: -32px;
-      `}
-      `}
-
-    ${(props) => props.postType === "text" && css`
-        transform: translateX(-1px);
-        right: -16px;
-
-        ${rwd.Medium`
-        right: -32px;
-      `}
-      `}
-  }
-`;
-const CompleteWrapper = styled.div.withConfig({
-  shouldForwardProp: (props) => !["center"].includes(props)
-})`
-  display: flex;
-  flex-shrink: 0;
-  margin-left: auto;
-  margin-top: 24px;
-
-  ${(props) => props.center && `
-    justify-content: center;
-  `}
-
-  ${rwd.XLarge`
-    margin-top: 0;
-  `}
-
-  ${CompleteMarkContainer} {
-    flex-shrink: 0;
-    margin-left: 16px;
-  }
-
-  ${Button} {
-    flex-shrink: 0;
-  }
-`;
-const ContentText = styled(Text)`
-  display: flex;
-  flex-direction: column;
-
-  h5 {
-    font-size: 16px;
-    letter-spacing: 0.4px;
-    font-weight: 600;
-    margin-bottom: 16px;
-  }
-
-  img {
-    max-width: 100%;
-    margin: 32px auto;
-  }
-
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  li {
-    font-family: 'Open Sans';
-    font-weight: 300;
-    font-size: 16px;
-    line-height: 1.5em;
-    letter-spacing: 0.6px;
-    padding-left: 12px;
-    position: relative;
-
-    ${rwd.XLarge`
-      font-size: 20px;
-    `}
-
-    &::before {
-      position: absolute;
-      left: 0;
-      content: '•';
-      color: ${() => theme.cWarning};
-    }
-  }
-`;
-export {
-  ArticleWrapper,
-  CompleteWrapper,
-  ContentText,
-  TitleText,
-  VideoCover,
-  VideoPlay,
-  VideoPlayIcon,
-  VideoTitleRow
-};

package/dist/components/LearnMoreSection/LearnMore.js

@@ -1,138 +0,0 @@
-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 { Tab } from "../Tabs/Tabs.styles.js";
-import { learnMoreCategoryPropTypes, learnMorePostPropTypes } from "../LearnMorePage/LearnMore.propTypes.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

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

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

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