@stokr/components-library 0.5.6 → 0.5.7

package/dist/Footer/FooterMenu.styles.js

@@ -1,274 +0,0 @@
-import styled from 'styled-components/macro';
-import colors from 'styles/colors';
-import rwd from 'styles/rwd';
-import theme from 'styles/theme';
-export const Container = styled.div`
-  z-index: 2;
-  position: relative;
-  display: block;
-  width: 100%;
-  padding: 0;
-`;
-export const Groups = styled.ul`
-  display: block;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-
-  @media screen and (min-width: 992px) {
-    display: flex;
-  }
-`;
-export const Group = styled.li`
-  display: block;
-  border-top: 1px solid ${colors.lightGrey};
-
-  @media screen and (min-width: 992px) {
-    display: inline-block;
-    // padding: 12px;
-    padding: 64px 65px 68px;
-    flex-grow: 1;
-    // flex-basis: 25%;
-    /* border-top: 0; */
-    width: 25%;
-  }
-
-  @media screen and (max-width: 1270px) {
-    padding: 64px 3% 68px;
-
-    &:first-child {
-      padding-left: 65px;
-    }
-
-    &:last-child {
-      padding-right: 45px;
-      padding-top: 59px;
-    }
-  }
-
-  @media screen and (max-width: 992px) {
-    padding: 32px 48px;
-    &:first-child {
-      padding-left: 48px;
-    }
-    &:last-child {
-      padding: 32px 48px;
-      margin-bottom: 6px;
-    }
-  }
-
-  &:last-child {
-    @media screen and (min-width: 980px) {
-      // flex-basis: 30%;
-    }
-
-    @media screen and (min-width: 1150px) {
-      // flex-basis: 30%;
-      padding: 59px 65px 68px;
-    }
-
-    @media screen and (min-width: 1360px) {
-      // flex-basis: 25%;
-    }
-  }
-
-  @media screen and (min-width: 992px) and (max-width: 1270px) {
-    &:first-child {
-      width: 25%;
-    }
-
-    &:nth-child(2) {
-      width: 20%;
-    }
-
-    &:nth-child(3) {
-      width: 25%;
-    }
-
-    &:last-child {
-      width: 30%;
-    }
-  }
-`;
-export const Title = styled.button`
-  position: relative;
-  display: block;
-  width: 100%;
-  font-family: 'Open Sans';
-  font-weight: normal;
-  font-size: 11px;
-  line-height: 2.18;
-  letter-spacing: 2.1px;
-  text-transform: uppercase;
-  border: 0;
-  margin: 0;
-  margin-bottom: 20px;
-  padding: 24px 32px;
-  outline: 0;
-  text-align: left;
-  color: ${theme.cBlack};
-  transition: color 0.2s;
-  cursor: default;
-  background-color: inherit;
-
-  ${props => props.collapse && `
-    padding-right: 48px;
-    cursor: pointer;
-
-    &:focus ,
-    &:hover {
-      // color: ${theme.cPrimary};
-      color: initial;
-    }
-  `}
-
-  ${props => props.social && `
-    margin-top: 14px;
-  `}
-  
-  @media screen and (min-width: 992px) {
-    padding: 0;
-    cursor: default;
-
-    &:focus,
-    &:hover {
-      color: ${theme.cBlack};
-    }
-  }
-
-  @media screen and (max-width: 992px) {
-    padding: 0;
-    margin: 0;
-  }
-`;
-export const Items = styled.ul`
-  display: block;
-  list-style: none;
-  padding: 0 24px;
-  padding-bottom: 24px;
-
-  @media screen and (min-width: 992px) {
-    padding: 0;
-    margin-top: 22px;
-    margin: 0 -8px;
-    width: 224px;
-
-    ${props => props.social && `
-      margin-top: 14px;
-    `}
-  }
-
-  @media screen and (max-width: 992px) {
-    padding-top: 15px;
-    padding-left: 0;
-    padding-bottom: 0;
-  }
-`;
-export const Item = styled.li`
-  display: block;
-  padding: 7px 8px;
-
-  ${props => props.social && `
-    display: inline-block;
-  `};
-
-  @media screen and (max-width: 992px) {
-    &:first-of-type {
-    }
-    padding-left: 0;
-    padding-right: 16px;
-  }
-`;
-export const Link = styled.a`
-  display: inline-block;
-  font-family: 'Open Sans';
-  font-weight: bold;
-  font-size: 11px;
-  line-height: 2.18;
-  letter-spacing: 2.1px;
-  text-transform: uppercase;
-  color: ${theme.cBlack};
-  transition: color 0.2s;
-
-  &:focus,
-  &:hover {
-    //color: ${theme.cPrimary};
-    opacity:0.6;
-  }
-`;
-export const SocialLink = styled.a`
-  position: relative;
-  display: inline-block;
-  width: 40px;
-  height: 40px;
-  border-radius: 20px;
-  background-color: ${theme.cPrimary};
-  transition: background-color 0.2s;
-
-  & > svg {
-    display: block;
-    width: 12px;
-    height: 12px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-top: -6px;
-    margin-left: -6px;
-    fill: ${theme.cWhite};
-  }
-
-  &:focus,
-  &:hover {
-    background-color: ${theme.cPrimaryDark};
-    opacity: 1;
-  }
-`;
-export const HiringTotalNumber = styled.span`
-  background: #88fa51;
-  color: #000;
-  border-radius: 100px;
-  display: inline-flex;
-  width: 15px;
-  height: 15px;
-  margin-left: 0px;
-  text-align: center;
-  font-weight: 600;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 0;
-  font-size: 11px;
-  font-weight: 700;
-  padding-right: 0;
-  padding-top: 6px;
-`;
-export const TitleContainer = styled.div`
-  @media screen and (max-width: 990px) {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-  }
-`;
-export const ArrowDown = styled.i.attrs({
-  className: 'ion ion-ios-arrow-down'
-})`
-  &&& {
-    top: 50%;
-    right: 0;
-    transition: 0.3s transform;
-    transform: rotate(0);
-    text-align: center;
-    font-size: 16px;
-    line-height: 16px;
-    height: 16px;
-    margin-top: -8px;
-
-    ${props => props.isOpened && `
-      transform: rotate(180deg);
-    `}
-  }
-  ${props => !props.displayAlways && `
-  @media screen and (min-width: 992px) {
-    display: none;
-  }
-  `}
-`;

