feat(AsideHeader): add custom background (#163)

* feat(AsideHeader): add custom background * chore: fix header decoration addon
gravity-ui · Dec 8, 2023 · f2226d9 · f2226d9
1 parent f14bba7
commit f2226d9
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 7 deletions.
diff --git a/src/components/AsideHeader/AsideHeader.scss b/src/components/AsideHeader/AsideHeader.scss
@@ -7,6 +7,7 @@ $block: '.#{variables.$ns}aside-header';
     --gn-aside-header-collapse-button-divider-line-color: var(
         --gn-aside-header-subheader-divider-line-color
     );
+    --gn-aside-header-menu-item-icon-color: var(--g-color-text-misc);
     --gn-aside-header-footer-item-icon-color: var(--g-color-text-primary);
     --gn-aside-header-subheader-item-icon-color: var(--g-color-text-primary);
     --gn-aside-header-item-icon-background-size: 38px;
@@ -94,6 +95,16 @@ $block: '.#{variables.$ns}aside-header';
                 transparent calc(var(--gradient-height) * 0.88)
             );
         }
+
+        &-custom-background {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+
+            display: flex;
+
+            z-index: -1;
+        }
     }
 
     &_compact &__aside {

diff --git a/src/components/AsideHeader/README.md b/src/components/AsideHeader/README.md
@@ -12,6 +12,8 @@ import {AsideHeader} from '@gravity-ui/navigation';
 
 ## Properties
 
-| Name | Description                  |                          Type                          | Default |
-| :--- | :--------------------------- | :----------------------------------------------------: | :-----: |
-| ref  | `ref` to target popup anchor | `React.ForwardedRef<HTMLDivElement, AsideHeaderProps>` |         |
+| Name                      | Description                                    |                          Type                          | Default |
+| :------------------------ | :--------------------------------------------- | :----------------------------------------------------: | :-----: | --- |
+| ref                       | `ref` to target popup anchor                   | `React.ForwardedRef<HTMLDivElement, AsideHeaderProps>` |         |
+| customBackground          | `AsideHeader`` background                      |                   `React.ReactNode`                    |         |     |
+| customBackgroundClassName | Override default background container's styles |                        `string`                        |         |
diff --git a/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx b/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx
@@ -32,6 +32,16 @@ MultipleTooltip.args = {
     initialCompact: true,
 };
 
+const CustomThemeTemplate: StoryFn = (args) => <AsideHeaderShowcase {...args} />;
+export const CustomTheme = CustomThemeTemplate.bind({});
+CustomTheme.args = {
+    headerDecoration: false,
+    customBackground: (
+        <img src="https://cdn.stocksnap.io/img-thumbs/960w/blue-night_DBUU6N5YUY.jpg" />
+    ),
+    customBackgroundClassName: 'aside-header-showcase__custom-background',
+};
+
 const AdvancedUsageTemplate: StoryFn = (args) => {
     const [compact, setCompact] = React.useState(args.initialCompact);
 

diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.scss b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.scss
@@ -83,6 +83,12 @@ body {
         height: calc(100% - 40px);
         padding: 20px;
     }
+
+    &__custom-background {
+        --gn-aside-header-menu-item-icon-color: var(--g-color-text-primary);
+
+        opacity: 75%;
+    }
 }
 
 .composite-bar-showcase__tag {

diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx
@@ -39,19 +39,27 @@ interface AsideHeaderShowcaseProps {
     multipleTooltip?: boolean;
     initialCompact?: boolean;
     topAlert?: AsideHeaderTopAlertProps;
+    customBackground?: React.ReactNode;
+    customBackgroundClassName?: string;
+    headerDecoration?: boolean;
 }
 
 export const AsideHeaderShowcase: React.FC<AsideHeaderShowcaseProps> = ({
     multipleTooltip = false,
     initialCompact = false,
     topAlert,
+    customBackground,
+    customBackgroundClassName,
+    headerDecoration,
 }) => {
     const ref = React.useRef<HTMLDivElement>(null);
     const [popupVisible, setPopupVisible] = React.useState(false);
     const [subheaderPopupVisible, setSubheaderPopupVisible] = React.useState(false);
     const [visiblePanel, setVisiblePanel] = React.useState<Panel>();
     const [compact, setCompact] = React.useState(initialCompact);
-    const [headerDecoration, setHeaderDecoration] = React.useState<string>(BOOLEAN_OPTIONS.Yes);
+    const [addonHeaderDecoration, setHeaderDecoration] = React.useState<string>(
+        BOOLEAN_OPTIONS.Yes,
+    );
     const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false);
 
     const openModalSubscriber = (callback: OpenModalSubscriber) => {
@@ -92,9 +100,15 @@ export const AsideHeaderShowcase: React.FC<AsideHeaderShowcaseProps> = ({
                     href: '#',
                     onClick: () => alert('click on logo'),
                 }}
-                headerDecoration={headerDecoration === BOOLEAN_OPTIONS.Yes}
+                headerDecoration={
+                    headerDecoration === undefined
+                        ? addonHeaderDecoration === BOOLEAN_OPTIONS.Yes
+                        : headerDecoration
+                }
                 onMenuItemsChanged={setMenuItems}
                 menuItems={menuItems}
+                customBackground={customBackground}
+                customBackgroundClassName={customBackgroundClassName}
                 subheaderItems={[
                     {
                         item: {
@@ -231,7 +245,7 @@ export const AsideHeaderShowcase: React.FC<AsideHeaderShowcaseProps> = ({
                         <div className={b('content')}>
                             <pre>{placeholderText}</pre>
                             <RadioButton
-                                value={headerDecoration}
+                                value={addonHeaderDecoration}
                                 onChange={(event) => {
                                     setHeaderDecoration(event.target.value);
                                 }}

diff --git a/src/components/AsideHeader/components/FirstPanel.tsx b/src/components/AsideHeader/components/FirstPanel.tsx
@@ -20,6 +20,8 @@ export const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {
         menuMoreTitle,
         renderFooter,
         compact,
+        customBackground,
+        customBackgroundClassName,
     } = useAsideHeaderInnerContext();
     const visibleMenuItems = useVisibleMenuItems();
 
@@ -33,7 +35,13 @@ export const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {
         <>
             <div className={b('aside')} style={{width: size}}>
                 <div className={b('aside-popup-anchor')} ref={asideRef} />
+
                 <div className={b('aside-content', {['with-decoration']: headerDecoration})}>
+                    {customBackground && (
+                        <div className={b('aside-custom-background', customBackgroundClassName)}>
+                            {customBackground}
+                        </div>
+                    )}
                     <Header />
                     {visibleMenuItems?.length ? (
                         <CompositeBar

diff --git a/src/components/AsideHeader/types.tsx b/src/components/AsideHeader/types.tsx
@@ -23,6 +23,8 @@ export interface AsideHeaderGeneralProps {
     expandTitle?: string;
     menuMoreTitle?: string;
     topAlert?: AsideHeaderTopAlertProps;
+    customBackground?: React.ReactNode;
+    customBackgroundClassName?: string;
     renderContent?: RenderContentType;
     renderFooter?: (data: {
         size: number;

diff --git a/src/components/CompositeBar/Item/Item.scss b/src/components/CompositeBar/Item/Item.scss
@@ -13,7 +13,7 @@ $block: '.#{variables.$ns}composite-bar-item';
     cursor: pointer;
 
     &__icon {
-        color: var(--g-color-text-misc);
+        color: var(--gn-aside-header-menu-item-icon-color);
 
         .#{variables.$ns}footer-item &,
         .#{variables.$ns}composite-bar-highlighted-item & {