@stokr/components-library 0.5.4 → 0.5.5

package/dist/Footer/Footer.styles.js

@@ -0,0 +1,230 @@
+import styled, { css } from 'styled-components/macro';
+import grid from 'styles/grid';
+import rwd from 'styles/rwd';
+import colors from 'styles/colors';
+import theme from 'styles/theme';
+export const StyledFooter = styled.footer`
+  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;
+  `}
+`;
+export const FooterInner = styled.div`
+  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 65px;
+  }
+`;
+export const CopyrightWrap = styled.div`
+  text-align: center;
+
+  ${rwd.Medium`
+    flex: 2;
+  `}
+`;
+export 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;
+  }
+`;
+export const PoweredWrap = styled.div`
+  margin-top: 10px;
+  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;
+  `}
+
+  @media screen and (max-width: 991px) {
+    text-align: center;
+  }
+`;
+export const FooterNav = 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;
+    `}
+  }
+`;
+export 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;
+  }
+`;
+export const Copyright = styled.span`
+  img {
+    margin-bottom: 4px;
+  }
+`;
+export const Powered = 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;
+  }
+`;

package/dist/Footer/FooterLayout.js

@@ -0,0 +1,114 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React from 'react';
+import PropTypes from 'prop-types';
+import FooterMenu from './FooterMenu';
+import Newsletter from 'components/Newsletter/Newsletter';
+import Footer from './Footer';
+function FooterLayout({
+  withNewsLetter = true,
+  withFooterMenu = true,
+  color = 'red',
+  jobOpeningsNumber = 0,
+  lemonWayLogo,
+  ...props
+}) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, withFooterMenu && /*#__PURE__*/React.createElement(FooterMenu, {
+    groups: footerGroups,
+    jobOpeningsNumber: jobOpeningsNumber
+  }), withNewsLetter && /*#__PURE__*/React.createElement(Newsletter, null), /*#__PURE__*/React.createElement(Footer, _extends({
+    color: color,
+    lemonwayLogo: lemonWayLogo
+  }, props)));
+}
+FooterLayout.propTypes = {
+  withNewsLetter: PropTypes.bool,
+  withFooterMenu: PropTypes.bool,
+  color: PropTypes.oneOf(['primary', 'red']),
+  jobOpeningsNumber: PropTypes.number,
+  lemonwayLogo: PropTypes.string
+};
+export default FooterLayout;
+export const footerGroups = [{
+  name: 'New to STOKR',
+  collapse: true,
+  items: [{
+    name: 'Products',
+    url: 'https://stokr.info/products'
+  }, {
+    name: '101s',
+    url: 'https://stokr.info/101'
+  },
+  /* {
+              name: 'Subscribe',
+              url: 'https://stokr.info/subscribe',
+            }, */
+  {
+    name: 'Support',
+    url: 'https://stokr.zendesk.com/',
+    external: true
+  }, {
+    name: 'STOKE POST',
+    url: 'https://stokr.info/stoke-post'
+  }]
+}, {
+  name: 'About us',
+  collapse: true,
+  items: [{
+    name: 'Team',
+    url: 'https://stokr.info/team'
+  }, {
+    name: 'Careers',
+    url: 'https://stokr.info/careers',
+    showNumber: true
+  }, {
+    name: 'Memberships',
+    url: 'https://stokr.info/memberships'
+  }, {
+    name: 'Press Releases',
+    url: 'https://stokr.info/press-releases'
+  }]
+}, {
+  name: 'General',
+  collapse: true,
+  items: [{
+    name: 'Legal',
+    url: 'https://stokr.info/legal'
+  }, {
+    name: 'Privacy Terms',
+    url: 'https://stokr.info/privacy'
+  }, {
+    name: 'Cookie policy',
+    url: 'https://stokr.info/cookie-policy'
+  }, {
+    name: 'AFFILIATE PROGRAM',
+    url: 'https://stokr.tapfiliate.com',
+    external: true
+  }]
+}, {
+  name: 'Let’s connect',
+  social: true,
+  items: [{
+    name: 'linkedin',
+    url: 'https://www.linkedin.com/company/stokr/'
+  }, {
+    name: 'instagram',
+    url: 'https://www.instagram.com/stokr_media'
+  }, {
+    name: 'twitter',
+    url: 'https://twitter.com/stokr_io'
+  }, {
+    name: 'facebook',
+    url: 'https://web.facebook.com/STOKR-696540447399052/'
+  }, {
+    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'
+  }]
+}];

package/dist/Footer/FooterLayout.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import FooterLayout from './FooterLayout';
+export default {
+  title: 'Components Library/Footer',
+  component: FooterLayout,
+  argTypes: {
+    // color: {
+    //   options: ['primary', 'red'],
+    //   control: { type: '' },
+    // },
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(FooterLayout, args);
+export const FooterLayoutfirst = Template.bind({});
+FooterLayoutfirst.args = {};
+
+// export const FooterRed = Template.bind({})
+// FooterRed.args = {
+//   color: 'red',
+// }

package/dist/Footer/FooterMenu.js

@@ -0,0 +1,83 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Collapse } from 'react-collapse';
+import { SocialFacebook, SocialInstagram, SocialLinkedIn,
+//SocialMedium,
+SocialReddit, SocialTelegram, SocialTwitter, SocialYoutube } from 'components/SvgIcons';
+import { Container, Groups, Group, Title, Items, Item, Link, SocialLink, HiringTotalNumber, TitleContainer, ArrowDown } from './FooterMenu.styles';
+import { useMobileView } from 'utils/customHooks';
+import { sizes } from 'styles/rwd';
+const CollapseWrapper = ({
+  children,
+  collapse,
+  isOpened
+}) => collapse ? /*#__PURE__*/React.createElement(Collapse, {
+  isOpened: isOpened
+}, children) : /*#__PURE__*/React.createElement(Fragment, null, children);
+CollapseWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+  collapse: PropTypes.bool,
+  isOpened: PropTypes.bool
+};
+CollapseWrapper.defaultProps = {
+  collapse: false,
+  isOpened: false
+};
+export const socialSvg = {
+  linkedin: /*#__PURE__*/React.createElement(SocialLinkedIn, null),
+  instagram: /*#__PURE__*/React.createElement(SocialInstagram, null),
+  twitter: /*#__PURE__*/React.createElement(SocialTwitter, null),
+  facebook: /*#__PURE__*/React.createElement(SocialFacebook, null),
+  telegram: /*#__PURE__*/React.createElement(SocialTelegram, null),
+  //medium: <SocialMedium />,
+  youtube: /*#__PURE__*/React.createElement(SocialYoutube, null),
+  reddit: /*#__PURE__*/React.createElement(SocialReddit, null)
+};
+const FooterMenu = ({
+  groups,
+  jobOpeningsNumber = 0
+}) => {
+  const [activeGroups, setactiveGroups] = React.useState(groups.map(() => true));
+  const isMobile = useMobileView(sizes.MLarge);
+  const toggleGroup = key => {
+    const activeGroupsCopy = [...activeGroups];
+    activeGroupsCopy[key] = !activeGroupsCopy[key];
+    setactiveGroups(activeGroupsCopy);
+  };
+  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Groups, null, groups.map((group, groupKey) => /*#__PURE__*/React.createElement(Group, {
+    key: group.name,
+    onClick: () => toggleGroup(groupKey)
+  }, /*#__PURE__*/React.createElement(TitleContainer, null, /*#__PURE__*/React.createElement(Title, {
+    collapse: group.collapse
+  }, group.name), isMobile && !group.social && /*#__PURE__*/React.createElement(ArrowDown, {
+    isOpened: activeGroups[groupKey]
+  })), /*#__PURE__*/React.createElement(CollapseWrapper, {
+    collapse: isMobile && group.collapse,
+    isOpened: activeGroups[groupKey]
+  }, /*#__PURE__*/React.createElement(Items, {
+    social: group.social
+  }, group.social ? group.items.map(item => /*#__PURE__*/React.createElement(Item, {
+    key: item.name,
+    social: true
+  }, /*#__PURE__*/React.createElement(SocialLink, {
+    href: item.url,
+    icon: item.name,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, socialSvg[item.name]))) : group.items.map(item => /*#__PURE__*/React.createElement(Item, {
+    key: item.name
+  }, /*#__PURE__*/React.createElement(Link, {
+    target: item.external ? '_blank' : '',
+    href: item.url,
+    rel: "noopener noreferrer"
+  }, item.name), item.showNumber && jobOpeningsNumber > 0 && /*#__PURE__*/React.createElement(HiringTotalNumber, {
+    style: {
+      marginLeft: '4px'
+    }
+  }, jobOpeningsNumber)))))))));
+};
+FooterMenu.propTypes = {
+  groups: PropTypes.arrayOf(Object).isRequired,
+  jobOpeningsNumber: PropTypes.number
+};
+export default FooterMenu;

package/dist/Footer/FooterMenu.stories.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import FooterMenu from './FooterMenu';
+export default {
+  title: 'Components Library/Footer',
+  component: FooterMenu,
+  argTypes: {
+    // color: {
+    //   options: ['primary', 'red'],
+    //   control: { type: '' },
+    // },
+    groups: {
+      type: 'array',
+      defaultValue: []
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(FooterMenu, args);
+export const FooterMenu1 = Template.bind({});
+FooterMenu1.args = {
+  groups: [{
+    name: 'New to STOKR',
+    collapse: true,
+    items: [{
+      name: 'Products',
+      url: 'https://stokr.info/products'
+    }, {
+      name: '101s',
+      url: 'https://stokr.info/101'
+    },
+    /* {
+              name: 'Subscribe',
+              url: 'https://stokr.info/subscribe',
+            }, */
+    {
+      name: 'Support',
+      url: 'https://stokr.zendesk.com/',
+      external: true
+    }, {
+      name: 'STOKE POST',
+      url: 'https://stokr.info/stoke-post'
+    }]
+  }, {
+    name: 'About us',
+    collapse: true,
+    items: [{
+      name: 'Team',
+      url: 'https://stokr.info/team'
+    }, {
+      name: 'Careers',
+      url: 'https://stokr.info/careers',
+      showNumber: true
+    }, {
+      name: 'Memberships',
+      url: 'https://stokr.info/memberships'
+    }, {
+      name: 'Press Releases',
+      url: 'https://stokr.info/press-releases'
+    }]
+  }, {
+    name: 'General',
+    collapse: true,
+    items: [{
+      name: 'Legal',
+      url: 'https://stokr.info/legal'
+    }, {
+      name: 'Privacy Terms',
+      url: 'https://stokr.info/privacy'
+    }, {
+      name: 'Cookie policy',
+      url: 'https://stokr.info/cookie-policy'
+    }, {
+      name: 'AFFILIATE PROGRAM',
+      url: 'https://stokr.tapfiliate.com',
+      external: true
+    }]
+  }, {
+    name: 'Let’s connect',
+    social: true,
+    items: [{
+      name: 'linkedin',
+      url: 'https://www.linkedin.com/company/stokr/'
+    }, {
+      name: 'instagram',
+      url: 'https://www.instagram.com/stokr_media'
+    }, {
+      name: 'twitter',
+      url: 'https://twitter.com/stokr_io'
+    }, {
+      name: 'facebook',
+      url: 'https://web.facebook.com/STOKR-696540447399052/'
+    }, {
+      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'
+    }]
+  }]
+};
+
+// export const footerprimary = () => <Footer color="primary"></Footer>
+// export const footerred = () => <Footer color="red"></Footer>
+
+//doublecheck:
+// padding missing for primary in Footer.styles