@stokr/components-library 0.5.6 → 0.5.7

package/dist/LatestUpdate/LatestUpdate.styles.js

@@ -1,77 +0,0 @@
-import styled from 'styled-components/macro';
-import { Link } from '@reach/router';
-import rwd from 'styles/rwd';
-import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
-import TextLink from 'components/TextLink/TextLink.styles';
-export const LatestUpdateTitle = styled.div`
-  font-size: 11px;
-  line-height: 24px;
-  letter-spacing: 2.06px;
-  text-transform: uppercase;
-  margin-bottom: 9px;
-`;
-export const LatestUpdateHeadline = styled.div`
-  font-size: 22px;
-  font-weight: 900;
-  letter-spacing: 0.8px;
-  line-height: 28px;
-  text-transform: uppercase;
-`;
-export const LatestUpdateWrapper = styled(ComponentWrapper)`
-  padding: 80px 32px;
-  ${rwd.Medium`
-    padding: 128px 64px;
-  `}
-`;
-export const Container = styled.div`
-  display: block;
-  padding: 20px 0;
-
-  ${rwd.Medium`
-    ${props => props.horizontalPadding && `
-      padding: 20px 5%;
-    `}
-  `}
-`;
-export const ItemLink = styled(Link)`
-  display: block;
-`;
-export const ImageWrap = styled.div`
-  display: block;
-  height: 42px;
-  margin-bottom: 12px;
-`;
-export const Image = styled.img`
-  display: inline-block;
-  max-width: 100%;
-  max-height: 100%;
-  margin-bottom: 12px;
-  object-fit: contain;
-  object-position: 0 100%;
-`;
-export const Tag = styled.span`
-  display: block;
-  font-size: 11px;
-  line-height: 24px;
-  margin-bottom: 12px;
-  text-transform: uppercase;
-`;
-export const Title = styled.h3`
-  display: block;
-  font-family: 'Open Sans';
-  font-weight: 600;
-  font-size: 16px;
-  line-height: 24px;
-  margin: 0;
-  margin-bottom: 20px;
-`;
-export const Text = styled.span`
-  display: block;
-  font-size: 16px;
-  font-weight: 300;
-  line-height: 24px;
-  margin-bottom: 20px;
-`;
-export const ReadMore = styled(TextLink)`
-  letter-spacing: 2px;
-`;

package/dist/Layout/Layout-func-no-work.js

@@ -1,67 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ThemeProvider } from 'styled-components/macro';
-import GlobalStyle from 'styles/global';
-import theme from 'styles/theme';
-import Header from 'components/Header/Header';
-import Footer from 'components/Footer/Footer';
-import { PageWrapper } from 'components/Grid/Grid.styles';
-//import updateProgressStatus from 'actions/progress-status'
-
-const ProgressStatusContext = /*#__PURE__*/React.createContext();
-export const Layout = props => {
-  const {
-    title,
-    progress,
-    loginHandler,
-    signupHandler,
-    signupFlow,
-    children,
-    footerColor,
-    noFooter,
-    noLogout,
-    updateProgressStatusAC
-  } = props;
-  const handleProgressStatusChange = (page, status) => {
-    updateProgressStatusAC(page, status);
-  };
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: {
-      ...theme
-    }
-  }, /*#__PURE__*/React.createElement(PageWrapper, null, /*#__PURE__*/React.createElement(GlobalStyle, null), /*#__PURE__*/React.createElement(Header, {
-    progress: progress,
-    signupFlow: signupFlow,
-    loginHandler: loginHandler,
-    signupHandler: signupHandler,
-    siteTitle: title,
-    noLogout: noLogout
-  }), /*#__PURE__*/React.createElement(ProgressStatusContext.Provider, {
-    value: {
-      onProgressStatusChange: handleProgressStatusChange
-    }
-  }, children), !noFooter && /*#__PURE__*/React.createElement(Footer, {
-    color: footerColor
-  })));
-};
-Layout.propTypes = {
-  title: PropTypes.string,
-  signupFlow: PropTypes.bool,
-  loginHandler: PropTypes.func,
-  signupHandler: PropTypes.func,
-  progress: PropTypes.bool,
-  footerColor: PropTypes.string,
-  children: PropTypes.node.isRequired
-};
-Layout.defaultProps = {
-  title: '',
-  progress: null,
-  signupFlow: false,
-  footerColor: 'red',
-  loginHandler: () => {},
-  signupHandler: () => {}
-};
-export const ProgressStatusConsumer = ProgressStatusContext.Consumer;
-
-// doublecheck: _ref undefined. no state..
-// doesn't have export deafsult?....

