chore: refactoring

gravity-ui · Mar 15, 2024 · 8edc34e · 8edc34e
1 parent 1363abc
commit 8edc34e
Show file tree

Hide file tree

Showing 9 changed files with 484 additions and 129 deletions.
diff --git a/src/components/OnboardingMenu/OnboardingMenu.scss b/src/components/OnboardingMenu/OnboardingMenu.scss
@@ -1,11 +1,11 @@
 @use '../variables.scss';
+@use '@gravity-ui/uikit/styles/mixins';
 
 $block: '.#{variables.$ns}guide';
 
 $layer-popup: 1000;
 
 #{$block} {
-    z-index: $layer-popup;
     max-width: 280px;
 
     background: none;
@@ -27,27 +27,20 @@ $layer-popup: 1000;
             width: 280px;
             border-radius: 20px;
             height: fit-content;
-            max-height: 684px;
             min-height: 300px;
         }
     }
 
     &__title-text {
         color: var(--g-color-text-brand-contrast);
-
-        font-family: 'YS Text';
-        font-style: normal;
-        font-weight: 500;
-        font-size: 15px;
-        line-height: 20px;
+        @include mixins.text-subheader-2();
 
         overflow: hidden;
         text-overflow: ellipsis;
         text-wrap: nowrap;
 
         &_expand {
-            font-size: 17px;
-            line-height: 24px;
+            @include mixins.text-subheader-3();
         }
     }
 
@@ -71,7 +64,7 @@ $layer-popup: 1000;
         }
     }
 
-    &__graduationCap {
+    &__title-icon {
         flex-shrink: 0;
         margin-inline: var(--g-spacing-2) var(--g-spacing-2);
         color: var(--g-color-text-brand-contrast);
@@ -81,12 +74,13 @@ $layer-popup: 1000;
         padding: var(--g-spacing-2) var(--g-spacing-4) var(--g-spacing-3) var(--g-spacing-4);
 
         &_expand {
-            padding: var(--g-spacing-3) var(--g-spacing-4) var(--g-spacing-4) var(--g-spacing-4);
+            padding: var(--g-spacing-3) var(--g-spacing-5) var(--g-spacing-4) var(--g-spacing-5);
         }
     }
 
     &__lining {
-        overflow-y: scroll;
+        overflow-y: auto;
+        max-height: 684px;
 
         box-sizing: border-box;
 
@@ -97,18 +91,11 @@ $layer-popup: 1000;
         margin-inline: 1px;
 
         margin-block-end: var(--g-spacing-4);
-
-        margin-inline-start: 1px;
-
         background-color: var(--g-color-base-float);
 
         border-radius: var(--g-border-radius-xl);
     }
 
-    &__lining::-webkit-scrollbar {
-        display: none;
-    }
-
     &__buttons {
         display: flex;
         gap: var(--g-spacing-2);

diff --git a/src/components/OnboardingMenu/OnboardingMenu.tsx b/src/components/OnboardingMenu/OnboardingMenu.tsx
@@ -18,8 +18,9 @@ export type OnboardingMenuProps = {
     defaultExpanded: boolean;
     children?: React.ReactNode;
 
-    rollUpButtonText?: string;
+    collapseButtonText?: string;
     completeButtonText?: string;
+    className?: string;
 
     onExpand?: (expanded: boolean) => void;
     onCompleteClick: () => void;
@@ -34,8 +35,9 @@ export const OnboardingMenu = ({
     onExpand,
     onRollUpClick,
     onCompleteClick,
-    rollUpButtonText,
+    collapseButtonText,
     completeButtonText,
+    className,
     children,
 }: OnboardingMenuProps) => {
     const [expand, setExpand] = React.useState(defaultExpanded);
@@ -62,7 +64,7 @@ export const OnboardingMenu = ({
     };
 
     return (
-        <div className={cnOnboardingMenu({expand: expand})}>
+        <div className={cnOnboardingMenu(null, className)}>
             <div className={cnOnboardingMenu('content', {expand: expand})}>
                 <div className={cnOnboardingMenu('header', {expand: expand})}>
                     <button
@@ -75,7 +77,7 @@ export const OnboardingMenu = ({
                                 data={icon}
                                 width={20}
                                 height={20}
-                                className={cnOnboardingMenu('graduationCap')}
+                                className={cnOnboardingMenu('title-icon')}
                             />
                         ) : null}
 
@@ -100,21 +102,15 @@ export const OnboardingMenu = ({
 
                 {expand && (
                     <React.Fragment>
-                        <div
-                            className={cnOnboardingMenu('lining', {
-                                state: expand ? 'expanded' : 'closed',
-                            })}
-                        >
-                            {children}
-                        </div>
+                        <div className={cnOnboardingMenu('lining')}>{children}</div>
                         <div className={cnOnboardingMenu('buttons')}>
                             <Button
                                 view="normal-contrast"
                                 size="m"
                                 onClick={onRollUpClickCallback}
                                 width="max"
                             >
-                                {rollUpButtonText ?? i18n('collapse')}
+                                {collapseButtonText ?? i18n('collapse')}
                             </Button>
                             <Button
                                 view="outlined-contrast"