feat(PageLayout): support function type for topAlert prop (#491)

* feat(PageLayout): support function type for topAlert prop

* feat(PageLayout): retain TopAlert height logic for custom renderers

* feat(PageLayout): rollback TopAlert props type

* feat(PageLayout): refine TopAlert props type

Author: arsen-afaunov

src/components/AsideHeader/__snapshots__/AsideHeader.visual.test.tsx-snapshots/AsideHeader-render-story-HeaderAlertCustom-dark-chromium-linux.png

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import {Xmark} from '@gravity-ui/icons';
 import {Button, Flex, Icon, Text, spacing} from '@gravity-ui/uikit';
 import type {Meta, StoryFn} from '@storybook/react';
 
@@ -8,7 +9,7 @@ import {AsideFallback} from '../components/PageLayout/AsideFallback';
 import {PageLayout} from '../components/PageLayout/PageLayout';
 import {PageLayoutAside} from '../components/PageLayout/PageLayoutAside';
 
-import {AsideHeaderShowcase} from './AsideHeaderShowcase';
+import {AsideHeaderShowcase, AsideHeaderShowcaseProps} from './AsideHeaderShowcase';
 import {DEFAULT_LOGO, menuItemsClamped, menuItemsShowcase} from './moc';
 
 import logoIcon from '../../../../.storybook/assets/logo.svg';
@@ -126,7 +127,9 @@ AdvancedUsage.args = {
     initialCompact: true,
 };
 
-const TopAlertTemplate: StoryFn = (args) => <AsideHeaderShowcase {...args} />;
+const TopAlertTemplate: StoryFn<AsideHeaderShowcaseProps> = (args) => (
+    <AsideHeaderShowcase {...args} />
+);
 export const HeaderAlert = TopAlertTemplate.bind({});
 HeaderAlert.args = {
     topAlert: {
@@ -148,6 +151,44 @@ HeaderAlertCentered.args = {
     },
 };
 
+export const HeaderAlertCustom = TopAlertTemplate.bind({});
+HeaderAlertCustom.args = {
+    topAlert: {
+        render: ({handleClose}) => (
+            <Flex
+                direction="row"
+                justifyContent="center"
+                alignItems="center"
+                gap={4}
+                style={{
+                    position: 'relative',
+                    padding: '8px',
+                    background:
+                        ' linear-gradient(120deg, #191654, #43cea2 40%, #185a9d 70%, #f857a6 100%)',
+                }}
+            >
+                <Text variant="subheader-2" style={{color: 'var(--g-color-text-light-primary)'}}>
+                    We&apos;ve got something new for you to try!
+                </Text>
+                <Button view="normal-contrast" size="m">
+                    Try Now
+                </Button>
+                <Button view="outlined-contrast" size="m">
+                    Learn More
+                </Button>
+                <Button
+                    style={{position: 'absolute', right: '8px'}}
+                    view="flat-contrast"
+                    aria-label="Close"
+                    onClick={handleClose}
+                >
+                    <Icon data={Xmark} size={18} />
+                </Button>
+            </Flex>
+        ),
+    },
+};
+
 const fallbackArgs = {
     headerDecoration: true,
     subheaderItemsCount: 2,

src/components/AsideHeader/__snapshots__/AsideHeader.visual.test.tsx-snapshots/AsideHeader-render-story-HeaderAlertCustom-dark-webkit-linux.png

@@ -11,9 +11,9 @@ import {
     eventBroker,
 } from '@gravity-ui/uikit';
 
-import {AsideHeader, AsideHeaderProps, FooterItem, TopAlertProps} from '../..';
+import {AsideHeader, AsideHeaderProps, FooterItem} from '../..';
 import {ASIDE_HEADER_ICON_SIZE} from '../../constants';
-import {OpenModalSubscriber} from '../../types';
+import {OpenModalSubscriber, TopAlertProps} from '../../types';
 import {cn} from '../../utils/cn';
 
 import {menuItemsShowcase, text as placeholderText} from './moc';
@@ -36,7 +36,7 @@ enum Panel {
     Components = 'components',
 }
 
-interface AsideHeaderShowcaseProps {
+export interface AsideHeaderShowcaseProps {
     multipleTooltip?: boolean;
     initialCompact?: boolean;
     topAlert?: TopAlertProps;

src/components/AsideHeader/__snapshots__/AsideHeader.visual.test.tsx-snapshots/AsideHeader-render-story-HeaderAlertCustom-light-chromium-linux.png

@@ -68,6 +68,15 @@ test.describe('AsideHeader', () => {
         await expectScreenshot();
     });
 
+    test('render story: <HeaderAlertCustom>', async ({mount, expectScreenshot}) => {
+        await mount(<AsideHeaderStories.HeaderAlertCustom />, undefined, {
+            width: 1200,
+            height: 720,
+        });
+
+        await expectScreenshot();
+    });
+
     test('render story: <MultipleTooltip>', async ({mount, expectScreenshot}) => {
         await mount(<AsideHeaderStories.MultipleTooltip />, undefined, {
             width: 1200,

src/components/AsideHeader/__snapshots__/AsideHeader.visual.test.tsx-snapshots/AsideHeader-render-story-HeaderAlertCustom-light-webkit-linux.png

@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 import {QAProps} from '@gravity-ui/uikit';
 
 import {RenderContentType} from '../Content';

src/components/AsideHeader/__stories__/AsideHeader.stories.tsx

@@ -24,7 +24,10 @@ export const TopAlert = ({alert, className, mobileView = false}: Props) => {
 
     const handleClose = React.useCallback(() => {
         setOpened(false);
-        alert?.onCloseTopAlert?.();
+
+        if (alert && 'onCloseTopAlert' in alert) {
+            alert.onCloseTopAlert?.();
+        }
     }, [alert]);
 
     React.useEffect(() => {
@@ -33,10 +36,23 @@ export const TopAlert = ({alert, className, mobileView = false}: Props) => {
         }
     }, [opened, updateTopSize]);
 
-    if (!alert || !alert.message) {
+    if (!alert) {
         return null;
     }
 
+    const {render} = alert;
+
+    if (typeof render === 'function') {
+        return (
+            <div
+                ref={alertRef}
+                className={b('wrapper', {'with-bottom-border': !mobileView && opened}, className)}
+            >
+                {opened && render({handleClose})}
+            </div>
+        );
+    }
+
     return (
         <div
             ref={alertRef}

src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx

@@ -77,7 +77,7 @@ export interface LogoProps {
     'aria-labelledby'?: string;
 }
 
-export interface TopAlertProps {
+interface TopAlertBaseProps {
     align?: AlertProps['align'];
     message: AlertProps['message'];
     title?: AlertProps['title'];
@@ -89,4 +89,11 @@ export interface TopAlertProps {
     centered?: boolean;
     dense?: boolean;
     onCloseTopAlert?: () => void;
+    render?: never;
 }
+
+export type TopAlertProps =
+    | TopAlertBaseProps
+    | {
+          render: (params: {handleClose: () => void}) => React.ReactElement;
+      };