From f139092b81431422a9d00b098c321a9d91f13700 Mon Sep 17 00:00:00 2001
From: nikita-jpg <56046344+nikita-jpg@users.noreply.github.com>
Date: Tue, 19 Mar 2024 08:47:46 +0000
Subject: [PATCH] chore: refactoring

---
 .../OnboardingMenu/OnboardingMenu.scss        | 28 ++++++-------------
 .../OnboardingMenu/OnboardingMenu.tsx         | 21 +++++++-------
 .../__stories__/OnboardingMenu.stories.tsx    |  7 +++--
 .../OnboardingMenuItem.scss                   | 14 ++++++----
 .../OnboardingMenuItem/OnboardingMenuItem.tsx |  8 +++---
 .../components/OnboardingMenuItem/index.ts    |  1 +
 .../OnboardingMenuItemText.tsx                |  2 +-
 .../OnboardingMenutemText.scss                |  2 +-
 .../OnboardingMenuItemText/index.ts           |  1 +
 .../OnboardingMenuItemImage.scss              |  2 +-
 .../OnboardingMenuItemImage.tsx               |  2 +-
 .../OnboardingMenutemImage/index.ts           |  1 +
 src/components/OnboardingMenu/index.ts        |  4 +++
 13 files changed, 48 insertions(+), 45 deletions(-)
 create mode 100644 src/components/OnboardingMenu/components/OnboardingMenuItem/index.ts
 rename src/components/OnboardingMenu/components/{OnboardingMenuItem/frequentFunctions => }/OnboardingMenuItemText/OnboardingMenuItemText.tsx (88%)
 rename src/components/OnboardingMenu/components/{OnboardingMenuItem/frequentFunctions => }/OnboardingMenuItemText/OnboardingMenutemText.scss (86%)
 create mode 100644 src/components/OnboardingMenu/components/OnboardingMenuItemText/index.ts
 rename src/components/OnboardingMenu/components/{OnboardingMenuItem/frequentFunctions => }/OnboardingMenutemImage/OnboardingMenuItemImage.scss (83%)
 rename src/components/OnboardingMenu/components/{OnboardingMenuItem/frequentFunctions => }/OnboardingMenutemImage/OnboardingMenuItemImage.tsx (89%)
 create mode 100644 src/components/OnboardingMenu/components/OnboardingMenutemImage/index.ts
 create mode 100644 src/components/OnboardingMenu/index.ts

diff --git a/src/components/OnboardingMenu/OnboardingMenu.scss b/src/components/OnboardingMenu/OnboardingMenu.scss
index 6e3bcaed..6c943b99 100644
--- a/src/components/OnboardingMenu/OnboardingMenu.scss
+++ b/src/components/OnboardingMenu/OnboardingMenu.scss
@@ -1,9 +1,7 @@
 @use '../variables.scss';
 @use '@gravity-ui/uikit/styles/mixins';
 
-$block: '.#{variables.$ns}guide';
-
-$layer-popup: 1000;
+$block: '.#{variables.$ns}onboarding-menu';
 
 #{$block} {
     max-width: 280px;
@@ -12,7 +10,7 @@ $layer-popup: 1000;
     width: fit-content;
 
     &__content {
-        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
+        box-shadow: 0 2px 8px 0 var(--g-color-sfx-shadow-light);
         display: flex;
         flex-direction: column;
         overflow: hidden;
@@ -31,19 +29,6 @@ $layer-popup: 1000;
         }
     }
 
