@stokr/components-library 0.5.6 → 0.5.7

package/dist/Modal/Modal.styles.js

@@ -1,407 +0,0 @@
-import styled, { css } from 'styled-components/macro';
-import { Link } from '@reach/router';
-import grid from 'styles/grid';
-import rwd from 'styles/rwd';
-import colors from 'styles/colors';
-export const ModalRoot = styled.div`
-  z-index: 1000;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-`;
-export const Dimmer = styled.div`
-  position: relative;
-  top: 0;
-  left: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.7);
-  font-size: 0;
-  text-align: center;
-  overflow-y: auto;
-
-  ${props => props.kyc && 'overflow: visible;'}
-
-  &:after {
-    content: '';
-    display: inline-block;
-    vertical-align: middle;
-    height: 100%;
-    width: 0;
-  }
-`;
-export const Box = styled.div`
-  display: inline-block;
-  vertical-align: middle;
-  position: relative;
-  left: 0;
-  top: 0;
-  width: 100%;
-  background-color: ${colors.white};
-  font-size: 10px;
-  text-align: left;
-  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
-
-  ${props => props.fullscreen && `
-    height: 90vh;
-  `}
-
-  ${props => props.kyc && `
-    width: 100vw;
-    height: 100vh;
-    max-width: 1024px!important;
-    max-height: 768px!important;
-  `}
-
-  ${rwd.Medium`
-    max-width: ${grid(12)};
-
-    ${props => props.thin && `
-      max-width: ${grid(8)};
-    `}
-  `}
-
-  ${rwd.XLarge`
-    max-width: ${grid(8)};
-
-    ${props => props.thin && `
-      max-width: ${grid(6)};
-    `}
-  `}
-
-  ${({
-  isRegisterEntity
-}) => isRegisterEntity && css`
-      max-width: 55% !important;
-      height: 65vh;
-    `}
-`;
-export const ModalInnerSmartContractAddress = styled.input`
-  color: ${colors.black};
-  font-family: 'Open Sans';
-  font-size: 14px;
-  font-weight: 400;
-  text-align: left;
-  margin-top: 24px;
-  width: 100%;
-  apperance: none;
-  resize: none;
-  border: none;
-  outline: 0;
-`;
-export const ModalInnerWithBorder = styled.div`
-  border-radius: 10px;
-  border: 1px solid ${colors.grey};
-  padding: 25px 35px;
-  margin-top: 39px;
-
-
-  ${props => props.bottomRadius0 && `
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  `}
-
-  ${props => props.topRadius0 && `
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  `}
-
-  ${props => props.marginTop0 && `
-    margin-top: 0;
-  `}
-
-  ${props => props.bordderTopNone && `
-    border-top: 0;
-  `}
-
-  ${props => props.textAlignRight && `
-    text-align: right;
-  `}
-
-  ${props => props.paddingSmall && `
-    padding: 21px 25px;
-  `}
-  
-  p {  
-    color: ${colors.black};
-    font-size: 14px;
-    font-weight: 300;
-    letter-spacing: 0.53px;
-    line-height: 22px;
-    text-align: left;
-    margin: 0;
-  }
-`;
-export const ModalInner = styled.div`
-  width: 100%;
-  height: 100%;
-  padding: 40px ${grid(1)};
-  display: flex;
-  flex-direction: column;
-
-  ${props => props.center && `
-    text-align: center;
-  `}
-
-  ${props => props.background && `
-    background-color: ${colors.grey};
-  `}
-
-  ${props => props.modalBot && `
-    background-color: ${colors.orangishRed};
-    color: ${colors.white};
-    flex-grow: 0 !important;
-    height: auto;
-  `}
-
-  ${props => props.modalTop && `
-    padding-bottom: 30px;
-  `}
-
-  ${props => props.center && `
-    justify-content: center;
-    align-items: center;
-  `}
-
-  ${rwd.Medium`
-    padding: 53px ${grid(1, 12)};
-
-    ${props => props.left && `
-      padding: 88px ${grid(1, 12)};
-    `}
-
-    ${props => props.modalTop && `
-      padding-bottom: 43px;
-      border-right: 1px solid ${colors.grey};
-    `}
-
-    /* missing tiny */
-  `}
-
-  ${rwd.XLarge`
-    padding: 53px ${grid(1, 8)};
-
-    ${props => props.left && `
-      padding: 88px ${grid(1, 8)};
-    `}
-
-    ${props => props.modalTop && `
-      padding-bottom: 53px;
-    `}
-
-    /* missing tiny */
-  `}
-
-  ${props => props.noPadding && `
-    padding: 0!important;
-  `}
-
-  ${props => props.noPaddingHorizontal && `
-    padding-left: 0!important;
-    padding-right: 0!important;
-  `}
-`;
-export const ModalClose = styled.i.attrs({
-  className: 'ion ion-md-close'
-})`
-  z-index: 4;
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 40px;
-  height: 40px;
-  text-align: center;
-  cursor: pointer;
-  color: ${colors.white};
-  background-color: ${colors.blue};
-  transition: background-color 0.2s, color 0.2s;
-
-  &:before {
-    transition: transform 0.2s;
-    font-size: 24px;
-    line-height: 24px !important;
-    width: 24px;
-    height: 24px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-top: -12px;
-    margin-left: -12px;
-  }
-
-  &:hover {
-    color: ${colors.black};
-    background-color: ${colors.white};
-
-    &:before {
-      transform: rotate(-180deg);
-    }
-  }
-
-  ${rwd.Medium`
-    width: 56px;
-    height: 56px;
-
-    &:before {
-      font-size: 27px;
-    }
-  `}
-`;
-export const ModalBack = styled.i.attrs({
-  className: 'ion ion-ios-arrow-back'
-})`
-  z-index: 4;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 40px;
-  height: 40px;
-  text-align: center;
-  cursor: pointer;
-  color: ${colors.black};
-  background-color: transparent;
-  transition: color 0.2s, opacity 0.2s, visibility 0.2s;
-
-  ${props => props.hide && `
-    opacity: 0;
-    visibility: hidden;
-  `}
-
-  &:before {
-    transition: transform 0.2s;
-    font-size: 24px;
-    line-height: 24px !important;
-    width: 24px;
-    height: 24px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-top: -12px;
-    margin-left: -12px;
-  }
-
-  &:hover {
-    color: ${colors.blue};
-
-    &:before {
-      transform: translateX(-20%);
-    }
-  }
-
-  ${rwd.Medium`
-    width: 56px;
-    height: 56px;
-
-    &:before {
-      font-size: 27px;
-    }
-  `}
-`;
-export const ModalLinkWrap = styled.div`
-  position: relative;
-  font-family: 'Open Sans';
-  font-weight: 300;
-  font-size: 11px;
-  line-height: 14px;
-  text-transform: uppercase;
-  padding-left: 18px;
-
-  &:before {
-    content: '\\f3d1';
-    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: 12px;
-    line-height: 8px;
-    display: block;
-    width: 8px;
-    height: 8px;
-    position: absolute;
-    top: 50%;
-    left: 0;
-    margin-top: -4px;
-    color: ${colors.lighterGreen};
-  }
-`;
-export const ModalLink = styled(Link)`
-  display: inline-block;
-  position: relative;
-  cursor: pointer;
-  color: inherit;
-
-  &:before {
-    content: '';
-    display: block;
-    width: 0%;
-    height: 1px;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    background-color: ${colors.lighterGreen};
-    transition: width 0.2s;
-  }
-
-  &:hover {
-    &:before {
-      width: 100%;
-    }
-  }
-`;
-export const ModalWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-`;
-export const ModalTitle = styled.div`
-  font-family: 'Open Sans';
-  font-weight: 800;
-  font-size: 22px;
-  line-height: 1.27em;
-  letter-spacing: 0.8px;
-  text-transform: uppercase;
-`;
-export const ModalScroll = styled.div`
-  height: 100%;
-  overflow-y: auto;
-  padding: 0 12px;
-  margin: 0 -12px;
-
-  ${rwd.Large`
-    padding: 0 32px;
-    margin: 0 -32px;
-  `}
-
-  &::-webkit-scrollbar {
-    width: 4px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: ${colors.grey};
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: ${colors.orangishRed};
-  }
-
-  &::-webkit-scrollbar-thumb:window-inactive {
-    background-color: ${colors.orangishRedDark};
-  }
-`;
-export const ModalSection = styled.div`
-  & + & {
-    padding-top: 40px;
-
-    ${rwd.Medium`
-      padding-top: 53px;
-    `}
-  }
-`;

package/dist/MultiProgressBar/MultiProgressBar.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Bar, BackBar, FillBar, BarPart, FillProgress } from './MultiProgressBar.styles';
-export const MultiProgressBar = ({
-  backParts,
-  fillParts,
-  fill
-}) => /*#__PURE__*/React.createElement(Bar, null, /*#__PURE__*/React.createElement(BackBar, null, backParts.map(part => /*#__PURE__*/React.createElement(BarPart, {
-  key: part.label,
-  percent: part.value,
-  color: `back-${part.label}`
-}))), /*#__PURE__*/React.createElement(FillProgress, {
-  percent: fill
-}, /*#__PURE__*/React.createElement(FillBar, {
-  percent: fill
-}, fillParts.map(part => /*#__PURE__*/React.createElement(BarPart, {
-  key: part.label,
-  percent: part.value,
-  color: `fill-${part.label}`
-})))));
-export const MultiProgressBarPropTypes = {
-  backParts: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.number.isRequired,
-    label: PropTypes.string.isRequired
-  })).isRequired,
-  fillParts: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.number.isRequired,
-    label: PropTypes.string.isRequired
-  })).isRequired,
-  fill: PropTypes.number.isRequired
-};
-MultiProgressBar.propTypes = MultiProgressBarPropTypes;
-export default MultiProgressBar;

package/dist/MultiProgressBar/MultiProgressBar.stories.js

@@ -1,61 +0,0 @@
-import React from 'react';
-import MultiProgressBar from './MultiProgressBar';
-import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
-export default {
-  title: 'Components Library/Multi Progress Bar',
-  component: MultiProgressBar,
-  argTypes: {
-    backParts: {
-      type: 'array of shape',
-      defaultValue: [{
-        value: 0
-      }, {
-        label: ''
-      }]
-    },
-    fillParts: {
-      type: 'array of shape',
-      defaultValue: [{
-        value: 0
-      }, {
-        label: ''
-      }]
-    },
-    fill: {
-      type: 'number',
-      defaultValue: 0
-    }
-  }
-};
-// backpart: minumum fill
-// fillparts: maximum fill
-// fill: fill between min and max
-
-const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(MultiProgressBar, args));
-export const MPBarMin30 = Template.bind({});
-MPBarMin30.args = {
-  backParts: [{
-    value: 30,
-    label: 'backparts - minumum fill'
-  }]
-};
-export const MPBarMax70Fill65 = Template.bind({});
-MPBarMax70Fill65.args = {
-  fillParts: [{
-    value: 70,
-    label: 'fillparts - maximum fill'
-  }],
-  fill: 65
-};
-export const MPBarAllparts = Template.bind({});
-MPBarAllparts.args = {
-  backParts: [{
-    value: 7,
-    label: 'backparts - minumum fill'
-  }],
-  fillParts: [{
-    value: 60,
-    label: 'fillparts - maximum fill'
-  }],
-  fill: 50
-};

package/dist/MultiProgressBar/MultiProgressBar.styles.js

@@ -1,92 +0,0 @@
-import styled from 'styled-components/macro';
-export const Bar = styled.div`
-  width: 100%;
-  position: relative;
-  display: block;
-  height: 10px;
-  background-color: #004bb7;
-  border-radius: 5px;
-  overflow: hidden;
-`;
-export const BackBar = styled.div`
-  z-index: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  border-radius: 4px;
-  overflow: hidden;
-`;
-export const FillBar = styled.div`
-  z-index: 1;
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  border-radius: 4px;
-  overflow: hidden;
-  transition: transform 0.3s;
-  transform: translateX(100%);
-
-  ${props => props.percent && `
-    transform: translateX(${100 - props.percent}%);
-  `}
-`;
-export const FillProgress = styled.div`
-  z-index: 1;
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  border-radius: 4px;
-  overflow: hidden;
-  transition: transform 0.3s;
-  transform: translateX(-100%);
-
-  ${props => props.percent && `
-    transform: translateX(${props.percent - 100}%);
-  `}
-`;
-export const BarPart = styled.div`
-  display: block;
-  height: 100%;
-  float: left;
-  background-color: #000;
-  transition: width 0.3s;
-
-  ${props => `
-    width: ${props.percent || 0}%;
-  `}
-
-  ${props => props.color && `
-    ${props.color === 'back-empty' ? `
-      background-color: transparent;
-    ` : ''}
-    ${props.color === 'back-minimum' ? `
-      background-color: #4a90e2;
-    ` : ''}
-    ${props.color === 'back-disabled' ? `
-      background-color: #4a90e2;
-      background-image: repeating-linear-gradient(-45deg, #004bb7, #004bb7 2px, #4a90e2 2px, #4a90e2 5px);
-    ` : ''}
-    ${props.color === 'fill-empty' ? `
-      background-color: transparent;
-    ` : ''}
-    ${props.color === 'fill-minimum' ? `
-      background-color: #fff;
-    ` : ''}
-    ${props.color === 'fill-minimum-grey' ? `
-      background-color: #e1e1e1;
-    ` : ''}
-    ${props.color === 'fill-bought' ? `
-      background-color: #69bd53;
-      background-image: linear-gradient(to left, #a9ef9c, #69bd53);
-    ` : ''}
-  `}
-`;

package/dist/Newsletter/Newsletter.js

@@ -1,106 +0,0 @@
-import React from 'react';
-import fetchDataPublic from 'api/fetchDataPublic';
-import { Container, LayoutWrapper, Subscribe, SubscribeForm, SubscribeInput, SubscribeInputBox, SubscribeInputError, SubscribeSubmit, SubscribeTitle } from './Newsletter.styles';
-export class Newsletter extends React.Component {
-  state = {
-    name: '',
-    email: '',
-    errorName: '',
-    errorEmail: '',
-    submitSuccess: false
-  };
-  handleChange = e => {
-    const {
-      name,
-      value
-    } = e.target;
-    this.setState({
-      [name]: value
-    });
-  };
-  handleSubmit = e => {
-    e.preventDefault();
-    const {
-      name,
-      email
-    } = this.state;
-    let errorName;
-    let errorEmail;
-    if (!name) {
-      errorName = "Oops, this can't be blank";
-    } else {
-      errorName = '';
-    }
-    if (!email) {
-      errorEmail = "Oops, this can't be blank";
-    } else if (!/.+@.+\..+/.test(email)) {
-      errorEmail = "Oops, that's not a valid address";
-    } else {
-      errorEmail = '';
-    }
-
-    // Only submit of fields are properly filled
-    if (!errorEmail && !errorName) {
-      try {
-        fetchDataPublic('emails/subscribe', {
-          name,
-          email,
-          listName: 'newsletter'
-        });
-        this.setState({
-          name: '',
-          email: '',
-          errorName: '',
-          errorEmail: '',
-          submitSuccess: true
-        });
-        setTimeout(() => {
-          this.setState({
-            submitSuccess: false
-          });
-        }, 5000);
-      } catch (e) {
-        console.log(`\n### ERROR ADDING SUBSCRIBER ###\n\n${e}`);
-      }
-    } else {
-      this.setState({
-        errorName,
-        errorEmail
-      });
-    }
-  };
-  render() {
-    const {
-      submitSuccess,
-      name,
-      email,
-      errorName,
-      errorEmail
-    } = this.state;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Subscribe, null, /*#__PURE__*/React.createElement(LayoutWrapper, {
-      noBorder: true,
-      minimal: true
-    }, /*#__PURE__*/React.createElement(Container, {
-      compact: true
-    }, /*#__PURE__*/React.createElement(SubscribeTitle, {
-      as: "h3"
-    }, "SIGN UP FOR THE STOKR NEWSLETTER"), /*#__PURE__*/React.createElement(SubscribeForm, null, /*#__PURE__*/React.createElement(SubscribeInputBox, null, /*#__PURE__*/React.createElement(SubscribeInput, {
-      name: "name",
-      type: "text",
-      placeholder: "Your Name",
-      value: name,
-      onChange: this.handleChange
-    }), errorName && /*#__PURE__*/React.createElement(SubscribeInputError, null, errorName)), /*#__PURE__*/React.createElement(SubscribeInputBox, null, /*#__PURE__*/React.createElement(SubscribeInput, {
-      name: "email",
-      type: "mail",
-      placeholder: "Your Email",
-      value: email,
-      onChange: this.handleChange
-    }), errorEmail && /*#__PURE__*/React.createElement(SubscribeInputError, null, errorEmail)), /*#__PURE__*/React.createElement(SubscribeSubmit, {
-      submitSuccess: submitSuccess,
-      transparent: true,
-      onClick: this.handleSubmit
-    }, submitSuccess ? 'Success!' : 'Submit'))))));
-  }
-}
-export default Newsletter;

package/dist/Newsletter/Newsletter.stories.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import Newsletter from './Newsletter';
-export default {
-  title: 'Components Library/Newsletter',
-  component: Newsletter
-};
-const Template = args => /*#__PURE__*/React.createElement(Newsletter, args);
-export const NewsletterStokr = Template.bind({});