@stokr/components-library 3.0.16 → 3.0.17

package/dist/components/SvgIcons/UploadSvg.js

@@ -0,0 +1,12 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+const UploadSvg = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "40.812", height: "49.5", children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "#9b9b9b", strokeMiterlimit: "10", strokeWidth: "4", children: [
+  /* @__PURE__ */ jsx("path", { "data-name": "Stroke 1", d: "M7.764 30.15l-6.35 6.35" }),
+  /* @__PURE__ */ jsx("path", { "data-name": "Stroke 3", d: "M39.398 36.5L20.35 17.452l-7.936 7.937" }),
+  /* @__PURE__ */ jsx("path", { "data-name": "Stroke 5", d: "M20.914 17.532V49.5" }),
+  /* @__PURE__ */ jsx("path", { "data-name": "Stroke 8", d: "M39.514 2h-38.1" })
+] }) });
+var stdin_default = UploadSvg;
+export {
+  stdin_default as default
+};

package/dist/components/SvgIcons/VerifiedBadge.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const VerifiedBadge = () => /* @__PURE__ */ jsx("svg", { width: "90", height: "30", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M84.707 1H5.293A4.3 4.3 0 0 0 1 5.308v19.384A4.3 4.3 0 0 0 5.293 29h79.414A4.3 4.3 0 0 0 89 24.692V5.308A4.3 4.3 0 0 0 84.707 1zM87 24.818C87 26.023 86.036 27 84.846 27H5.154C3.964 27 3 26.023 3 24.818V5.182C3 3.977 3.964 3 5.154 3h79.692C86.036 3 87 3.977 87 5.182v19.636zM53 15c0 .552-.481 1-1.075 1h-40.85C10.481 16 10 15.552 10 15s.481-1 1.075-1h40.85c.594 0 1.075.448 1.075 1zm26.54-4.832c.473.316.602.953.29 1.428l-5.96 8.949c-.183.27-.482.439-.808.455-.307 0-.6-.136-.796-.372l-3.033-3.58a1.056 1.056 0 1 1 1.646-1.324l2.07 2.514 5.174-7.79a1.035 1.035 0 0 1 1.417-.28z",
+    fill: "#FFF",
+    fillRule: "nonzero",
+    stroke: "#EE220D",
+    strokeWidth: ".5"
+  }
+) });
+var stdin_default = VerifiedBadge;
+export {
+  stdin_default as default
+};

