feat(AsideHeader): add headerDecoration prop (#49)

Author: Lunory

src/components/AsideHeader/AsideHeader.scss

@@ -74,11 +74,6 @@ $block: '.#{variables.$ns}aside-header';
             position: relative;
             z-index: 2;
             user-select: none;
-            background: linear-gradient(
-                180deg,
-                var(--aside-header-background-color) calc(var(--gradient-height) * 0.33),
-                transparent calc(var(--gradient-height) * 0.88)
-            );
 
             &::after {
                 position: absolute;
@@ -94,6 +89,14 @@ $block: '.#{variables.$ns}aside-header';
                 margin: 8px 0;
             }
         }
+
+        &-content_with-decoration {
+            background: linear-gradient(
+                180deg,
+                var(--aside-header-background-color) calc(var(--gradient-height) * 0.33),
+                transparent calc(var(--gradient-height) * 0.88)
+            );
+        }
     }
 
     &_compact &__aside {
@@ -122,7 +125,7 @@ $block: '.#{variables.$ns}aside-header';
             color: var(--aside-header-background-color);
         }
 
-        &::before {
+        &_with-decoration::before {
             position: absolute;
             top: 0;
             left: 0;
@@ -150,14 +153,16 @@ $block: '.#{variables.$ns}aside-header';
         &::before {
             display: block;
         }
+    }
 
-        &::after {
-            display: none;
-        }
-
+    &_compact &__header_with-decoration {
         #{$class}__header-divider {
             display: block;
         }
+
+        &::after {
+            display: none;
+        }
     }
 
     &__menu-items {

src/components/AsideHeader/AsideHeader.tsx

@@ -38,6 +38,7 @@ interface AsideHeaderDefaultProps {
     panelItems: DrawerItemProps[];
     subheaderItems: MenuItem[];
     menuItems: MenuItem[];
+    headerDecoration: boolean;
 }
 
 export interface AsideHeaderProps
@@ -51,6 +52,7 @@ export class AsideHeader extends React.Component<AsideHeaderInnerProps> {
         panelItems: [],
         subheaderItems: [],
         menuItems: [],
+        headerDecoration: true,
     };
 
     asideRef = React.createRef<HTMLDivElement>();
@@ -71,13 +73,13 @@ export class AsideHeader extends React.Component<AsideHeaderInnerProps> {
     }
 
     private renderFirstPane = (size: number) => {
-        const {dict, menuItems, panelItems, compact} = this.props;
+        const {dict, menuItems, panelItems, compact, headerDecoration} = this.props;
 
         return (
             <React.Fragment>
                 <div className={b('aside')} style={{width: size}}>
                     <div className={b('aside-popup-anchor')} ref={this.asideRef} />
-                    <div className={b('aside-content')}>
+                    <div className={b('aside-content', {['with-decoration']: headerDecoration})}>
                         {this.renderHeader()}
                         {menuItems?.length ? (
                             <CompositeBar
@@ -115,7 +117,7 @@ export class AsideHeader extends React.Component<AsideHeaderInnerProps> {
     );
 
     private renderHeader = () => (
-        <div className={b('header')}>
+        <div className={b('header', {['with-decoration']: this.props.headerDecoration})}>
             {this.renderLogo()}
 
             <CompositeBar

src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx

@@ -4,6 +4,7 @@ import block from 'bem-cn-lite';
 import {AsideHeader, FooterItem} from '../..';
 import {text as placeholderText} from './moc';
 import {menuItemsShowcase} from './../../CompositeBar/__stories__/moc';
+import {RadioButton, Radio} from '@gravity-ui/uikit';
 
 import logoIcon from '../../../../.storybook/assets/logo.svg';
 import menuItemIcon from '../../../../.storybook/assets/settings.svg';
@@ -12,6 +13,11 @@ import './AsideHeaderShowcase.scss';
 
 const b = block('aside-header-showcase');
 
+const BOOLEAN_OPTIONS = {
+    Yes: 'yes',
+    No: 'no',
+};
+
 enum Panel {
     ProjectSettings = 'projectSettings',
     Search = 'search',
@@ -23,6 +29,7 @@ export function AsideHeaderShowcase() {
     const [popupVisible, setPopupVisible] = React.useState(false);
     const [visiblePanel, setVisiblePanel] = React.useState<Panel>();
     const [compact, setCompact] = React.useState(false);
+    const [headerDecoration, setHeaderDecoration] = React.useState<string>(BOOLEAN_OPTIONS.Yes);
 
     const navRef = React.useRef<AsideHeader>(null);
 
@@ -36,6 +43,7 @@ export function AsideHeaderShowcase() {
                     href: '#',
                     onClick: () => alert('click on logo'),
                 }}
+                headerDecoration={headerDecoration === BOOLEAN_OPTIONS.Yes}
                 menuItems={[
                     ...menuItemsShowcase,
                     {
@@ -150,6 +158,15 @@ export function AsideHeaderShowcase() {
                     return (
                         <div className={b('content')}>
                             <pre>{placeholderText}</pre>
+                            <RadioButton
+                                value={headerDecoration}
+                                onChange={(event) => {
+                                    setHeaderDecoration(event.target.value);
+                                }}
+                            >
+                                <Radio value={BOOLEAN_OPTIONS.No}>No</Radio>
+                                <Radio value={BOOLEAN_OPTIONS.Yes}>Yes</Radio>
+                            </RadioButton>
                         </div>
                     );
                 }}