@stokr/components-library 0.5.4 → 0.5.6

package/dist/KYCFlow/FaceScanRecognition.js

@@ -0,0 +1,52 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'formik';
+import { Row, Column } from 'components/Grid/Grid.styles';
+import SectionTitle from 'components/SectionTitle/SectionTitle.styles';
+import { RefreshSvg } from 'components/SvgIcons';
+import { Wrapper, Header, Body, HeaderTitle, BodyTitle, RetakeButton, Mask, ColumnInner, DoneButton } from './_styles';
+const FaceScanRecognition = ({
+  changeStep,
+  setPrevStep,
+  formik
+}) => {
+  useEffect(() => {
+    setPrevStep('kycFaceScan');
+  }, []);
+  const {
+    setFieldValue
+  } = formik;
+  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SectionTitle, null, "Face recognition"), /*#__PURE__*/React.createElement(HeaderTitle, {
+    withMargin: true
+  }, "Put your happy investor face on"))), /*#__PURE__*/React.createElement(Body, {
+    noHorizontalPadding: true
+  }, /*#__PURE__*/React.createElement(Row, {
+    center: true,
+    stretch: true
+  }, /*#__PURE__*/React.createElement(Column, {
+    part: 3
+  }, /*#__PURE__*/React.createElement(ColumnInner, {
+    verticalCenter: true
+  }, /*#__PURE__*/React.createElement(BodyTitle, {
+    faceScan: true
+  }, "RETAKE"), /*#__PURE__*/React.createElement(RetakeButton, null, /*#__PURE__*/React.createElement(RefreshSvg, null)))), /*#__PURE__*/React.createElement(Column, {
+    part: 10
+  }, /*#__PURE__*/React.createElement(Mask, null)), /*#__PURE__*/React.createElement(Column, {
+    part: 3
+  }, /*#__PURE__*/React.createElement(ColumnInner, {
+    verticalCenter: true
+  }, /*#__PURE__*/React.createElement(BodyTitle, {
+    faceScan: true
+  }, "DONE"), /*#__PURE__*/React.createElement(DoneButton, {
+    onClick: () => {
+      setFieldValue('facePicture', 'TODO: GET PHOTO FROM CAMERA');
+      changeStep('kycFaceScanSuccess');
+    }
+  }))))));
+};
+FaceScanRecognition.propTypes = {
+  changeStep: PropTypes.func.isRequired,
+  setPrevStep: PropTypes.func.isRequired,
+  formik: PropTypes.instanceOf(Object).isRequired
+};
+export default connect(FaceScanRecognition);

package/dist/KYCFlow/FaceScanSuccess.js

@@ -0,0 +1,47 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { FaceScanIconSvg } from 'components/SvgIcons';
+import Text from 'components/Text/Text.styles';
+import Button from 'components/Button/Button.styles';
+import { Row, Column } from 'components/Grid/Grid.styles';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import SectionTitle from 'components/SectionTitle/SectionTitle.styles';
+import { Wrapper, Header, Body, HeaderTitle, BodyTitle, ColumnInner, SuccessMark } from './_styles';
+const FaceScanSuccess = ({
+  changeStep,
+  setPrevStep
+}) => {
+  useEffect(() => {
+    setPrevStep('kycFaceScanRecognition');
+  }, []);
+  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SectionTitle, null, "Verify your identity"), /*#__PURE__*/React.createElement(HeaderTitle, {
+    withMargin: true
+  }, "Face verification"))), /*#__PURE__*/React.createElement(Body, null, /*#__PURE__*/React.createElement(Row, {
+    stretch: true
+  }, /*#__PURE__*/React.createElement(Column, {
+    part: 4
+  }), /*#__PURE__*/React.createElement(Column, {
+    part: 8
+  }, /*#__PURE__*/React.createElement(ColumnInner, {
+    verticalPadding: true
+  }, /*#__PURE__*/React.createElement(BodyTitle, null, "SCAN COMPLETED"), /*#__PURE__*/React.createElement(ComponentWrapper, {
+    center: true,
+    noPaddingBottom: true
+  }, /*#__PURE__*/React.createElement(FaceScanIconSvg, null)), /*#__PURE__*/React.createElement(ComponentWrapper, {
+    center: true
+  }, /*#__PURE__*/React.createElement(SuccessMark, null)), /*#__PURE__*/React.createElement(ComponentWrapper, {
+    noPaddingTop: true,
+    center: true
+  }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("p", null, "Great shot - thank you"))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+    center: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: () => changeStep('kycBasicInfo', 3, 2)
+  }, "Continue")))), /*#__PURE__*/React.createElement(Column, {
+    part: 4
+  }))));
+};
+FaceScanSuccess.propTypes = {
+  changeStep: PropTypes.func.isRequired,
+  setPrevStep: PropTypes.func.isRequired
+};
+export default FaceScanSuccess;

