@stokr/components-library 3.0.16 → 3.0.17

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

@@ -0,0 +1,567 @@
+import styled from "styled-components";
+import rwd, { rwdMax } from "../../styles/rwd.js";
+import { colors } from "../../styles/colors.js";
+import spacing from "../../styles/spacing.js";
+import { Button } 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.a`
+  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(Button).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/HeroBlock/HeroVideoBlock.js

@@ -0,0 +1,105 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { useRef, useEffect } from "react";
+import { useInView } from "react-intersection-observer";
+const VideoContainer = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+`;
+const VideoBackground = styled.video`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+const now = Date.now();
+const HeroVideoBlock = () => {
+  const videoRef = useRef(null);
+  const lastTimeRef = useRef(0);
+  const lastVisibleTime = useRef(now);
+  const playVideo = () => {
+    if (!videoRef.current) return;
+    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+    if (videoRef.current.currentTime > 0) {
+      lastTimeRef.current = videoRef.current.currentTime;
+    }
+    const playPromise = videoRef.current.play();
+    if (playPromise !== void 0) {
+      playPromise.catch((error) => {
+        console.log("Video play error:", error);
+        if (isMobile && videoRef.current) {
+          const resetNeeded = Date.now() - lastVisibleTime.current > 2e3;
+          if (resetNeeded) {
+            videoRef.current.currentTime = lastTimeRef.current || 0.1;
+            videoRef.current.play().catch((e) => console.log("Retry failed:", e));
+          }
+        }
+      });
+    }
+  };
+  const handleVisibilityChange = (isVisible) => {
+    if (isVisible) {
+      lastVisibleTime.current = Date.now();
+      if (videoRef.current) {
+        playVideo();
+      }
+    } else if (videoRef.current) {
+      lastTimeRef.current = videoRef.current.currentTime;
+    }
+  };
+  const { ref: windowViewportRef } = useInView({
+    threshold: 0,
+    // partialVisibility equivalent - triggers as soon as any part is visible
+    onChange: (inView, _entry) => {
+      handleVisibilityChange(inView);
+    }
+  });
+  useEffect(() => {
+    let visibilityTimeoutId;
+    const handleDocVisibilityChange = () => {
+      if (document.visibilityState === "visible") {
+        lastVisibleTime.current = Date.now();
+        if (visibilityTimeoutId != null) clearTimeout(visibilityTimeoutId);
+        visibilityTimeoutId = setTimeout(() => {
+          playVideo();
+        }, 300);
+      } else if (videoRef.current) {
+        lastTimeRef.current = videoRef.current.currentTime;
+      }
+    };
+    document.addEventListener("visibilitychange", handleDocVisibilityChange);
+    playVideo();
+    return () => {
+      if (visibilityTimeoutId != null) clearTimeout(visibilityTimeoutId);
+      document.removeEventListener("visibilitychange", handleDocVisibilityChange);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx("div", { ref: windowViewportRef, children: /* @__PURE__ */ jsx(VideoContainer, { children: /* @__PURE__ */ jsx(
+    VideoBackground,
+    {
+      ref: videoRef,
+      autoPlay: true,
+      muted: true,
+      loop: true,
+      playsInline: true,
+      preload: "metadata",
+      "data-vsc-ignore": "true",
+      fetchPriority: "high",
+      children: /* @__PURE__ */ jsx(
+        "source",
+        {
+          src: "https://res.cloudinary.com/stokr/video/upload/f_auto,q_auto:best/v1745923531/Static/Hero_section_video_kuatj1.mp4",
+          type: "video/mp4",
+          fetchPriority: "high"
+        }
+      )
+    }
+  ) }) });
+};
+export {
+  HeroVideoBlock
+};