@stokr/components-library 3.0.76 → 3.1.0-alpha.1

package/dist/components/Header/Header.styles.js

@@ -1,568 +0,0 @@
-import styled from "styled-components";
-import stdin_default from "../SmartLink/SmartLink.js";
-import rwd, { rwdMax } from "../../styles/rwd.js";
-import { colors } from "../../styles/colors.js";
-import spacing from "../../styles/spacing.js";
-import stdin_default$1 from "../Button/Button.styles.js";
-import { WHITE_HEX, BLUE_BASE_RELEASED_HEX, GRAY_BASE_HEX } from "../../constants/style.js";
-import { SocialLink } from "../Footer/FooterMenu.styles.js";
-import { iconsMap, Icon } from "../Icon/Icon.style.js";
-const StyledSubMenu = styled.div`
-  position: relative;
-`;
-const StyledHeader = styled.header.withConfig({
-  shouldForwardProp: (props) => !["noFixedPosition"].includes(props)
-})`
-  z-index: 1000;
-  position: relative;
-  color: ${colors.black};
-  border-bottom: 1px solid rgb(237, 237, 237);
-
-  ${rwd.MLarge`
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: ${spacing.headerHeight}px;
-    background-color: ${colors.white};
-    box-shadow: inset 0 -1px 0 0 ${colors.lightGrey};
-
-    /* Compensate for scrollbar when modal is open */
-    padding-right: var(--scrollbar-compensation, 0px);
-
-    ${(props) => props.noFixedPosition && `
-      position:initial;
-    `}
-  `}
-`;
-const HeaderInner = styled.div.withConfig({
-  shouldForwardProp: (props) => !["withSidebar"].includes(props)
-})`
-  position: relative;
-  padding: 24px;
-
-  ${(props) => props.withSidebar && `
-     left: 64px;
-    transition: 0.3s width;
-  `}
-
-  ${rwd.MLarge`
-    display: flex;
-    padding: 28px 64px;
-    align-items: center;
-
-    ${(props) => props.withSidebar && `
-      width:100%;
-      left:0;
-    `}
-  `}
-`;
-const MainNavWrap = styled.div.withConfig({
-  shouldForwardProp: (props) => !["isFixedWidth", "noProgress", "hasProgress"].includes(props)
-})`
-  z-index: 2;
-  position: relative;
-  font-size: 0;
-
-  ${rwd.MLarge`
-    flex-grow: ${({ isFixedWidth }) => !isFixedWidth && 1};
-    width: ${({ isFixedWidth }) => isFixedWidth && "200px"};
-
-  ${(props) => props.noProgress && `
-      flex-grow: 3;
-    `}
-
-  ${(props) => props.hasProgress && `
-      width:33.3%;
-   `}
-`}
-`;
-const SidebarToggle = styled.div.withConfig({
-  shouldForwardProp: (props) => !["isSidebarExpanded"].includes(props)
-})`
-  width: 64px;
-  height: 100%;
-  background: ${colors.rustyRed};
-  transition: 0.3s width;
-  flex-shrink: 0;
-  display: flex;
-  position: absolute;
-  cursor: pointer;
-  z-index: 10;
-
-  ${rwd.MLarge`
-    position: relative;
-    width: 100px;
-  `}
-
-  ${(props) => props.isSidebarExpanded && rwd.MLarge`
-    width: 300px;
-  `}
-`;
-const HamburgerIcon = styled(Icon)`
-  display: block;
-  width: 18px;
-  height: 18px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-top: -9px;
-  margin-left: -9px;
-  font-size: 18px;
-  line-height: 18px;
-  color: ${colors.white};
-
-  &:before {
-    content: '${iconsMap.hamburger}';
-  }
-
-  ${rwd.MLarge`
-    left: 50px;
-  `}
-`;
-const ProgressWrap = styled.div`
-  z-index: 0;
-  position: relative;
-  text-align: center;
-  margin-top: 24px;
-
-  ${rwd.MLarge`
-    flex-grow: 2;
-    margin-top: 0;
-  `}
-`;
-const QuickNavWrap = styled.div.withConfig({
-  shouldForwardProp: (props) => !["isFixeWidth", "hasProgress"].includes(props)
-})`
-  z-index: 2;
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 100%;
-
-  ${rwd.MLarge`
-    position: relative;
-    right: auto;
-    flex-grow: ${({ isFixedWidth }) => !isFixedWidth && 1};
-    width: ${({ isFixedWidth }) => isFixedWidth && "200px"};
-    text-align: right;
-
-    ${(props) => props.hasProgress && `
-      width:33.3%;
-    `}
-  `}
-`;
-const Logo = styled.div.withConfig({
-  shouldForwardProp: (props) => !["isHighlight"].includes(props)
-})`
-  display: inline-block;
-  vertical-align: middle;
-  color: ${colors.black};
-  transition: color 0.4s;
-
-  ${(props) => props.isHighlight && `
-    color: ${colors.blue};
-  `}
-
-  a {
-    display: block;
-    transition: opacity 0.2s;
-
-    &:hover {
-      opacity: 0.5;
-    }
-  }
-
-  img {
-    display: block;
-    height: 16px;
-    width: auto;
-  }
-
-  svg {
-    display: block;
-    height: 16px;
-    width: auto;
-    fill: currentColor;
-  }
-
-  ${rwd.MLarge`
-    margin-left: 0;
-    margin-right: 42px;
-  `}
-`;
-const HeaderMainNav = styled.div`
-  display: none;
-
-  ${rwd.MLarge`
-    display: inline-block;
-  `}
-
-  button {
-    text-transform: uppercase;
-  }
-`;
-const HeaderQuickNav = styled.div.withConfig({
-  shouldForwardProp: (props) => !["isUserLogged"].includes(props)
-})`
-  display: none;
-
-  ${rwd.MLarge`
-    display: inline-block;
-
-    & > * {
-      margin-left: 32px;
-
-      &:first-child {
-        margin-left: 0;
-      }
-    }
-
-    ${(props) => !props.isUserLogged && `
-         display: flex;
-        align-items: center;
-        justify-content: flex-end;
-     `}
-  `}
-
-  button {
-    text-transform: uppercase;
-
-    ${rwd.MLarge`
-      vertical-align: middle;
-    `}
-  }
-`;
-const MobileMenuToggler = styled.button.withConfig({
-  shouldForwardProp: (props) => !["withSidebar", "isActive"].includes(props)
-})`
-  display: block;
-  width: 32px;
-  height: 32px;
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  outline: none;
-  cursor: pointer;
-  border: none;
-  background-color: inherit;
-
-  ${(props) => props.withSidebar && `
-    right:-15px;
-  `}
-
-  ${rwd.MLarge`
-    display: none;
-  `}
-
-  span {
-    display: block;
-    width: 16px;
-    height: 2px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-top: -1px;
-    margin-left: -8px;
-    background-color: ${colors.black};
-    transition:
-      background-color 0.4s,
-      transform 0.4s;
-
-    &:nth-child(1) {
-      transform: translateY(-6px);
-    }
-
-    &:nth-child(3) {
-      transform: translateY(6px);
-    }
-  }
-
-  ${(props) => props.isActive && `
-    span {
-      background-color: ${colors.blue};
-
-      &:nth-child(1) {
-        transform: translateY(0) rotate(135deg);
-      }
-
-      &:nth-child(2) {
-        transform: scaleX(0);
-      }
-
-      &:nth-child(3) {
-        transform: translateY(0) rotate(-135deg);
-      }
-    }
-  `}
-`;
-const MobileMenu = styled.nav.withConfig({
-  shouldForwardProp: (props) => !["isActive", "withSidebar"].includes(props)
-})`
-  z-index: 100;
-  position: absolute;
-  top: 65px;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-height: calc(100vh - 65px);
-  background-color: ${colors.white};
-  padding: 0;
-  text-align: center;
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    opacity 0.4s,
-    visibility 0.4s;
-
-  height: 100%;
-  overflow: auto;
-
-  ${(props) => props.isActive && `
-    opacity: 1;
-    visibility: visible;
-  `}
-
-  ${(props) => props.withSidebar && `
-  width:100vw;
-  left:-64px;
-  `}
-
-  // &:before {
-  //   content: '';
-  //   display: block;
-  //   width: 100%;
-  //   height: 1px;
-  //   background-color: ${colors.lightGrey};
-  //   position: absolute;
-  //   top: 0;
-  //   left: 0;
-  // }
-
-  ${rwd.MLarge`
-    display: none;
-  `}
-
-  button {
-    text-transform: uppercase;
-  }
-`;
-const MobileMenuItem = styled.li.withConfig({
-  shouldForwardProp: (props) => !["red"].includes(props)
-})`
-  align-items: center;
-  display: flex !important;
-  justify-content: center;
-
-  ${(props) => props.red && `
-    background: #D2200D;
-    color:white;
-    border-bottom: 1px solid #979797;
-  `}
-`;
-const MobileMenuWrapper = styled.div`
-  cursor: pointer;
-`;
-const MobileMenuLink = styled(stdin_default)`
-  width: 100%;
-`;
-const MobileMenuPart = styled.div.withConfig({
-  shouldForwardProp: (props) => !["withPadding", "isLast", "grow", "flexColumn", "noPaddingTop", "borderTop"].includes(props)
-})`
-  ${(props) => props.withPadding && `
-    padding: 30px 0;
-   
-
-    @media screen and (max-width: 320px) {
-      padding: 15px 0;
-    }
-  `}
-  ${(props) => props.isLast && `
-     // padding-bottom: env(safe-area-inset-bottom);
-     padding-bottom:100px;
-  `}
-
-  ${(props) => props.grow && `
-    flex-grow: ${props.grow};
-  `}
-
-  ${(props) => props.flexColumn && `
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    button {
-      margin: 10px 0;
-    }
-  `}
-
-  ${(props) => props.noPaddingTop && `
-    padding-top: 0;
-  `}
-
-  ${(props) => props.borderTop && `
-    border-top: 1px solid ${colors.lightGrey};
-  `}
-`;
-const UserAccount = styled.div`
-  z-index: 1;
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-
-  ${rwd.MLarge`
-    margin: -4px 0;
-    margin-left: 32px;
-  `}
-`;
-const UserButton = styled.button`
-  display: inline-block;
-  vertical-align: middle;
-  width: 48px;
-  height: 48px;
-  border-radius: 24px;
-  overflow: hidden;
-  background-color: ${colors.grey2};
-  opacity: 1;
-  transition: opacity 0.2s;
-  outline: none;
-  cursor: pointer;
-  box-shadow: none;
-  border: none;
-  background-color: buttonface;
-  background-color: transparent;
-  padding: 0;
-
-  /* &:hover {
-    opacity: 0.5;
-  } */
-`;
-const UserAvatar = styled.img`
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center center;
-`;
-styled.div`
-  z-index: 0;
-  position: relative;
-  display: block;
-  padding-top: 36px;
-  padding-bottom: 20px;
-  font-weight: 600;
-  font-size: 16px;
-  line-height: 24px;
-  background-color: ${colors.orangishRed};
-  color: ${colors.white};
-  margin-top: -24px;
-`;
-const LoginButton = styled.span`
-  cursor: pointer;
-  margin-right: 24px;
-  display: none;
-
-  &:hover {
-    opacity: 0.6;
-  }
-
-  @media screen and (min-width: 992px) {
-    display: block;
-  }
-`;
-const SignupButton = styled(stdin_default$1).withConfig({
-  shouldForwardProp: (props) => !["isMobile"].includes(props)
-})`
-  padding-right: 32px !important;
-  color: ${WHITE_HEX} !important;
-
-  &:hover {
-    background: ${BLUE_BASE_RELEASED_HEX};
-  }
-
-  ${(props) => props.isMobile && `
-      margin: 0;
-      width: 163.94px;
-  `}
-`;
-const CTAContainer = styled.div`
-  align-items: center;
-  border-top: 1px solid ${GRAY_BASE_HEX};
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 56px 0;
-  width: 100%;
-
-  span {
-    color: 1px solid ${GRAY_BASE_HEX};
-    font-size: 10px;
-    letter-spacing: 2.1px;
-    margin-bottom: 14px;
-  }
-
-  div {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  ${rwdMax.Medium`
-    div{
-        width: 192px; /* Fit exactly 3 icons */
-    }
-  `}
-
-  ${SocialLink} {
-    display: flex;
-    justify-content: center;
-
-    background: transparent;
-    margin: 12px;
-
-    svg {
-      fill: rgb(32, 32, 32);
-      height: 18px !important;
-      width: 18px !important;
-    }
-  }
-`;
-const SocialLinksContainer = styled.div.withConfig({
-  shouldForwardProp: (props) => !["isHeader"].includes(props)
-})`
-  display: flex !important;
-  flex-wrap: nowrap !important;
-  justify-content: ${(props) => props.isHeader ? "center" : null};
-
-  //  fixes SVG icons stretching
-  & > * {
-    flex: none !important;
-  }
-`;
-export {
-  CTAContainer,
-  HamburgerIcon,
-  HeaderInner,
-  HeaderMainNav,
-  HeaderQuickNav,
-  LoginButton,
-  Logo,
-  MainNavWrap,
-  MobileMenu,
-  MobileMenuItem,
-  MobileMenuLink,
-  MobileMenuPart,
-  MobileMenuToggler,
-  MobileMenuWrapper,
-  ProgressWrap,
-  QuickNavWrap,
-  SidebarToggle,
-  SignupButton,
-  SocialLinksContainer,
-  StyledHeader,
-  StyledSubMenu,
-  UserAccount,
-  UserAvatar,
-  UserButton
-};

