plasma-new-hope: Notification redesign

packages/plasma-b2c/api/plasma-b2c.api.md

@@ -152,6 +152,8 @@ import { ModalsProvider } from '@salutejs/plasma-hope';
 import { ModalView } from '@salutejs/plasma-hope';
 import { monthLongName } from '@salutejs/plasma-core';
 import { monthShortName } from '@salutejs/plasma-core';
+import { NotificationIconPlacement } from '@salutejs/plasma-new-hope/styled-components';
+import { NotificationLayout } from '@salutejs/plasma-new-hope/styled-components';
 import { NotificationProps } from '@salutejs/plasma-new-hope/styled-components';
 import { offsets } from '@salutejs/plasma-hope';
 import { OutlinedProps } from '@salutejs/plasma-core';
@@ -648,14 +650,21 @@ const Notification_2: React_2.FunctionComponent<PropsType<    {
 view: {
 default: string;
 };
-status: {
-success: string;
-warning: string;
-error: string;
+layout: {
+horizontal: string;
+vertical: string;
+};
+size: {
+xs: string;
+xxs: string;
 };
 }> & NotificationProps & React_2.RefAttributes<HTMLDivElement>>;
 export { Notification_2 as Notification }
 
+export { NotificationIconPlacement }
+
+export { NotificationLayout }
+
 export { NotificationProps }
 
 // @public (undocumented)

packages/plasma-b2c/src/components/Notification/Notification.component-test.tsx

@@ -0,0 +1 @@
+../../../../plasma-web/src/components/Notification/Notification.component-test.tsx

packages/plasma-b2c/src/components/Notification/Notification.config.ts

@@ -8,31 +8,95 @@ export const config = {
         view: {
             default: css`
                 ${notificationTokens.contentColor}: var(--plasma-colors-secondary);
-                ${notificationTokens.background}: var(--plasma-colors-surface-card);
-                ${notificationTokens.boxShadow}: 0px 1px 1px rgba(0, 0, 0, 0.05), 0px 4px 14px rgba(0, 0, 0, 0.08);
-                ${notificationTokens.contentFontFamily}: var(--plasma-typo-footnote1-font-family);
-                ${notificationTokens.contentFontSize}: var(--plasma-typo-footnote1-font-size);
-                ${notificationTokens.contentFontStyle}: var(--plasma-typo-footnote1-font-style);
-                ${notificationTokens.contentFontWeight}: var(--plasma-typo-footnote1-font-weight);
-                ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-footnote1-letter-spacing);
-                ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-footnote1-line-height);
-                ${notificationTokens.titleFontFamily}: var(--plasma-typo-headline5-font-family,'SB Sans Text', sans-serif);
-                ${notificationTokens.titleFontSize}: var(--plasma-typo-headline5-font-size, 1rem);
-                ${notificationTokens.titleFontStyle}: var(--plasma-typo-headline5-font-style, normal);
-                ${notificationTokens.titleFontWeight}: var(--plasma-typo-headline5-font-weight, 600);
-                ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-headline5-letter-spacing, -0.0190em);
-                ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-headline5-line-height, 1.25rem);
+                ${notificationTokens.background}: var(--plasma-colors-background-primary);
+                ${notificationTokens.borderRadius}: 0.75rem;
+                ${notificationTokens.padding}: 0.375rem;
+
+                ${notificationTokens.contentPaddingTop}: 0.125rem;
+                ${notificationTokens.contentPaddingRight}: 0.25rem;
+                ${notificationTokens.contentPaddingBottom}: 0rem;
+                ${notificationTokens.contentPaddingLeft}: 0.25rem;
+
+                ${notificationTokens.contentPaddingTopWithoutIcon}: 0.25rem;
+                ${notificationTokens.horizontalLayoutRightPaddingWithoutCloseIcon}: 1rem;
+
+                ${notificationTokens.textboxPaddingTop}: 0.1875rem;
+                ${notificationTokens.textboxPaddingRight}: 0.125rem;
+                ${notificationTokens.textboxPaddingBottom}: 0.375rem;
+                ${notificationTokens.textboxPaddingLeft}: 0.125rem;
+
+                ${notificationTokens.textboxPaddingRightWithCloseIcon}: 1.625rem;
+                ${notificationTokens.textboxGap}: 0.25rem;
+
+                ${notificationTokens.closeIconTop}: 0.5rem;
+                ${notificationTokens.closeIconRight}: 0.5rem;
+
+                ${notificationTokens.buttonsMarginTop}: 0.375rem;
+
+                ${notificationTokens.contentLeftIconSize}: 1.5rem;
+                ${notificationTokens.contentLeftIconMargin}: 0.375rem;
+                ${notificationTokens.contentTopIconMargin}: 0.5rem;
+
+                ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family);
+                ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size);
+                ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style);
+                ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight);
+                ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
+                ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height);
+
+                ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family);
+                ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size);
+                ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style);
+                ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
+                ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
+                ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height);
+
+                ${notificationTokens.closeIconColor}: var(--plasma-colors-tertiary);
+                ${notificationTokens.closeIconColorOnHover}: var(--plasma-colors-primary);
+
+                ${notificationTokens.horizontalLayoutGap}: 0.375rem;
+                ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem;
+                ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem;
             `,
         },
-        status: {
-            success: css`
-                ${notificationTokens.titleColor}: #09a552;
+        layout: {
+            horizontal: css`
+                ${notificationTokens.width}: 25rem;
+                ${notificationTokens.horizontalLayoutPadding}: 1rem 0.5rem 1rem 0.875rem;
             `,
-            warning: css`
-                ${notificationTokens.titleColor}: var(--plasma-colors-warning);
+            vertical: css`
+                ${notificationTokens.width}: 15rem;
+                ${notificationTokens.padding}: 0.375rem;
             `,
-            error: css`
-                ${notificationTokens.titleColor}: var(--plasma-colors-critical);
+        },
+        size: {
+            xs: css`
+                ${notificationTokens.closeIconTop}: 0.5rem;
+                ${notificationTokens.closeIconRight}: 0.5rem;
+
+                ${notificationTokens.padding}: 0.375rem;
+                ${notificationTokens.textboxPaddingTopWithTopIcon}: 0rem;
+
+                ${notificationTokens.contentPaddingTop}: 0.125rem;
+                ${notificationTokens.contentPaddingRight}: 0.25rem;
+                ${notificationTokens.contentPaddingBottom}: 0rem;
+                ${notificationTokens.contentPaddingLeft}: 0.25rem;
+
+                ${notificationTokens.buttonsMarginLeft}: 0rem;
+            `,
+            xxs: css`
+                ${notificationTokens.closeIconTop}: 0.8125rem;
+                ${notificationTokens.closeIconRight}: 1rem;
+
+                ${notificationTokens.padding}: 0.5625rem 1rem 1rem 1rem;
+                ${notificationTokens.textboxPaddingTopWithTopIcon}: 0.1875rem;
+
+                ${notificationTokens.contentPaddingTop}: 0.25rem;
+                ${notificationTokens.contentPaddingRight}: 0rem;
+                ${notificationTokens.contentPaddingBottom}: 0rem;
+                ${notificationTokens.contentPaddingLeft}: 0rem;
+
+                ${notificationTokens.buttonsMarginLeft}: 2rem;
             `,
         },
     },

packages/plasma-b2c/src/components/Notification/Notification.stories.tsx

@@ -1,87 +1,168 @@
-import React, { useRef, useCallback, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
+import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
+import { IconDisclosureRight } from '@salutejs/plasma-icons';
 import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import styled from 'styled-components';
 
-import { Button } from '../Button';
-import { Modal, ModalsProvider } from '../Modal';
-import { Headline3 } from '../Typography';
+import { Button } from '../Button/Button';
+import { Modal } from '../Modal';
+import { PopupBaseProvider } from '../PopupBase';
 
-import { Notification, addNotification, NotificationsProvider } from '.';
-import type { NotificationProps } from '.';
+import {
+    Notification,
+    addNotification,
+    NotificationsProvider,
+    NotificationIconPlacement,
+    NotificationProps,
+    NotificationLayout,
+} from '.';
 
-const meta: Meta<NotificationProps> = {
-    title: 'Controls/Notification',
-    decorators: [InSpacingDecorator],
-};
-
-export default meta;
-
-const statuses = ['success', 'warning', 'error', ''];
 const titles = ['Выполнено', 'Внимание', 'Ошибка'];
 const texts = ['SSH ключ успешно скопирован', 'Нельзя скопировать SSH ключ', 'Не удалось скопировать SSH ключ'];
+const size = ['xs', 'xxs'];
+const iconPlacement = ['top', 'left'];
 
 const longText = `JavaScript frameworks are an essential part of modern front-end web development,
 providing developers with proven tools for building scalable, interactive web applications.
-This module gives you some fundamental background knowledge about how client-side frameworks
-work and how they fit into your toolset, before moving on to tutorial series covering some of
-today's most popular ones.
 `;
 
 const getNotificationProps = (i: number) => ({
-    status: statuses[i % 3] as NotificationProps['status'],
     title: titles[i % 3],
     children: texts[i % 3],
+    size: size[i % 2],
+    iconPlacement: iconPlacement[i % 2] as NotificationIconPlacement,
 });
 
-export const Default: StoryObj<{
-    status: string;
+const placements = ['top', 'left'];
+
+const meta: Meta<NotificationProps> = {
+    title: 'Controls/Notification',
+    decorators: [InSpacingDecorator],
+};
+
+export default meta;
+
+interface StoryDefaultProps {
     title: string;
     children: string;
-}> = {
-    args: {
-        status: '',
-        title: 'Title',
-        children: longText,
-    },
+    showCloseIcon: boolean;
+    showLeftIcon: boolean;
+    layout: NotificationLayout;
+    size: 'xs' | 'xs';
+    iconPlacement: NotificationIconPlacement;
+}
+
+const ButtonsWrapper = styled.div`
+    display: flex;
+    gap: 6px;
+`;
+
+const StoryDefault = ({ title, children, iconPlacement, size, layout, showLeftIcon, ...rest }: StoryDefaultProps) => {
+    return (
+        <Notification
+            title={title}
+            icon={showLeftIcon ? <IconDisclosureRight /> : ''}
+            iconPlacement={iconPlacement}
+            actions={
+                <ButtonsWrapper>
+                    <Button
+                        text="First"
+                        size={layout === 'horizontal' ? 'xxs' : size}
+                        stretch={layout === 'vertical' && size === 'xs'}
+                    />
+                    <Button
+                        text="Second"
+                        size={layout === 'horizontal' ? 'xxs' : size}
+                        stretch={layout === 'vertical' && size === 'xs'}
+                    />
+                </ButtonsWrapper>
+            }
+            size={size}
+            layout={layout}
+            {...rest}
+        >
+            {children}
+        </Notification>
+    );
+};
+
+export const Default: StoryObj<StoryDefaultProps> = {
     argTypes: {
-        status: {
-            options: statuses,
+        iconPlacement: {
+            options: placements,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: ['xs', 'xxs'],
+            control: {
+                type: 'select',
+            },
+        },
+        layout: {
+            options: ['vertical', 'horizontal'],
             control: {
                 type: 'select',
             },
         },
     },
-    render: ({ status, title, children }) => {
-        return (
-            <Notification title={title} status={status !== '' ? (status as 'success') : undefined}>
-                {children}
-            </Notification>
-        );
+    args: {
+        title: 'Title',
+        children: longText,
+        showCloseIcon: true,
+        showLeftIcon: true,
+        iconPlacement: 'top',
+        layout: 'vertical',
+        size: 'xs',
     },
+    render: (args) => <StoryDefault {...args} />,
+};
+
+type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
+    timeout: number;
+    layout: NotificationLayout;
+    size: 'xs' | 'xxs';
+    iconPlacement: NotificationIconPlacement;
 };
 
-const StoryLiveDemo = ({ timeout }) => {
+const StoryLiveDemo = ({ timeout, ...rest }: StoryLiveDemoProps) => {
     const count = useRef(0);
     const handleClick = useCallback(() => {
-        addNotification(getNotificationProps(count.current), timeout);
+        addNotification({ icon: <IconDisclosureRight />, ...rest, ...getNotificationProps(count.current) }, timeout);
         count.current++;
-    }, [count]);
+    }, [count, rest]);
 
     return (
         <NotificationsProvider>
-            <Button text="Add notification" onClick={handleClick} />
+            <Button text="Добавить уведомление" onClick={handleClick} />
         </NotificationsProvider>
     );
 };
 
-export const LiveDemo: StoryObj<{ timeout: number }> = {
+export const LiveDemo: StoryObj<StoryLiveDemoProps> = {
+    argTypes: {
+        layout: {
+            options: ['vertical', 'horizontal'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
     args: {
         timeout: 3000,
+        role: 'alert',
+        layout: 'vertical',
     },
     render: (args) => <StoryLiveDemo {...args} />,
 };
 
-const StoryWithModal = ({ timeout }) => {
+type StoryWithModalProps = ComponentProps<typeof Notification> & {
+    timeout: number;
+};
+
+const StoryWithModal = ({ timeout }: StoryWithModalProps) => {
     const [isModalOpen, setIsModalOpen] = useState(false);
     const count = useRef(0);
     const handleClick = useCallback(() => {
@@ -90,19 +171,19 @@ const StoryWithModal = ({ timeout }) => {
     }, [count]);
 
     return (
-        <ModalsProvider>
-            <NotificationsProvider>
+        <NotificationsProvider>
+            <PopupBaseProvider>
                 <Button text="Open modal" onClick={() => setIsModalOpen(true)} />
                 <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
-                    <Headline3>Hello!</Headline3>
+                    <div>Hello!</div>
                     <Button view="primary" text="Add notification" onClick={handleClick} />
                 </Modal>
-            </NotificationsProvider>
-        </ModalsProvider>
+            </PopupBaseProvider>
+        </NotificationsProvider>
     );
 };
 
-export const WithModal: StoryObj<{ timeout: number }> = {
+export const WithModal: StoryObj<StoryLiveDemoProps> = {
     args: {
         timeout: 3500,
     },

packages/plasma-b2c/src/components/Notification/index.tsx

@@ -1,4 +1,8 @@
 export { NotificationsProvider, Notification } from './Notification';
 export { addNotification, closeNotification } from '@salutejs/plasma-new-hope/styled-components';
 
-export type { NotificationProps } from '@salutejs/plasma-new-hope/styled-components';
+export type {
+    NotificationProps,
+    NotificationLayout,
+    NotificationIconPlacement,
+} from '@salutejs/plasma-new-hope/styled-components';