feat(Navigation): provide dropdown props to custom components (#721)

* feat(Navigation): provide dropdown props to custom components

* feat(Navigation): add layout data to custom component

* fix: clearer code & storybook

* fix: cleanup

* fix: better naming in stories

* fix: simplify custom navItem story

* fix: clearer storybook

Author: DC-RomanKarpov

src/navigation/__stories__/CustomComponent/CustomComponent.scss

@@ -0,0 +1,7 @@
+.custom-nav-item {
+    white-space: nowrap;
+
+    &:hover {
+        color: var(--g-color-text-brand);
+    }
+}

src/navigation/__stories__/CustomComponent/CustomComponent.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import {cn} from '../../../utils';
+import {NavigationItemProps} from '../../models';
+
+import './CustomComponent.scss';
+
+const b = cn('custom-nav-item');
+
+type DCDropdownNavigationItemProps = Pick<
+    NavigationItemProps,
+    'onClick' | 'isActive' | 'menuLayout'
+>;
+
+export const CustomComponent: React.FC<DCDropdownNavigationItemProps> = (props) => {
+    const {onClick, isActive, menuLayout} = props;
+    return (
+        <div className={b({active: isActive})} onClick={onClick}>
+            {`Custom Item (${menuLayout}${isActive ? ' - active' : ''})`}
+        </div>
+    );
+};

src/navigation/__stories__/Navigation.stories.tsx

@@ -5,6 +5,8 @@ import {Meta, StoryFn} from '@storybook/react';
 import {PageConstructor} from '../../containers/PageConstructor';
 import {CustomConfig, NavigationData} from '../../models';
 
+import {CustomComponent} from './CustomComponent/CustomComponent';
+
 import data from './data.json';
 
 export default {
@@ -37,14 +39,19 @@ NavigationWithBorder.args = {
 NavigationWithCustomItems.args = {
     custom: {
         navigation: {
-            search: () => <div>Search</div>,
+            'custom-item': CustomComponent,
         },
     },
     navigation: {
         ...data.navigation,
         header: {
             ...data.navigation.header,
-            rightItems: [...data.navigation.header.rightItems, {type: 'search'}],
+            rightItems: [
+                ...data.navigation.header.rightItems,
+                {
+                    type: 'custom-item',
+                },
+            ],
         },
     } as NavigationData,
 };

src/navigation/components/NavigationItem/NavigationItem.tsx

@@ -3,7 +3,7 @@ import React, {useMemo} from 'react';
 import omit from 'lodash/omit';
 
 import {BlockIdContext} from '../../../context/blockIdContext';
-import {CustomItem, NavigationItemType} from '../../../models';
+import {CustomItem, NavigationItemType, NavigationItemTypes} from '../../../models';
 import {block} from '../../../utils';
 import {NavigationItemProps} from '../../models';
 
@@ -15,6 +15,10 @@ const b = block('navigation-item');
 
 const ANALYTICS_ID = 'navigation';
 
+const nonComplexNavigationItemTypes = NavigationItemTypes.filter(
+    (type) => type !== NavigationItemType.Dropdown,
+);
+
 const NavigationItem: React.FC<NavigationItemProps> = ({
     data,
     className,
@@ -30,12 +34,14 @@ const NavigationItem: React.FC<NavigationItemProps> = ({
             ...props,
         };
 
-        if (type !== NavigationItemType.Dropdown) {
+        if (nonComplexNavigationItemTypes.includes(type)) {
             return omit(componentProperties, 'hidePopup', 'isActive');
         }
 
-        return componentProperties;
-    }, [data, props, type]);
+        return NavigationItemTypes.includes(type)
+            ? componentProperties
+            : {...componentProperties, menuLayout};
+    }, [data, props, type, menuLayout]);
 
     return (
         <BlockIdContext.Provider value={ANALYTICS_ID}>