package/dist/components/Layout/Layout.js

@@ -1,76 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import React__default from "react";
-import PropTypes from "prop-types";
-import { ThemeProvider } from "styled-components";
-import { GlobalStyle } from "../../styles/global.js";
-import theme from "../../styles/theme.js";
-import stdin_default from "../Header/Header.js";
-import stdin_default$1 from "../Footer/Footer.js";
-import { PageWrapper } from "../Grid/Grid.styles.js";
-const ProgressStatusContext = React__default.createContext();
-class Layout extends React__default.PureComponent {
-  handleProgressStatusChange = (page, status) => {
-    const { updateProgressStatusAC } = this.props;
-    updateProgressStatusAC(page, status);
-  };
-  render() {
-    const {
-      title = "",
-      progress = null,
-      loginHandler = () => {
-      },
-      signupHandler = () => {
-      },
-      signupFlow = false,
-      children,
-      footerColor = "red",
-      noFooter,
-      noHeader,
-      noLogout,
-      useRelativePathForMenu = false,
-      logoutUser = () => {
-      }
-    } = this.props;
-    return /* @__PURE__ */ jsx(ThemeProvider, { theme: { ...theme }, children: /* @__PURE__ */ jsxs(PageWrapper, { children: [
-      /* @__PURE__ */ jsx(GlobalStyle, {}),
-      !noHeader && /* @__PURE__ */ jsx(
-        stdin_default,
-        {
-          progress,
-          signupFlow,
-          loginHandler,
-          signupHandler,
-          siteTitle: title,
-          noLogout,
-          useRelativePathForMenu,
-          logoutUser
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        ProgressStatusContext.Provider,
-        {
-          value: {
-            onProgressStatusChange: this.handleProgressStatusChange
-          },
-          children
-        }
-      ),
-      !noFooter && /* @__PURE__ */ jsx(stdin_default$1, { color: footerColor })
-    ] }) });
-  }
-}
-Layout.propTypes = {
-  title: PropTypes.string,
-  signupFlow: PropTypes.bool,
-  loginHandler: PropTypes.func,
-  signupHandler: PropTypes.func,
-  progress: PropTypes.bool,
-  footerColor: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  useRelativePathForMenu: PropTypes.bool,
-  logoutUser: PropTypes.func
-};
-ProgressStatusContext.Consumer;
-export {
-  Layout
-};