@stokr/components-library 3.0.16 → 3.0.17

package/dist/components/Modal/Modal.js

@@ -0,0 +1,119 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { Portal } from "react-portal";
+import { useState, useEffect } from "react";
+import { ModalRoot, Dimmer, Box, ModalClose } from "./Modal.styles.js";
+import { ModalBack, ModalInner, ModalInnerSmartContractAddress, ModalInnerWithBorder, ModalLink, ModalLinkWrap, ModalScroll } from "./Modal.styles.js";
+import { IoniconsStyles } from "../../styles/ioniconsStyles.js";
+const timeout = 300;
+const Modal = ({
+  children,
+  fullscreen = false,
+  kyc = false,
+  thin = false,
+  isOpen,
+  onClose,
+  className = "",
+  isRegisterEntity,
+  background,
+  maxHeight,
+  boxStyles,
+  maxWidth
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [shouldRender, setShouldRender] = useState(false);
+  useEffect(() => {
+    if (isOpen) {
+      setShouldRender(true);
+      const timer = setTimeout(() => setIsVisible(true), 10);
+      return () => clearTimeout(timer);
+    } else {
+      setIsVisible(false);
+      const timer = setTimeout(() => setShouldRender(false), timeout);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (isOpen) {
+      const scrollY = window.scrollY;
+      const bodyWidth = document.body.offsetWidth;
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+      document.documentElement.style.setProperty("--scrollbar-compensation", `${scrollbarWidth}px`);
+      document.body.style.width = `${bodyWidth}px`;
+      document.body.style.position = "fixed";
+      document.body.style.top = `-${scrollY}px`;
+      document.body.style.left = "0";
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      if (isOpen) {
+        const scrollY = Math.abs(parseInt(document.body.style.top || "0", 10));
+        document.documentElement.style.setProperty("--scrollbar-compensation", "0px");
+        document.body.style.width = "";
+        document.body.style.position = "";
+        document.body.style.top = "";
+        document.body.style.left = "";
+        document.body.style.overflow = "";
+        window.scrollTo(0, scrollY);
+      }
+    };
+  }, [isOpen]);
+  if (!shouldRender) return null;
+  return /* @__PURE__ */ jsxs(Portal, { isOpened: isOpen, children: [
+    /* @__PURE__ */ jsx(IoniconsStyles, {}),
+    /* @__PURE__ */ jsx(
+      ModalRoot,
+      {
+        className,
+        style: {
+          opacity: isVisible ? 1 : 0,
+          transition: `opacity ${timeout}ms ease-in-out`
+        },
+        children: /* @__PURE__ */ jsx(Dimmer, { background, open: isOpen, kyc, onClose, children: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            kyc,
+            fullscreen,
+            thin,
+            isRegisterEntity,
+            style: boxStyles,
+            maxHeight,
+            maxWidth,
+            children: [
+              /* @__PURE__ */ jsx(ModalClose, { onClick: onClose }),
+              children
+            ]
+          }
+        ) })
+      }
+    )
+  ] });
+};
+Modal.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  className: PropTypes.string,
+  fullscreen: PropTypes.bool,
+  kyc: PropTypes.bool,
+  thin: PropTypes.bool,
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  background: PropTypes.string,
+  boxStyle: PropTypes.object,
+  maxHeight: PropTypes.string,
+  /** Max width limit in pixels (e.g., '1200px'). Uses min(percentage, maxWidth) */
+  maxWidth: PropTypes.string
+};
+export {
+  Modal,
+  ModalBack,
+  Box as ModalBox,
+  ModalClose,
+  Dimmer as ModalDimmer,
+  ModalInner,
+  ModalInnerSmartContractAddress,
+  ModalInnerWithBorder,
+  ModalLink,
+  ModalLinkWrap,
+  ModalRoot,
+  ModalScroll
+};

package/dist/components/Modal/Modal.styles.js