package/dist/Footer/index.js

@@ -1,4 +0,0 @@
-import Footer from './Footer';
-import FooterMenu from './FooterMenu';
-import FooterLayout from './FooterLayout';
-export { Footer, FooterMenu, FooterLayout };

package/dist/ForgotPasswordModal/ForgotPasswordModal.js

@@ -1,89 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { Formik } from 'formik';
-import * as Yup from 'yup';
-import { Modal, ModalInner, ModalLinkWrap, ModalLink } from 'components/Modal/Modal';
-import Form, { FormField, FormError } from 'components/Form/Form';
-import Text from 'components/Text/Text.styles';
-import Input from 'components/Input/Input';
-import Button from 'components/Button/Button.styles';
-import { Row, Column } from 'components/Grid/Grid.styles';
-import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
-export class ForgotPasswordModal extends PureComponent {
-  initialValues = {
-    email: ''
-  };
-  validationSchema = Yup.object().shape({
-    email: Yup.string().email('Email is not valid').required('Email is required')
-  });
-  render() {
-    const {
-      isModalOpen,
-      onModalClose,
-      onFormSend,
-      onModalSwitch
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Modal, {
-      isOpen: isModalOpen,
-      onClose: onModalClose
-    }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
-      part: 8
-    }, /*#__PURE__*/React.createElement(ModalInner, {
-      modalTop: true
-    }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h3", null, "Forgot password"), /*#__PURE__*/React.createElement("p", null, 'Please log in to engage in our community & invest in exciting opportunities.'))), /*#__PURE__*/React.createElement(ModalInner, {
-      modalBot: true
-    }, /*#__PURE__*/React.createElement(ModalLinkWrap, null, 'Remember your password? ', /*#__PURE__*/React.createElement(ModalLink, {
-      as: "button",
-      onClick: onModalSwitch
-    }, "Sign up")))), /*#__PURE__*/React.createElement(Column, {
-      part: 8
-    }, /*#__PURE__*/React.createElement(ModalInner, null, /*#__PURE__*/React.createElement(Formik, {
-      initialValues: this.initialValues,
-      validationSchema: this.validationSchema,
-      onSubmit: onFormSend
-    }, ({
-      values,
-      errors,
-      touched,
-      handleBlur,
-      setFieldValue,
-      setFieldTouched
-    }) => {
-      const onChangeWithTouch = e => {
-        const field = e.target;
-        setFieldValue(field.name, field.value, false);
-        setFieldTouched(field.name);
-      };
-      const submitDisabled = !touched.email || !!errors.email;
-      return /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
-        noPadding: true
-      }, /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(Input, {
-        id: "forgot-email",
-        name: "email",
-        type: "email",
-        label: "Your email",
-        value: values.email,
-        onChange: onChangeWithTouch,
-        onBlur: handleBlur,
-        error: !!errors.email,
-        touched: !!touched.email
-      }), /*#__PURE__*/React.createElement(FormError, {
-        show: errors.email && touched.email
-      }, errors.email))), /*#__PURE__*/React.createElement(ComponentWrapper, {
-        noPaddingBottom: true,
-        noPaddingHorizontal: true
-      }, /*#__PURE__*/React.createElement(Button, {
-        type: "submit",
-        fluid: true,
-        disabled: submitDisabled
-      }, "Remind")));
-    })))));
-  }
-}
-ForgotPasswordModal.propTypes = {
-  isModalOpen: PropTypes.bool.isRequired,
-  onModalClose: PropTypes.func.isRequired,
-  onFormSend: PropTypes.func.isRequired,
-  onModalSwitch: PropTypes.func.isRequired
-};
-export default ForgotPasswordModal;

