@stokr/components-library 3.0.16 → 3.0.18

package/dist/components/Tabs/Tabs.styles.js

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+const StyledTabs = styled.div`
+  position: relative;
+  width: 100%;
+`;
+const Tab = styled.div`
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+`;
+export {
+  StyledTabs,
+  Tab
+};

package/dist/components/TabsNav/TabNav.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { StyledTab, LinkText } from "./TabsNav.styles.js";
+const TabNav = ({ children, isActive = false, onClick = () => {
+}, customStyles, ...props }) => /* @__PURE__ */ jsx(StyledTab, { onClick, isActive, customStyles, ...props, children: /* @__PURE__ */ jsx(LinkText, { children }) });
+TabNav.propTypes = {
+  children: PropTypes.node.isRequired,
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func
+};
+var stdin_default = TabNav;
+export {
+  TabNav,
+  stdin_default as default
+};

package/dist/components/TabsNav/TabsNav.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { default as default2 } from "./TabNav.js";
+import PropTypes from "prop-types";
+import { StyledTabs, Scroll, TabsWrapper } from "./TabsNav.styles.js";
+import { LinkText, StyledTab } from "./TabsNav.styles.js";
+const TabsNav = ({ children, activeTab = 0, noBorderBottom, noWrapperPadding }) => /* @__PURE__ */ jsx(StyledTabs, { noBorderBottom, children: /* @__PURE__ */ jsx(Scroll, { children: /* @__PURE__ */ jsx(TabsWrapper, { noWrapperPadding, children: React__default.Children.map(children, (child) => {
+  if (!React__default.isValidElement(child)) return null;
+  return React__default.createElement(child, {
+    ...child.props,
+    isActive: child.props.tabId === activeTab
+  });
+}) }) }) });
+TabsNav.propTypes = {
+  children: PropTypes.node.isRequired,
+  activeTab: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  noBorderBottom: PropTypes.bool,
+  noWrapperPadding: PropTypes.bool
+};
+var stdin_default = TabsNav;
+export {
+  LinkText,
+  Scroll,
+  StyledTab,
+  StyledTabs,
+  default2 as TabNav,
+  TabsNav,
+  TabsWrapper,
+  stdin_default as default
+};

package/dist/components/TabsNav/TabsNav.styles.js

@@ -0,0 +1,103 @@
+import styled from "styled-components";
+import rwd from "../../styles/rwd.js";
+import theme from "../../styles/theme.js";
+const StyledTabs = styled.div.withConfig({
+  shouldForwardProp: (props) => !["noBorderBottom"].includes(props)
+})`
+  position: relative;
+  border-bottom: 1px solid ${theme.cLightGrey};
+
+  ${(props) => props.noBorderBottom && `
+    border-bottom: none;
+  `}
+`;
+const Scroll = styled.div`
+  position: relative;
+  overflow: hidden;
+  overflow-x: auto;
+`;
+const TabsWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["noWrapperPadding"].includes(props)
+})`
+  position: relative;
+  white-space: nowrap;
+  padding: 12px 0;
+
+  ${rwd.Medium`
+    padding: 24px;
+  `}
+
+  ${(props) => props.noWrapperPadding && `
+    padding: 0 !important;
+  `}
+`;
+const LinkText = styled.span`
+  display: block;
+  position: relative;
+  font-family: 'Open Sans';
+  font-size: 11px;
+  letter-spacing: 2px;
+  line-height: 20px;
+  text-transform: uppercase;
+  padding: 8px 0;
+
+  &:before {
+    content: '';
+    width: 100%;
+    height: 8px;
+    background-color: transparent;
+    position: absolute;
+    top: 100%;
+    left: 0%;
+    transition: background-color 0.2s;
+  }
+`;
+const StyledTab = styled.button.withConfig({
+  shouldForwardProp: (props) => !["isActive", "customStyles"].includes(props)
+})`
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  outline: none;
+  visibility: visible;
+  padding: 12px;
+  color: ${() => theme.cBlack};
+  transition: opacity 0.2s;
+
+  ${rwd.Medium`
+    padding: 24px;
+  `}
+
+  ${rwd.Large`
+    padding: 32px 40px;
+  `}
+
+  &:focus ,
+  &:hover {
+    opacity: 0.6;
+  }
+
+  ${(props) => props.isActive && `
+    &:focus ,
+    &:hover {
+      opacity: 1;
+    }
+
+    ${LinkText} {
+      font-weight: bold;
+
+      &:before {
+        background-color: ${theme.cPrimary}!important;
+      }
+    }
+  `}
+
+  ${(props) => props.customStyles}
+`;
+export {
+  LinkText,
+  Scroll,
+  StyledTab,
+  StyledTabs,
+  TabsWrapper
+};

