fix(header): COM-2346, COM-2419

- Header no more become invisible on scroll; - update Nav styles; - upload video file for Footer.
CSSSR · Aug 10, 2020 · 5e182b3 · 5e182b3
1 parent 95ba904
commit 5e182b3
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 67 deletions.
diff --git a/packages/core-design/src/components/Header/Header.tsx b/packages/core-design/src/components/Header/Header.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useRef, useState } from 'react'
+import React, { Fragment, useEffect, useState } from 'react'
 import useIe11Status from '../../utils/hooks/useIe11Status'
 import useMobileStatus from '../../utils/hooks/useMobileStatus'
 import { HeaderProps as Props } from './types'
@@ -30,9 +30,7 @@ const Header: React.FC<Props> = ({
   actionButton,
   logo,
 }) => {
-  const lastScrollTopValue = useRef(0)
   const [isDropdownOpened, toggleDropdown] = useState(false)
-  const [isHeaderVisible, toggleHeaderVisibility] = useState(true)
   const isIe11 = useIe11Status(isIe11ValueFromProps)
   const isMobile = useMobileStatus(isMobileValueFromProps)
 
@@ -57,41 +55,6 @@ const Header: React.FC<Props> = ({
         enablePageScroll(document.body)
       }
     }
-
-    const handleScroll = (event: any) => {
-      const headerHeight = 64
-      const {
-        target: { scrollingElement },
-      } = event
-
-      const isScrollingElementHtmlOrBodyNode =
-        scrollingElement === document.documentElement || scrollingElement === document.body
-      const scrollTopValue = isScrollingElementHtmlOrBodyNode && scrollingElement.scrollTop
-      const isScrollingDown =
-        scrollTopValue > lastScrollTopValue.current && scrollTopValue > headerHeight
-
-      if (isScrollingDown) {
-        if (isMobile && isDropdownOpened) {
-          toggleHeaderVisibility(true)
-        } else if (isHeaderVisible) {
-          toggleHeaderVisibility(false)
-        }
-      } else {
-        if (!isHeaderVisible) {
-          toggleHeaderVisibility(true)
-          toggleDropdown(false)
-        }
-      }
-
-      lastScrollTopValue.current =
-        scrollTopValue === lastScrollTopValue.current ? scrollTopValue - 1 : scrollTopValue
-    }
-
-    if (!isIe11) {
-      document.addEventListener('scroll', handleScroll)
-
-      return () => document.removeEventListener('scroll', handleScroll)
-    }
   })
 
   const Icon = isDropdownOpened ? Cross : Burger
