feat(Notifications): Allowed ReactNode in source icon + added sourcePlacement property (bottom is used by default) (#278)

Author: Ruminat

src/components/Notification/Notification.scss

@@ -17,52 +17,44 @@ $notificationSourceIconSize: 36px;
     }
 
     &__right {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
         flex: 1;
-        overflow-x: hidden;
-    }
-
-    &__right-top-part {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        overflow-x: hidden;
     }
 
-    &__right-meta-and-title {
+    &__title-wrapper {
         flex: 1;
         min-width: 0;
         overflow-x: hidden;
     }
 
-    &__right-meta,
-    &__right-title {
+    &__source-text,
+    &__title {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
 
-    &__right-meta {
-        display: flex;
-        gap: 4px;
+    &__source-text {
         color: var(--g-color-text-secondary);
     }
 
-    &__right-title {
-        font-weight: 500;
-        font-size: 13px;
-        line-height: 18px;
+    &__bottom-source {
+        margin-block-start: 4px;
+    }
 
+    &__title {
+        font-weight: 500;
         color: var(--g-color-text-primary);
     }
 
-    &__right-content {
+    &__title-with-source {
+        margin-block-end: 4px;
+    }
+
+    &__content {
         font-size: 13px;
         line-height: 18px;
 
-        color: var(--g-color-text-secondary);
+        color: var(--g-color-text-complementary);
     }
 
     &_unread {
@@ -75,23 +67,23 @@ $notificationSourceIconSize: 36px;
     &__actions {
         display: flex;
         align-items: center;
-        flex-wrap: wrap;
     }
 
-    &__actions_right-bottom-actions {
+    &__actions_bottom-actions {
         margin-block-start: 8px;
         gap: 8px;
+        flex-wrap: wrap;
     }
 
-    &__actions_right-side-actions {
+    &__actions_side-actions {
         height: 28px;
         opacity: 0;
     }
-    &:hover &__actions_right-side-actions,
-    &__actions_right-side-actions:focus-within {
+    &:hover &__actions_side-actions,
+    &__actions_side-actions:focus-within {
         opacity: 1;
     }
-    &_mobile &__actions_right-side-actions {
+    &_mobile &__actions_side-actions {
         opacity: 1;
     }
 

src/components/Notification/Notification.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import {Icon, Link, useMobile, useUniqId} from '@gravity-ui/uikit';
+import {Flex, Icon, Link, useMobile, useUniqId} from '@gravity-ui/uikit';
 
 import {CnMods, block} from '../utils/cn';
 
@@ -15,13 +15,64 @@ type Props = {notification: NotificationProps};
 export const Notification = React.memo(function Notification(props: Props) {
     const mobile = useMobile();
     const {notification} = props;
-    const {title, content, formattedDate, source, unread, theme} = notification;
+    const {
+        title,
+        content,
+        formattedDate,
+        source,
+        unread,
+        theme,
+        sourcePlacement = 'bottom',
+    } = notification;
 
     const modifiers: CnMods = {unread, theme, mobile, active: Boolean(notification.onClick)};
     const titleId = useUniqId();
 
     const sourceIcon = source && renderSourceIcon(source, titleId);
 
+    const renderedTitle = title ? (
+        <div className={b('title-wrapper')}>
+            <div className={b('title')}>{title}</div>
+        </div>
+    ) : null;
+
+    const renderedSideActions = (
+        <div className={b('actions', {'side-actions': true})}>{props.notification.sideActions}</div>
+    );
+
+    const renderedBottomActions = props.notification.bottomActions ? (
+        <div className={b('actions', {'bottom-actions': true})}>
+            {props.notification.bottomActions}
+        </div>
+    ) : null;
+
+    const renderedContent = <div className={b('content')}>{content}</div>;
+
+    const renderedSourceText =
+        source?.title || formattedDate ? (
+            <Flex className={b('source-text')} gap={1}>
+                {source?.title
+                    ? renderSourceTitle({
+                          title: source.title,
+                          href: source.href,
+                          id: titleId,
+                      })
+                    : null}
+                {source?.title && formattedDate ? <span>•</span> : null}
+                {formattedDate ? <div className={b('right-date')}>{formattedDate}</div> : null}
+            </Flex>
+        ) : null;
+
+    const hasSourceOnTop = renderedSourceText && sourcePlacement === 'top';
+    const hasSourceOnBottom = renderedSourceText && sourcePlacement === 'bottom';
+    const topPart =
+        renderedTitle || hasSourceOnTop
+            ? withSideActions(
+                  renderTitleAndSource(renderedTitle, hasSourceOnTop ? renderedSourceText : null),
+                  renderedSideActions,
+              )
+            : null;
+
     return (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
         <div
@@ -31,45 +82,56 @@ export const Notification = React.memo(function Notification(props: Props) {
             onClick={notification.onClick}
         >
             {sourceIcon ? <div className={b('left')}>{sourceIcon}</div> : null}
-            <div className={b('right')}>
-                <div className={b('right-top-part')}>
-                    <div className={b('right-meta-and-title')}>
-                        <div className={b('right-meta')}>
-                            {source?.title
-                                ? renderSourceTitle({
-                                      title: source.title,
-                                      href: source.href,
-                                      id: titleId,
-                                  })
-                                : null}
-                            {source?.title && formattedDate ? <span>•</span> : null}
-                            {formattedDate ? (
-                                <div className={b('right-date')}>{formattedDate}</div>
-                            ) : null}
-                        </div>
-                        {title ? <div className={b('right-title')}>{title}</div> : null}
-                    </div>
-                    <div className={b('actions', {'right-side-actions': true})}>
-                        {props.notification.sideActions}
-                    </div>
-                </div>
-                <div className={b('right-content')}>{content}</div>
-                {props.notification.bottomActions ? (
-                    <div className={b('actions', {'right-bottom-actions': true})}>
-                        {props.notification.bottomActions}
-                    </div>
-                ) : null}
-            </div>
+
+            <Flex className={b('right')} justifyContent="space-between" gap={2} overflow="hidden">
+                <Flex direction="column" overflow="hidden" width="100%">
+                    {topPart}
+
+                    {withSideActions(
+                        renderedContent,
+                        !renderedTitle && !hasSourceOnTop ? renderedSideActions : null,
+                    )}
+
+                    {hasSourceOnBottom ? (
+                        <div className={b('bottom-source')}>{renderedSourceText}</div>
+                    ) : null}
+
+                    {renderedBottomActions}
+                </Flex>
+            </Flex>
         </div>
     );
 });
 
+function withSideActions(content: React.ReactNode, sideActions: React.ReactNode) {
+    return sideActions ? (
+        <Flex alignItems="center" justifyContent="space-between" width="100%" overflow="hidden">
+            {content}
+            {sideActions}
+        </Flex>
+    ) : (
+        content
+    );
+}
+
+function renderTitleAndSource(title: React.ReactNode, source: React.ReactNode) {
+    return title && source ? (
+        <Flex className={b('title-with-source')} direction="column" overflow="hidden">
+            {source}
+            {title}
+        </Flex>
+    ) : (
+        (title ?? source)
+    );
+}
+
 interface RenderSourceTitleOptions {
     title: string;
     href?: string;
     id: string;
 }
-function renderSourceTitle({title, href, id}: RenderSourceTitleOptions): JSX.Element {
+
+function renderSourceTitle({title, href, id}: RenderSourceTitleOptions): React.ReactNode {
     return href ? (
         <Link className={b('right-source-title')} href={href} target="_blank" title={title} id={id}>
             {title}
@@ -81,7 +143,7 @@ function renderSourceTitle({title, href, id}: RenderSourceTitleOptions): JSX.Ele
     );
 }
 
-function renderSourceIcon(source: NotificationSourceProps, titleId: string): JSX.Element | null {
+function renderSourceIcon(source: NotificationSourceProps, titleId: string): React.ReactNode {
     const iconElement = getIconElement(source);
 
     if (!iconElement) return null;
@@ -95,11 +157,13 @@ function renderSourceIcon(source: NotificationSourceProps, titleId: string): JSX
     );
 }
 
-function getIconElement(source: NotificationSourceProps): JSX.Element | null {
+function getIconElement(source: NotificationSourceProps): React.ReactNode {
     if ('icon' in source && source.icon) {
         return <Icon className={b('source-icon')} size={36} data={source.icon} />;
     } else if ('imageSrc' in source && source.imageSrc) {
         return <img alt="" className={b('source-icon')} src={source.imageSrc} />;
+    } else if ('custom' in source && source.custom) {
+        return source.custom;
     } else {
         return null;
     }

src/components/Notification/definitions.ts

@@ -4,12 +4,14 @@ import {ButtonProps, IconData, QAProps} from '@gravity-ui/uikit';
 
 export type NotificationTheme = 'success' | 'info' | 'warning' | 'danger';
 
-type SvgOrImage = {icon: IconData} | {imageSrc: string};
+type NotificationIcon = {icon: IconData} | {imageSrc: string} | {custom: React.ReactNode};
 
 export type NotificationSourceProps = {
     title?: string;
     href?: string;
-} & Partial<SvgOrImage>;
+} & Partial<NotificationIcon>;
+
+export type NotificationSourcePlacement = 'top' | 'bottom';
 
 export type NotificationSwipeActionProps = {
     content: React.ReactNode;
@@ -29,6 +31,7 @@ export type NotificationProps = {
     unread?: boolean;
     archived?: boolean;
     source?: NotificationSourceProps;
+    sourcePlacement?: NotificationSourcePlacement;
     theme?: NotificationTheme;
     className?: string;
 

src/components/Notifications/__stories__/Notifications.stories.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 
 import {Bell} from '@gravity-ui/icons';
-import {Button, Checkbox, Flex, Icon, Popup} from '@gravity-ui/uikit';
+import {Button, Checkbox, Flex, Icon, Popup, SegmentedRadioGroup, Text} from '@gravity-ui/uikit';
 import {Meta, StoryFn} from '@storybook/react';
 
 import {delay} from '../../InfiniteScroll/__stories__/utils';
-import {NotificationProps} from '../../Notification/definitions';
+import {NotificationProps, NotificationSourcePlacement} from '../../Notification/definitions';
 import {Notifications} from '../Notifications';
 import {NotificationsPopupWrapper} from '../NotificationsPopupWrapper';
 
@@ -61,12 +61,13 @@ const Wrapper = (props: React.PropsWithChildren) => {
 type BooleanMap = Record<string, boolean | undefined>;
 
 export const Default: StoryFn = () => {
-    const {showNotificationsActions, showNotificationActions, renderControls} =
+    const {showNotificationsActions, showNotificationActions, sourcePlacement, renderControls} =
         useNotificationsVariationsControl();
 
     const {notifications, actions} = useNotificationsWithActions({
         showNotificationsActions,
         showNotificationActions,
+        sourcePlacement,
     });
 
     return (
@@ -163,10 +164,13 @@ export const Empty: StoryFn = () => {
 function useNotificationsVariationsControl() {
     const [showNotificationsActions, setShowNotificationsActions] = React.useState(true);
     const [showNotificationActions, setShowNotificationActions] = React.useState(true);
+    const [sourcePlacement, setSourcePlacement] =
+        React.useState<NotificationSourcePlacement>('bottom');
 
     return {
         showNotificationsActions,
         showNotificationActions,
+        sourcePlacement,
         renderControls: () => (
             <Flex gap={2} direction="column">
                 <Checkbox
@@ -182,6 +186,17 @@ function useNotificationsVariationsControl() {
                 >
                     Notification actions
                 </Checkbox>
+                <Flex direction="column" gap={1}>
+                    <Text>Source/date placement</Text>
+                    <SegmentedRadioGroup<NotificationSourcePlacement>
+                        value={sourcePlacement}
+                        onUpdate={setSourcePlacement}
+                        options={[
+                            {value: 'bottom', content: 'Bottom'},
+                            {value: 'top', content: 'Top'},
+                        ]}
+                    />
+                </Flex>
             </Flex>
         ),
     };
@@ -190,6 +205,11 @@ function useNotificationsVariationsControl() {
 function useNotificationsWithActions({
     showNotificationsActions = true,
     showNotificationActions = true,
+    sourcePlacement = 'bottom',
+}: {
+    showNotificationsActions?: boolean;
+    showNotificationActions?: boolean;
+    sourcePlacement?: NotificationSourcePlacement;
 } = {}) {
     const [unreadNotifications, setUnreadNotifications] = React.useState<BooleanMap>({
         tracker: true,
@@ -229,9 +249,10 @@ function useNotificationsWithActions({
                     unread,
                     archived,
                     sideActions: getSideActions(id, unread, archived),
+                    sourcePlacement,
                 };
             }),
-        [unreadNotifications, archivedNotifications, getSideActions],
+        [archivedNotifications, unreadNotifications, sourcePlacement, getSideActions],
     );
 
     const actions = showNotificationsActions ? (