package/dist/components/TeamOverview/TeamOverview.js

@@ -0,0 +1,80 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import stdin_default from "../SvgIcons/AdminBadgeSvg.js";
+import "../SvgIcons/SocialInstagram.js";
+import { Container, ImageWrapper, Avatar, ContentWrapper, ContentGroup, SmallHeader, Name, PersonPosition, PersonEmail, ProjectStats, ProjectStat, StatLabel, StatValue } from "./TeamOverview.styles.js";
+import avatarPlaceholder from "../../static/images/avatar-placeholder.png.js";
+const TeamOverview = ({
+  name = "",
+  memberRole = "",
+  avatar = "",
+  position = "",
+  email = "",
+  projectName = "",
+  stats = []
+}) => {
+  const [profilePicture, setProfilePicture] = useState(avatarPlaceholder);
+  const getProfilePicture = () => {
+    return new Promise((resolve, reject) => {
+      try {
+        const http = new XMLHttpRequest();
+        http.open("HEAD", avatar, false);
+        http.send();
+        if (http.status !== 404) {
+          resolve(avatar);
+        } else {
+          resolve(avatarPlaceholder);
+        }
+      } catch (_error) {
+        reject(avatarPlaceholder);
+      }
+    });
+  };
+  useEffect(() => {
+    const getPicture = async () => {
+      const picture = await getProfilePicture();
+      setProfilePicture(picture);
+    };
+    getPicture();
+  }, []);
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsx(ImageWrapper, { children: /* @__PURE__ */ jsx(Avatar, { src: profilePicture, alt: "avatar" }) }),
+    /* @__PURE__ */ jsxs(ContentWrapper, { children: [
+      /* @__PURE__ */ jsxs(ContentGroup, { children: [
+        /* @__PURE__ */ jsxs(SmallHeader, { children: [
+          memberRole === "company_sa" && /* @__PURE__ */ jsx(stdin_default, {}),
+          /* @__PURE__ */ jsx("span", { children: memberRole })
+        ] }),
+        /* @__PURE__ */ jsx(Name, { children: name }),
+        /* @__PURE__ */ jsx(PersonPosition, { children: position }),
+        /* @__PURE__ */ jsx(PersonEmail, { children: email })
+      ] }),
+      /* @__PURE__ */ jsxs(ContentGroup, { children: [
+        /* @__PURE__ */ jsx(SmallHeader, { children: /* @__PURE__ */ jsx("span", { children: "Project" }) }),
+        /* @__PURE__ */ jsx(Name, { children: projectName }),
+        stats && /* @__PURE__ */ jsx(ProjectStats, { children: stats.map((stat) => /* @__PURE__ */ jsxs(ProjectStat, { children: [
+          /* @__PURE__ */ jsx(StatLabel, { children: stat.name }),
+          /* @__PURE__ */ jsx(StatValue, { children: stat.count })
+        ] }, stat.name)) })
+      ] })
+    ] })
+  ] });
+};
+TeamOverview.propTypes = {
+  name: PropTypes.string,
+  memberRole: PropTypes.string,
+  avatar: PropTypes.string,
+  position: PropTypes.string,
+  email: PropTypes.string,
+  projectName: PropTypes.string,
+  stats: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      count: PropTypes.number
+    })
+  )
+};
+export {
+  TeamOverview
+};

