From 7971da3767611d2620940c87d082f514a521c571 Mon Sep 17 00:00:00 2001
From: ngorin <ngorin@yandex-team.ru>
Date: Tue, 28 Feb 2023 13:22:07 +0300
Subject: [PATCH] fix: add mixin for navigation item and refactor

---
 .../components/NavigationItem/NavigationItem.tsx         | 7 +------
 .../components/GithubStars/GithubStars.scss              | 3 +++
 .../NavigationDropdown/NavigationDropdown.scss           | 9 +++++++--
 .../components/NavigationDropdown/NavigationDropdown.tsx | 5 +++--
 .../components/NavigationLink/NavigationLink.scss        | 2 ++
 .../NavigationItem/{NavigationItem.scss => mixins.scss}  | 6 +-----
 6 files changed, 17 insertions(+), 15 deletions(-)
 rename src/navigation/components/NavigationItem/{NavigationItem.scss => mixins.scss} (52%)

diff --git a/src/navigation/components/NavigationItem/NavigationItem.tsx b/src/navigation/components/NavigationItem/NavigationItem.tsx
index e33316f8f..4c37b4d41 100644
--- a/src/navigation/components/NavigationItem/NavigationItem.tsx
+++ b/src/navigation/components/NavigationItem/NavigationItem.tsx
@@ -1,6 +1,5 @@
 import React, {MouseEventHandler, useMemo} from 'react';
 
-import {block} from '../../../utils';
 import {NavigationItemType, NavigationItemData} from '../../../models';
 import SocialIcon from '../SocialIcon/SocialIcon';
 
@@ -9,10 +8,6 @@ import {NavigationDropdown} from './components/NavigationDropdown/NavigationDrop
 import {NavigationLink} from './components/NavigationLink/NavigationLink';
 import {GithubStars} from './components/GithubStars/GithubStars';
 
-import './NavigationItem.scss';
-
-const b = block('navigation-item');
-
 export interface NavigationItemProps {
     data: NavigationItemData;
     className?: string;
@@ -35,7 +30,7 @@ const NavigationItem: React.FC<NavigationItemProps> = ({data, className, ...prop
     const Component = NavigationItemsMap[type];
     const componentProps = useMemo(
         () => ({
-            className: b(null, className),
+            className,
             ...data,
             ...props,
         }),
diff --git a/src/navigation/components/NavigationItem/components/GithubStars/GithubStars.scss b/src/navigation/components/NavigationItem/components/GithubStars/GithubStars.scss
index 988f0fead..2db6fbf01 100644
--- a/src/navigation/components/NavigationItem/components/GithubStars/GithubStars.scss
+++ b/src/navigation/components/NavigationItem/components/GithubStars/GithubStars.scss
@@ -1,8 +1,11 @@
 @import '../../../../../../styles/variables';
+@import '../../mixins';
 
 $block: '.#{$ns}github-stars';
 
 #{$block} {
+    @include navigation-item-display();
+
     display: flex;
     align-items: center;
     height: 100%;
diff --git a/src/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.scss b/src/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.scss
index a5716e70f..ed6f418bb 100644
--- a/src/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.scss
+++ b/src/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.scss
@@ -1,9 +1,14 @@
 @import '../../../../../../styles/variables';
+@import '../../mixins';
 
 $block: '.#{$ns}navigation-dropdown';
 
 #{$block} {
-    margin-left: 7px;
+    @include navigation-item-display();
 
-    color: var(--yc-color-text-secondary);
+    &__arrow {
+        margin-left: 7px;
+
+        color: var(--yc-color-text-secondary);
+    }
 }
diff --git a/src/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.tsx b/src/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.tsx
index 12dfd1589..e0b2ac40e 100644
--- a/src/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.tsx
+++ b/src/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.tsx
@@ -21,15 +21,16 @@ export const NavigationDropdown: React.FC<NavigationDropdownProps> = ({
     text,
     icon,
     isOpened,
+    className,
     ...props
 }) => {
     const iconData = icon && getMediaImage(icon);
 
     return (
-        <span {...props}>
+        <span {...props} className={b(null, className)}>
             <ContentWrapper text={text} icon={iconData} />
             <ToggleArrow
-                className={b()}
+                className={b('arrow')}
                 size={TOGGLE_ARROW_SIZE}
                 type={'vertical'}
                 iconType="navigation"
diff --git a/src/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.scss b/src/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.scss
index 3812cefee..4dcdc0f17 100644
--- a/src/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.scss
+++ b/src/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.scss
@@ -1,10 +1,12 @@
 @import '../../../../../../styles/variables';
 @import '../../../../../../styles/mixins';
+@import '../../mixins';
 
 $block: '.#{$ns}navigation-link';
 
 #{$block} {
     @include navigation-item();
+    @include navigation-item-display();
 
     &__arrow {
         position: relative;
diff --git a/src/navigation/components/NavigationItem/NavigationItem.scss b/src/navigation/components/NavigationItem/mixins.scss
similarity index 52%
rename from src/navigation/components/NavigationItem/NavigationItem.scss
rename to src/navigation/components/NavigationItem/mixins.scss
index 18553212a..b7d37b07d 100644
--- a/src/navigation/components/NavigationItem/NavigationItem.scss
+++ b/src/navigation/components/NavigationItem/mixins.scss
@@ -1,8 +1,4 @@
-@import '../../../../styles/variables';
-
-$block: '.#{$ns}navigation-item';
-
-#{$block} {
+@mixin navigation-item-display {
     position: relative;
 
     display: flex;