package/dist/KYCFlow/Terms.js

@@ -0,0 +1,99 @@
+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, { PureComponent, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { connect, Field } from 'formik';
+import { Tooltip } from 'react-tippy';
+import Text from 'components/Text/Text.styles';
+import Button from 'components/Button/Button.styles';
+import Checkbox from 'components/Checkbox/Checkbox';
+import { validate, FormField, FormError } from 'components/Form/Form';
+import ComponentScroll from 'components/ComponentScroll/ComponentScroll';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import { Wrapper, Header, Body, HeaderButtonWrapper, BottomWrapper, HeaderTitle } from './_styles';
+class KYCTerms extends PureComponent {
+  state = {
+    popupOpen: false
+  };
+  handlePopup = isOpen => {
+    const {
+      formik
+    } = this.props;
+    const {
+      validateField,
+      values
+    } = formik;
+    validateField('notUsResident');
+    validateField('termsAccepted');
+    const buttonDisabled = !values.termsAccepted || !values.notUsResident;
+    this.setState({
+      popupOpen: buttonDisabled ? isOpen : false
+    });
+  };
+  render() {
+    const {
+      changeStep,
+      formik
+    } = this.props;
+    const {
+      values,
+      errors
+    } = formik;
+    const {
+      popupOpen
+    } = this.state;
+    const buttonDisabled = !values.termsAccepted || !values.notUsResident;
+    return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(HeaderTitle, null, "Terms and conditions"), /*#__PURE__*/React.createElement(HeaderButtonWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+      open: popupOpen,
+      position: "bottom",
+      title: "Please correct all the required fields",
+      theme: "light",
+      arrow: true,
+      duration: 200
+    }, /*#__PURE__*/React.createElement("div", {
+      onMouseEnter: () => this.handlePopup(true),
+      onMouseLeave: () => this.handlePopup(false)
+    }, /*#__PURE__*/React.createElement(Button, {
+      onClick: () => changeStep('kycDocumentUpload', 1, 0),
+      disabled: buttonDisabled
+    }, "Next"))))), /*#__PURE__*/React.createElement(Body, {
+      noHorizontalPadding: true
+    }, /*#__PURE__*/React.createElement(ComponentScroll, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingVertical: true
+    }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("p", null, "Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus."), /*#__PURE__*/React.createElement("p", null, "Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero."), /*#__PURE__*/React.createElement("p", null, "In ac dui quis mi consectetuer lacinia. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero."), /*#__PURE__*/React.createElement("p", null, "Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus."), /*#__PURE__*/React.createElement("p", null, "Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero."), /*#__PURE__*/React.createElement("p", null, "Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus."), /*#__PURE__*/React.createElement("p", null, "Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero."), /*#__PURE__*/React.createElement("p", null, "In ac dui quis mi consectetuer lacinia. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero."), /*#__PURE__*/React.createElement("p", null, "Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus."), /*#__PURE__*/React.createElement("p", null, "Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero."), /*#__PURE__*/React.createElement("p", null, "Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus."), /*#__PURE__*/React.createElement("p", null, "Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero."), /*#__PURE__*/React.createElement("p", null, "In ac dui quis mi consectetuer lacinia. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero."), /*#__PURE__*/React.createElement("p", null, "Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus."), /*#__PURE__*/React.createElement("p", null, "Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero."), /*#__PURE__*/React.createElement("p", null, "Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus."), /*#__PURE__*/React.createElement("p", null, "Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero."), /*#__PURE__*/React.createElement("p", null, "In ac dui quis mi consectetuer lacinia. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero."), /*#__PURE__*/React.createElement("p", null, "Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus."), /*#__PURE__*/React.createElement("p", null, "Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero.")))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingBottom: true
+    }, /*#__PURE__*/React.createElement(BottomWrapper, null, /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(Field, {
+      name: "termsAccepted",
+      validate: () => validate('termsAccepted', formik)
+    }, ({
+      field
+    }) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Checkbox, _extends({
+      id: "terms-accepted",
+      text: "I accept the full Terms and Conditions",
+      checked: field.value,
+      error: !!errors[field.name]
+    }, field, {
+      value: "yes"
+    })), /*#__PURE__*/React.createElement(FormError, {
+      show: errors[field.name]
+    }, errors[field.name])))), /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(Field, {
+      name: "notUsResident",
+      validate: () => validate('notUsResident', formik)
+    }, ({
+      field
+    }) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Checkbox, _extends({
+      id: "not-us-resident",
+      text: "I am not a US resident",
+      checked: field.value,
+      error: !!errors[field.name]
+    }, field, {
+      value: "yes"
+    })), /*#__PURE__*/React.createElement(FormError, {
+      show: errors[field.name]
+    }, errors[field.name]))))))));
+  }
+}
+KYCTerms.propTypes = {
+  changeStep: PropTypes.func.isRequired,
+  formik: PropTypes.instanceOf(Object).isRequired
+};
+export default connect(KYCTerms);

