@stokr/components-library 3.0.16 → 3.0.17

package/dist/components/TermsModal/TermsModal.js

@@ -0,0 +1,145 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import { Formik } from "formik";
+import * as Yup from "yup";
+import parse from "html-react-parser";
+import stdin_default$1 from "../ComponentScroll/ComponentScroll.js";
+import { Modal } from "../Modal/Modal.js";
+import { Row, Column } from "../Grid/Grid.styles.js";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import { Wrapper, Header, HeaderTitle, Body } from "./_styles.js";
+import styled from "styled-components";
+import theme from "../../styles/theme.js";
+import { ModalInner, ModalBack } from "../Modal/Modal.styles.js";
+const StyledPrivacyText = styled.div.withConfig({
+  shouldForwardProp: (props) => !["thridParties"].includes(props)
+})`
+  && {
+    width: 100%;
+
+    p {
+      color: ${theme.cBlack};
+      font-size: 16px;
+      line-height: 1.5;
+      font-weight: 300;
+      margin: 0;
+      padding-bottom: 10px;
+      font-style: normal;
+      font-stretch: normal;
+      letter-spacing: 0.6px;
+    }
+    a {
+      text-decoration: none;
+      color: ${theme.cBlack};
+      font-weight: 300;
+      word-break: break-all !important;
+    }
+
+    h4 {
+      font-size: 17.2px !important;
+      font-weight: 700 !important;
+      line-height: 1.28571em;
+      letter-spacing: normal;
+      position: relative;
+      margin-top: 29px;
+      margin-bottom: 16px;
+    }
+
+    table {
+      border-collapse: collapse;
+      margin: 32px 0;
+      font-size: 16px;
+
+      tr {
+        td:first-child {
+          width: ${(props) => props.thirdParties ? "30%" : "40%"};
+          text-align: center;
+        }
+        td:last-child {
+          width: ${(props) => props.thirdParties ? "70%" : "60%"};
+        }
+      }
+
+      td,
+      th {
+        border: 1px solid #2e2e2e;
+        padding: 10px;
+
+        li {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    ul {
+      list-style-type: disclosure-closed;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    li {
+      padding: 0 0 0 32px;
+      color: ${theme.cBlack};
+      font-size: 0.75rem;
+      letter-spacing: normal;
+      line-height: 1.31rem;
+      font-weight: 200;
+      margin-bottom: 16px;
+      position: relative;
+      /* top: 1px; */
+
+      font-size: 16px !important;
+      font-weight: 300;
+      font-style: normal;
+      font-stretch: normal;
+      line-height: 1.5 !important;
+      letter-spacing: 0.6px;
+
+      a {
+        word-break: break-all !important;
+      }
+
+      &:before {
+        content: '';
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        background: #0050ca;
+        border-radius: 100px;
+        left: 0;
+        top: 3px;
+        margin-top: 0.4rem;
+      }
+    }
+  }
+`;
+class TermsModal extends React__default.Component {
+  // state = { popupOpen: false }
+  validationSchema = Yup.object().shape({
+    termsAccepted: Yup.bool().test("termsAccepted", "Agreement is required", (value) => value === true).required("Agreement is required")
+  });
+  // handlePopup = (isOpen, values) => {
+  //   const buttonDisabled = !values.termsAccepted
+  //   this.setState({
+  //     popupOpen: buttonDisabled ? isOpen : false,
+  //   })
+  // }
+  render() {
+    const { isModalOpen, onModalClose, onFormSend, onModalSwitch, termsData } = this.props;
+    return /* @__PURE__ */ jsx(Formik, { onSubmit: onFormSend, validationSchema: this.validationSchema, children: () => {
+      return /* @__PURE__ */ jsx(Modal, { isOpen: isModalOpen, onClose: onModalClose, children: /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Column, { children: /* @__PURE__ */ jsxs(ModalInner, { noPadding: true, isMobile: true, children: [
+        /* @__PURE__ */ jsx(ModalBack, { onClick: onModalSwitch }),
+        /* @__PURE__ */ jsxs(Wrapper, { children: [
+          /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(HeaderTitle, { children: "STOKR PRIVACY TERMS" }) }),
+          /* @__PURE__ */ jsx(Body, { noHorizontalPadding: true, children: /* @__PURE__ */ jsx(stdin_default$1, { children: /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingVertical: true, children: /* @__PURE__ */ jsx(StyledPrivacyText, { children: termsData && parse(termsData.text) }) }) }) })
+        ] })
+      ] }) }) }) });
+    } });
+  }
+}
+var stdin_default = TermsModal;
+export {
+  TermsModal,
+  stdin_default as default
+};

package/dist/components/TermsModal/_styles.js