@@ -134,13 +97,7 @@ const Header: React.FC<Props> = ({
   )
 
   return (
-    <header
-      data-testid="Header:block"
-      className={cn(className, {
-        visible: isHeaderVisible,
-        invisible: !isHeaderVisible,
-      })}
-    >
+    <header data-testid="Header:block" className={className}>
       <LinkComponent href={logo.href} className="logo-wrapper" data-testid={logo.testId}>
         <Logo className="logo" />
       </LinkComponent>

diff --git a/packages/core-design/src/components/Header/Menu/Nav/Nav.styles.ts b/packages/core-design/src/components/Header/Menu/Nav/Nav.styles.ts
@@ -18,7 +18,6 @@ const base = (props: ThemeProps) => {
       overflow: hidden;
       will-change: height;
       transition: height 75ms ease-out;
-      background-color: ${colors.secondary.darken100};
     }
 
     &.visible {
@@ -64,7 +63,7 @@ const base = (props: ThemeProps) => {
     }
 
     .nav_howWeWork,
-    .nav_products,
+    .nav_solutions,
     .nav_industries {
       .nav-item {
         width: 50%;
@@ -147,7 +146,7 @@ const base = (props: ThemeProps) => {
 
     .nav_services_children_number_3,
     .nav_howWeWork,
-    .nav_products {
+    .nav_solutions {
       .icon {
         top: ${calcRem(68)};
       }
@@ -202,7 +201,7 @@ const base = (props: ThemeProps) => {
 
     @media (pointer: fine) {
       .nav_howWeWork,
-      .nav_products,
+      .nav_solutions,
       .nav_industries {
         .link:hover {
           color: #5695ed;
@@ -257,7 +256,7 @@ const base = (props: ThemeProps) => {
     }
 
     .nav_howWeWork,
-    .nav_products,
+    .nav_solutions,
     .nav_industries {
       .nav-item_active .link {
         color: #5695ed;
@@ -282,8 +281,8 @@ const base = (props: ThemeProps) => {
       }
     }
 
-    .nav_products .link:hover,
-    .nav_products .nav-item_active .link {
+    .nav_solutions .link:hover,
+    .nav_solutions .nav-item_active .link {
       .icon_lms {
         fill: #5695ed;
 
@@ -331,9 +330,11 @@ const base = (props: ThemeProps) => {
         .description {
           width: calc(100% - ${calcRem(25)});
         }
+
         .link {
           padding-left: ${calcRem(72)};
         }
+
         .nav-item {
           width: 33%;
         }
@@ -344,12 +345,15 @@ const base = (props: ThemeProps) => {
           width: 21.875%;
           margin-left: ${calcRem(16)};
         }
+
         .icon {
           left: ${calcRem(23)};
         }
+
         .title {
           width: 100%;
         }
+
         .description {
           width: calc(100% - ${calcRem(15)});
         }
@@ -360,13 +364,14 @@ const base = (props: ThemeProps) => {
           padding-top: ${calcRem(64)};
           padding-left: ${calcRem(89)};
         }
+
         .icon {
           top: ${calcRem(81)};
         }
       }
 
       .nav_howWeWork,
-      .nav_products {
+      .nav_solutions {
         .description {
           width: calc(100% - ${calcRem(92)});
         }
@@ -429,22 +434,23 @@ const base = (props: ThemeProps) => {
         padding-left: 0;
       }
 
-      .title {
-        margin-top: ${calcRem(8)};
-        font-size: ${calcRem(16)};
-        line-height: ${calcRem(24)};
-      }
-
       .nav_services {
         .link {
           padding-top: 0;
           padding-left: 0;
         }
+
         .nav-item {
           margin-left: 0;
         }
       }
 
+      .title {
+        margin-top: ${calcRem(8)};
+        font-size: ${calcRem(16)};
+        line-height: ${calcRem(24)};
+      }
+
       .description {
         margin-top: ${calcRem(6)};
         font-size: ${calcRem(12)};
@@ -459,7 +465,7 @@ const base = (props: ThemeProps) => {
 
       .nav_industries,
       .nav_howWeWork,
-      .nav_products,
+      .nav_solutions,
       .nav_services {
         .nav-item {
           width: 100%;
@@ -473,7 +479,7 @@ const base = (props: ThemeProps) => {
       }
 
       .nav_howWeWork,
-      .nav_products {
+      .nav_solutions {
         ul {
           margin-top: ${calcRem(27)};
         }
@@ -492,13 +498,16 @@ const base = (props: ThemeProps) => {
         ul {
           margin-top: ${calcRem(19)};
         }
+
         .nav-item {
           width: 100%;
           height: auto;
         }
+
         .title {
           margin-top: 0;
         }
+
         .nav-item:not(:first-of-type) {
           margin-top: ${calcRem(35)};
         }

diff --git a/packages/core-design/src/data/headerLinks.tsx b/packages/core-design/src/data/headerLinks.tsx
@@ -26,17 +26,18 @@ export const menu = [
         testId: 'Header:nav:link.outsourcing',
         icon: Circle,
         component: Link,
-        title: 'Outsourcing <span style="white-space: nowrap;">Front-end</span>',
-        description: 'Web development to&nbsp;complement core competencies.',
+        title: 'Web Development',
+        description: 'Fast, reliable and professional web development services.',
         href: 'https://csssr.com/en/service/outsourcing-front-end',
       },
       {
         id: 'express',
         testId: 'Header:nav:link.express',
         icon: Triangle,
         component: Link,
-        title: 'Express Web Development',
-        description: 'Fixed rates for straight-forward, time-sensitive services.',
+        title: 'PSD to HTML Conversion',
+        description:
+          'Turn your design (PSD, Sketch, Figma) into <span style="white-space: nowrap;">HTML-pages</span>.',
         href: 'https://csssr.com/en/service/express-front-end',
       },
       {
@@ -126,9 +127,9 @@ export const menu = [
     ],
   },
   {
-    id: 'products',
+    id: 'solutions',
     testId: 'Header:nav:button.products',
-    title: 'Products',
+    title: 'Solutions',
     links: [
       {
         id: 'lms',

diff --git a/packages/core-design/src/static/video/camp.mp4 b/packages/core-design/src/static/video/camp.mp4