@stokr/components-library 3.0.16 → 3.0.18

package/dist/components/MainMenu/MainMenu.js

@@ -0,0 +1,210 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { PureComponent } from "react";
+import PropTypes from "prop-types";
+import { Collapse } from "react-collapse";
+import { StyledMainMenu, MainMenuContainer, MainMenuOptions, MainMenuOption, ExpandArrow, Settings, SettingsOptions, SettingsOption } from "./MainMenu.styles.js";
+import { Button } from "../Button/Button.styles.js";
+import { IoniconsStyles } from "../../styles/ioniconsStyles.js";
+import { platformDomain } from "../../constants/globalVariables.js";
+import { withRouter } from "../../utils/withRouter.js";
+class MainMenuClass extends PureComponent {
+  state = {
+    isSettingsActive: false,
+    isScrollDown: false,
+    lastScroll: 0,
+    overrideHeightNeeded: true
+  };
+  componentDidMount() {
+  }
+  componentWillUnmount() {
+  }
+  toggleSettings = () => {
+    this.setState((prevState) => ({
+      isSettingsActive: !prevState.isSettingsActive
+    }));
+  };
+  // onScroll = () => {
+  //   const { lastScroll, isScrollDown, overrideHeightNeeded } = this.state
+  //   const { scrollY } = window
+  //   const newScrollDown = scrollY > lastScroll
+  //   const newState = {
+  //     lastScroll: scrollY,
+  //   }
+  //   if (newScrollDown !== isScrollDown) {
+  //     newState.isScrollDown = newScrollDown
+  //   }
+  //   if (overrideHeightNeeded) {
+  //     newState.overrideHeightNeeded = false
+  //   }
+  //   this.setState(newState)
+  // }
+  setScrollUp = () => {
+    this.setState({
+      isScrollDown: false
+    });
+  };
+  checkActive = (url) => window.location.href.split("/").indexOf(url) > 0;
+  render() {
+    const { isSettingsActive, isScrollDown, overrideHeightNeeded } = this.state;
+    const {
+      isMenuActive,
+      user,
+      logoutUser,
+      admin: isAdmin = false,
+      platformUrlForUserMenu,
+      isVentureDashboard
+    } = this.props;
+    const spanStyleForMenu = {
+      letterSpacing: "1.5px",
+      cursor: "pointer"
+    };
+    const isUserLogged = !!user?._id || user?.uid;
+    return /* @__PURE__ */ jsxs(StyledMainMenu, { children: [
+      /* @__PURE__ */ jsx(IoniconsStyles, {}),
+      /* @__PURE__ */ jsx(Collapse, { isOpened: isMenuActive && isUserLogged, hasNestedCollapse: true, children: /* @__PURE__ */ jsxs(MainMenuContainer, { children: [
+        /* @__PURE__ */ jsxs(
+          Collapse,
+          {
+            isOpened: !isScrollDown || isVentureDashboard,
+            style: overrideHeightNeeded ? { height: "auto" } : {},
+            hasNestedCollapse: true,
+            children: [
+              /* @__PURE__ */ jsxs(MainMenuOptions, { children: [
+                !isVentureDashboard && /* @__PURE__ */ jsx(
+                  MainMenuOption,
+                  {
+                    as: "button",
+                    type: "button",
+                    button: true,
+                    nameOption: true,
+                    isVenture: isAdmin,
+                    isDashboard: true,
+                    onClick: () => {
+                      isAdmin ? window.location.href = `https://admin.${platformDomain}` : window.location.href = `${platformUrlForUserMenu}/overview`;
+                    },
+                    children: /* @__PURE__ */ jsx("span", { style: spanStyleForMenu, children: "Dashboard" })
+                  }
+                ),
+                isAdmin ? /* @__PURE__ */ jsx(Fragment, { children: isVentureDashboard && /* @__PURE__ */ jsx(
+                  MainMenuOption,
+                  {
+                    as: "button",
+                    type: "button",
+                    button: true,
+                    onClick: () => {
+                      this.props.navigate("/settings");
+                    },
+                    children: /* @__PURE__ */ jsx("span", { style: spanStyleForMenu, children: "Settings" })
+                  }
+                ) }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+                  MainMenuOption,
+                  {
+                    as: "button",
+                    type: "button",
+                    button: true,
+                    isOpened: isSettingsActive,
+                    onClick: this.toggleSettings,
+                    isSettings: true,
+                    children: [
+                      /* @__PURE__ */ jsx("span", { style: spanStyleForMenu, children: "Settings" }),
+                      /* @__PURE__ */ jsx(ExpandArrow, { isOpened: isSettingsActive })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(MainMenuOption, { children: /* @__PURE__ */ jsx(Button, { negative: true, onClick: () => logoutUser(), children: "log out" }) })
+              ] }),
+              !isAdmin && /* @__PURE__ */ jsx(Settings, { children: /* @__PURE__ */ jsx(Collapse, { isOpened: isSettingsActive, children: /* @__PURE__ */ jsxs(SettingsOptions, { children: [
+                /* @__PURE__ */ jsx(
+                  SettingsOption,
+                  {
+                    isActive: this.checkActive("profile-and-privacy"),
+                    onClick: () => {
+                      window.location.replace(`${platformUrlForUserMenu}/settings/profile-and-privacy`);
+                    },
+                    children: /* @__PURE__ */ jsx("span", { style: spanStyleForMenu, children: "Profile & Privacy" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  SettingsOption,
+                  {
+                    isActive: this.checkActive("liquid-address"),
+                    onClick: () => {
+                      window.location.replace(`${platformUrlForUserMenu}/settings/liquid-address`);
+                    },
+                    children: /* @__PURE__ */ jsx("span", { style: spanStyleForMenu, children: "Liquid Addresses" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  SettingsOption,
+                  {
+                    isActive: this.checkActive("investment-eligibility"),
+                    onClick: () => {
+                      window.location.replace(`${platformUrlForUserMenu}/settings/investment-eligibility`);
+                    },
+                    children: /* @__PURE__ */ jsx("span", { style: spanStyleForMenu, children: "Investment eligibility" })
+                  }
+                )
+              ] }) }) })
+            ]
+          }
+        ),
+        !isAdmin && /* @__PURE__ */ jsx(Collapse, { isOpened: isScrollDown, hasNestedCollapse: true, children: /* @__PURE__ */ jsxs(SettingsOptions, { children: [
+          /* @__PURE__ */ jsx(
+            SettingsOption,
+            {
+              scrollDown: true,
+              isActive: this.checkActive("profile-and-privacy"),
+              onClick: () => {
+                window.location.replace(`${platformUrlForUserMenu}/settings/profile-and-privacy`);
+              },
+              children: /* @__PURE__ */ jsx("span", { style: spanStyleForMenu, children: "Profile & Privacy" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SettingsOption,
+            {
+              scrollDown: true,
+              isActive: this.checkActive("liquid-address"),
+              onClick: () => {
+                window.location.replace(`${platformUrlForUserMenu}/settings/liquid-address`);
+              },
+              children: /* @__PURE__ */ jsx("span", { style: spanStyleForMenu, children: "Liquid Addresses" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SettingsOption,
+            {
+              scrollDown: true,
+              isActive: this.checkActive("investment-eligibility"),
+              onClick: () => {
+                window.location.replace(`${platformUrlForUserMenu}/settings/investment-eligibility`);
+              },
+              children: /* @__PURE__ */ jsx("span", { style: spanStyleForMenu, children: "Investment eligiblity" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SettingsOption,
+            {
+              scrollDown: true,
+              onClick: () => {
+                this.setScrollUp();
+              },
+              children: /* @__PURE__ */ jsx("span", { style: spanStyleForMenu, children: "More" })
+            }
+          )
+        ] }) })
+      ] }) })
+    ] });
+  }
+}
+MainMenuClass.propTypes = {
+  isMenuActive: PropTypes.bool.isRequired,
+  admin: PropTypes.bool
+};
+const MainMenu = withRouter(MainMenuClass);
+var stdin_default = MainMenu;
+export {
+  MainMenu,
+  MainMenuClass,
+  stdin_default as default
+};

package/dist/components/MainMenu/MainMenu.styles.js

@@ -0,0 +1,362 @@
+import styled, { css } from "styled-components";
+import rwd from "../../styles/rwd.js";
+const StyledMainMenu = styled.div.withConfig({
+  shouldForwardProp: (props) => !["admin"].includes(props)
+})`
+  display: none;
+  z-index: 10;
+  background: white;
+
+  ${rwd.Medium`
+    display: block;
+    width: 100%;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    overflow: hidden;
+    margin-top: -1px;
+    border-bottom: 1px solid #e1e1e1;
+    // box-shadow: inset 0 -1px 0 0 #e1e1e1;
+
+    ${(props) => props.admin && `
+      padding-left: 100px;
+    `}
+  `}
+
+  @media screen and (max-width: 991px) {
+    display: none;
+  }
+`;
+const MainMenuContainer = styled.div`
+  display: block;
+  background-color: ${(props) => props.theme.cWhite};
+  border-top: 1px solid #e1e1e1;
+  /* box-shadow: inset 0 -1px 0 0 #e1e1e1; */
+`;
+const MainMenuOptions = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  ${rwd.Medium`
+    flex-direction: row;
+    height: 92px;
+  `}
+`;
+const MainMenuOption = styled.div.withConfig({
+  shouldForwardProp: (props) => !["isSettings", "isDashboard", "isOpened", "isVenture", "nameOption", "noBorder", "button", ""].includes(props)
+})`
+  background-color: white !important;
+  position: relative;
+  display: flex;
+  flex-basis: 33.3333%;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 4px 16px;
+  outline: none;
+
+  &:hover {
+    font-weight: bold;
+  }
+
+  ${({ isSettings }) => isSettings && css`
+      border-right: none !important;
+    `}
+
+  & {
+    border-top: 1px solid #e1e1e1;
+  }
+
+  ${rwd.Medium`
+    padding: 10px;
+    border-bottom: 1px solid #e1e1e1;
+    margin-bottom: -1px;
+    transition: border-bottom-color .2s;
+
+    & {
+      border-top: 0;
+      border-left: 1px solid #e1e1e1;
+
+       ${({ isDashboard }) => isDashboard && css`
+           border-right: 0;
+         `}
+    }
+
+    ${(props) => props.isOpened && `
+      border-bottom-color: transparent;
+    `};
+
+    ${({ isVenture }) => isVenture && css`
+        flex-basis: 66.6%;
+      `}
+
+      ${(props) => props.nameOption && `
+    display: flex;
+  `}
+
+  `}
+
+  ${(props) => props.nameOption && `
+    display: none;
+  `}
+
+  ${rwd.Large`
+
+     ${({ isVenture }) => isVenture && css`
+         flex-basis: 75.5%;
+       `}
+
+    ${(props) => props.nameOption && `
+      display: flex;
+    `};
+  `}
+
+     ${(props) => props.noBorder && `
+    border: none !important;
+  `}
+
+  ${(props) => props.button && `
+    cursor: pointer;
+    transition: color .2s;
+    outline: 0;
+    
+    & > span {
+      display: inline-block;
+      vertical-align: middle;
+      text-transform: uppercase;
+      font-size: 11px;
+      line-height: 20px;
+    }
+
+    &:hover {
+      color: ${props.theme.cPrimary};
+    }
+  `}
+
+  span {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  button {
+    color: #ee220d;
+    border-color: #ee220d;
+    background-color: white;
+
+    &:hover {
+      color: #be1b09;
+      border-color: #be1b09;
+    }
+  }
+`;
+styled.h3`
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  text-transform: initial;
+  margin: 0;
+
+  &:hover {
+    color: initial;
+  }
+`;
+const ExpandArrow = styled.i.withConfig({
+  shouldForwardProp: (props) => !["isOpened"].includes(props)
+}).attrs({
+  className: "ion ion-ios-arrow-down"
+})`
+  position: absolute;
+  top: 50%;
+  right: 32px;
+  display: block;
+  margin-top: -8px;
+  transition: 0.3s transform;
+  transform: rotate(0);
+  text-align: center;
+  font-size: 16px;
+  line-height: 16px;
+  height: 16px;
+
+  ${(props) => props.isOpened && `
+    transform: rotate(180deg);
+  `}
+
+  ${rwd.Medium`
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 20px;
+    margin-top: 0;
+    position: relative;
+    top: 0;
+    right: auto;
+  `}
+`;
+const Settings = styled.div`
+  overflow: hidden;
+`;
+const SettingsOptions = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  ${rwd.Medium`
+    flex-wrap: wrap;
+    padding: 27px 64px;
+    flex-direction: row;
+    height: auto;
+  `}
+
+  button {
+    border: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    padding: 0;
+  }
+`;
+const SettingsOption = styled.button.withConfig({
+  shouldForwardProp: (props) => !["back", "isActive", "scrollDown"].includes(props)
+})`
+  position: relative;
+  flex-grow: 1;
+  cursor: pointer;
+  transition: font-weight 0.2s;
+  color: ${(props) => props.theme.cWhite};
+  background-color: ${(props) => props.theme.cWarning};
+  border-top: 1px solid ${(props) => props.theme.cWarningDark};
+  outline: 0;
+
+  ${(props) => props.back && `
+    color: ${props.theme.cBlack};
+    background-color: transparent;
+    border-top: 0;
+    
+    ${props.isActive && `
+      color: ${props.theme.cBlack};
+      background-color: transparent;
+    `}
+
+    ${rwd.Medium`
+      background-color: transparent;
+      
+      ${props.isActive && `
+        background-color: transparent;
+      `}
+    `}
+  `};
+
+  ${rwd.Medium`
+    flex-grow: 0;
+    text-align: left;
+    flex-basis: 33.3333%;
+    color: ${(props) => props.theme.cBlack};
+    background-color: transparent;
+    border-top: 0;
+  `}
+
+  ${rwd.Large`
+    flex-basis: 25%;
+
+    ${(props) => props.scrollDown && `
+      flex-basis: 20%;
+    `}
+  `}
+
+  & > span {
+    position: relative;
+    display: inline-block;
+    font-size: 11px;
+    line-height: 20px;
+    text-transform: uppercase;
+    transition: font-weight 0.2s;
+
+    ${rwd.Medium`
+      padding: 7px 0;
+      margin: 3px 0;
+    `}
+  }
+
+  ${(props) => props.isActive && `
+    background-color: ${props.theme.cPrimary};
+
+    & > span {
+      font-weight: bold;
+    }
+  `}
+
+  ${rwd.Medium`
+    ${(props) => props.isActive && `   
+      background-color: transparent;
+
+      & > span {
+        &:before {
+          content: '';
+          display: block;
+          height: 4px;
+          width: 100%;
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          background-color: ${props.theme.cPrimary};
+        }
+      }
+    `}
+  `}
+
+  &:hover {
+    & > span {
+      font-weight: bold;
+    }
+  }
+`;
+styled.div.withConfig({
+  shouldForwardProp: (props) => !["isActive"].includes(props)
+})`
+  display: block;
+  visibility: hidden;
+  opacity: 0;
+  z-index: 5;
+  position: absolute;
+  top: 64px;
+  left: 0;
+  width: 100%;
+  height: calc(100% - 64px);
+  background-color: ${(props) => props.theme.cWhite};
+  border-top: 1px solid #e1e1e1;
+  transition:
+    opacity 0.2s,
+    visibility 0.2s;
+
+  ${(props) => props.isActive && `
+    visibility: visible;
+    opacity: 1;
+  `}
+`;
+styled.div`
+  position: relative;
+  top: -1px;
+  right: -5px;
+  width: 16px;
+  height: 16px;
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 16px;
+  text-align: center;
+  background-color: #ee220d;
+  border-radius: 50%;
+
+  @media screen and (max-width: 991px) {
+    display: none;
+  }
+`;
+export {
+  ExpandArrow,
+  MainMenuContainer,
+  MainMenuOption,
+  MainMenuOptions,
+  Settings,
+  SettingsOption,
+  SettingsOptions,
+  StyledMainMenu
+};

package/dist/components/MenuNav/MenuNav.styles.js

@@ -0,0 +1,66 @@
+import styled from "styled-components";
+const MenuNav = styled.nav.withConfig({
+  shouldForwardProp: (props) => !["mobile"].includes(props)
+})`
+  display: inline-block;
+  vertical-align: middle;
+
+  ul {
+    display: block;
+    list-style: none;
+    font-size: 0;
+    padding: 0;
+    margin: 0;
+    margin: 0 -18px;
+  }
+
+  li {
+    display: inline-block;
+    padding: 0;
+    margin: 0 18px;
+  }
+
+  button,
+  a {
+    position: relative;
+    display: block;
+    font-size: 11px;
+    line-height: 16px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    padding: 2px 0;
+    border: 0;
+    margin: 0;
+    cursor: pointer;
+    font-weight: 500;
+    text-decoration: none;
+
+    &:hover {
+      opacity: 0.68;
+    }
+  }
+
+  ${(props) => props.mobile && `
+    display: block;
+
+    ul {
+      margin: 0;
+      padding: 0;
+    }
+
+    li {
+      display: block;
+      text-align: center;
+      margin: 0;
+      padding: 18px 16px;
+    }
+
+    a {
+      display: inline-block;
+    }
+  `}
+`;
+export {
+  MenuNav,
+  MenuNav as default
+};