package/dist/KYCFlow/_styles.js

@@ -0,0 +1,284 @@
+import styled, { css } from 'styled-components/macro';
+import rwd from 'styles/rwd';
+import Button from 'components/Button/Button.styles';
+import { FormField, FormError } from 'components/Form/Form';
+import { Row } from 'components/Grid/Grid.styles';
+import Text from 'components/Text/Text.styles';
+import Icon, { iconsMap } from 'components/Icon/Icon.style';
+import colors from 'styles/colors';
+export const Wrapper = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 33px 0;
+
+  ${Text} {
+    p {
+      ${rwd.XLarge`
+        font-size: 16px;
+      `}
+    }
+  }
+`;
+export const Header = styled.div`
+  min-height: 82px;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 12px 24px;
+  flex-shrink: 0;
+
+  ${rwd.Large`
+    padding: 21px 64px;
+  `}
+`;
+export const HeaderTitle = styled.div`
+  font-family: 'Open Sans';
+  font-weight: 800;
+  font-size: 22px;
+  line-height: 1.27em;
+  letter-spacing: 0.8px;
+  text-transform: uppercase;
+  ${props => props.withMargin && 'margin-top: 16px;'}
+`;
+export const HeaderButtonWrapper = styled.div`
+  margin: 0 auto;
+  padding: 8px 0;
+
+  & > * {
+    display: inline-block!important;
+  }
+
+  ${rwd.Large`
+    margin-right: 0;
+  `}
+
+  ${Button}${Button}${Button} {
+    margin-right: 16px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+`;
+export const Body = styled.div`
+  padding: 21px 24px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow-y: auto;
+
+  ${props => props.noVerticalPadding && `
+    padding-top: 0!important;
+    padding-bottom: 0!important;
+  `}
+
+  ${props => props.noHorizontalPadding && `
+    padding-left: 0;
+    padding-right: 0;
+  `}
+
+  ${props => props.form && css`
+      padding: 21px 48px;
+      justify-content: flex-start;
+
+      ${Row} {
+        flex-shrink: 0;
+      }
+    `}
+`;
+export const BottomWrapper = styled.div`
+  ${FormField} {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    
+    ${rwd.Medium`
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 44px;
+    `}
+
+    + ${FormField} {
+      padding-top: 32px;
+
+      ${rwd.Medium`
+        padding-top: 0;
+      `}
+    }
+
+    ${FormError} {
+      white-space: nowrap;
+      padding-left: 28px;
+    }
+  }
+`;
+export const BodyTitle = styled.div`
+  text-align: center;
+  margin: 0 auto;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: 1.82;
+  letter-spacing: 2px;
+
+  ${props => props.faceScan && `
+    margin-top: 20px;
+  `}
+`;
+export const ColumnInner = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+
+  ${props => props.verticalPadding && `
+    padding-top: 40px;
+    padding-bottom: 40px;
+  `}
+
+  ${props => props.horizontalPadding && `
+    padding-left: 36px;
+    padding-right: 36px;
+  `}
+
+  ${props => props.formInner && `
+    padding-left: 18px;
+    padding-right: 18px;
+    align-items: stretch;
+  `}
+  
+  ${props => props.withSeparator && `
+    border-bottom: 1px solid ${colors.lightGrey};
+  `}
+
+  ${props => props.verticalCenter && `
+    justify-content: center;
+  `}
+
+  ${props => props.verticalSpaceAround && `
+    justify-content: space-around;
+  `}
+
+  ${rwd.Medium`
+    ${props => props.withSeparator && `
+      border-bottom: 0;
+      border-right: 1px solid ${colors.lightGrey};
+    `}
+  `}
+`;
+export const FileInput = styled.input.attrs(props => ({
+  type: 'file',
+  ...props
+}))`
+  visibility: hidden;
+  position: absolute;
+  width: 0.1px;
+  height: 0.1px;
+  z-index: -1;
+`;
+export const FileInputWrapper = styled(Button).attrs({
+  as: 'label',
+  type: undefined
+})`
+  position: relative;
+  word-break: break-all;
+`;
+export const FileInputRemove = styled(Icon).attrs({
+  icon: iconsMap.trash
+})`
+  position: absolute;
+  top: 50%;
+  right: 0px;
+  transform: translateY(-50%);
+  font-size: 16px;
+  cursor: pointer;
+  transition: 0.3s color;
+  color: ${colors.orangishRed};
+  border-radius: 50%;
+  border: 1px solid ${colors.lightGrey};
+  padding: 10px;
+
+  &:hover {
+    color: ${colors.blue};
+  }
+`;
+export const SuccessMark = styled(Icon).attrs({
+  icon: iconsMap.check
+})`
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+  color: ${colors.freshGreen};
+  margin: auto;
+  font-size: 18px;
+
+  ${props => props.isHidden && `
+    opacity: 0;
+  `}
+`;
+export const FileInputList = styled.ul`
+  list-style-type: none;
+  padding: 0;
+  font-size: 12px;
+  width: 100%;
+`;
+export const FileInputItem = styled.li`
+  padding: 0 46px 0 8px;
+  margin-right: 8px;
+  position: relative;
+  word-break: break-all;
+`;
+const DocumentScanButtonsStyle = css`
+  width: 40px;
+  height: 40px;
+  margin-top: 20px;
+  margin-bottom: 10px;
+  border-radius: 50%;
+  background: ${colors.blue};
+  color: ${colors.white};
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+  font-size: 18px;
+
+  & > svg {
+    fill: ${colors.white};
+    stroke: ${colors.white};
+  }
+`;
+export const RetakeButton = styled.button`
+  ${DocumentScanButtonsStyle};
+
+  & > svg {
+    width: 22px !important;
+    height: 23px !important;
+  }
+`;
+export const DoneButton = styled.button.attrs({
+  className: 'ion ion-md-checkmark'
+})`
+  ${DocumentScanButtonsStyle};
+`;
+export const Mask = styled.div`
+  width: 100%;
+  height: 100%;
+  background: rgba(201, 255, 233, 0.6);
+  position: relative;
+`;
+export const FormBottomRow = styled(Row)`
+  padding-left: 18px;
+  padding-right: 18px;
+  padding-top: 64px;
+`;
+export const FormBottomButtonWrap = styled.div`
+  padding-top: 32px;
+  margin: auto;
+
+  ${rwd.Medium`
+    padding-top: 0;
+    margin-right: 0;
+  `}
+`;

package/dist/KYCFlow/index.js

@@ -0,0 +1,14 @@
+import Terms from './Terms';
+import DocumentUpload from './DocumentUpload';
+import DocumentSelect from './DocumentSelect';
+import DocumentVerificationType from './DocumentVerificationType';
+import DocumentFileUpload from './DocumentFileUpload';
+import DocumentScan from './DocumentScan';
+import DocumentScanUpload from './DocumentScanUpload';
+import DocumentSuccess from './DocumentSuccess';
+import FaceScan from './FaceScan';
+import FaceScanRecognition from './FaceScanRecognition';
+import FaceScanSuccess from './FaceScanSuccess';
+import BasicInfo from './BasicInfo';
+import Confirmation from './Confirmation';
+export { Terms, DocumentUpload, DocumentSelect, DocumentVerificationType, DocumentFileUpload, DocumentScan, DocumentScanUpload, DocumentSuccess, FaceScan, FaceScanRecognition, FaceScanSuccess, BasicInfo, Confirmation };

package/dist/KYCSelectBox/KYCSelectBox.styles.js

@@ -0,0 +1,62 @@
+import styled, { css } from 'styled-components/macro';
+import PropTypes from 'prop-types';
+import rwd from 'styles/rwd';
+import colors from 'styles/colors';
+import Button from 'components/Button/Button.styles';
+import Text from 'components/Text/Text.styles';
+export const KYCSelectBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  padding: 60px 0;
+  height: 100%;
+
+  svg,
+  ${Button},
+  ${Text} {
+    opacity: 1;
+    transition: .3s opacity;
+  }
+
+  ${props => props.withSeparator && `
+    border-bottom: 1px solid ${colors.grey};
+  `}
+
+  ${rwd.Medium`
+    ${props => props.withSeparator && `
+      border-bottom: 0;
+      border-right: 1px solid ${colors.grey};
+    `}
+  `}
+
+  ${props => props.selectedItem && props.selectedItem !== props.name && css`
+      svg,
+      ${Button}, ${Text} {
+        opacity: 0.2;
+      }
+
+      :hover {
+        svg,
+        ${Button}, ${Text} {
+          opacity: 1;
+        }
+      }
+    `}
+
+  ${props => props.isGreyedOut && css`
+      svg,
+      ${Button}, ${Text} {
+        opacity: 0.2;
+      }
+    `}
+`;
+KYCSelectBox.propTypes = {
+  name: PropTypes.string.isRequired,
+  selectedItem: PropTypes.string.isRequired,
+  isGreyedOut: PropTypes.bool
+};
+KYCSelectBox.defaultProps = {
+  isGreyedOut: false
+};
+export default KYCSelectBox;

package/dist/LatestUpdate/LatestUpdate.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { LatestUpdateWrapper, Container, ItemLink, ImageWrap, Image, Tag, Title, Text, ReadMore } from './LatestUpdate.styles';
+export const LatestUpdate = ({
+  image,
+  tag,
+  title,
+  text,
+  url,
+  horizontalPadding
+}) => /*#__PURE__*/React.createElement(Container, {
+  to: url,
+  horizontalPadding: horizontalPadding
+}, /*#__PURE__*/React.createElement(ItemLink, {
+  to: url
+}, image && /*#__PURE__*/React.createElement(ImageWrap, null, /*#__PURE__*/React.createElement(Image, {
+  src: image
+})), tag && /*#__PURE__*/React.createElement(Tag, null, tag), /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement(Text, null, text), /*#__PURE__*/React.createElement(ReadMore, {
+  as: "span"
+}, "read more")));
+LatestUpdate.propTypes = {
+  image: PropTypes.string,
+  tag: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+  horizontalPadding: PropTypes.bool
+};
+LatestUpdate.defaultProps = {
+  image: '',
+  tag: '',
+  horizontalPadding: false
+};
+export { LatestUpdateWrapper };
+export default LatestUpdate;

package/dist/LatestUpdate/LatestUpdate.stories.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import LatestUpdate from './LatestUpdate';
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+// import Avatar from 'static/images/avatar.png'
+// import Shark from 'static/images/shark.jpg'
+
+export default {
+  title: 'Components Library/Latest Update',
+  component: LatestUpdate,
+  argTypes: {
+    image: {
+      type: 'node',
+      defaultValue: {}
+    },
+    tag: {
+      type: 'string',
+      defaultValue: ''
+    },
+    title: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    text: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    url: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    horizontalPadding: {
+      type: 'boolean',
+      defaultValue: false
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(LatestUpdate, args));
+export const LatestUpdateDefault = Template.bind({});
+LatestUpdateDefault.args = {};
+export const LatestUpdateFull = Template.bind({});
+LatestUpdateFull.args = {
+  image: 'https://www.cookingclassy.com/wp-content/uploads/2014/06/chocolate-chip-cookie-16.jpg',
+  tag: 'a tag',
+  title: 'A Title',
+  text: 'Some Text',
+  url: 'www.somelink.com',
+  horizontalPadding: true
+};