chore: refactoring

gravity-ui · Mar 19, 2024 · f139092 · f139092
1 parent 8edc34e
commit f139092
Show file tree

Hide file tree

Showing 13 changed files with 48 additions and 45 deletions.
diff --git 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,43 +29,35 @@ $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;
         justify-content: center;
 
         margin-block-end: var(--g-spacing-1);
 
-        color: var(--g-color-text-light-primary);
         background: none;
         border: none;
         cursor: pointer;
         width: 100%;
 
         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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1 @@
+export * from './OnboardingMenuItem';
diff --git a/...ngMenuItemText/OnboardingMenuItemText.tsx → ...ngMenuItemText/OnboardingMenuItemText.tsx b/...ngMenuItemText/OnboardingMenuItemText.tsx → ...ngMenuItemText/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/...ngMenuItemText/OnboardingMenutemText.scss → ...ngMenuItemText/OnboardingMenutemText.scss b/...ngMenuItemText/OnboardingMenutemText.scss → ...ngMenuItemText/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
@@ -0,0 +1 @@
+export * from './OnboardingMenuItemText';
diff --git a/...MenutemImage/OnboardingMenuItemImage.scss → ...MenutemImage/OnboardingMenuItemImage.scss b/...MenutemImage/OnboardingMenuItemImage.scss → ...MenutemImage/OnboardingMenuItemImage.scss
@@ -1,4 +1,4 @@
-@use '../../../../../variables.scss';
+@use '../../../variables.scss';
 $block: '.#{variables.$ns}guide-menu-item-image';
 
 #{$block} {

diff --git a/...gMenutemImage/OnboardingMenuItemImage.tsx → ...gMenutemImage/OnboardingMenuItemImage.tsx b/...gMenutemImage/OnboardingMenuItemImage.tsx → ...gMenutemImage/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
@@ -0,0 +1 @@
+export * from './OnboardingMenuItemImage';
diff --git a/src/components/OnboardingMenu/index.ts 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';