feat: update header and navigation (#369)

Juli Ovechkina · aeksandla · web-flow · commit 7757ec1b80b2 · 2023-06-13T12:12:00.000+01:00
* feat(Header): update indents (#368) * feat(navigation): add prop withBorder by default (#363) --------- Co-authored-by: Aleksandra Pleshcheva <46083995+aeksandla@users.noreply.github.com>
diff --git a/src/blocks/Header/Header.scss b/src/blocks/Header/Header.scss
@@ -6,7 +6,6 @@ $backgroundWidth: 1440px;
 
 #{$block} {
     position: relative;
-    margin: $indentXS 0;
 
     &_full-width {
         --pc-border-radius: 0;
@@ -36,19 +35,19 @@ $backgroundWidth: 1440px;
             margin: $indentXS 0;
 
             &_s {
-                padding: $indentL 0;
+                padding: $indentXL 0;
             }
 
             &_m {
-                padding: calc(#{$indentXXL} - #{$indentXS}) 0;
+                padding: $indentXXL 0;
             }
 
             &_l {
-                padding: calc(#{$indentXXXL} - #{$indentXS}) 0;
+                padding: $indentXXXL 0;
             }
 
             &_xl {
-                padding: calc(#{$indent4XL} - #{$indentXS}) 0;
+                padding: $indent4XL 0;
             }
         }
 
@@ -100,10 +99,10 @@ $backgroundWidth: 1440px;
     &__media {
         position: absolute;
         display: none;
-        top: 0;
+        top: $indentXS;
         right: 0;
         width: 50%;
-        height: 100%;
+        height: calc(100% - 2 * #{$indentXS});
         overflow: hidden;
         object-fit: cover;
 
diff --git a/src/containers/PageConstructor/__stories__/PageConstructor.stories.tsx b/src/containers/PageConstructor/__stories__/PageConstructor.stories.tsx
@@ -14,18 +14,16 @@ export default {
 
 const DefaultTemplate: Story<PageConstructorProps> = (args) => <PageConstructor {...args} />;
 
-const NavigationTemplate: Story<PageConstructorProps> = (args) => <PageConstructor {...args} />;
-
 const WithFullWidthBackgroundMediaTemplate: Story<PageConstructorProps> = (args) => (
     <PageConstructor {...args} />
 );
 
 export const Default = DefaultTemplate.bind({});
-export const Navigation = NavigationTemplate.bind({});
+export const withNavigation = DefaultTemplate.bind({});
 export const WithFullWidthBackgroundMedia = WithFullWidthBackgroundMediaTemplate.bind({});
 
 Default.args = data.default as PageConstructorProps;
-Navigation.args = {
+withNavigation.args = {
     content: {
         blocks: data.default.content.blocks,
     },
diff --git a/src/demo/constants.ts b/src/demo/constants.ts
@@ -1,6 +1,7 @@
 export const BLOCKS = 'Blocks';
 export const COMPONENTS = 'Components';
 export const CONTAINERS = 'Containers';
+export const NAVIGATION = 'Navigation';
 export const EDITOR = 'Editor(Beta)';
 export const BUTTONS_LINKS = 'Links and buttons';
 export const CARDS = 'Cards';
diff --git a/src/models/navigation.ts b/src/models/navigation.ts
@@ -85,6 +85,7 @@ export interface HeaderData {
     leftItems: NavigationItemModel[];
     rightItems?: NavigationItemModel[];
     iconSize?: number;
+    withBorder?: boolean;
 }
 
 export interface FooterColumn {
diff --git a/src/navigation/__stories__/Navigation.stories.tsx b/src/navigation/__stories__/Navigation.stories.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {Meta, Story} from '@storybook/react/types-6-0';
+
+import {PageConstructor} from '../../containers/PageConstructor';
+import {NAVIGATION} from '../../demo/constants';
+import {NavigationData} from '../../models';
+
+import data from './data.json';
+
+export default {
+    title: `${NAVIGATION}/Navigation`,
+    component: PageConstructor,
+} as Meta;
+
+const DefaultTemplate: Story<NavigationData> = (args) => <PageConstructor navigation={args} />;
+export const DefaultNavigation = DefaultTemplate.bind({});
+export const NavigationWithBorder = DefaultTemplate.bind({});
+
+DefaultNavigation.args = data.navigation as NavigationData;
+
+NavigationWithBorder.args = {
+    ...data.navigation,
+    header: {
+        ...data.navigation.header,
+        withBorder: true,
+    },
+} as NavigationData;
diff --git a/src/navigation/__stories__/data.json b/src/navigation/__stories__/data.json
@@ -0,0 +1,126 @@
+{
+  "navigation": {
+    "logo": {
+      "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg",
+      "text": "Logo",
+      "dark": {
+        "text": "Logo Dark",
+        "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_dark.svg"
+      },
+      "light": {
+        "text": "Logo Light"
+      }
+    },
+    "header": {
+      "leftItems": [
+        {
+          "text": "Dropdown 1",
+          "type": "dropdown",
+          "items": [
+            {
+              "text": "Lorem ipsum",
+              "url": "https://example.com",
+              "type": "link"
+            },
+            {
+              "text": "Dolor sit amet",
+              "url": "https://example.com",
+              "type": "link"
+            },
+            {
+              "text": "Consectetur adipiscing",
+              "url": "https://example.com",
+              "type": "link"
+            },
+            {
+              "text": "Ut enim ad minim ",
+              "url": "https://example.com",
+              "type": "link"
+            }
+          ]
+        },
+        {
+          "text": "Dropdown2",
+          "type": "dropdown",
+          "items": [
+            {
+              "text": "Lorem ipsum ",
+              "url": "https://example.com"
+            },
+            {
+              "text": "Dolor sit amet",
+              "url": "https://example.com"
+            },
+            {
+              "text": "Consectetur adipiscing",
+              "url": "https://example.com"
+            },
+            {
+              "text": "Ut enim ad minim ",
+              "url": "https://example.com"
+            }
+          ]
+        },
+        {
+          "type": "link",
+          "text": "Link with spaces",
+          "url": "https://example.com",
+          "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_light.svg"
+        },
+        {
+          "type": "link",
+          "text": "Link with arrow",
+          "url": "https://example.com",
+          "arrow": true
+        },
+        {
+          "type": "link",
+          "text": "Link3",
+          "url": "https://example.com"
+        },
+        {
+          "type": "link",
+          "text": "Link4",
+          "url": "https://example.com"
+        }
+      ],
+      "rightItems": [
+        {
+          "type": "dropdown",
+          "text": "Language",
+          "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_light.svg",
+          "items": [
+            {
+              "text": "Russian",
+              "url": "/ru",
+              "type": "link"
+            },
+            {
+              "text": "English",
+              "url": "/",
+              "type": "link"
+            }
+          ]
+        },
+        {
+          "type": "github-button",
+          "text": "Star",
+          "label": "Star @gravity-ui/page-constructor on GitHub",
+          "url": "https://github.com/gravity-ui/page-constructor"
+        },
+        {
+          "type": "link",
+          "text": "Link",
+          "url": "https://example.com",
+          "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_2_light.svg"
+        },
+        {
+          "type": "button",
+          "text": "Button",
+          "url": "https://example.com",
+          "theme": "pseudo"
+        }
+      ]
+    }
+  }
+}
diff --git a/src/navigation/components/Header/Header.scss b/src/navigation/components/Header/Header.scss
@@ -17,7 +17,10 @@ $block: '.#{$ns}header';
     height: var(--header-height);
 
     background-color: var(--yc-color-base-background);
-    box-shadow: inset 0 -1px 0 var(--yc-color-line-generic);
+
+    &_with-border {
+        box-shadow: inset 0 -1px 0 var(--yc-color-line-generic);
+    }
 
     &__wrapper {
         display: flex;
diff --git a/src/navigation/components/Header/Header.tsx b/src/navigation/components/Header/Header.tsx
@@ -1,4 +1,6 @@
-import React, {MouseEvent, useCallback, useMemo, useState} from 'react';
+import React, {MouseEvent, useCallback, useEffect, useMemo, useState} from 'react';
+
+import _ from 'lodash';
 
 import Control from '../../../components/Control/Control';
 import OutsideClick from '../../../components/OutsideClick/OutsideClick';
@@ -68,9 +70,10 @@ const isDropdownItem = (item: NavigationItemModel): item is NavigationDropdownIt
     item.type === NavigationItemType.Dropdown;
 
 export const Header: React.FC<HeaderProps> = ({data, logo}) => {
-    const {leftItems, rightItems, iconSize = 20} = data;
+    const {leftItems, rightItems, iconSize = 20, withBorder = false} = data;
     const [isSidebarOpened, setIsSidebarOpened] = useState(false);
-    const [activeItemId, setactiveItemId] = useState<string | undefined>(undefined);
+    const [activeItemId, setActiveItemId] = useState<string | undefined>(undefined);
+    const [showBorder, setShowBorder] = useState(withBorder);
 
     const getNavigationItemWithIconSize = useCallback(
         (item: NavigationItemModel) => {
@@ -99,7 +102,7 @@ export const Header: React.FC<HeaderProps> = ({data, logo}) => {
     );
 
     const onActiveItemChange = useCallback((id?: string) => {
-        setactiveItemId(id);
+        setActiveItemId(id);
     }, []);
 
     const hidePopup = useCallback(() => {
@@ -114,8 +117,19 @@ export const Header: React.FC<HeaderProps> = ({data, logo}) => {
         setIsSidebarOpened(false);
     }, []);
 
+    useEffect(() => {
+        const showBorderOnScroll = () => {
+            if (!showBorder) {
+                setShowBorder(window.scrollY > 0);
+            }
+        };
+
+        window.addEventListener('scroll', _.debounce(showBorderOnScroll, 20), {passive: true});
+        return () => window.removeEventListener('scroll', _.debounce(showBorderOnScroll, 20));
+    });
+
     return (
-        <Grid className={b()}>
+        <Grid className={b({'with-border': showBorder})}>
             <Row>
                 <Col>
                     <header className={b('wrapper')}>

Original file line number	Diff line number	Diff line change
`@@ -85,6 +85,7 @@ export interface HeaderData {`
`85`	`85`	`leftItems: NavigationItemModel[];`
`86`	`86`	`rightItems?: NavigationItemModel[];`
`87`	`87`	`iconSize?: number;`
	`88`	`+ withBorder?: boolean;`
`88`	`89`	`}`
`89`	`90`
`90`	`91`	`export interface FooterColumn {`