From c717b870b55d1405ef379f9bf0de443fde58da16 Mon Sep 17 00:00:00 2001
From: Roman Karpov <roman-karpov@yandex-team.ru>
Date: Fri, 1 Dec 2023 15:00:25 +0100
Subject: [PATCH] fix: simplify custom navItem story

---
 .../CustomComponent/CustomComponent.scss      | 50 ++-------------
 .../CustomComponent/CustomComponent.tsx       | 61 ++++---------------
 .../ItemListContent/ItemListContent.scss      | 20 ------
 .../ItemListContent/ItemListContent.tsx       | 36 -----------
 .../NavigationPopupItem.scss                  | 46 --------------
 .../NavigationPopupItem.tsx                   | 35 -----------
 .../__stories__/Navigation.stories.tsx        | 10 ++-
 7 files changed, 21 insertions(+), 237 deletions(-)
 delete mode 100644 src/navigation/__stories__/CustomComponent/components/ItemListContent/ItemListContent.scss
 delete mode 100644 src/navigation/__stories__/CustomComponent/components/ItemListContent/ItemListContent.tsx
 delete mode 100644 src/navigation/__stories__/CustomComponent/components/NavigationPopupItem/NavigationPopupItem.scss
 delete mode 100644 src/navigation/__stories__/CustomComponent/components/NavigationPopupItem/NavigationPopupItem.tsx