package/dist/Layout/Layout.js

@@ -1,68 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ThemeProvider } from 'styled-components/macro';
-import GlobalStyle from 'styles/global';
-import theme from 'styles/theme';
-import Header from 'components/Header/Header';
-import Footer from 'components/Footer/Footer';
-import { PageWrapper } from 'components/Grid/Grid.styles';
-//import updateProgressStatus from 'actions/progress-status'
-
-const ProgressStatusContext = /*#__PURE__*/React.createContext();
-export class Layout extends React.PureComponent {
-  handleProgressStatusChange = (page, status) => {
-    const {
-      updateProgressStatusAC
-    } = this.props;
-    updateProgressStatusAC(page, status);
-  };
-  render() {
-    const {
-      title,
-      progress,
-      loginHandler,
-      signupHandler,
-      signupFlow,
-      children,
-      footerColor,
-      noFooter,
-      noLogout
-    } = this.props;
-    return /*#__PURE__*/React.createElement(ThemeProvider, {
-      theme: {
-        ...theme
-      }
-    }, /*#__PURE__*/React.createElement(PageWrapper, null, /*#__PURE__*/React.createElement(GlobalStyle, null), /*#__PURE__*/React.createElement(Header, {
-      progress: progress,
-      signupFlow: signupFlow,
-      loginHandler: loginHandler,
-      signupHandler: signupHandler,
-      siteTitle: title,
-      noLogout: noLogout
-    }), /*#__PURE__*/React.createElement(ProgressStatusContext.Provider, {
-      value: {
-        onProgressStatusChange: this.handleProgressStatusChange
-      }
-    }, children), !noFooter && /*#__PURE__*/React.createElement(Footer, {
-      color: footerColor
-    })));
-  }
-}
-Layout.propTypes = {
-  title: PropTypes.string,
-  signupFlow: PropTypes.bool,
-  loginHandler: PropTypes.func,
-  signupHandler: PropTypes.func,
-  progress: PropTypes.bool,
-  footerColor: PropTypes.string,
-  children: PropTypes.node.isRequired
-};
-Layout.defaultProps = {
-  title: '',
-  progress: null,
-  signupFlow: false,
-  footerColor: 'red',
-  loginHandler: () => {},
-  signupHandler: () => {}
-};
-export const ProgressStatusConsumer = ProgressStatusContext.Consumer;

package/dist/Layout/Layout.stories.js

@@ -1,55 +0,0 @@
-import React from 'react';
-import { Layout } from './Layout';
-import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
-export default {
-  title: 'Components Library/Layout',
-  component: Layout,
-  argTypes: {
-    title: {
-      type: 'string',
-      defaultValue: ''
-    },
-    progress: {
-      type: 'boolean',
-      defaultValue: null
-    },
-    signupFlow: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    loginHandler: {
-      type: 'function',
-      action: 'loginHandler'
-      //   defaultValue: () => {},
-    },
-
-    signupHandler: {
-      type: 'function',
-      action: 'signupHandler'
-      //   defaultValue: () => {},
-    },
-
-    children: {
-      type: 'node',
-      defaultValue: [],
-      required: true
-    },
-    footerColor: {
-      type: 'string',
-      defaultValue: 'red'
-    }
-  }
-};
-const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(Layout, args));
-export const LayoutDefault = Template.bind({});
-LayoutDefault.args = {};
-export const LatestUpdateFull = Template.bind({});
-LatestUpdateFull.args = {
-  title: 'A Title',
-  //   progress: true,
-  signupFlow: true,
-  footerColor: 'blue'
-};
-
-// doublecheck:
-// ref to header not found...