package/dist/components/Switch/Switch.js

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { Container, Value, Indicator } from "./Switch.styles.js";
+const Switch = (props) => {
+  const {
+    value1,
+    value2,
+    handleChange,
+    mobile = false,
+    dark = false,
+    revertToPrevious,
+    value1Color,
+    value2Color,
+    hideValues = false,
+    indicatorStyle
+  } = props;
+  const [value, setValue] = useState();
+  useEffect(() => {
+    setValue(props.value);
+  }, [props.value]);
+  const onIndicatorClick = () => {
+    let valueToSet = value === value1 ? value2 : value1;
+    setValue(valueToSet);
+    handleChange(valueToSet);
+    if (revertToPrevious) {
+      setTimeout(() => {
+        setValue(value);
+      }, 1e3);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Container, { mobile, children: [
+    !hideValues && /* @__PURE__ */ jsx(Value, { active: value === value1, onClick: () => setValue(value1), dark, children: value1 }),
+    /* @__PURE__ */ jsx(
+      Indicator,
+      {
+        value1: value === value1,
+        value2: value === value2,
+        onClick: onIndicatorClick,
+        dark,
+        style: indicatorStyle,
+        value1Color,
+        value2Color
+      }
+    ),
+    !hideValues && /* @__PURE__ */ jsx(Value, { active: value === value2, onClick: () => setValue(value2), dark, children: value2 })
+  ] });
+};
+Switch.propTypes = {
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  value1: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  value2: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  handleChange: PropTypes.func.isRequired,
+  mobile: PropTypes.bool,
+  dark: PropTypes.bool,
+  hideValues: PropTypes.bool,
+  indicatorStyle: PropTypes.object
+};
+var stdin_default = Switch;
+export {
+  Switch,
+  stdin_default as default
+};

package/dist/components/Switch/Switch.styles.js

@@ -0,0 +1,126 @@
+import styled from "styled-components";
+import theme from "../../styles/theme.js";
+const switchWidth = 34;
+const Container = styled.div.withConfig({
+  shouldForwardProp: (props) => !["mobile"].includes(props)
+})`
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  font-size: 0;
+  text-align: center;
+
+  ${(props) => props.mobile && `
+    display: block;
+    margin: 0;
+    padding: 18px 0;
+  `}
+`;
+const Value = styled.button.withConfig({
+  shouldForwardProp: (props) => !["active", "dark"].includes(props)
+})`
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 11px;
+  line-height: 16px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  padding: 2px 0;
+  opacity: 0.5;
+  color: ${() => theme.cBlack};
+  transition:
+    opacity 0.2s,
+    color 0.2s;
+  cursor: pointer;
+
+  &:hover {
+    color: ${() => theme.cPrimary};
+  }
+
+  ${(props) => props.active && `
+    opacity: 1;
+  `}
+
+  ${(props) => props.dark && `
+    color: ${theme.cPrimary};
+
+    &:hover {
+      color: ${theme.cBlack};
+    }
+  `};
+`;
+const Indicator = styled.div.withConfig({
+  shouldForwardProp: (props) => !["dark", "value1", "value1Color", "value2", "value2Color"].includes(props)
+})`
+  display: inline-block;
+  vertical-align: middle;
+  width: ${switchWidth}px;
+  height: 16px;
+  border-radius: 8px;
+  background-color: ${() => theme.cGrey};
+  margin: 0 16px;
+  position: relative;
+  outline: 0;
+  cursor: pointer;
+
+  &:before {
+    content: '';
+    display: block;
+    width: 18px;
+    height: 18px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -9px;
+    margin-left: -9px;
+    border-radius: 9px;
+    background-color: ${() => theme.cBlack};
+    transform: translateX(0);
+    transition:
+      transform 0.2s,
+      background-color 0.2s;
+  }
+
+  &:hover {
+    &:before {
+      background-color: ${() => theme.cPrimary};
+    }
+  }
+
+  ${(props) => props.dark && `
+    background-color: ${theme.cGrey2};
+
+    &:before {
+      background-color: ${theme.cPrimary};
+    }
+
+    &:hover {
+      &:before {
+        background-color: ${theme.cBlack};
+      }
+    }
+  `}
+
+  ${(props) => props.value1 && `
+    &:before {
+      transform: translateX(-${switchWidth / 2 - 8}px);
+    }
+    ${props.value1Color && `
+       background-color: ${props.value1Color};
+    `}
+  `}
+
+  ${(props) => props.value2 && `
+    &:before {
+      transform: translateX(${switchWidth / 2 - 8}px);
+    }
+    ${props.value2Color && `
+       background-color: ${props.value2Color};
+    `}
+  `}
+`;
+export {
+  Container,
+  Indicator,
+  Value
+};

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,54 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import PropTypes from "prop-types";
+import { TransitionGroup, Transition } from "../../utils/transition.js";
+import { StyledTabs } from "./Tabs.styles.js";
+import { Tab } from "./Tabs.styles.js";
+const timeout = 300;
+const getTransitionStyles = {
+  entering: {
+    position: "absolute",
+    opacity: 0
+  },
+  entered: {
+    transition: `opacity ${timeout}ms ease-in-out`,
+    opacity: 1
+  },
+  exiting: {
+    transition: `opacity ${timeout}ms ease-in-out`,
+    opacity: 0
+  }
+};
+const Tabs = ({ children, activeTab = 0 }) => /* @__PURE__ */ jsx(TransitionGroup, { component: StyledTabs, children: React__default.Children.map(children, (child) => {
+  if (child.props.tabId !== activeTab || !React__default.isValidElement(child)) return null;
+  return /* @__PURE__ */ jsx(
+    Transition,
+    {
+      timeout: {
+        enter: timeout,
+        exit: timeout
+      },
+      children: (status) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            height: "100%",
+            ...getTransitionStyles[status]
+          },
+          children: child
+        }
+      )
+    },
+    child.props.tabId
+  );
+}) });
+Tabs.propTypes = {
+  children: PropTypes.node.isRequired,
+  activeTab: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};
+var stdin_default = Tabs;
+export {
+  Tab,
+  Tabs,
+  stdin_default as default
+};

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