-    &__title-text {
-        color: var(--g-color-text-brand-contrast);
-        @include mixins.text-subheader-2();
-
-        overflow: hidden;
-        text-overflow: ellipsis;
-        text-wrap: nowrap;
-
-        &_expand {
-            @include mixins.text-subheader-3();
-        }
-    }
-
     &__title {
         display: flex;
         align-items: center;
@@ -51,7 +36,6 @@ $layer-popup: 1000;
 
         margin-block-end: var(--g-spacing-1);
 
-        color: var(--g-color-text-light-primary);
         background: none;
         border: none;
         cursor: pointer;
@@ -59,15 +43,21 @@ $layer-popup: 1000;
 
         padding: 0;
 
+        color: var(--g-color-text-brand-contrast);
+        @include mixins.text-subheader-2();
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-wrap: nowrap;
+
         &_expand {
             margin-block-end: var(--g-spacing-2);
+            @include mixins.text-subheader-3();
         }
     }
 
     &__title-icon {
         flex-shrink: 0;
         margin-inline: var(--g-spacing-2) var(--g-spacing-2);
-        color: var(--g-color-text-brand-contrast);
     }
 
     &__header {
diff --git a/src/components/OnboardingMenu/OnboardingMenu.tsx b/src/components/OnboardingMenu/OnboardingMenu.tsx
index 55df8edc..70ed6be0 100644
--- a/src/components/OnboardingMenu/OnboardingMenu.tsx
+++ b/src/components/OnboardingMenu/OnboardingMenu.tsx
@@ -8,7 +8,7 @@ import i18n from './i18n';
 
 import './OnboardingMenu.scss';
 
-const cnOnboardingMenu = block('guide');
+const cnOnboardingMenu = block('onboarding-menu');
 
 export type OnboardingMenuProps = {
     title: React.ReactNode;
@@ -23,8 +23,8 @@ export type OnboardingMenuProps = {
     className?: string;
 
     onExpand?: (expanded: boolean) => void;
-    onCompleteClick: () => void;
-    onRollUpClick?: (event: React.MouseEvent) => void;
+    onCompleteClick: (event: React.MouseEvent) => void;
+    onCollapseClick?: (event: React.MouseEvent) => void;
 };
 
 export const OnboardingMenu = ({
@@ -33,7 +33,7 @@ export const OnboardingMenu = ({
     icon,
     defaultExpanded,
     onExpand,
-    onRollUpClick,
+    onCollapseClick,
     onCompleteClick,
     collapseButtonText,
     completeButtonText,
@@ -51,12 +51,12 @@ export const OnboardingMenu = ({
         }
     };
 
-    const onRollUpClickCallback = (event: React.MouseEvent) => {
+    const onCollapseClickCallback = (event: React.MouseEvent) => {
         const newExpand = !expand;
 
         setExpand(newExpand);
-        if (onRollUpClick) {
-            onRollUpClick(event);
+        if (onCollapseClick) {
+            onCollapseClick(event);
         }
         if (onExpand) {
             onExpand(newExpand);
@@ -81,9 +81,10 @@ export const OnboardingMenu = ({
                             />
                         ) : null}
 
-                        <span className={cnOnboardingMenu('title-text', {expand: expand})}>
+                        {/* <span>
                             {title}
-                        </span>
+                        </span> */}
+                        {title}
                     </button>
                     <Progress
                         size={expand ? 's' : 'xs'}
@@ -107,7 +108,7 @@ export const OnboardingMenu = ({
                             <Button
                                 view="normal-contrast"
                                 size="m"
-                                onClick={onRollUpClickCallback}
+                                onClick={onCollapseClickCallback}
                                 width="max"
                             >
                                 {collapseButtonText ?? i18n('collapse')}
diff --git a/src/components/OnboardingMenu/__stories__/OnboardingMenu.stories.tsx b/src/components/OnboardingMenu/__stories__/OnboardingMenu.stories.tsx
index 64297cc1..ae006491 100644
--- a/src/components/OnboardingMenu/__stories__/OnboardingMenu.stories.tsx
+++ b/src/components/OnboardingMenu/__stories__/OnboardingMenu.stories.tsx
@@ -8,8 +8,8 @@ import type {Meta, Story} from '@storybook/react';
 import type {OnboardingMenuProps} from '../OnboardingMenu';
 import {OnboardingMenu} from '../OnboardingMenu';
 import {OnboardingMenuItem} from '../components/OnboardingMenuItem/OnboardingMenuItem';
-import {OnboardingMenuItemText} from '../components/OnboardingMenuItem/frequentFunctions/OnboardingMenuItemText/OnboardingMenuItemText';
-import {OnboardingMenuItemImage} from '../components/OnboardingMenuItem/frequentFunctions/OnboardingMenutemImage/OnboardingMenuItemImage';
+import {OnboardingMenuItemText} from '../components/OnboardingMenuItemText/OnboardingMenuItemText';
+import {OnboardingMenuItemImage} from '../components/OnboardingMenutemImage/OnboardingMenuItemImage';
 
 export default {
     title: 'Components/OnboardingMenu',
@@ -57,6 +57,7 @@ LongHeader.args = {
 WithLoader.args = {
     title: 'Header text',
     defaultExpanded: true,
+    progress: 30,
     children: [
         <OnboardingMenuItem
             key={'testItem'}
@@ -242,8 +243,8 @@ WithManyItems.args = {
                     alt="2019"
                     key={'testItem'}
                 />,
+                <OnboardingMenuItemText text={'Test text'} key={'testItem'} />,
             ]}
-            {[<OnboardingMenuItemText text={'Test text'} key={'testItem'} />]}
         </OnboardingMenuItem>,
         <OnboardingMenuItem
             key={'testItem'}
diff --git a/src/components/OnboardingMenu/components/OnboardingMenuItem/OnboardingMenuItem.scss b/src/components/OnboardingMenu/components/OnboardingMenuItem/OnboardingMenuItem.scss
index 59173727..a205cf38 100644
--- a/src/components/OnboardingMenu/components/OnboardingMenuItem/OnboardingMenuItem.scss
+++ b/src/components/OnboardingMenu/components/OnboardingMenuItem/OnboardingMenuItem.scss
@@ -1,7 +1,7 @@
 @use '../../../variables.scss';
 @use '@gravity-ui/uikit/styles/mixins';
 
-$block: '.#{variables.$ns}guide-menu-item';
+$block: '.#{variables.$ns}onboarding-menu-item';
 
 #{$block} {
     &__collapse {
@@ -20,11 +20,15 @@ $block: '.#{variables.$ns}guide-menu-item';
         align-self: flex-start;
         display: flex;
         align-items: center;
-        height: --g-spacing-5;
+        height: var(--g-spacing-5);
     }
 
     &__status-icon {
-        color: var(--g-color-base-brand);
+        color: var(--g-color-text-positive);
+
+        &_pending {
+            color: var(--g-color-text-info);
+        }
 
         &_disabled {
             color: var(--g-color-text-hint);
@@ -61,7 +65,7 @@ $block: '.#{variables.$ns}guide-menu-item';
         margin: var(--g-spacing-3) var(--g-spacing-6);
     }
 
-    &__avatar {
+    &__skeleton-avatar {
         flex-shrink: 0;
         height: 20px;
         width: 20px;
@@ -70,7 +74,7 @@ $block: '.#{variables.$ns}guide-menu-item';
         margin-inline-end: 8px;
     }
 
-    &__person {
+    &__skeleton-title {
         height: 17px;
 
         width: 100%;
diff --git a/src/components/OnboardingMenu/components/OnboardingMenuItem/OnboardingMenuItem.tsx b/src/components/OnboardingMenu/components/OnboardingMenuItem/OnboardingMenuItem.tsx
index eb069231..695fb7b1 100644
--- a/src/components/OnboardingMenu/components/OnboardingMenuItem/OnboardingMenuItem.tsx
+++ b/src/components/OnboardingMenu/components/OnboardingMenuItem/OnboardingMenuItem.tsx
@@ -18,7 +18,7 @@ export type OnboardingMenuItemProps = {
 
 const ICON_SIZE = 20;
 
-const cnOnboardingMenuItem = block('guide-menu-item');
+const cnOnboardingMenuItem = block('onboarding-menu-item');
 
 export const OnboardingMenuItem = ({
     title,
@@ -34,7 +34,7 @@ export const OnboardingMenuItem = ({
                 <Icon
                     size={ICON_SIZE}
                     data={Clock}
-                    className={cnOnboardingMenuItem('status-icon')}
+                    className={cnOnboardingMenuItem('status-icon_pending')}
                 />
             );
         }
@@ -87,10 +87,10 @@ export const OnboardingMenuItem = ({
             <React.Fragment>
                 <div className={cnOnboardingMenuItem('skeleton')}>
                     <Skeleton
-                        className={cnOnboardingMenuItem('avatar')}
+                        className={cnOnboardingMenuItem('skeleton-avatar')}
                         style={{width: `${ICON_SIZE}px`, height: `${ICON_SIZE}px`}}
                     />
-                    <Skeleton className={cnOnboardingMenuItem('person')} />
+                    <Skeleton className={cnOnboardingMenuItem('skeleton-title')} />
                 </div>
                 {hasDivider && <div className={cnOnboardingMenuItem('divider')}></div>}
             </React.Fragment>
diff --git a/src/components/OnboardingMenu/components/OnboardingMenuItem/index.ts b/src/components/OnboardingMenu/components/OnboardingMenuItem/index.ts
new file mode 100644
index 00000000..2f030606
--- /dev/null
+++ b/src/components/OnboardingMenu/components/OnboardingMenuItem/index.ts
@@ -0,0 +1 @@
+export * from './OnboardingMenuItem';
diff --git a/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenuItemText/OnboardingMenuItemText.tsx b/src/components/OnboardingMenu/components/OnboardingMenuItemText/OnboardingMenuItemText.tsx
similarity index 88%
rename from src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenuItemText/OnboardingMenuItemText.tsx
rename to src/components/OnboardingMenu/components/OnboardingMenuItemText/OnboardingMenuItemText.tsx
index 17f4d87d..72922cdd 100644
--- a/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenuItemText/OnboardingMenuItemText.tsx
+++ b/src/components/OnboardingMenu/components/OnboardingMenuItemText/OnboardingMenuItemText.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {block} from '../../../../../utils/cn';
+import {block} from '../../../utils/cn';
 
 import './OnboardingMenutemText.scss';
 
diff --git a/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenuItemText/OnboardingMenutemText.scss b/src/components/OnboardingMenu/components/OnboardingMenuItemText/OnboardingMenutemText.scss
similarity index 86%
rename from src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenuItemText/OnboardingMenutemText.scss
rename to src/components/OnboardingMenu/components/OnboardingMenuItemText/OnboardingMenutemText.scss
index a4295758..0f4efce3 100644
--- a/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenuItemText/OnboardingMenutemText.scss
+++ b/src/components/OnboardingMenu/components/OnboardingMenuItemText/OnboardingMenutemText.scss
@@ -1,4 +1,4 @@
-@use '../../../../../variables.scss';
+@use '../../../variables.scss';
 @use '@gravity-ui/uikit/styles/mixins';
 
 $block: '.#{variables.$ns}guide-menu-item-text';
diff --git a/src/components/OnboardingMenu/components/OnboardingMenuItemText/index.ts b/src/components/OnboardingMenu/components/OnboardingMenuItemText/index.ts
new file mode 100644
index 00000000..426ef89e
--- /dev/null
+++ b/src/components/OnboardingMenu/components/OnboardingMenuItemText/index.ts
@@ -0,0 +1 @@
+export * from './OnboardingMenuItemText';
diff --git a/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenutemImage/OnboardingMenuItemImage.scss b/src/components/OnboardingMenu/components/OnboardingMenutemImage/OnboardingMenuItemImage.scss
similarity index 83%
rename from src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenutemImage/OnboardingMenuItemImage.scss
rename to src/components/OnboardingMenu/components/OnboardingMenutemImage/OnboardingMenuItemImage.scss
index 66e941f6..05afa42f 100644
--- a/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenutemImage/OnboardingMenuItemImage.scss
+++ b/src/components/OnboardingMenu/components/OnboardingMenutemImage/OnboardingMenuItemImage.scss
@@ -1,4 +1,4 @@
-@use '../../../../../variables.scss';
+@use '../../../variables.scss';
 $block: '.#{variables.$ns}guide-menu-item-image';
 
 #{$block} {
diff --git a/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenutemImage/OnboardingMenuItemImage.tsx b/src/components/OnboardingMenu/components/OnboardingMenutemImage/OnboardingMenuItemImage.tsx
similarity index 89%
rename from src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenutemImage/OnboardingMenuItemImage.tsx
rename to src/components/OnboardingMenu/components/OnboardingMenutemImage/OnboardingMenuItemImage.tsx
index 64462a80..4acf8834 100644
--- a/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenutemImage/OnboardingMenuItemImage.tsx
+++ b/src/components/OnboardingMenu/components/OnboardingMenutemImage/OnboardingMenuItemImage.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {block} from '../../../../../utils/cn';
+import {block} from '../../../utils/cn';
 
 import './OnboardingMenuItemImage.scss';
 
diff --git a/src/components/OnboardingMenu/components/OnboardingMenutemImage/index.ts b/src/components/OnboardingMenu/components/OnboardingMenutemImage/index.ts
new file mode 100644
index 00000000..6a227bbc
--- /dev/null
+++ b/src/components/OnboardingMenu/components/OnboardingMenutemImage/index.ts
@@ -0,0 +1 @@
+export * from './OnboardingMenuItemImage';
diff --git a/src/components/OnboardingMenu/index.ts b/src/components/OnboardingMenu/index.ts
new file mode 100644
index 00000000..6ae78466
--- /dev/null
+++ b/src/components/OnboardingMenu/index.ts
@@ -0,0 +1,4 @@
+export * from './OnboardingMenu';
+export * from './components/OnboardingMenuItem';
+export * from './components/OnboardingMenuItemText';
+export * from './components/OnboardingMenutemImage';