From 2ab0ca40dd653a55a0d42ccdf147f84fe8c1298b Mon Sep 17 00:00:00 2001 From: Ilya Date: Fri, 29 Nov 2024 13:16:42 +0300 Subject: [PATCH] feat(sdds-cs): add horizontal notification --- .../Notification/Notification.styles.ts | 4 ++++ .../Notification/Notification.tokens.ts | 3 +++ .../Notification/Notification.config.ts | 17 ++++++++++++----- .../Notification/Notification.stories.tsx | 2 +- 4 files changed, 20 insertions(+), 6 deletions(-) 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 d81ffeedd4..f1f2d96d32 100644 --- a/packages/plasma-new-hope/src/components/Notification/Notification.styles.ts +++ b/packages/plasma-new-hope/src/components/Notification/Notification.styles.ts @@ -19,6 +19,7 @@ export const CloseIconWrapper = styled(Button)` position: absolute; width: var(${tokens.closeIconButtonSize}); height: var(${tokens.closeIconButtonSize}); + align-self: var(${tokens.horisontalIconCloseAlignSelf}); color: var(${tokens.closeIconColor}); @@ -51,6 +52,8 @@ export const ButtonsWrapper = styled.div` margin-left: ${({ iconPlacement }) => iconPlacement === placements.left ? `var(${tokens.buttonsMarginLeft})` : 'unset'}; + align-self: var(${tokens.horisontalActionsAlignSelf}); + &.${classes.horizontal} { margin-top: unset; margin-left: unset; @@ -60,6 +63,7 @@ export const ButtonsWrapper = styled.div` export const IconWrapper = styled.div` width: var(${tokens.contentLeftIconSize}); height: var(${tokens.contentLeftIconSize}); + align-self: var(${tokens.horisontalIconLeftAlignSelf}); margin-right: ${({ iconPlacement }) => iconPlacement === placements.left ? `var(${tokens.contentLeftIconMargin})` : 'unset'}; 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 64c102d853..4c05971603 100644 --- a/packages/plasma-new-hope/src/components/Notification/Notification.tokens.ts +++ b/packages/plasma-new-hope/src/components/Notification/Notification.tokens.ts @@ -33,6 +33,9 @@ export const tokens = { horizontalLayoutLeftIconMargin: '--plasma-notification-horizontal-layout-left-icon-margin', horizontalLayoutRightPaddingWithoutCloseIcon: '--plasma-notification-horizontal-layout-right-padding-without-close-icon', + horisontalIconLeftAlignSelf: '--plasma-notification-horizontal-icon-left-align-self', + horisontalActionsAlignSelf: '--plasma-notification-horizontal-actions-align-self', + horisontalIconCloseAlignSelf: '--plasma-notification-horizontal-icon-close-align-self', contentPaddingTop: '--plasma-notification-content-padding-top', contentPaddingRight: '--plasma-notification-content-padding-right', diff --git a/packages/sdds-cs/src/components/Notification/Notification.config.ts b/packages/sdds-cs/src/components/Notification/Notification.config.ts index 754e4cc984..a3717e6404 100644 --- a/packages/sdds-cs/src/components/Notification/Notification.config.ts +++ b/packages/sdds-cs/src/components/Notification/Notification.config.ts @@ -22,7 +22,7 @@ export const config = { ${notificationTokens.contentPaddingTopWithoutIcon}: 0.25rem; ${notificationTokens.horizontalLayoutRightPaddingWithoutCloseIcon}: 1rem; - ${notificationTokens.textboxPaddingTop}: 0.1875rem; + ${notificationTokens.textboxPaddingTop}: 0; ${notificationTokens.textboxPaddingRight}: 0.125rem; ${notificationTokens.textboxPaddingBottom}: 0.375rem; ${notificationTokens.textboxPaddingLeft}: 0.125rem; @@ -36,7 +36,7 @@ export const config = { ${notificationTokens.buttonsMarginTop}: 0.375rem; ${notificationTokens.contentLeftIconSize}: 1.5rem; - ${notificationTokens.contentLeftIconMargin}: 0.375rem; + ${notificationTokens.contentLeftIconMargin}: 0.25rem; ${notificationTokens.contentTopIconMargin}: 0.25rem; ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); @@ -56,12 +56,19 @@ export const config = { ${notificationTokens.closeIconColor}: var(--text-accent); ${notificationTokens.closeIconColorOnHover}: var(--text-accent-hover); - ${notificationTokens.horizontalLayoutGap}: 0.375rem; + ${notificationTokens.horizontalLayoutGap}: 0.5rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, }, layout: { + horizontal: css` + ${notificationTokens.width}: 30rem; + ${notificationTokens.horizontalLayoutPadding}: 0.75rem 0.75rem 0.75rem 0.75rem; + ${notificationTokens.horisontalIconLeftAlignSelf}: flex-start; + ${notificationTokens.horisontalActionsAlignSelf}: flex-end; + ${notificationTokens.horisontalIconCloseAlignSelf}: flex-start; + `, vertical: css` ${notificationTokens.width}: 15rem; ${notificationTokens.padding}: 0.375rem; @@ -69,8 +76,8 @@ export const config = { }, size: { xs: css` - ${notificationTokens.closeIconTop}: 0.75rem; - ${notificationTokens.closeIconRight}: 0.75rem; + ${notificationTokens.closeIconTop}: 0.5rem; + ${notificationTokens.closeIconRight}: 0.5rem; ${notificationTokens.borderWidth}: 0.125rem; ${notificationTokens.padding}: 0.75rem; diff --git a/packages/sdds-cs/src/components/Notification/Notification.stories.tsx b/packages/sdds-cs/src/components/Notification/Notification.stories.tsx index dde0c8c062..b1811fec47 100644 --- a/packages/sdds-cs/src/components/Notification/Notification.stories.tsx +++ b/packages/sdds-cs/src/components/Notification/Notification.stories.tsx @@ -85,7 +85,7 @@ export const Default: StoryObj = { }, }, layout: { - options: ['vertical'], + options: ['vertical', 'horizontal'], control: { type: 'select', },