package/dist/components/TeamOverview/TeamOverview.styles.js

@@ -0,0 +1,167 @@
+import styled from "styled-components";
+import rwd from "../../styles/rwd.js";
+import theme from "../../styles/theme.js";
+const Container = styled.div`
+  position: relative;
+  width: 100%;
+  font-size: 0;
+
+  @media screen and (min-width: 768px) and (max-width: 1000px) {
+    display: flex;
+    flex-direction: column;
+  }
+`;
+const ImageWrapper = styled.div`
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  width: 160px;
+  height: 160px;
+  border-radius: 80px;
+  box-shadow: none;
+  border: 1px solid rgb(225, 225, 225);
+
+  ${rwd.Medium`
+    z-index: 1;
+    position: relative;
+    display: inline-block;
+    vertical-align: top;
+    margin: 0;
+    margin-right: -160px;
+  `}
+
+  @media screen and (min-width: 768px) and (max-width: 1000px) {
+    margin: 0 auto;
+  }
+`;
+const Avatar = styled.img`
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center center;
+`;
+const ContentWrapper = styled.div`
+  display: block;
+  width: 100%;
+
+  ${rwd.Medium`
+    z-index: 0;
+    position: relative;
+    display: inline-block;
+    vertical-align: top;
+    padding-left: 160px;
+  `}
+
+  @media screen and (min-width: 768px) and (max-width: 900px) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  @media screen and (min-width: 768px) and (max-width: 1000px) {
+    padding-left: 0;
+  }
+`;
+const Name = styled.h3`
+  position: relative;
+  font-family: 'Open Sans';
+  font-weight: 800;
+  font-size: 28px;
+  line-height: 36px;
+  letter-spacing: 1.2px;
+  margin: 0;
+  text-transform: uppercase;
+  margin-top: 4px;
+`;
+const ContentGroup = styled.div`
+  display: block;
+  padding-top: 32px;
+
+  ${rwd.Medium`
+    display: inline-block;
+    vertical-align: top;
+    width: 50%;
+    padding-top: 0;
+    padding-left: 50px;
+  `}
+
+  @media screen and (min-width: 768px) and (max-width: 900px) {
+    width: 100%;
+  }
+
+  @media screen and (min-width: 768px) and (max-width: 1000px) {
+    margin-top: 32px;
+    padding-left: 0;
+  }
+`;
+const SmallHeader = styled.div`
+  display: block;
+
+  svg {
+    display: inline-block;
+    vertical-align: middle;
+    fill: ${() => theme.cPrimary};
+    margin: -4px 0;
+    margin-right: 12px;
+  }
+
+  span {
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 11px;
+    line-height: 16px;
+    text-transform: uppercase;
+    padding: 4px 0;
+  }
+`;
+const ProjectStats = styled.div`
+  display: block;
+  position: relative;
+  margin-top: 25px;
+`;
+const ProjectStat = styled.div`
+  display: inline-block;
+  vertical-align: top;
+  width: 50%;
+`;
+const StatLabel = styled.div`
+  font-size: 11px;
+  line-height: 16px;
+  text-transform: uppercase;
+  padding: 4px 0;
+`;
+const StatValue = styled.div`
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 16px;
+  margin-top: 4px;
+`;
+const PersonPosition = styled.div`
+  font-weight: bold;
+  font-size: 16px;
+  line-height: 24px;
+  text-transform: uppercase;
+  color: ${() => theme.cPrimary};
+  margin-top: 15px;
+`;
+const PersonEmail = styled.div`
+  font-weight: 300;
+  font-size: 14px;
+  line-height: 24px;
+  margin-top: 20px;
+`;
+export {
+  Avatar,
+  Container,
+  ContentGroup,
+  ContentWrapper,
+  ImageWrapper,
+  Name,
+  PersonEmail,
+  PersonPosition,
+  ProjectStat,
+  ProjectStats,
+  SmallHeader,
+  StatLabel,
+  StatValue
+};

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
+};