@stokr/components-library 0.5.5 → 0.5.7

package/dist/Footer/Footer.styles.js

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

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

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

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

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