package/dist/ForgotPasswordModal/ForgotPasswordModal.stories.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import ForgotPasswordModal from './ForgotPasswordModal';
-import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
-export default {
-  title: 'Components Library/Forgot Password Modal',
-  component: ForgotPasswordModal,
-  argTypes: {
-    isModalOpen: {
-      type: 'boolean',
-      defaultValue: true
-    },
-    onModalClose: {
-      type: 'function',
-      action: 'onModalClose',
-      required: true
-    },
-    onFormSend: {
-      type: 'function',
-      action: 'onFormSend',
-      required: true
-    },
-    onModalSwitch: {
-      type: 'function',
-      action: 'onModalSwitch',
-      required: true
-    }
-  }
-};
-const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(ForgotPasswordModal, args));
-export const ForgotPasswordModalOverview = Template.bind({});
-ForgotPasswordModalOverview.args = {};

package/dist/Form/Form.js

@@ -1,38 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as Yup from 'yup';
-import { FormContainer, FormField, FormInfo, FormError } from './Form.styles';
-export { FormField, FormInfo, FormError };
-export const Form = ({
-  children
-}) => /*#__PURE__*/React.createElement(FormContainer, {
-  autoComplete: "off",
-  noValidate: true
-}, children);
-
-/**
- * @function validate
- * @description Generic function to perform field-level validation
- * @param {string} fieldName
- * @param {Object} formik
- *
- * @returns {(undefined|string)} returns error message if error exists, else return undefined
- */
-export function validate(fieldName, formik) {
-  const {
-    values,
-    validationSchema
-  } = formik;
-  try {
-    Yup.reach(validationSchema, fieldName).validateSync(values[fieldName], {
-      abortEarly: false
-    });
-    return undefined;
-  } catch (validateError) {
-    return validateError.inner[0].errors[0];
-  }
-}
-Form.propTypes = {
-  children: PropTypes.node.isRequired
-};
-export default Form;

package/dist/Form/Form.stories.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import Form from './Form';
-import { withFormik } from 'formik';
-import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
-export default {
-  title: 'Components Library/Form',
-  component: Form,
-  argTypes: {
-    children: {
-      type: 'node',
-      defaultValue: [],
-      required: true
-    }
-  }
-};
-Form.decorators = [withFormik];
-const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(Form, args));
-export const FormOverview = Template.bind({});
-FormOverview.args = {};
-
-//doublecheck:
-//not working - formik..
-//_useFormikContext is undefined

package/dist/Form/Form.styles.js

@@ -1,66 +0,0 @@
-import styled from 'styled-components/macro';
-import { Form } from 'formik';
-import rwd from 'styles/rwd';
-import theme from 'styles/theme';
-export const FormContainer = styled(Form)`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-`;
-export const FormField = styled.div`
-  position: relative;
-`;
-export const FormInfo = styled.div`
-  font-family: 'Open Sans';
-   font-weight: ${props => props.styleID ? `400` : `300`};
- // All  font-weight: 300;
- // ID   font-weight: 400;
-  font-size: 9px;
-  line-height: 1.78em;
-  letter-spacing: 0.4px;
-  color: ${props => theme.cBlack};
-  opacity: ${props => props.styleID ? `1` : `0.5`};
- // All opacity: 0.5;
- // ID   opacity: 1;
-  ${props => props.center && 'text-align: center;'}
-  ${props => props.marginTop && 'margin-top: 18px;'}
-  // from ID:
-   ${props => props.marginBottom && 'margin-bottom: 18px;'}
-  ${rwd.Large`
-    font-size: 12px;
-  `}
-
-  a {
-    text-decoration: underline;
-    transition: color .2s;
-
-    &:hover {
-      color: ${props => theme.cPrimary};
-    }
-  }
-`;
-export const FormError = styled.div`
-  display: none;
-  font-family: 'Open Sans';
-  font-weight: 300;
-  font-size: 11px;
-  line-height: 12px;
-  margin: 0;
-  position: relative;
-  left: 0;
-  top: ${props => props.styleSUF ? `10px` : `2px`};
-  // SUF top: 10px;
-  // ID, IIS & VD    top: 2px;
-  margin-bottom: -12px;
-  letter-spacing: 0.4px;
-  color: ${props => theme.cWarning};
-
-  ${props => props.show && 'display: block;'}
-  //from SUF
-  ${({
-  withMarginLeft
-}) => withMarginLeft && 'margin-left: 28px;'}
-  ${({
-  withTopSpacing
-}) => withTopSpacing && 'top: 10px;'}
-`;