diff --git a/src/navigation/__stories__/CustomComponent/CustomComponent.scss b/src/navigation/__stories__/CustomComponent/CustomComponent.scss
index 8cf5d3122..76c8c15da 100644
--- a/src/navigation/__stories__/CustomComponent/CustomComponent.scss
+++ b/src/navigation/__stories__/CustomComponent/CustomComponent.scss
@@ -1,51 +1,11 @@
 @import '../../../../styles/variables';
 
 .dropdown-navigation-item {
-    &__control {
-        text-wrap: nowrap;
-        display: flex;
-        align-items: center;
+    text-wrap: nowrap;
+    display: flex;
+    align-items: center;
 
-        &:hover {
-            color: var(--g-color-text-brand);
-        }
-
-        &_active {
-            color: var(--g-color-text-brand-heavy);
-        }
-    }
-
-    &__text {
-        margin-right: var(--g-spacing-1);
-    }
-
-    &__arrow {
-        margin-left: auto;
-    }
-
-    &__dropdown {
-        width: 100%;
-    }
-
-    &__dropdown-content-wrapper {
-        background-color: transparent;
-        border-color: transparent;
-        border-radius: 0px;
-        border-width: 0px;
-        box-shadow: none;
-    }
-
-    &__dropdown-content-container {
-        padding: 0 var(--g-spacing-5);
-    }
-
-    &__dropdown-content {
-        background-color: var(--g-color-base-brand);
-        padding: var(--g-spacing-5) var(--g-spacing-3);
-        border-radius: 24px;
-    }
-
-    &__foldable-content-container {
-        padding: 0px;
+    &:hover {
+        color: var(--g-color-text-brand);
     }
 }
diff --git a/src/navigation/__stories__/CustomComponent/CustomComponent.tsx b/src/navigation/__stories__/CustomComponent/CustomComponent.tsx
index 714bc2e8f..c02614291 100644
--- a/src/navigation/__stories__/CustomComponent/CustomComponent.tsx
+++ b/src/navigation/__stories__/CustomComponent/CustomComponent.tsx
@@ -1,14 +1,7 @@
-import React, {useRef} from 'react';
+import React from 'react';
 
-import {Popup} from '@gravity-ui/uikit';
-
-import {Foldable, ToggleArrow} from '../../../components';
-import {Col, Grid, Row} from '../../../grid';
-import {NavigationDropdownItem} from '../../../models';
 import {cn} from '../../../utils';
-import {NavigationItemProps, NavigationLayout} from '../../models';
-
-import {ItemListContent} from './components/ItemListContent/ItemListContent';
+import {NavigationItemProps} from '../../models';
 
 import './CustomComponent.scss';
 
@@ -16,48 +9,18 @@ const b = cn('dropdown-navigation-item');
 
 type DCDropdownNavigationItemProps = Pick<
     NavigationItemProps,
-    'onClick' | 'isActive' | 'hidePopup' | 'menuLayout'
-> &
-    NavigationDropdownItem;
+    'onClick' | 'isActive' | 'menuLayout'
+>;
 
 export const CustomComponent: React.FC<DCDropdownNavigationItemProps> = (props) => {
-    const {onClick, hidePopup, isActive, items, text, menuLayout} = props;
-    const ref = useRef<HTMLDivElement>(null);
-
+    const {onClick, isActive, menuLayout} = props;
     return (
-        <React.Fragment>
-            <div ref={ref} className={b('control', {active: isActive})} onClick={onClick}>
-                <span className={b('text')}>{text}</span>{' '}
-                <ToggleArrow
-                    className={b('arrow')}
-                    type={'vertical'}
-                    iconType="navigation"
-                    open={isActive}
-                />
-            </div>
-            {menuLayout === NavigationLayout.Desktop ? (
-                <Popup
-                    anchorRef={ref}
-                    className={b('dropdown')}
-                    contentClassName={b('dropdown-content-wrapper')}
-                    open={isActive || false}
-                    onClose={hidePopup}
-                >
-                    <Grid containerClass={b('dropdown-content-container')}>
-                        <Row className={b('dropdown-content')}>
-                            <Col>
-                                <ItemListContent items={items} />
-                            </Col>
-                        </Row>
-                    </Grid>
-                </Popup>
-            ) : (
-                <Foldable isOpened={isActive || false}>
-                    <Grid containerClass={b('foldable-content-container')}>
-                        <ItemListContent items={items} mobile />
-                    </Grid>
-                </Foldable>
-            )}
-        </React.Fragment>
+        <div className={b({active: isActive})} onClick={onClick}>
+            <span className={b('text')}>Custom Item</span>
+            {' ('}
+            {`${menuLayout}`}
+            {isActive && ' - active'}
+            {')'}
+        </div>
     );
 };
diff --git a/src/navigation/__stories__/CustomComponent/components/ItemListContent/ItemListContent.scss b/src/navigation/__stories__/CustomComponent/components/ItemListContent/ItemListContent.scss
deleted file mode 100644
index 792362526..000000000
--- a/src/navigation/__stories__/CustomComponent/components/ItemListContent/ItemListContent.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@import '../../../../../../styles/variables';
-
-.item-list-content {
-    --item-spacing: var(--g-spacing-half);
-
-    &__item {
-        &:not(:last-child) {
-            margin-bottom: var(--item-spacing);
-        }
-    }
-
-    &_mobile {
-        --item-spacing: var(--g-spacing-1);
-
-        background-color: var(--g-color-base-brand);
-        padding: var(--g-spacing-3) 0px;
-        border-radius: 8px;
-        margin-top: var(--g-spacing-3);
-    }
-}
diff --git a/src/navigation/__stories__/CustomComponent/components/ItemListContent/ItemListContent.tsx b/src/navigation/__stories__/CustomComponent/components/ItemListContent/ItemListContent.tsx
deleted file mode 100644
index 2d1cfcd72..000000000
--- a/src/navigation/__stories__/CustomComponent/components/ItemListContent/ItemListContent.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-
-import {GridColumnSize, Row} from '../../../../../grid';
-import {NavigationLinkItem} from '../../../../../models';
-import {cn} from '../../../../../utils';
-import {NavigationPopupItem} from '../NavigationPopupItem/NavigationPopupItem';
-
-import './ItemListContent.scss';
-
-const b = cn('item-list-content');
-
-const popupItemSizes = {
-    [GridColumnSize.Xl]: 3,
-    [GridColumnSize.Md]: 4,
-    [GridColumnSize.All]: 12,
-};
-
-interface ItemListContentProps {
-    items: NavigationLinkItem[];
-    mobile?: boolean;
-}
-
-export const ItemListContent: React.FC<ItemListContentProps> = ({items, mobile = false}) => (
-    <Row className={b({mobile})}>
-        {items.map((item) => (
-            <NavigationPopupItem
-                {...item}
-                key={item.text}
-                hover
-                sizes={popupItemSizes}
-                padding={mobile ? 's' : 'default'}
-                className={b('item')}
-            />
-        ))}
-    </Row>
-);
diff --git a/src/navigation/__stories__/CustomComponent/components/NavigationPopupItem/NavigationPopupItem.scss b/src/navigation/__stories__/CustomComponent/components/NavigationPopupItem/NavigationPopupItem.scss
deleted file mode 100644
index dbb6ae177..000000000
--- a/src/navigation/__stories__/CustomComponent/components/NavigationPopupItem/NavigationPopupItem.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@import '../../../../../../styles/mixins';
-@import '../../../../../../styles/variables';
-
-.navigation-popup-item {
-    --container-icon-size: 20px;
-
-    @include text-size(body-2);
-
-    &__content {
-        display: flex;
-        border-radius: var(--g-border-radius-xl);
-        height: 100%;
-
-        &_padding {
-            &_default {
-                padding: var(--g-spacing-3);
-            }
-
-            &_s {
-                padding: var(--g-spacing-2) var(--g-spacing-3);
-            }
-        }
-
-        &:hover,
-        &:active {
-            color: var(--g-color-base-brand);
-        }
-
-        &_hover {
-            &:hover,
-            &:active {
-                color: inherit;
-            }
-
-            &:hover {
-                background-color: var(--g-color-base-simple-hover);
-            }
-        }
-    }
-
-    &__container {
-        &_with-margin {
-            margin-left: var(--g-spacing-7);
-        }
-    }
-}
diff --git a/src/navigation/__stories__/CustomComponent/components/NavigationPopupItem/NavigationPopupItem.tsx b/src/navigation/__stories__/CustomComponent/components/NavigationPopupItem/NavigationPopupItem.tsx
deleted file mode 100644
index a89d4dc0c..000000000
--- a/src/navigation/__stories__/CustomComponent/components/NavigationPopupItem/NavigationPopupItem.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-
-import {Col, GridColumnSizesType} from '../../../../../grid';
-import {NavigationLinkItem} from '../../../../../models';
-import {cn} from '../../../../../utils';
-
-import './NavigationPopupItem.scss';
-
-const b = cn('navigation-popup-item');
-
-export type NavigationPopupItemProps = NavigationLinkItem & {
-    className?: string;
-    hover?: boolean;
-    sizes: GridColumnSizesType;
-    padding: 'default' | 's';
-};
-
-export const NavigationPopupItem: React.FC<NavigationPopupItemProps> = ({
-    className,
-    hover,
-    url,
-    text,
-    sizes,
-    padding = 'default',
-}) => (
-    <Col className={b(null, className)} sizes={sizes}>
-        <a className={b('content', {hover, padding})} href={url}>
-            <div className={b('container')}>
-                <div className={b('title-tag-wrapper')}>
-                    <span className={b('title')}>{text}</span>
-                </div>
-            </div>
-        </a>
-    </Col>
-);
diff --git a/src/navigation/__stories__/Navigation.stories.tsx b/src/navigation/__stories__/Navigation.stories.tsx
index 4059a770e..f32750620 100644
--- a/src/navigation/__stories__/Navigation.stories.tsx
+++ b/src/navigation/__stories__/Navigation.stories.tsx
@@ -39,19 +39,17 @@ NavigationWithBorder.args = {
 NavigationWithCustomItems.args = {
     custom: {
         navigation: {
-            'custom-dropdown': CustomComponent,
+            'custom-item': CustomComponent,
         },
     },
     navigation: {
         ...data.navigation,
         header: {
             ...data.navigation.header,
-            leftItems: [
-                ...data.navigation.header.leftItems,
+            rightItems: [
+                ...data.navigation.header.rightItems,
                 {
-                    ...data.navigation.header.leftItems[0],
-                    type: 'custom-dropdown',
-                    text: `${data.navigation.header.leftItems[0].text} (Custom)`,
+                    type: 'custom-item',
                 },
             ],
         },