feat(sdds-cs): add horizontal notification

salute-developers · Nov 29, 2024 · 2ab0ca4 · 2ab0ca4
1 parent 1fb7a93
commit 2ab0ca4
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 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
@@ -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<IconPlacementType>`
     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<IconPlacementType>`
 export const IconWrapper = styled.div<IconPlacementType>`
     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
@@ -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
@@ -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,21 +56,28 @@ 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;
             `,
         },
         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
@@ -85,7 +85,7 @@ export const Default: StoryObj<StoryDefaultProps> = {
             },
         },
         layout: {
-            options: ['vertical'],
+            options: ['vertical', 'horizontal'],
             control: {
                 type: 'select',
             },