@@ -0,0 +1,313 @@
+import styled, { css } from "styled-components";
+import rwd from "../../styles/rwd.js";
+import { Button } from "../Button/Button.styles.js";
+import "../Form/Form.js";
+import { Row } from "../Grid/Grid.styles.js";
+import { Text } from "../Text/Text.styles.js";
+import { Icon, iconsMap } from "../Icon/Icon.style.js";
+import { FormField, FormError } from "../Form/Form.styles.js";
+const Wrapper = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 33px 0;
+
+  ${Text} {
+    p {
+      ${rwd.XLarge`
+        font-size: 16px;
+      `}
+    }
+  }
+`;
+const Header = styled.div`
+  min-height: 82px;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 12px 24px;
+  flex-shrink: 0;
+
+  ${rwd.Large`
+    padding: 21px 64px;
+  `}
+`;
+const HeaderTitle = styled.div.withConfig({
+  shouldForwardProp: (props) => !["withMargin"].includes(props)
+})`
+  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;"}
+`;
+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;
+    }
+  }
+`;
+const Body = styled.div.withConfig({
+  shouldForwardProp: (props) => !["noVerticalPadding", "noHorizontalPadding", "form"].includes(props)
+})`
+  padding: 21px 24px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow-y: auto;
+
+  @media screen and (max-width: 767px) {
+    display: flex;
+    justify-content: space-between;
+    padding: 0;
+  }
+
+  ${(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;
+      }
+    `}
+`;
+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;
+    }
+  }
+`;
+styled.div.withConfig({
+  shouldForwardProp: (props) => !["faceScan"].includes(props)
+})`
+  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;
+  `}
+`;
+styled.div.withConfig({
+  shouldForwardProp: (props) => ![
+    "verticalPadding",
+    "horizontalPadding",
+    "formInner",
+    "withSeparator",
+    "verticalCenter",
+    "verticalSpaceAround"
+  ].includes(props)
+})`
+  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 ${props.theme.cLightGrey};
+  `}
+
+  ${(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 ${props.theme.cLightGrey};
+    `}
+  `}
+`;
+styled.input.attrs((props) => ({
+  type: "file",
+  ...props
+}))`
+  visibility: hidden;
+  position: absolute;
+  width: 0.1px;
+  height: 0.1px;
+  z-index: -1;
+`;
+styled(Button).attrs({
+  as: "label",
+  type: void 0
+})`
+  position: relative;
+  word-break: break-all;
+`;
+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: ${(props) => props.theme.cWarning};
+  border-radius: 50%;
+  border: 1px solid ${(props) => props.theme.cLightGrey};
+  padding: 10px;
+
+  &:hover {
+    color: ${(props) => props.theme.cPrimary};
+  }
+`;
+styled(Icon).withConfig({
+  shouldForwardProp: (props) => !["isHidden"].includes(props)
+}).attrs({
+  icon: iconsMap.check
+})`
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+  color: ${(props) => props.theme.cSuccess};
+  margin: auto;
+  font-size: 18px;
+
+  ${(props) => props.isHidden && `
+    opacity: 0;
+  `}
+`;
+styled.ul`
+  list-style-type: none;
+  padding: 0;
+  font-size: 12px;
+  width: 100%;
+`;
+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: ${(props) => props.theme.cPrimary};
+  color: ${(props) => props.theme.cWhite};
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+  font-size: 18px;
+
+  & > svg {
+    fill: ${(props) => props.theme.cWhite};
+    stroke: ${(props) => props.theme.cWhite};
+  }
+`;
+styled.button`
+  ${DocumentScanButtonsStyle};
+
+  & > svg {
+    width: 22px !important;
+    height: 23px !important;
+  }
+`;
+styled.button.attrs({
+  className: "ion ion-md-checkmark"
+})`
+  ${DocumentScanButtonsStyle};
+`;
+styled.div`
+  width: 100%;
+  height: 100%;
+  background: rgba(201, 255, 233, 0.6);
+  position: relative;
+`;
+styled(Row)`
+  padding-left: 18px;
+  padding-right: 18px;
+  padding-top: 64px;
+`;
+styled.div`
+  padding-top: 32px;
+  margin: auto;
+
+  ${rwd.Medium`
+    padding-top: 0;
+    margin-right: 0;
+  `}
+`;
+export {
+  Body,
+  Header,
+  HeaderTitle,
+  Wrapper
+};

package/dist/components/Text/Text.styles.js

