From 179c6fe280d5f8042d92a8a1134d1858a68ea802 Mon Sep 17 00:00:00 2001 From: Ivan Kudryavtsev Date: Tue, 5 Dec 2023 09:20:02 +0300 Subject: [PATCH 1/3] feat(plasma-new-hope): Notification redesign --- .../Notification/Notification.styles.ts | 99 ++++++++++++++++--- .../Notification/Notification.tokens.ts | 46 ++++++++- .../components/Notification/Notification.tsx | 91 +++++++++++++++-- .../Notification/Notification.types.ts | 60 ++++++++++- .../Notification/NotificationsPortal.tsx | 19 ++-- .../src/components/Notification/index.tsx | 7 +- .../components/Notification/utils/index.ts | 8 ++ .../Notification/variations/_layout/base.ts | 18 ++++ .../variations/_layout/tokens.json | 1 + .../Notification/variations/_size/base.ts | 17 ++++ .../Notification/variations/_size/tokens.json | 9 ++ .../Notification/variations/_status/base.ts | 9 -- .../variations/_status/tokens.json | 1 - .../Notification/variations/_view/tokens.json | 27 ++++- .../components/_Icon/Icon.assets/Cross.tsx | 9 ++ .../src/components/_Icon/IconCross.tsx | 16 +++ .../components/Button/Button.config.ts | 11 +++ .../Notification/Notification.config.ts | 98 ++++++++++++++---- .../Notification/Notification.stories.tsx | 70 ++++++++++--- .../components/Notification/Notification.tsx | 14 ++- .../components/Button/Button.config.ts | 11 +++ .../Notification/Notification.config.ts | 98 ++++++++++++++---- .../Notification/Notification.stories.tsx | 70 ++++++++++--- .../Notification/Notification.config.ts | 85 ++++++++++++---- .../Notification/Notification.stories.tsx | 58 ++++++++--- 25 files changed, 801 insertions(+), 151 deletions(-) create mode 100644 packages/plasma-new-hope/src/components/Notification/utils/index.ts create mode 100644 packages/plasma-new-hope/src/components/Notification/variations/_layout/base.ts create mode 100644 packages/plasma-new-hope/src/components/Notification/variations/_layout/tokens.json create mode 100644 packages/plasma-new-hope/src/components/Notification/variations/_size/base.ts create mode 100644 packages/plasma-new-hope/src/components/Notification/variations/_size/tokens.json delete mode 100644 packages/plasma-new-hope/src/components/Notification/variations/_status/base.ts delete mode 100644 packages/plasma-new-hope/src/components/Notification/variations/_status/tokens.json create mode 100644 packages/plasma-new-hope/src/components/_Icon/Icon.assets/Cross.tsx create mode 100644 packages/plasma-new-hope/src/components/_Icon/IconCross.tsx diff --git a/packages/plasma-new-hope/src/components/Notification/Notification.styles.ts b/packages/plasma-new-hope/src/components/Notification/Notification.styles.ts index c5f530abdb..a538c4d7d3 100644 --- a/packages/plasma-new-hope/src/components/Notification/Notification.styles.ts +++ b/packages/plasma-new-hope/src/components/Notification/Notification.styles.ts @@ -1,21 +1,97 @@ import { css } from '@linaria/core'; import { styled } from '@linaria/react'; -import { applyHyphensNormal } from '../../mixins'; +import { applyHyphens } from '../../mixins'; -import { tokens } from './Notification.tokens'; +import { classes, tokens } from './Notification.tokens'; +import { CloseIconType, IconPlacementType, placements } from './Notification.types'; export const StyledNotification = css` + width: fit-content; +`; + +export const CloseIconWrapper = styled.div` + position: absolute; + width: 1.5rem; + height: 1.5rem; + + color: var(${tokens.closeIconColor}); + + &.${classes.horizontal} { + position: relative; + } +`; + +export const Wrapper = styled.div` position: relative; box-sizing: border-box; - width: 100%; - max-width: 18.75rem; - padding: 1rem 1.25rem; - background: var(${tokens.background}); - box-shadow: var(${tokens.boxShadow}); - border-radius: 0.5rem; + border-radius: var(${tokens.borderRadius}); + + &.${classes.horizontal} { + display: flex; + align-items: center; + gap: var(${tokens.horizontalLayoutGap}); + } +`; + +export const ButtonsWrapper = styled.div` + margin-top: var(${tokens.buttonsMarginTop}); + margin-left: ${({ iconPlacement }) => + iconPlacement === placements.left ? `var(${tokens.buttonsMarginLeft})` : 'unset'}; + + &.${classes.horizontal} { + margin-top: unset; + margin-left: unset; + } +`; + +export const IconWrapper = styled.div` + width: 1.5rem; + height: 1.5rem; + + margin-right: ${({ iconPlacement }) => + iconPlacement === placements.left ? `var(${tokens.contentLeftIconMargin})` : 'unset'}; + margin-bottom: ${({ iconPlacement }) => + iconPlacement === placements.top ? `var(${tokens.contentTopIconMargin})` : 'unset'}; + + &.${classes.horizontal} { + margin-right: var(${tokens.horizontalLayoutLeftIconMargin}); + margin-bottom: unset; + } +`; + +export const ContentBox = styled.div` + // TODO: переделать, когда научимся работать с токенами при пересечнии свойств + // issue #909 + display: ${({ iconPlacement }) => (iconPlacement === placements.left ? 'flex' : 'block')}; + + &.${classes.horizontal} { + display: flex; + align-items: center; + flex: 1; + } +`; + +export const TextBox = styled.div` + padding: var(${tokens.textboxPaddingTop}) var(${tokens.textboxPaddingRight}) var(${tokens.textboxPaddingBottom}) + var(${tokens.textboxPaddingLeft}); + + padding-top: ${({ iconPlacement }) => + iconPlacement === placements.left + ? `var(${tokens.textboxPaddingTopWithLeftIcon})` + : `var(${tokens.textboxPaddingTop})`}; + padding-right: ${({ showCloseIcon }) => + showCloseIcon ? `var(${tokens.textboxPaddingRightWithCloseIcon})` : `var(${tokens.textboxPaddingRight})`}; + + display: flex; + flex-direction: column; + row-gap: var(${tokens.textboxGap}); + + &.${classes.horizontal} { + padding: unset; + } `; export const StyledTitle = styled.div` @@ -25,9 +101,7 @@ export const StyledTitle = styled.div` font-weight: var(${tokens.titleFontWeight}); letter-spacing: var(${tokens.titleFontLetterSpacing}); line-height: var(${tokens.titleFontLineHeight}); - ${String(applyHyphensNormal)}; - - margin-bottom: 0.5rem; + ${String(applyHyphens)}; `; export const StyledContent = styled.div` @@ -37,7 +111,7 @@ export const StyledContent = styled.div` font-weight: var(${tokens.contentFontWeight}); letter-spacing: var(${tokens.contentFontLetterSpacing}); line-height: var(${tokens.contentFontLineHeight}); - ${String(applyHyphensNormal)}; + ${String(applyHyphens)}; color: var(${tokens.contentColor}); `; @@ -85,4 +159,5 @@ export const StyledRoot = styled.div` box-sizing: border-box; padding: 0 1.5rem 1.5rem; max-height: 100%; + align-items: flex-end; `; diff --git a/packages/plasma-new-hope/src/components/Notification/Notification.tokens.ts b/packages/plasma-new-hope/src/components/Notification/Notification.tokens.ts index e36c51f4bf..6760cb857c 100644 --- a/packages/plasma-new-hope/src/components/Notification/Notification.tokens.ts +++ b/packages/plasma-new-hope/src/components/Notification/Notification.tokens.ts @@ -1,10 +1,49 @@ export const classes = { + textbox: 'notificaiton-textbox', + contentBox: 'notificaiton-content-box', title: 'notification-title', + text: 'notification-text', + wrapper: 'notification-wrapper', + icon: 'notification-icon', + closeIcon: 'notification-close-icon', + buttonsWrapper: 'notification-buttons-wrapper', + + horizontal: 'notification-layout-horizontal', + vertical: 'notification-layout-vertical', + oneLine: 'notification-one-line-textbox', }; export const tokens = { background: '--plasma-notification-backgorund', - boxShadow: '--plasma-notification-box-shadow', + padding: '--plasma-notification-padding', + horizontalLayoutPadding: '--plasma-notification-horizontal-layout-padding', + width: '--plasma-notification-width', + borderRadius: '--plasma-notification-border-radius', + + paddingOneLineTextbox: '--plasma-notification-padding-one-line-textbox', + horizontalLayoutGap: '--plasma-notification-horizontal-layout-gap', + horizontalLayoutLeftIconMargin: '--plasma-notification-horizontal-layout-left-icon-margin', + + contentPaddingTop: '--plasma-notification-content-padding-top', + contentPaddingRight: '--plasma-notification-content-padding-right', + contentPaddingBottom: '--plasma-notification-content-padding-bottom', + contentPaddingLeft: '--plasma-notification-content-padding-left', + + textboxPaddingTop: '--plasma-notification-textbox-padding-top', + textboxPaddingRight: '--plasma-notification-textbox-padding-right', + textboxPaddingBottom: '--plasma-notification-textbox-padding-bottom', + textboxPaddingLeft: '--plasma-notification-textbox-padding-left', + + textboxPaddingTopWithLeftIcon: '--plasma-notification-textbox-padding-top-with-left-icon', + textboxPaddingRightWithCloseIcon: '--plasma-notification-textbox-padding-right-with-close-icon', + textboxGap: '--plasma-notification-textbox-gap', + + buttonsMarginTop: '--plasma-notification-buttons-margin-top', + buttonsMarginLeft: '--plasma-notification-buttons-margin-left', + + contentLeftIconMargin: '--plasma-notification-content-left-icon-margin', + contentTopIconMargin: '--plasma-notification-content-top-icon-margin', + contentColor: '--plasma-notification-content-color', contentFontFamily: '--plasma-notification-content-font-family', contentFontSize: '--plasma-notification-content-font-size', @@ -13,6 +52,7 @@ export const tokens = { contentFontWeightBold: '--plasma-notification-content-font-weight-bold', contentFontLetterSpacing: '--plasma-notification-content-font-letter-spacing', contentFontLineHeight: '--plasma-notification-content-font-line-height', + titleColor: '--plasma-notification-title-color', titleFontFamily: '--plasma-notification-title-font-family', titleFontSize: '--plasma-notification-title-font-size', @@ -21,4 +61,8 @@ export const tokens = { titleFontWeightBold: '--plasma-notification-title-font-weight-bold', titleFontLetterSpacing: '--plasma-notification-title-font-letter-spacing', titleFontLineHeight: '--plasma-notification-title-font-line-height', + + closeIconTop: '--plasma-notification-close-icon-top', + closeIconRight: '--plasma-notification-close-icon-right', + closeIconColor: '--plasma-notification-close-icon-color', }; diff --git a/packages/plasma-new-hope/src/components/Notification/Notification.tsx b/packages/plasma-new-hope/src/components/Notification/Notification.tsx index f18fd8709b..c03cfe6409 100644 --- a/packages/plasma-new-hope/src/components/Notification/Notification.tsx +++ b/packages/plasma-new-hope/src/components/Notification/Notification.tsx @@ -1,19 +1,46 @@ import React, { forwardRef } from 'react'; import { RootProps } from '../../engines'; +import { cx } from '../../utils'; +import { IconCross } from '../_Icon/IconCross'; import { classes } from './Notification.tokens'; import { base as viewCSS } from './variations/_view/base'; -import { base as statusCSS } from './variations/_status/base'; -import { NotificationProps } from './Notification.types'; -import { StyledContent, StyledTitle, StyledNotification } from './Notification.styles'; +import { base as layoutCSS } from './variations/_layout/base'; +import { base as sizeCSS } from './variations/_size/base'; +import { NotificationLayout, NotificationProps, layouts } from './Notification.types'; +import { + ButtonsWrapper, + CloseIconWrapper, + ContentBox, + IconWrapper, + StyledContent, + StyledNotification, + StyledTitle, + TextBox, + Wrapper, +} from './Notification.styles'; +import { getLayoutClass } from './utils'; /** * Компонент для небольших уведомлений пользователя */ export const notificationRoot = (Root: RootProps) => forwardRef((props, ref) => { - const { role = 'status', status, title, children: content, view, ...rest } = props; + const { + role = 'status', + title, + children: content, + actions, + view, + size, + iconPlacement, + showCloseIcon = true, + layout = layouts.vertical as NotificationLayout, + icon, + onCloseButtonClick, + ...rest + } = props; let ariaLive: 'assertive' | 'polite' = 'polite'; let ariaAtomic = false; @@ -24,18 +51,59 @@ export const notificationRoot = (Root: RootProps - {title} - {content} + + + {icon && ( + + {icon} + + )} + + {title && {title}} + {content && {content}} + + + {actions && ( + + {actions} + + )} + {showCloseIcon && ( + + + + )} + ); }); @@ -46,14 +114,19 @@ export const noticationConfig = { layout: notificationRoot, base: StyledNotification, variations: { - status: { - css: statusCSS, + layout: { + css: layoutCSS, }, view: { css: viewCSS, }, + size: { + css: sizeCSS, + }, }, defaults: { view: 'default', + layout: layouts.vertical, + size: 'xs', }, }; diff --git a/packages/plasma-new-hope/src/components/Notification/Notification.types.ts b/packages/plasma-new-hope/src/components/Notification/Notification.types.ts index bce02ff998..efc542a94b 100644 --- a/packages/plasma-new-hope/src/components/Notification/Notification.types.ts +++ b/packages/plasma-new-hope/src/components/Notification/Notification.types.ts @@ -3,7 +3,29 @@ import { HTMLAttributes, ReactNode, RefAttributes } from 'react'; import { ComponentConfig, PropsType, Variants } from '../../engines/types'; -export type NotificationStatusType = 'success' | 'warning' | 'error'; +export type NotificationLayout = 'horizontal' | 'vertical'; +export const layouts = { + horizontal: 'horizontal', + vertical: 'vertical', +}; + +export type NotificationIconPlacement = 'top' | 'left'; +export const placements = { + top: 'top', + left: 'left', +}; + +export type LayoutType = { + layout?: NotificationLayout; +}; + +export type IconPlacementType = { + iconPlacement?: NotificationIconPlacement; +}; + +export type CloseIconType = { + showCloseIcon?: boolean; +}; export interface NotificationProps extends AsProps, HTMLAttributes { /** @@ -11,14 +33,44 @@ export interface NotificationProps extends AsProps, HTMLAttributes void; + + /** + * Вид Notification. */ - status?: NotificationStatusType; view?: string; + /** + * Размер Notification (необходимо связать с размером используемых Button). + */ + size?: string; } export interface NotificationPortalProps extends HTMLAttributes { diff --git a/packages/plasma-new-hope/src/components/Notification/NotificationsPortal.tsx b/packages/plasma-new-hope/src/components/Notification/NotificationsPortal.tsx index b70a50f2cb..73e7b2dc24 100644 --- a/packages/plasma-new-hope/src/components/Notification/NotificationsPortal.tsx +++ b/packages/plasma-new-hope/src/components/Notification/NotificationsPortal.tsx @@ -1,11 +1,11 @@ -import React, { FC, ForwardRefExoticComponent, RefAttributes } from 'react'; +import React, { FC, ForwardRefExoticComponent, RefAttributes, useMemo } from 'react'; import { useStoreon } from 'storeon/react'; import { PopupProvider, popupConfig } from '../Popup'; import { component } from '../../engines'; import { cx } from '../../utils'; -import type { NotificationsState, NotificationsEvents } from './NotificationsStore'; +import { NotificationsState, NotificationsEvents, closeNotification } from './NotificationsStore'; import { NotificationPortalProps, NotificationProps } from './Notification.types'; import { StyledItemWrapper, StyledRoot } from './Notification.styles'; @@ -17,9 +17,11 @@ const Popup = component(popupConfig); */ export const NotificationsPortal: FC = ({ config, frame }) => { const { notifications } = useStoreon('notifications'); - const Notification = component(config) as ForwardRefExoticComponent< - NotificationProps & RefAttributes - >; + + const Notification = useMemo( + () => component(config) as ForwardRefExoticComponent>, + [], + ); return ( @@ -32,7 +34,12 @@ export const NotificationsPortal: FC = ({ config, frame className={cx(isHidden ? 'hide' : 'show')} isHidden={isHidden || false} > - + closeNotification(id)} + {...rest} + /> ))} diff --git a/packages/plasma-new-hope/src/components/Notification/index.tsx b/packages/plasma-new-hope/src/components/Notification/index.tsx index d134e9d548..e1527d3a4b 100644 --- a/packages/plasma-new-hope/src/components/Notification/index.tsx +++ b/packages/plasma-new-hope/src/components/Notification/index.tsx @@ -2,4 +2,9 @@ export { NotificationsProvider } from './NotificationsProvider'; export { notificationRoot, noticationConfig } from './Notification'; export { addNotification, closeNotification } from './NotificationsStore'; export { classes as notificationClasses, tokens as notificationTokens } from './Notification.tokens'; -export type { NotificationStatusType, NotificationProps, NotificationPortalProps } from './Notification.types'; +export type { + NotificationProps, + NotificationPortalProps, + NotificationLayout, + NotificationIconPlacement, +} from './Notification.types'; diff --git a/packages/plasma-new-hope/src/components/Notification/utils/index.ts b/packages/plasma-new-hope/src/components/Notification/utils/index.ts new file mode 100644 index 0000000000..396097e8fe --- /dev/null +++ b/packages/plasma-new-hope/src/components/Notification/utils/index.ts @@ -0,0 +1,8 @@ +import { classes } from '../Notification.tokens'; +import { layouts } from '../Notification.types'; + +export const getLayoutClass = (layout?: string) => { + if (!layout) return undefined; + if (layout === layouts.horizontal) return classes.horizontal; + return classes.vertical; +}; diff --git a/packages/plasma-new-hope/src/components/Notification/variations/_layout/base.ts b/packages/plasma-new-hope/src/components/Notification/variations/_layout/base.ts new file mode 100644 index 0000000000..5e58fdd1be --- /dev/null +++ b/packages/plasma-new-hope/src/components/Notification/variations/_layout/base.ts @@ -0,0 +1,18 @@ +import { css } from '@linaria/core'; + +import { classes, tokens } from '../../Notification.tokens'; + +export const base = css` + .${classes.wrapper} { + width: var(${tokens.width}); + padding: var(${tokens.padding}); + } + + .${classes.wrapper}.${classes.horizontal} { + padding: var(${tokens.horizontalLayoutPadding}); + } + + .${classes.wrapper}.${classes.horizontal}.${classes.oneLine} { + padding: var(${tokens.paddingOneLineTextbox}); + } +`; diff --git a/packages/plasma-new-hope/src/components/Notification/variations/_layout/tokens.json b/packages/plasma-new-hope/src/components/Notification/variations/_layout/tokens.json new file mode 100644 index 0000000000..ac887ef3dc --- /dev/null +++ b/packages/plasma-new-hope/src/components/Notification/variations/_layout/tokens.json @@ -0,0 +1 @@ +["--plasma-notification-padding", "--plasma-notification-width"] diff --git a/packages/plasma-new-hope/src/components/Notification/variations/_size/base.ts b/packages/plasma-new-hope/src/components/Notification/variations/_size/base.ts new file mode 100644 index 0000000000..bfdb0ff60b --- /dev/null +++ b/packages/plasma-new-hope/src/components/Notification/variations/_size/base.ts @@ -0,0 +1,17 @@ +import { css } from '@linaria/core'; + +import { classes, tokens } from '../../Notification.tokens'; + +export const base = css` + // TODO: переделать, когда научимся работать с токенами при пересечнии свойств + // issue #909 + .${classes.contentBox}.${classes.vertical} { + padding: var(${tokens.contentPaddingTop}) var(${tokens.contentPaddingRight}) var(${tokens.contentPaddingBottom}) + var(${tokens.contentPaddingLeft}); + } + + .${classes.closeIcon}.${classes.vertical} { + top: var(${tokens.closeIconTop}); + right: var(${tokens.closeIconRight}); + } +`; diff --git a/packages/plasma-new-hope/src/components/Notification/variations/_size/tokens.json b/packages/plasma-new-hope/src/components/Notification/variations/_size/tokens.json new file mode 100644 index 0000000000..3312d3aba9 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Notification/variations/_size/tokens.json @@ -0,0 +1,9 @@ +[ + "--plasma-notification-close-icon-top", + "--plasma-notification-close-icon-right", + "--plasma-notification-content-padding-top", + "--plasma-notification-content-padding-right", + "--plasma-notification-content-padding-bottom", + "--plasma-notification-content-padding-left", + "--plasma-notification-buttons-margin-left" +] diff --git a/packages/plasma-new-hope/src/components/Notification/variations/_status/base.ts b/packages/plasma-new-hope/src/components/Notification/variations/_status/base.ts deleted file mode 100644 index 1814a1ce0d..0000000000 --- a/packages/plasma-new-hope/src/components/Notification/variations/_status/base.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { css } from '@linaria/core'; - -import { classes, tokens } from '../../Notification.tokens'; - -export const base = css` - & > .${classes.title} { - color: var(${tokens.titleColor}); - } -`; diff --git a/packages/plasma-new-hope/src/components/Notification/variations/_status/tokens.json b/packages/plasma-new-hope/src/components/Notification/variations/_status/tokens.json deleted file mode 100644 index 41e7e9bf93..0000000000 --- a/packages/plasma-new-hope/src/components/Notification/variations/_status/tokens.json +++ /dev/null @@ -1 +0,0 @@ -["--plasma-notification-title-color"] diff --git a/packages/plasma-new-hope/src/components/Notification/variations/_view/tokens.json b/packages/plasma-new-hope/src/components/Notification/variations/_view/tokens.json index 6643d7b561..bdd886a126 100644 --- a/packages/plasma-new-hope/src/components/Notification/variations/_view/tokens.json +++ b/packages/plasma-new-hope/src/components/Notification/variations/_view/tokens.json @@ -1,5 +1,5 @@ [ - "--plasma-notification-backgorund", + "--plasma-notification-close-icon-color", "--plasma-notification-content-color", "--plasma-notification-content-font-family", "--plasma-notification-content-font-size", @@ -7,5 +7,28 @@ "--plasma-notification-content-font-weight", "--plasma-notification-content-font-weight-bold", "--plasma-notification-content-font-letter-spacing", - "--plasma-notification-content-font-line-height" + "--plasma-notification-content-font-line-height", + "--plasma-notification-title-color", + "--plasma-notification-title-font-family", + "--plasma-notification-title-font-size", + "--plasma-notification-title-font-style", + "--plasma-notification-title-font-weight", + "--plasma-notification-title-font-weight-bold", + "--plasma-notification-title-font-letter-spacing", + "--plasma-notification-title-font-line-height", + "--plasma-notification-buttons-margin-top", + "--plasma-notification-content-left-icon-margin", + "--plasma-notification-content-top-icon-margin", + "--plasma-notification-textbox-padding-top", + "--plasma-notification-textbox-padding-right", + "--plasma-notification-textbox-padding-bottom", + "--plasma-notification-textbox-padding-left", + "--plasma-notification-textbox-padding-top-with-left-icon", + "--plasma-notification-textbox-padding-right-with-close-icon", + "--plasma-notification-textbox-gap", + "--plasma-notification-padding-one-line-textbox", + "--plasma-notification-horizontal-layout-gap", + "--plasma-notification-horizontal-layout-left-icon-margin", + "--plasma-notification-border-radius", + "--plasma-notification-backgorund" ] diff --git a/packages/plasma-new-hope/src/components/_Icon/Icon.assets/Cross.tsx b/packages/plasma-new-hope/src/components/_Icon/Icon.assets/Cross.tsx new file mode 100644 index 0000000000..9cf27c5b30 --- /dev/null +++ b/packages/plasma-new-hope/src/components/_Icon/Icon.assets/Cross.tsx @@ -0,0 +1,9 @@ +import React from 'react'; + +import { IconProps } from '../IconRoot'; + +export const Cross: React.FC = (props) => ( + + + +); diff --git a/packages/plasma-new-hope/src/components/_Icon/IconCross.tsx b/packages/plasma-new-hope/src/components/_Icon/IconCross.tsx new file mode 100644 index 0000000000..8a26848b4f --- /dev/null +++ b/packages/plasma-new-hope/src/components/_Icon/IconCross.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Cross } from './Icon.assets/Cross'; +import { IconRoot, IconProps } from './IconRoot'; + +export const IconCross: React.FC = ({ size = 's', color, className, sizeCustomProperty }) => { + return ( + + ); +}; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.config.ts index 863c50fa57..d1c08e5809 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.config.ts @@ -184,6 +184,17 @@ export const config = { ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); `, + xss: css` + --plasma-button-height: 24px; + --plasma-button-padding: 10px; + --plasma-button-radius: 6px; + --plasma-button-font-family: var(--plasma-typo-body-xs-font-family); + --plasma-button-font-size: var(--plasma-typo-body-xs-font-size); + --plasma-button-font-style: var(--plasma-typo-body-xs-font-style); + --plasma-button-font-weight: var(--plasma-typo-body-xs-bold-font-weight); + --plasma-button-letter-spacing: var(--plasma-typo-body-xs-letter-spacing); + --plasma-button-line-height: var(--plasma-typo-body-xs-line-height); + `, }, disabled: { true: css` diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Notification/Notification.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Notification/Notification.config.ts index 499fcaf1a4..398dda030e 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Notification/Notification.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Notification/Notification.config.ts @@ -10,31 +10,89 @@ export const config = { view: { default: css` ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.boxShadow}: 0px 1px 1px rgba(0, 0, 0, 0.05), 0px 4px 14px rgba(0, 0, 0, 0.08); ${notificationTokens.background}: var(--surface-transparent-card); - ${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.borderRadius}: 0.75rem; + ${notificationTokens.padding}: 0.375rem; + + ${notificationTokens.contentPaddingTop}: 0.125rem; + ${notificationTokens.contentPaddingRight}: 0.25rem; + ${notificationTokens.contentPaddingBottom}: 0rem; + ${notificationTokens.contentPaddingLeft}: 0.25rem; + + ${notificationTokens.textboxPaddingTop}: 0rem; + ${notificationTokens.textboxPaddingRight}: 0.125rem; + ${notificationTokens.textboxPaddingBottom}: 0.375rem; + ${notificationTokens.textboxPaddingLeft}: 0.125rem; + + ${notificationTokens.textboxPaddingTopWithLeftIcon}: 0.1875rem; + ${notificationTokens.textboxPaddingRightWithCloseIcon}: 1.625rem; + ${notificationTokens.textboxGap}: 0.25rem; + + ${notificationTokens.closeIconTop}: 0.5rem; + ${notificationTokens.closeIconRight}: 0.5rem; + + ${notificationTokens.buttonsMarginTop}: 0.375rem; + + ${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(--text-tertiary); + + ${notificationTokens.horizontalLayoutGap}: 0.375rem; + ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; + ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, }, - status: { - success: css` - ${notificationTokens.titleColor}: var(--text-positive); + layout: { + horizontal: css` + ${notificationTokens.width}: 25rem; + ${notificationTokens.horizontalLayoutPadding}: 1rem 0.5rem 1rem 0.875rem; `, - warning: css` - ${notificationTokens.titleColor}: var(--text-warning); + vertical: css` + ${notificationTokens.width}: 15rem; + ${notificationTokens.padding}: 0.375rem; `, - error: css` - ${notificationTokens.titleColor}: var(--text-negative); + }, + size: { + xs: css` + ${notificationTokens.closeIconTop}: 0.5rem; + ${notificationTokens.closeIconRight}: 0.5rem; + + ${notificationTokens.padding}: 0.375rem; + + ${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.contentPaddingTop}: 0.25rem; + ${notificationTokens.contentPaddingRight}: 0rem; + ${notificationTokens.contentPaddingBottom}: 0rem; + ${notificationTokens.contentPaddingLeft}: 0rem; + + ${notificationTokens.buttonsMarginLeft}: 2rem; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Notification/Notification.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Notification/Notification.stories.tsx index f7015c06a4..0511f071ef 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Notification/Notification.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Notification/Notification.stories.tsx @@ -4,30 +4,32 @@ import type { StoryObj, Meta } from '@storybook/react'; import { Button } from '../Button/Button'; import { Modal } from '../Modal/Modal'; -import { addNotification } from '../../../../../src/components/Notification'; +import { NotificationIconPlacement, addNotification } from '../../../../../src/components/Notification'; import { WithTheme } from '../../../_helpers'; import { PopupProvider } from '../Popup/Popup'; -import { NotificationProps, NotificationStatusType } from '../../../../components/Notification'; +import { NotificationProps } from '../../../../components/Notification'; +import { IconDisclosureRight } from '../../../../components/_Icon'; import { Notification, NotificationsProvider } from './Notification'; -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 NotificationStatusType, title: titles[i % 3], children: texts[i % 3], + size: size[i % 2], + iconPlacement: iconPlacement[i % 2] as NotificationIconPlacement, }); +const placements = ['top', 'left']; + const meta: Meta = { title: 'plasma_b2c/Notification', decorators: [WithTheme], @@ -36,14 +38,26 @@ const meta: Meta = { export default meta; interface StoryDefaultProps { - status: string; title: string; children: string; + showCloseIcon: boolean; + showLeftIcon: boolean; + layout: 'vertical' | 'horizontal'; + size: 'xs' | 'xxs'; + iconPlacement: 'top' | 'left'; } -const StoryDefault = ({ status, title, children }: StoryDefaultProps) => { +const StoryDefault = ({ title, children, iconPlacement, size, layout, showLeftIcon, ...rest }: StoryDefaultProps) => { return ( - + : ''} + iconPlacement={iconPlacement} + actions={