diff --git a/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- default.snap.png b/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- default.snap.png new file mode 100644 index 0000000000..a087951d44 Binary files /dev/null and b/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- default.snap.png differ diff --git a/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- icon positions.snap.png b/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- icon positions.snap.png new file mode 100644 index 0000000000..254bf26069 Binary files /dev/null and b/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- icon positions.snap.png differ diff --git a/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- layout.snap.png b/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- layout.snap.png new file mode 100644 index 0000000000..76d795357a Binary files /dev/null and b/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- layout.snap.png differ diff --git a/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- long text.snap.png b/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- long text.snap.png new file mode 100644 index 0000000000..024da0f571 Binary files /dev/null and b/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- long text.snap.png differ diff --git a/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- oneline horizontal.snap.png b/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- oneline horizontal.snap.png new file mode 100644 index 0000000000..074481eb23 Binary files /dev/null and b/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- oneline horizontal.snap.png differ diff --git a/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- default.snap.png b/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- default.snap.png index ae4e26386b..4421083058 100644 Binary files a/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- default.snap.png and b/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- default.snap.png differ diff --git a/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- icon positions.snap.png b/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- icon positions.snap.png new file mode 100644 index 0000000000..3598749473 Binary files /dev/null and b/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- icon positions.snap.png differ diff --git a/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- layout.snap.png b/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- layout.snap.png new file mode 100644 index 0000000000..79fcf67c22 Binary files /dev/null and b/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- layout.snap.png differ diff --git a/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- long text.snap.png b/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- long text.snap.png new file mode 100644 index 0000000000..05345e3ff9 Binary files /dev/null and b/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- long text.snap.png differ diff --git a/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- oneline horizontal.snap.png b/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- oneline horizontal.snap.png new file mode 100644 index 0000000000..7473202a58 Binary files /dev/null and b/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- oneline horizontal.snap.png differ diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md index 3537d806f3..f8a3bd3c6e 100644 --- a/packages/plasma-b2c/api/plasma-b2c.api.md +++ b/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 & NotificationProps & React_2.RefAttributes>; export { Notification_2 as Notification } +export { NotificationIconPlacement } + +export { NotificationLayout } + export { NotificationProps } // @public (undocumented) diff --git a/packages/plasma-b2c/src/components/Notification/Notification.component-test.tsx b/packages/plasma-b2c/src/components/Notification/Notification.component-test.tsx new file mode 120000 index 0000000000..3e4bd56bf0 --- /dev/null +++ b/packages/plasma-b2c/src/components/Notification/Notification.component-test.tsx @@ -0,0 +1 @@ +../../../../plasma-web/src/components/Notification/Notification.component-test.tsx \ No newline at end of file diff --git a/packages/plasma-b2c/src/components/Notification/Notification.config.ts b/packages/plasma-b2c/src/components/Notification/Notification.config.ts index e8862c8cd7..3e372c80dc 100644 --- a/packages/plasma-b2c/src/components/Notification/Notification.config.ts +++ b/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; `, }, }, diff --git a/packages/plasma-b2c/src/components/Notification/Notification.stories.tsx b/packages/plasma-b2c/src/components/Notification/Notification.stories.tsx index f31080cae9..4b2d44a251 100644 --- a/packages/plasma-b2c/src/components/Notification/Notification.stories.tsx +++ b/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 = { - 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 = { + 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 ( + : ''} + iconPlacement={iconPlacement} + actions={ + +