feat(Guide): draft

gravity-ui · Nov 11, 2023 · 6707d54 · 6707d54
1 parent 276e585
commit 6707d54
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/components/OnboardingGuide/GuideMenuItem/GuideMenuItem.scss b/src/components/OnboardingGuide/GuideMenuItem/GuideMenuItem.scss
@@ -8,7 +8,10 @@ $space-s: 12px;
 $space-l: 20px;
 
 #{$block} {
-    cursor: pointer;
+    &_hasArrow {
+        cursor: pointer;
+    }
+
     &__collapse {
         padding: $space-s $space-xs $space-s $space-l;
     }

diff --git a/src/components/OnboardingGuide/GuideMenuItem/GuideMenuItem.tsx b/src/components/OnboardingGuide/GuideMenuItem/GuideMenuItem.tsx
@@ -14,6 +14,7 @@ export type GuideMenuItemProps = {
     children?: ReactNode;
     buttons?: ReactNode[];
     showDivider?: boolean;
+    hasArrow?: boolean;
 
     onClick?: () => void;
 };
@@ -28,6 +29,7 @@ export const GuideMenuItem = ({
     buttons,
     showDivider = false,
     onClick = noopFunc,
+    hasArrow = false,
 }: GuideMenuItemProps) => {
     const [isExpand, setIsExpand] = useState(false);
 
@@ -54,21 +56,20 @@ export const GuideMenuItem = ({
                     </div>
                     <span className={cnGuideMenuItem('collapse-text')}>{title}</span>
                 </div>
-
-                <ArrowToggle direction={isExpand ? 'top' : 'bottom'} size={20} />
+                {hasArrow && <ArrowToggle direction={isExpand ? 'top' : 'bottom'} size={20} />}
             </div>
         ),
         [status, onClick, title, isExpand],
     );
 
     return (
-        <div className={cnGuideMenuItem()}>
+        <div className={cnGuideMenuItem({hasArrow})}>
             <div className={cnGuideMenuItem('collapse')}>
                 {/* <div className={cnGuideMenuItem('collapse-header', { isExpand })}>
                     {header}
                 </div> */}
                 {header}
-                {isExpand ? (
+                {hasArrow && isExpand ? (
                     <>
                         <div className={cnGuideMenuItem('node')}>{children}</div>
                         <div className={cnGuideMenuItem('buttons')}>{buttons}</div>