@stokr/components-library 0.5.3 → 0.5.5

package/dist/Footer/FooterMenu.styles.js

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

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

package/dist/Footer/sicos-logo.svg

@@ -0,0 +1 @@
+<svg id="color_logo" data-name="color logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 297"><defs><style>.cls-1{fill:#216378;}.cls-2{fill:#3194b4;}.cls-3{fill:#42c5f1;}.cls-4{fill:#7198a4;}</style></defs><title>sicos-logo-svg</title><g id="shield-o"><path style="fill:#fff; background-color:#fff;" class="cls-1" d="M683.1,280.49a149.32,149.32,0,0,0,40.52-8.72,124.86,124.86,0,0,0,43.19-26.59,120.61,120.61,0,0,0,28.37-41.94q10.17-24.62,10.17-55t-10.17-55A126.89,126.89,0,0,0,783.95,72c.05.31.09,1,.11,1h0c.42,6,.94,11.12.62,16.73-1.83,32.44-10.29,62-22.32,89.82-2.87,6.65-6,13.06-9.52,19.35C735.17,231.16,713.55,259.74,683.1,280.49Z"/><path style="fill:#fff; background-color:#fff;" class="cls-2" d="M655.28,280.49a149.32,149.32,0,0,1-40.52-8.72,124.86,124.86,0,0,1-43.19-26.59,120.61,120.61,0,0,1-28.37-41.94Q533,178.62,533,148.28t10.17-55A126.89,126.89,0,0,1,554.43,72c-.05.31-.09,1-.11,1h0c-.42,6-.94,11.12-.62,16.73,1.83,32.44,10.29,62,22.32,89.82,2.87,6.65,6,13.06,9.52,19.35C603.21,231.16,624.82,259.74,655.28,280.49Z"/><path style="fill:#fff; background-color:#fff;" class="cls-3" d="M774.88,59.48l-.16-.08C741,46.59,707.44,41.28,669.62,41.28A314.61,314.61,0,0,0,564.35,58.89q3.44-3.91,7.21-7.51a125.09,125.09,0,0,1,43.19-26.59q25-9.29,54.6-9.29T724,24.79a125.06,125.06,0,0,1,43.18,26.59Q771.22,55.25,774.88,59.48Z"/></g><path style="fill:#fff; background-color:#fff;" class="cls-4" d="M135.3,88.47a36.84,36.84,0,0,0-17.06-11.76A61.24,61.24,0,0,0,97.86,72.9a53.59,53.59,0,0,0-11.6,1.33A44.59,44.59,0,0,0,75,78.36a24.54,24.54,0,0,0-8.61,7.45,18.87,18.87,0,0,0-3.31,11.26q0,10.61,8,16.23a75.13,75.13,0,0,0,20,9.61q12.09,4,26,8a107.36,107.36,0,0,1,26,11.26,61.64,61.64,0,0,1,20,19.55q8,12.26,8,32.8,0,19.55-7.29,34.12a69.22,69.22,0,0,1-19.71,24.18A83.78,83.78,0,0,1,115.25,267a126.72,126.72,0,0,1-34.62,4.64,125.57,125.57,0,0,1-42.4-7A106.18,106.18,0,0,1,1.79,242.18l36.77-40.42a53.58,53.58,0,0,0,20,16.4,57.19,57.19,0,0,0,25,5.8,56.61,56.61,0,0,0,12.75-1.49A41.61,41.61,0,0,0,108,218a25,25,0,0,0,8.28-7.62,19,19,0,0,0,3.15-10.93q0-10.6-8.12-16.73A75,75,0,0,0,90.9,172.28q-12.26-4.3-26.5-8.61a118.66,118.66,0,0,1-26.5-11.59,63.8,63.8,0,0,1-20.37-19.21Q9.4,120.93,9.41,101.39q0-18.88,7.45-33.13A71.94,71.94,0,0,1,36.74,44.41,86.46,86.46,0,0,1,65.4,30a117.39,117.39,0,0,1,33.46-4.8,131.63,131.63,0,0,1,38.43,5.63,88.73,88.73,0,0,1,33.46,18.88Z"/><path style="fill:#fff; background-color:#fff;" class="cls-4" d="M208.84,31.16h51.68V265.7H208.84Z"/><path style="fill:#fff; background-color:#fff;" class="cls-4" d="M460.94,92.11a50.76,50.76,0,0,0-18.72-14.25q-11.1-5-25.67-5A64.24,64.24,0,0,0,368,94.27a73.3,73.3,0,0,0-14.25,24,86.35,86.35,0,0,0-5.13,30.15,85.92,85.92,0,0,0,5.13,30.31,75.27,75.27,0,0,0,14.08,23.85,63.71,63.71,0,0,0,21,15.74,60.78,60.78,0,0,0,26,5.63q15.9,0,28.16-6.63a56.06,56.06,0,0,0,20.21-18.55l43.07,32.13a89.68,89.68,0,0,1-37.77,30.81,116.86,116.86,0,0,1-47,9.94q-27.5,0-50.69-8.61a115.94,115.94,0,0,1-40.08-24.68,111.88,111.88,0,0,1-26.34-38.93q-9.44-22.86-9.44-51t9.44-51a111.93,111.93,0,0,1,26.34-38.93,116.09,116.09,0,0,1,40.08-24.68Q394,25.2,421.52,25.19A124.52,124.52,0,0,1,442.22,27a112.09,112.09,0,0,1,21.2,5.8,94.64,94.64,0,0,1,20,10.6,80,80,0,0,1,17.23,16.23Z"/><path style="fill:#fff; background-color:#fff;" class="cls-4" d="M962.43,88.47a36.84,36.84,0,0,0-17.06-11.76A61.24,61.24,0,0,0,925,72.9a53.59,53.59,0,0,0-11.59,1.33,44.59,44.59,0,0,0-11.26,4.14,24.54,24.54,0,0,0-8.61,7.45,18.87,18.87,0,0,0-3.31,11.26q0,10.61,8,16.23a75.15,75.15,0,0,0,20,9.61q12.09,4,26,8a107.34,107.34,0,0,1,26,11.26,61.62,61.62,0,0,1,20,19.55q8,12.26,8,32.8,0,19.55-7.29,34.12a69.21,69.21,0,0,1-19.71,24.18A83.77,83.77,0,0,1,942.39,267a132.16,132.16,0,0,1-77-2.32,106.18,106.18,0,0,1-36.44-22.53l36.77-40.42a53.57,53.57,0,0,0,20,16.4,57.19,57.19,0,0,0,25,5.8,56.61,56.61,0,0,0,12.75-1.49A41.61,41.61,0,0,0,935.1,218a25,25,0,0,0,8.28-7.62,19,19,0,0,0,3.15-10.93q0-10.6-8.12-16.73A75,75,0,0,0,918,172.28q-12.26-4.3-26.5-8.61A118.66,118.66,0,0,1,865,152.07a63.8,63.8,0,0,1-20.37-19.21q-8.12-11.93-8.12-31.47,0-18.88,7.45-33.13a72,72,0,0,1,19.88-23.85A86.46,86.46,0,0,1,892.53,30,117.39,117.39,0,0,1,926,25.19a131.62,131.62,0,0,1,38.43,5.63,88.73,88.73,0,0,1,33.46,18.88Z"/></svg>

package/dist/ForgotPasswordModal/ForgotPasswordModal.js

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

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

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import Form from './Form';
+// import { FormField, FormInfo, FormError } from './Form'
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+import { withFormik } from 'formik';
+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

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

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

@@ -0,0 +1,109 @@
+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;
+  }
+`;