@stokr/components-library 3.0.16 → 3.0.18

package/dist/components/Footer/Footer.styles.js

@@ -0,0 +1,256 @@
+import styled, { css } from "styled-components";
+import grid from "../../styles/grid.js";
+import rwd from "../../styles/rwd.js";
+import { colors } from "../../styles/colors.js";
+const StyledFooter = styled.footer.withConfig({
+  shouldForwardProp: (props) => !["color", "hasSidebar", "isSidebarExpanded"].includes(props)
+})`
+  z-index: 15;
+  position: relative;
+
+  ${(props) => props.color === "primary" && css`
+      color: ${colors.white};
+      background-color: ${colors.blue};
+
+      ${rwd.Medium`
+      box-shadow: inset 0 1px 0 0 ${colors.blueDark};
+    `}
+    `}
+
+  ${(props) => props.color === "red" && css`
+      color: ${colors.white};
+      background-color: ${colors.rustyRed};
+
+      ${rwd.Medium`
+      box-shadow: inset 0 1px 0 0 ${colors.rustyRed};
+      padding: 0 65px;
+    `}
+    `}
+
+  ${rwd.Medium`
+    width: 100%;
+    height: 65px;
+  `}
+
+  @media screen and (max-width: 991px) {
+    height: auto;
+  }
+
+  ${(props) => props.hasSidebar && `
+ padding: 0px !important;
+  transition: 0.3s padding;
+  `}
+
+  ${(props) => props.isSidebarExpanded && `
+    padding-left:200px !important;
+  `}
+`;
+const FooterInner = styled.div.withConfig({
+  shouldForwardProp: (props) => !["hasSidebar"].includes(props)
+})`
+  padding: 24px 0;
+  justify-content: space-between;
+
+  ${(props) => props.hasSidebar && `
+    padding: 24px ${grid(1)};
+  `}
+
+  ${rwd.Medium`
+    padding: 20px 0;
+    display: flex;
+    align-items: center;
+    height: 100%;
+
+     ${(props) => props.hasSidebar && `
+      padding: 20px ${grid(1)};
+      `}
+  `}
+
+  @media screen and (max-width: 991px) {
+    flex-direction: column;
+    padding: 56px 32px;
+  }
+`;
+const LogoWrap = styled.div`
+  margin-bottom: 25px;
+  text-align: center;
+
+  ${rwd.MLarge`
+    margin-bottom:0px;
+  `}
+`;
+styled.div`
+  text-align: center;
+
+  ${rwd.Medium`
+    flex: 2;
+  `}
+`;
+const PartnerWrap = styled.div`
+  text-align: center;
+
+  ${rwd.Medium`
+    // flex: 2;
+    text-align: left;
+  `}
+
+  @media screen and (max-width: 991px) {
+    text-align: center;
+    margin-bottom: 25px;
+  }
+`;
+const PoweredWrap = styled.div`
+  text-align: center;
+
+  text-transform: uppercase;
+  letter-spacing: 2.1px;
+  line-height: 1.8;
+  font-weight: 400;
+  font-size: 10px;
+
+  ${rwd.Medium`
+    text-align: left;
+    //margin-top: 10px;
+  `}
+
+  @media screen and (max-width: 991px) {
+    text-align: center;
+
+    div {
+      margin-top: 10px;
+    }
+  }
+`;
+styled.nav`
+  display: block;
+  font-size: 0;
+  padding-top: 6px;
+  padding-bottom: 30px;
+
+  ${rwd.Medium`
+    padding-top: 0;
+    padding-bottom: 0;
+  `}
+
+  ul {
+    display: block;
+    margin: 0;
+    padding: 0;
+    margin-left: -32px;
+  }
+
+  li {
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 32px;
+  }
+
+  a {
+    position: relative;
+    display: block;
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    padding: 2px 0;
+
+    &:before {
+      content: '';
+      display: block;
+      height: 2px;
+      width: 100%;
+      position: absolute;
+      top: 100%;
+      left: 0;
+      background-color: ${colors.white};
+      opacity: 0;
+      transform: translateY(8px);
+      transition:
+        opacity 0.2s,
+        transform 0.2s;
+    }
+
+    &:hover {
+      &:before {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    ${rwd.Medium`
+      font-size: 9px;
+      line-height: 16px;
+    `}
+  }
+`;
+const Partner = styled.span`
+  text-transform: uppercase;
+
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 1.8;
+  letter-spacing: 2.1px;
+
+  img {
+    margin-bottom: 4px;
+  }
+
+  @media screen and (max-width: 560px) {
+    line-height: 20px;
+  }
+`;
+const Copyright = styled.span`
+  img {
+    margin-bottom: 4px;
+  }
+`;
+styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: self-start;
+
+  span {
+    vertical-align: middle;
+    text-transform: uppercase;
+    -webkit-letter-spacing: 2.1px;
+    -moz-letter-spacing: 2.1px;
+    -ms-letter-spacing: 2.1px;
+    letter-spacing: 2.1px;
+    line-height: 10x;
+    white-space: nowrap;
+    color: inherit;
+  }
+
+  a {
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 4px;
+    transition: opacity 0.2s;
+
+    &:hover {
+      opacity: 0.5;
+    }
+  }
+
+  img {
+    /* display: block;
+    max-height: 12px;
+    width: auto; */
+    /* margin-left: 6px; */
+    position: relative;
+    //width: 42px;
+  }
+
+  @media screen and (max-width: 991px) {
+    align-items: center;
+  }
+`;
+export {
+  Copyright,
+  FooterInner,
+  LogoWrap,
+  Partner,
+  PartnerWrap,
+  PoweredWrap,
+  StyledFooter
+};

package/dist/components/Footer/FooterLayout.js

@@ -0,0 +1,145 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import stdin_default$1 from "./FooterMenu.js";
+import stdin_default$2 from "../Newsletter/Newsletter.js";
+import stdin_default$3 from "./Footer.js";
+import { platformURL } from "../../constants/globalVariables.js";
+const footerGroups = [
+  {
+    name: "New to STOKR",
+    collapse: true,
+    items: [
+      {
+        name: "Solutions",
+        url: `${platformURL}/solutions`
+      },
+      {
+        name: "101s",
+        url: `${platformURL}/101`
+      },
+      {
+        name: "Support",
+        url: "https://support.stokr.io/",
+        external: true
+      },
+      {
+        name: "STOKE POST",
+        url: `${platformURL}/stoke-post`
+      }
+    ]
+  },
+  {
+    name: "About us",
+    collapse: true,
+    items: [
+      {
+        name: "Team",
+        url: `${platformURL}/team`
+      },
+      {
+        name: "Careers",
+        url: `${platformURL}/careers`,
+        showNumber: true
+      },
+      {
+        name: "Memberships",
+        url: `${platformURL}/memberships`
+      },
+      {
+        name: "Press Releases",
+        url: `${platformURL}/press-releases`
+      }
+    ]
+  },
+  {
+    name: "General",
+    collapse: true,
+    items: [
+      {
+        name: "Legal",
+        url: `${platformURL}/legal`
+      },
+      {
+        name: "Privacy Terms",
+        url: `${platformURL}/privacy`
+      },
+      {
+        name: "Cookie policy",
+        url: `${platformURL}/cookie-policy`
+      }
+    ]
+  },
+  {
+    name: "Let’s connect",
+    social: true,
+    items: [
+      {
+        name: "linkedin",
+        url: "https://www.linkedin.com/company/stokr/"
+      },
+      {
+        name: "twitter",
+        url: "https://twitter.com/stokr_io"
+      },
+      {
+        name: "telegram",
+        url: "https://t.me/joinchat/G2o5yBCe7FiYvv1YiZhNZg"
+      },
+      // {
+      //   name: 'medium',
+      //   url: 'https://medium.com/sicos-publication',
+      // },
+      {
+        name: "youtube",
+        url: "https://www.youtube.com/channel/UCUuQtRhbcFcU4xeTrDl3iQQ"
+      }
+    ]
+  }
+];
+function FooterLayout({
+  withNewsLetter = true,
+  withFooterMenu = true,
+  color = "red",
+  jobOpeningsNumber = 0,
+  lemonWayLogo,
+  dropdownCollapsed,
+  footnotes,
+  footnotesTitle,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    withFooterMenu && /* @__PURE__ */ jsx(
+      stdin_default$1,
+      {
+        groups: footerGroups,
+        jobOpeningsNumber,
+        dropdownCollapsed,
+        footnotes,
+        footnotesTitle
+      }
+    ),
+    withNewsLetter && /* @__PURE__ */ jsx(stdin_default$2, {}),
+    /* @__PURE__ */ jsx(stdin_default$3, { color, lemonwayLogo: lemonWayLogo, ...props })
+  ] });
+}
+FooterLayout.propTypes = {
+  withNewsLetter: PropTypes.bool,
+  withFooterMenu: PropTypes.bool,
+  color: PropTypes.oneOf(["primary", "red"]),
+  jobOpeningsNumber: PropTypes.number,
+  lemonwayLogo: PropTypes.string,
+  dropdownCollapsed: PropTypes.bool,
+  footnotesTitle: PropTypes.string,
+  footnotes: PropTypes.arrayOf(
+    PropTypes.shape({
+      number: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      description: PropTypes.string
+    })
+  )
+};
+var stdin_default = FooterLayout;
+export {
+  stdin_default as default,
+  footerGroups
+};

package/dist/components/Footer/FooterMenu.js

@@ -0,0 +1,100 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { useEffect, Fragment } from "react";
+import PropTypes from "prop-types";
+import { Collapse } from "react-collapse";
+import stdin_default$2 from "../SvgIcons/SocialInstagram.js";
+import stdin_default$1 from "../SvgIcons/SocialReddit.js";
+import { Container, Groups, Group, TitleContainer, Title, ArrowDown, Items, Item, SocialLink, Link, HiringTotalNumber, Footnotes, FootnotesText, FootnotesItem } from "./FooterMenu.styles.js";
+import { useMobileView } from "../../utils/customHooks.js";
+import { sizes } from "../../styles/rwd.js";
+import FbLogo from "../../static/images/social/Facebook_Logo.png.js";
+import LILogo from "../../static/images/social/LI-In-Bug.png.js";
+import XLogo from "../../static/images/social/X-logo-black.png.js";
+import YtLogo from "../../static/images/social/youtube_social_circle_red.png.js";
+import TelegramLogo from "../../static/images/social/Telegram-Logo.png.js";
+import { SocialLinksContainer } from "../Header/Header.styles.js";
+const CollapseWrapper = ({ children, collapse = false, isOpened = false }) => collapse ? /* @__PURE__ */ jsx(Collapse, { isOpened, children }) : /* @__PURE__ */ jsx(Fragment, { children });
+CollapseWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+  collapse: PropTypes.bool,
+  isOpened: PropTypes.bool
+};
+const socialSvg = {
+  linkedin: /* @__PURE__ */ jsx("img", { src: LILogo, alt: "Linkedin Logo", loading: "lazy", style: { padding: 1 } }),
+  instagram: /* @__PURE__ */ jsx(stdin_default$2, {}),
+  twitter: /* @__PURE__ */ jsx("img", { src: XLogo, alt: "X Logo", loading: "lazy", style: { padding: 4 } }),
+  facebook: /* @__PURE__ */ jsx("img", { src: FbLogo, alt: "Facebook Logo", loading: "lazy" }),
+  telegram: /* @__PURE__ */ jsx("img", { src: TelegramLogo, alt: "Telegram Logo", loading: "lazy" }),
+  //medium: <SocialMedium />,
+  youtube: /* @__PURE__ */ jsx("img", { src: YtLogo, alt: "Youtube Logo", loading: "lazy" }),
+  reddit: /* @__PURE__ */ jsx(stdin_default$1, {})
+};
+const FooterMenu = ({
+  groups,
+  jobOpeningsNumber = 0,
+  dropdownCollapsed,
+  footnotes,
+  footnotesTitle = "Disclosures"
+}) => {
+  const isMobile = useMobileView(sizes.MLarge);
+  const hasFootnotes = Array.isArray(footnotes) && footnotes.length > 0;
+  const [activeGroups, setactiveGroups] = React__default.useState(() => {
+    return groups.map((group, _index) => {
+      if (isMobile) {
+        return group.name === "New to STOKR";
+      }
+      return !dropdownCollapsed;
+    });
+  });
+  const toggleGroup = (key) => {
+    const activeGroupsCopy = [...activeGroups];
+    activeGroupsCopy[key] = !activeGroupsCopy[key];
+    setactiveGroups(activeGroupsCopy);
+  };
+  useEffect(() => {
+    setactiveGroups(
+      groups.map((group, _index) => {
+        if (isMobile) {
+          return group.name === "New to STOKR";
+        }
+        return !dropdownCollapsed;
+      })
+    );
+  }, [isMobile, groups, dropdownCollapsed]);
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsx(Groups, { children: groups.map((group, groupKey) => /* @__PURE__ */ jsxs(Group, { onClick: () => toggleGroup(groupKey), children: [
+      /* @__PURE__ */ jsxs(TitleContainer, { children: [
+        /* @__PURE__ */ jsx(Title, { collapse: group.collapse, children: group.name }),
+        isMobile && !group.social && /* @__PURE__ */ jsx(ArrowDown, { isOpened: activeGroups[groupKey] })
+      ] }),
+      /* @__PURE__ */ jsx(CollapseWrapper, { collapse: isMobile && group.collapse, isOpened: activeGroups[groupKey], children: /* @__PURE__ */ jsx(Items, { social: group.social, children: group.social ? /* @__PURE__ */ jsx(SocialLinksContainer, { children: group.items.map((item) => /* @__PURE__ */ jsx(Item, { social: true, children: /* @__PURE__ */ jsx(SocialLink, { href: item.url, alt: item.name, target: "_blank", rel: "noopener noreferrer", children: socialSvg[item.name] }) }, item.name)) }) : group.items.map((item) => /* @__PURE__ */ jsx(Item, { children: /* @__PURE__ */ jsxs(Link, { target: item.external ? "_blank" : "", href: item.url, rel: "noopener noreferrer", children: [
+        item.name,
+        item.showNumber && jobOpeningsNumber > 0 && /* @__PURE__ */ jsx(HiringTotalNumber, { style: { marginLeft: "4px" }, children: jobOpeningsNumber })
+      ] }) }, item.name)) }) })
+    ] }, group.name)) }),
+    hasFootnotes && /* @__PURE__ */ jsxs(Footnotes, { children: [
+      /* @__PURE__ */ jsx(FootnotesText, { children: footnotesTitle }),
+      footnotes.map((note, index) => /* @__PURE__ */ jsxs(FootnotesItem, { children: [
+        /* @__PURE__ */ jsx(FootnotesText, { isNumber: true, children: note.number ?? index + 1 }),
+        /* @__PURE__ */ jsx(FootnotesText, { children: note.description })
+      ] }, `${note.number || index}-${note.description || "note"}`))
+    ] })
+  ] });
+};
+FooterMenu.propTypes = {
+  groups: PropTypes.arrayOf(Object).isRequired,
+  jobOpeningsNumber: PropTypes.number,
+  dropdownCollapsed: PropTypes.bool,
+  footnotesTitle: PropTypes.string,
+  footnotes: PropTypes.arrayOf(
+    PropTypes.shape({
+      number: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      description: PropTypes.string
+    })
+  )
+};
+var stdin_default = FooterMenu;
+export {
+  stdin_default as default,
+  socialSvg
+};