@@ -0,0 +1,220 @@
+import styled from "styled-components";
+import rwd from "../../styles/rwd.js";
+import theme from "../../styles/theme.js";
+const Text = styled.div.withConfig({
+  shouldForwardProp: (props) => ![
+    "fullWidth",
+    "center",
+    "withMarginBottom",
+    "withMarginRight",
+    "blockchainLoadingMsg",
+    "responsiveFont",
+    "small",
+    "success"
+  ].includes(props)
+})`
+  display: block;
+
+  ${({ withMarginBottom }) => withMarginBottom && `
+      margin-bottom: 32px;
+    `}
+
+  ${({ withMarginRight }) => withMarginRight && `
+      margin-right: 20px;
+    `}
+
+  ${(props) => props.fullWidth && "width: 100%;"}
+
+  ${(props) => props.center && `
+    text-align: center;
+  `}
+
+ 
+
+  h1 {
+    font-family: 'Open Sans';
+    font-weight: 800;
+    font-size: 22px;
+    line-height: 1.18;
+    letter-spacing: 0.8px;
+    text-transform: uppercase;
+    margin-top: 1em;
+    margin-bottom: 32px;
+
+    ${rwd.Medium`
+      font-size: 34px;
+      letter-spacing: 1.5px;
+      margin-bottom: 45px;
+    `}
+  }
+
+  h2 {
+    font-family: 'Open Sans';
+    font-weight: 300;
+    font-size: 34px;
+    line-height: 1.18em;
+    letter-spacing: 1.5px;
+    margin-top: 1em;
+    margin-bottom: 0.18em;
+
+    ${rwd.Medium`
+      font-size: 42px;
+    `}
+
+    ${rwd.Large`
+      font-size: 50px;
+    `}
+  }
+
+  h4 {
+    font-family: 'Open Sans';
+    font-weight: 300;
+    font-size: 17px;
+    line-height: 1.27em;
+    letter-spacing: 0.8px;
+    margin-top: 1em;
+    margin-bottom: 0.27em;
+    opacity: 0.5;
+
+    ${rwd.Medium`
+      //font-size: 34px;
+    `}
+
+    ${(props) => props.blockchainLoadingMsg && `
+      width: 100% !important;
+    `}
+  }
+
+  h3 {
+    font-family: 'Open Sans';
+    font-weight: 800;
+    font-size: 22px;
+    line-height: 1.27em;
+    letter-spacing: 0.8px;
+    margin-top: 1em;
+    margin-bottom: 0.27em;
+    text-transform: uppercase;
+
+    ${rwd.Medium`
+      font-size: 34px;
+    `}
+
+    @media screen and (max-width: 991px) and (min-width: 768px) {
+      ${(props) => props.responsiveFont && `
+          font-size: 22px;
+        `}
+    }
+  }
+
+  h5 {
+    font-family: 'Open Sans';
+    font-weight: 800;
+    font-size: 22px;
+    line-height: 1.27em;
+    letter-spacing: 0.8px;
+    text-transform: uppercase;
+  }
+
+  p {
+    font-family: 'Open Sans';
+    font-weight: 300;
+    font-size: 16px;
+    line-height: 1.5em;
+    letter-spacing: 0.6px;
+    margin: 1em 0;
+
+    ${(props) => props.small && `
+    font-size:12px;
+    `}
+
+    ${rwd.XLarge`
+      font-size: 20px;
+
+      ${(props) => props.small && `
+        font-size:16px;
+      `}
+
+    `}
+
+    a {
+      text-decoration: underline;
+      transition: color 0.2s;
+      color: inherit;
+
+      &:hover {
+        color: ${() => theme.cText};
+      }
+    }
+
+    ${(props) => props.success && `
+      color: ${theme.cProgressDone};
+    `}
+  }
+
+  ul {
+    margin: 16px;
+
+    li {
+      font-size: 14px;
+      font-weight: 300;
+      font-style: normal;
+      font-stretch: normal;
+      line-height: 2;
+      letter-spacing: 0.6px;
+    }
+
+    @media screen and (max-width: 479px) {
+      padding-left: 15px;
+    }
+  }
+
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+`;
+const Caption = styled.p.withConfig({
+  shouldForwardProp: (props) => !["center", "link"].includes(props)
+})`
+  &&& {
+    font-family: 'Open Sans';
+    font-weight: 300;
+    font-size: 9px;
+    line-height: 1.78em;
+    letter-spacing: 0.4px;
+
+    //this is for the checkboxes and html parser in VD
+    p {
+      font-size: 9px;
+    }
+
+    ${rwd.Large`
+      font-size: 12px;
+       
+      p {
+        font-size: 12px;
+      }
+    `}
+
+    ${(props) => props.center && "text-align: center;"}
+    ${(props) => props.link && "margin-top: 36px;"}
+    
+    a {
+      text-decoration: underline;
+      transition: color 0.2s;
+      color: ${() => theme.cPrimary};
+
+      &:hover {
+        color: ${() => theme.cText};
+      }
+    }
+  }
+`;
+Text.Caption = Caption;
+export {
+  Text,
+  Text as default
+};