@@ -0,0 +1,450 @@
+import styled, { css } from "styled-components";
+import { Link } from "react-router-dom";
+import grid from "../../styles/grid.js";
+import rwd from "../../styles/rwd.js";
+import { colors } from "../../styles/colors.js";
+const ModalRoot = styled.div`
+  z-index: 1000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+`;
+const Dimmer = styled.div.withConfig({
+  shouldForwardProp: (props) => !["background", "kyc"].includes(props)
+})`
+  position: relative;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: ${(props) => props.background ? props.background : "rgba(0, 0, 0, 0.7)"};
+  background-size: cover;
+  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;
+  }
+`;
+const Box = styled.div.withConfig({
+  shouldForwardProp: (props) => !["maxHeight", "fullscreen", "kyc", "maxWidth", "thin", "isRegisterEntity"].includes(props)
+})`
+  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);
+  max-height: ${(props) => props.maxHeight || "unset"};
+
+  ${(props) => props.fullscreen && `
+    height: 90vh;
+  `}
+
+  ${(props) => props.kyc && `
+    width: 100vw;
+    height: 100vh;
+    max-width: 1024px!important;
+    max-height: 768px!important;
+  `}
+
+  ${rwd.Medium`
+    max-width: min(${grid(12)}, ${(props) => props.maxWidth || "1200px"});
+
+    ${(props) => props.thin && `
+      max-width: min(${grid(8)}, ${props.maxWidth || "800px"});
+    `}
+  `}
+
+  ${rwd.XLarge`
+    max-width: min(${grid(12)}, ${(props) => props.maxWidth || "1500px"});
+
+    ${(props) => props.thin && `
+      max-width: min(${grid(8)}, ${props.maxWidth || "800px"});
+    `}
+  `}
+
+  @media screen and (max-width: 767px) {
+    min-height: 100vh;
+  }
+
+  ${({ isRegisterEntity }) => isRegisterEntity && css`
+      max-width: 55% !important;
+      height: 65vh;
+    `}
+
+  ${(props) => props.maxWidth && `
+    max-width: ${props.maxWidth} !important;
+  `}
+`;
+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;
+`;
+const ModalInnerWithBorder = styled.div.withConfig({
+  shouldForwardProp: (props) => !["bottomRadius0", "topRadius0", "marginTop0", "borderTopNone", "textAlignRight", "paddingSmall"].includes(props)
+})`
+  border-radius: 10px;
+  border: 1px solid ${colors.lightGrey};
+  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.borderTopNone && `
+    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;
+  }
+`;
+const ModalInner = styled.div.withConfig({
+  shouldForwardProp: (props) => !["isMobile", "center", "background", "modalBot", "modalTop", "left", "noPadding", "noPaddingHorizontal"].includes(
+    props
+  )
+})`
+  height: 100%;
+  padding: 40px ${grid(1)};
+  display: flex;
+  flex-direction: column;
+
+  @media screen and (max-width: 767px) {
+    height: ${({ isMobile }) => isMobile && "100vh"};
+  }
+
+  ${(props) => props.center && `
+    text-align: center;
+  `}
+
+  ${(props) => props.background && `
+    background-color: ${colors.lightGrey};
+  `}
+
+  ${(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.lightGrey};
+    `}
+
+    /* missing tiny */
+  `}
+
+  ${rwd.XLarge`
+    padding: 53px ${grid(1, 10)};
+
+    ${(props) => props.left && `
+      padding: 88px ${grid(1, 10)};
+    `}
+
+    ${(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;
+  `}
+`;
+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;
+    }
+  `}
+`;
+const ModalBack = styled.i.withConfig({
+  shouldForwardProp: (props) => !["hide"].includes(props)
+}).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;
+    }
+  `}
+`;
+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};
+  }
+`;
+const ModalLink = styled(Link)`
+  background: transparent;
+  border: none;
+  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%;
+    }
+  }
+`;
+const ModalWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+styled.div`
+  font-family: 'Open Sans';
+  font-weight: 800;
+  font-size: 22px;
+  line-height: 1.27em;
+  letter-spacing: 0.8px;
+  text-transform: uppercase;
+`;
+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.lightGrey};
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: ${colors.orangishRed};
+  }
+
+  &::-webkit-scrollbar-thumb:window-inactive {
+    background-color: ${colors.orangishRedDark};
+  }
+`;
+styled.div`
+  & + & {
+    padding-top: 40px;
+
+    ${rwd.Medium`
+      padding-top: 53px;
+    `}
+  }
+`;
+export {
+  Box,
+  Dimmer,
+  ModalBack,
+  ModalClose,
+  ModalInner,
+  ModalInnerSmartContractAddress,
+  ModalInnerWithBorder,
+  ModalLink,
+  ModalLinkWrap,
+  ModalRoot,
+  ModalScroll,
+  ModalWrapper
+};