package/dist/FullscreenCard/FullscreenCard.styles.js

@@ -1,36 +0,0 @@
-import styled from 'styled-components/macro';
-import { Card } from 'semantic-ui-react';
-import theme from 'styles/theme';
-import rwd from 'styles/rwd';
-export const FullscreenCardContainer = styled.div`
-  display: flex;
-  min-height: 100vh;
-  padding: 0;
-  background: ${props => theme.cGrey};
-
-  ${rwd.Medium`
-    padding: 120px 0;
-  `}
-`;
-export const FullscreenCard = styled(Card)`
-  &&& {
-    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
-    width: 100%;
-
-    ${rwd.Medium`
-      width: 480px;
-      padding: 0;
-      margin: auto;
-    `}
-  }
-`;
-export const FullscreenCardContent = styled(Card.Content)`
-  &&& {
-    padding: 48px 32px 55px;
-    ${rwd.Medium`
-      padding: 66px 60px 56px;
-    `}
-  }
-`;
-
-// unused component

package/dist/Grid/Grid.styles.js

@@ -1,109 +0,0 @@
-import styled from 'styled-components/macro';
-import grid from 'styles/grid';
-import rwd from 'styles/rwd';
-import theme from 'styles/theme';
-import spacing from 'styles/spacing';
-export const Wrapper = styled.div`
-  height: 100%;
-
-  ${props => props.flex && `
-    display:flex;
-  `}
-`;
-export const Row = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  text-align: left;
-
-  ${props => props.center && `
-    justify-content: center;
-  `}
-
-  ${props => props.right && `
-    justify-content: right;
-  `}
-
-  ${props => props.spaceBetween && `
-    justify-content: space-between;
-  `}
-
-  ${props => props.stretch && `
-    height: 100%;
-    align-items: stretch;
-  `}
-
-  ${props => props.dashboard && `
-    margin: -16px;
-  `}
-
-  ${props => props.nowrap && `
-    flex-wrap: nowrap;
-  `}
-
-  ${rwd.Medium`
-    ${props => props.main && `
-      z-index: 0;
-      min-height: calc(100vh - ${spacing.footerHeight}px);
-      padding-top: ${spacing.headerHeight}px;
-    `}
-  `}
-`; // ID has padding-top as 85px instead of headerHeight (which is set to 96px)
-
-export const Column = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-
-  ${props => props.center && `
-    justify-content: center;
-  `}
-
-  ${props => props.alignCenter && `
-    align-items: center;
-  `}
-
-  ${props => props.spaceBetween && `
-    justify-content: space-between;
-  `}
-
-  ${props => props.flexEnd && `
-    justify-content: flex-end;
-  `}
-
-  ${props => props.mainRelative && `
-    padding: 18px 0 28px;
-  `}
-
-  ${rwd.Medium`
-    ${props => props.part && `
-      width: ${grid(props.part, props.full)};
-    `}
-
-    ${props => props.mainFixed && `
-      position: fixed;
-      top: ${spacing.headerHeight}px;
-      left: 0;
-      height: calc(100% - ${spacing.headerHeight}px);
-    `}
-
-    ${props => props.mainRelative && `
-      position: relative;
-      margin-left: ${grid((props.full || 16) - props.part, props.full)};
-      border-left: 1px solid ${theme.cLightGrey};
-      padding: 54px 0 42px;
-    `}
-
-    ${props => props.withBorder && `
-      border-left: 1px solid ${theme.cLightGrey};
-    `}
-  `}
-`;
-export const PageWrapper = styled.div`
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-
-  ${Row} {
-    flex-grow: 1;
-  }
-`;