package/dist/LearnMoreCarousel/LearnMoreCarousel.js

@@ -1,39 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Slick from 'react-slick';
-import 'slick-carousel/slick/slick.css';
-import 'slick-carousel/slick/slick-theme.css';
-import { Container, Offset, Wrapper } from './LearnMoreCarousel.styles';
-export const LearnMoreCarousel = ({
-  children,
-  autoplay,
-  dots,
-  arrows,
-  isMobile
-}) => {
-  const settings = {
-    dots,
-    arrows,
-    infinite: false,
-    speed: 600,
-    autoplay: !!autoplay,
-    autoplaySpeed: autoplay,
-    slidesToShow: isMobile ? 1 : 2,
-    slidesToScroll: isMobile ? 1 : 1
-  };
-  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Offset, null, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Slick, settings, children))));
-};
-LearnMoreCarousel.propTypes = {
-  children: PropTypes.node.isRequired,
-  autoplay: PropTypes.number,
-  dots: PropTypes.bool,
-  arrows: PropTypes.bool,
-  isMobile: PropTypes.bool
-};
-LearnMoreCarousel.defaultProps = {
-  autoplay: 0,
-  dots: false,
-  arrows: false,
-  isMobile: false
-};
-export default LearnMoreCarousel;

package/dist/LearnMoreCarousel/LearnMoreCarousel.stories.js

@@ -1,58 +0,0 @@
-import React from 'react';
-import { LearnMoreCarousel } from './LearnMoreCarousel';
-// import { OneSvg, TwoSvg, ThreeSvg, FourSvg } from 'components/SvgIcons'
-import Number from 'components/Number/Number';
-export default {
-  title: 'Components Library/LearnMoreCarousel',
-  component: LearnMoreCarousel,
-  argTypes: {
-    children: {
-      type: 'node',
-      defaultValue: [],
-      required: true
-    },
-    autoplay: {
-      type: 'number',
-      defaultValue: 600
-    },
-    dots: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    arrows: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    infinite: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    isMobile: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    settings: [{}]
-  }
-};
-const Template = args => /*#__PURE__*/React.createElement(LearnMoreCarousel, args);
-export const LearnMoreCarousel3 = Template.bind({});
-LearnMoreCarousel3.args = {
-  children: [/*#__PURE__*/React.createElement(Number, null), /*#__PURE__*/React.createElement(Number, null), /*#__PURE__*/React.createElement(Number, null)],
-  autoplay: 600,
-  dots: true,
-  arrows: true,
-  infinite: true
-};
-export const LearnMoreCarousel4VD = Template.bind({});
-LearnMoreCarousel4VD.args = {
-  children: [/*#__PURE__*/React.createElement(Number, null), /*#__PURE__*/React.createElement(Number, null), /*#__PURE__*/React.createElement(Number, null), /*#__PURE__*/React.createElement(Number, null)],
-  autoplay: 800,
-  dots: true,
-  arrows: true,
-  styleVD: true,
-  infinite: true
-};
-
-//doublecheck:
-// autoplay is autoplayspeed
-// why is autoplay stopping in SB?

package/dist/LearnMoreCarousel/LearnMoreCarousel.styles.js

@@ -1,205 +0,0 @@
-import styled from 'styled-components/macro';
-import rwd from 'styles/rwd';
-import theme from 'styles/theme';
-export const Container = styled.div`
-  overflow: hidden;
-`;
-export 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;
-  `}
-`;
-export 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: ${props => 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: ${props => theme.cWhite};
-      }
-
-      &:focus,
-      &:hover {
-        background-color: ${props => theme.cWarningDark};
-      }
-    }
-
-    &.slick-prev {
-      left: auto;
-      margin-right: -32px;
-
-      ${rwd.Large`
-        margin-right: -64px;
-      `}
-
-      &:before {
-        content: '\f3cf';
-      }
-    }
-
-    &.slick-next {
-      border-left: 1px solid ${props => 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%;
-    }
-  }
-`;
-export 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;
-  `}
-`;
-
-// Before Merge
-// VD had white #fff dots with: box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);