feat(new-hope): toast and notification tokens

Yakutoc · Dec 4, 2024 · 53630d0 · 53630d0
1 parent 9138c98
commit 53630d0
Show file tree

Hide file tree

Showing 27 changed files with 68 additions and 15 deletions.
diff --git a/...mponents/Toast/Toast.component-test.tsx/plasma-web Toast -- with close.snap.png b/...mponents/Toast/Toast.component-test.tsx/plasma-web Toast -- with close.snap.png
diff --git a/packages/plasma-b2c/src/components/Notification/Notification.config.ts b/packages/plasma-b2c/src/components/Notification/Notification.config.ts
@@ -73,6 +73,8 @@ export const config = {
             xs: css`
                 ${notificationTokens.closeIconTop}: 0.5rem;
                 ${notificationTokens.closeIconRight}: 0.5rem;
+                ${notificationTokens.closeIconButtonSize}: 1.5rem;
+                ${notificationTokens.closeIconSize}: 1.5rem;
 
                 ${notificationTokens.padding}: 0.375rem;
                 ${notificationTokens.textboxPaddingTopWithTopIcon}: 0rem;
@@ -87,6 +89,8 @@ export const config = {
             xxs: css`
                 ${notificationTokens.closeIconTop}: 0.8125rem;
                 ${notificationTokens.closeIconRight}: 1rem;
+                ${notificationTokens.closeIconButtonSize}: 1.5rem;
+                ${notificationTokens.closeIconSize}: 1.5rem;
 
                 ${notificationTokens.padding}: 0.5625rem 1rem 1rem 1rem;
                 ${notificationTokens.textboxPaddingTopWithTopIcon}: 0.1875rem;

diff --git a/packages/plasma-b2c/src/components/Toast/Toast.config.ts b/packages/plasma-b2c/src/components/Toast/Toast.config.ts
@@ -46,6 +46,8 @@ export const config = {
                 ${toastTokens.maxWidth}: calc(100vw - 5rem);
                 ${toastTokens.padding}: 0.5625rem 0.75rem;
 
+                ${toastTokens.closeIconButtonSize}: 1rem;
+                ${toastTokens.closeIconSize}: 1.5rem;
                 ${toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
                 ${toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);

diff --git a/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownItem/DropdownItem.styles.ts b/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownItem/DropdownItem.styles.ts
@@ -67,11 +67,11 @@ export const Wrapper = styled.li<{ variant: DropdownProps['variant'] }>`
 
     &:hover:not(.${classes.dropdownItemIsDisabled}) {
         cursor: pointer;
-        background-color: var(${constants.itemBackgroundHover});
+        background-color: var(${constants.itemBackgroundHover}, var(${constants.itemBackgroundHover}));
     }
 
     &.${classes.dropdownItemIsActive} {
-        background-color: var(${constants.itemBackgroundHover});
+        background-color: var(${constants.itemBackgroundHover}, var(${constants.itemBackgroundHover}));
     }
 
     &.${classes.dropdownItemIsDisabled} {

diff --git a/packages/plasma-new-hope/src/components/Notification/Notification.styles.ts b/packages/plasma-new-hope/src/components/Notification/Notification.styles.ts
@@ -17,8 +17,8 @@ const Button = component(mergedButtonConfig);
 
 export const CloseIconWrapper = styled(Button)`
     position: absolute;
-    width: 1.5rem;
-    height: 1.5rem;
+    width: var(${tokens.closeIconButtonSize});
+    height: var(${tokens.closeIconButtonSize});
 
     color: var(${tokens.closeIconColor});
 

diff --git a/packages/plasma-new-hope/src/components/Notification/Notification.tokens.ts b/packages/plasma-new-hope/src/components/Notification/Notification.tokens.ts
@@ -79,4 +79,6 @@ export const tokens = {
     closeIconRight: '--plasma-notification-close-icon-right',
     closeIconColor: '--plasma-notification-close-icon-color',
     closeIconColorOnHover: '--plasma-notification-close-icon-color-on-hover',
+    closeIconSize: '--plasma-notification-close-icon-size',
+    closeIconButtonSize: '--plasma-notification-close-icon-button-size',
 };
diff --git a/packages/plasma-new-hope/src/components/Notification/Notification.tsx b/packages/plasma-new-hope/src/components/Notification/Notification.tsx
@@ -4,7 +4,7 @@ import { RootProps } from '../../engines';
 import { cx } from '../../utils';
 import { IconCross } from '../_Icon/Icons/IconCross';
 
-import { classes } from './Notification.tokens';
+import { classes, tokens } from './Notification.tokens';
 import { base as viewCSS } from './variations/_view/base';
 import { base as layoutCSS } from './variations/_layout/base';
 import { base as sizeCSS } from './variations/_size/base';
@@ -107,7 +107,7 @@ export const notificationRoot = (Root: RootProps<HTMLDivElement, Omit<Notificati
                             onClick={onCloseButtonClick}
                             className={cx(classes.closeIcon, getLayoutClass(layout))}
                         >
-                            <IconCross size="s" color="inherit" />
+                            <IconCross size="s" sizeCustomProperty={tokens.closeIconSize} color="inherit" />
                         </CloseIconWrapper>
                     )}
                 </Wrapper>

diff --git a/packages/plasma-new-hope/src/components/Toast/Toast.styles.ts b/packages/plasma-new-hope/src/components/Toast/Toast.styles.ts
@@ -73,7 +73,7 @@ export const StyledRoot = styled.div<{ position: string; isVisible: boolean; off
 `;
 
 export const CloseIconWrapper = styled(Button)`
-    height: 1rem;
+    height: var(${tokens.closeIconButtonSize});
     --plasma_private-close-icon-margin: var(${tokens.closeIconMargin});
     margin: var(--plasma_private-close-icon-margin);
 

diff --git a/packages/plasma-new-hope/src/components/Toast/Toast.tokens.ts b/packages/plasma-new-hope/src/components/Toast/Toast.tokens.ts
@@ -28,4 +28,6 @@ export const tokens = {
     closeIconMargin: '--plasma-toast-close-icon-margin',
     closeIconColor: '--plasma-toast-close-icon-color',
     closeIconColorOnHover: '--plasma-toast-close-icon-color-on-hover',
+    closeIconSize: '--plasma-toast-close-icon-size',
+    closeIconButtonSize: '--plasma-toast-close-icon-button-size',
 };
diff --git a/packages/plasma-new-hope/src/components/Toast/Toast.tsx b/packages/plasma-new-hope/src/components/Toast/Toast.tsx
@@ -4,7 +4,7 @@ import type { RootProps } from '../../engines';
 import { cx } from '../../utils';
 import { IconCross } from '../_Icon/Icons/IconCross';
 
-import { classes } from './Toast.tokens';
+import { classes, tokens } from './Toast.tokens';
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as pilledCSS } from './variations/_pilled/base';
@@ -64,7 +64,7 @@ export const toastRoot = (Root: RootProps<HTMLDivElement, ToastProps>) =>
                         className={cx(classes.closeIcon)}
                         stretching="fixed"
                     >
-                        <IconCross size="s" color="inherit" />
+                        <IconCross size="s" sizeCustomProperty={tokens.closeIconSize} color="inherit" />
                     </CloseIconWrapper>
                 )}
             </Root>

diff --git a/...es/plasma-new-hope/src/examples/plasma_b2c/components/Notification/Notification.config.ts b/...es/plasma-new-hope/src/examples/plasma_b2c/components/Notification/Notification.config.ts
@@ -75,6 +75,8 @@ export const config = {
             xs: css`
                 ${notificationTokens.closeIconTop}: 0.5rem;
                 ${notificationTokens.closeIconRight}: 0.5rem;
+                ${notificationTokens.closeIconButtonSize}: 1.5rem;
+                ${notificationTokens.closeIconSize}: 1.5rem;
 
                 ${notificationTokens.padding}: 0.375rem;
                 ${notificationTokens.textboxPaddingTopWithTopIcon}: 0rem;
@@ -89,6 +91,8 @@ export const config = {
             xxs: css`
                 ${notificationTokens.closeIconTop}: 0.8125rem;
                 ${notificationTokens.closeIconRight}: 1rem;
+                ${notificationTokens.closeIconButtonSize}: 1.5rem;
+                ${notificationTokens.closeIconSize}: 1.5rem;
 
                 ${notificationTokens.padding}: 0.5625rem 1rem 1rem 1rem;
                 ${notificationTokens.textboxPaddingTopWithTopIcon}: 0.1875rem;

diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Toast/Toast.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Toast/Toast.config.ts
@@ -37,6 +37,8 @@ export const config = {
                 ${toastTokens.maxWidth}: calc(100vw - 5rem);
                 ${toastTokens.padding}: 0.5625rem 0.75rem;
 
+                ${toastTokens.closeIconButtonSize}: 1rem;
+                ${toastTokens.closeIconSize}: 1.5rem;
                 ${toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
                 ${toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);

diff --git a/...es/plasma-new-hope/src/examples/plasma_web/components/Notification/Notification.config.ts b/...es/plasma-new-hope/src/examples/plasma_web/components/Notification/Notification.config.ts
@@ -75,6 +75,8 @@ export const config = {
             xs: css`
                 ${notificationTokens.closeIconTop}: 0.5rem;
                 ${notificationTokens.closeIconRight}: 0.5rem;
+                ${notificationTokens.closeIconButtonSize}: 1.5rem;
+                ${notificationTokens.closeIconSize}: 1.5rem;
 
                 ${notificationTokens.padding}: 0.375rem;
                 ${notificationTokens.textboxPaddingTopWithTopIcon}: 0rem;
@@ -89,6 +91,8 @@ export const config = {
             xxs: css`
                 ${notificationTokens.closeIconTop}: 0.8125rem;
                 ${notificationTokens.closeIconRight}: 1rem;
+                ${notificationTokens.closeIconButtonSize}: 1.5rem;
+                ${notificationTokens.closeIconSize}: 1.5rem;
 
                 ${notificationTokens.padding}: 0.5625rem 1rem 1rem 1rem;
                 ${notificationTokens.textboxPaddingTopWithTopIcon}: 0.1875rem;

diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Toast/Toast.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Toast/Toast.config.ts
@@ -37,6 +37,8 @@ export const config = {
                 ${toastTokens.maxWidth}: calc(100vw - 5rem);
                 ${toastTokens.padding}: 0.5625rem 0.75rem;
 
+                ${toastTokens.closeIconButtonSize}: 1rem;
+                ${toastTokens.closeIconSize}: 1.5rem;
                 ${toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
                 ${toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);

diff --git a/packages/plasma-web/src/components/Notification/Notification.config.ts b/packages/plasma-web/src/components/Notification/Notification.config.ts
@@ -73,6 +73,8 @@ export const config = {
             xs: css`
                 ${notificationTokens.closeIconTop}: 0.5rem;
                 ${notificationTokens.closeIconRight}: 0.5rem;
+                ${notificationTokens.closeIconButtonSize}: 1.5rem;
+                ${notificationTokens.closeIconSize}: 1.5rem;
 
                 ${notificationTokens.padding}: 0.375rem;
                 ${notificationTokens.textboxPaddingTopWithTopIcon}: 0rem;
@@ -87,6 +89,8 @@ export const config = {
             xxs: css`
                 ${notificationTokens.closeIconTop}: 0.8125rem;
                 ${notificationTokens.closeIconRight}: 1rem;
+                ${notificationTokens.closeIconButtonSize}: 1.5rem;
+                ${notificationTokens.closeIconSize}: 1.5rem;
 
                 ${notificationTokens.padding}: 0.5625rem 1rem 1rem 1rem;
                 ${notificationTokens.textboxPaddingTopWithTopIcon}: 0.1875rem;

diff --git a/packages/plasma-web/src/components/Toast/Toast.config.ts b/packages/plasma-web/src/components/Toast/Toast.config.ts
@@ -46,6 +46,8 @@ export const config = {
                 ${toastTokens.maxWidth}: calc(100vw - 5rem);
                 ${toastTokens.padding}: 0.5625rem 0.75rem;
 
+                ${toastTokens.closeIconButtonSize}: 1rem;
+                ${toastTokens.closeIconSize}: 1.5rem;
                 ${toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
                 ${toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);

diff --git a/packages/sdds-cs/.storybook/main.ts b/packages/sdds-cs/.storybook/main.ts
@@ -38,7 +38,6 @@ const config: StorybookConfig = {
             base: '',
             resolve: {
                 dedupe: ['react', 'react-dom', 'styled-components'],
-                preserveSymlinks: true,
             },
             build: {
                 sourcemap: false,

diff --git a/packages/sdds-cs/src/components/Dropdown/Dropdown.config.ts b/packages/sdds-cs/src/components/Dropdown/Dropdown.config.ts
@@ -85,10 +85,10 @@ export const config = {
                 ${tokens.padding}: 0.125rem;
                 ${tokens.width}: 12.5rem;
                 ${tokens.borderRadius}: 0.625rem;
-                ${dropdownTokens.padding}: 0.125rem;
-                ${dropdownTokens.width}: 12.5rem;
-                ${dropdownTokens.borderRadius}: 0.625rem;
-                ${dropdownTokens.borderWidth}: 0.125rem;
+                ${tokens.padding}: 0.125rem;
+                ${tokens.width}: 12.5rem;
+                ${tokens.borderRadius}: 0.625rem;
+                ${tokens.borderWidth}: 0.125rem;
 
                 ${tokens.itemHeight}: 1.5rem;
                 ${tokens.itemPadding}: 0.5rem 0.75rem;

diff --git a/packages/sdds-cs/src/components/Notification/Notification.config.ts b/packages/sdds-cs/src/components/Notification/Notification.config.ts
@@ -71,6 +71,8 @@ export const config = {
                 ${notificationTokens.closeIconTop}: 0.5rem;
                 ${notificationTokens.closeIconRight}: 0.5rem;
                 ${notificationTokens.borderWidth}: 0.125rem;
+                ${notificationTokens.closeIconButtonSize}: 2rem;
+                ${notificationTokens.closeIconSize}: 2rem;
 
                 ${notificationTokens.padding}: 0.75rem;
                 ${notificationTokens.textboxPaddingTopWithTopIcon}: 0rem;
@@ -86,6 +88,8 @@ export const config = {
                 ${notificationTokens.closeIconTop}: 0.8125rem;
                 ${notificationTokens.closeIconRight}: 1rem;
                 ${notificationTokens.borderWidth}: 0.125rem;
+                ${notificationTokens.closeIconButtonSize}: 2rem;
+                ${notificationTokens.closeIconSize}: 2rem;
 
                 ${notificationTokens.padding}: 0.75rem 1rem 1rem 1rem;
                 ${notificationTokens.textboxPaddingTopWithTopIcon}: 0.1875rem;

diff --git a/packages/sdds-cs/src/components/Toast/Toast.config.ts b/packages/sdds-cs/src/components/Toast/Toast.config.ts
@@ -35,6 +35,8 @@ export const config = {
                 ${toastTokens.maxWidth}: calc(100vw - 5rem);
                 ${toastTokens.padding}: 0.5rem 0.5rem;
 
+                ${toastTokens.closeIconButtonSize}: 1rem;
+                ${toastTokens.closeIconSize}: 1.5rem;
                 ${toastTokens.fontFamily}: var(--plasma-typo-body-m-font-family);
                 ${toastTokens.fontSize}: var(--plasma-typo-body-m-font-size);
                 ${toastTokens.fontStyle}: var(--plasma-typo-body-m-font-style);

diff --git a/packages/sdds-cs/src/components/ViewContainer/ViewContainer.config.ts b/packages/sdds-cs/src/components/ViewContainer/ViewContainer.config.ts
@@ -1,5 +1,7 @@
 import { css } from '@salutejs/plasma-new-hope/styled-components';
-import { viewContainer } from '@salutejs/sdds-themes/tokens/sdds_cs';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { viewContainer } from '@salutejs/sdds-themes/es/tokens/sdds_cs';
 
 export const config = {
     variations: {

diff --git a/packages/sdds-dfa/src/components/Notification/Notification.config.ts b/packages/sdds-dfa/src/components/Notification/Notification.config.ts
@@ -73,6 +73,8 @@ export const config = {
             xs: css`
                 ${notificationTokens.closeIconTop}: 0.5rem;
                 ${notificationTokens.closeIconRight}: 0.5rem;
+                ${notificationTokens.closeIconButtonSize}: 1.5rem;
+                ${notificationTokens.closeIconSize}: 1.5rem;
 
                 ${notificationTokens.padding}: 0.375rem;
                 ${notificationTokens.textboxPaddingTopWithTopIcon}: 0rem;
@@ -87,6 +89,8 @@ export const config = {
             xxs: css`
                 ${notificationTokens.closeIconTop}: 0.8125rem;
                 ${notificationTokens.closeIconRight}: 1rem;
+                ${notificationTokens.closeIconButtonSize}: 1.5rem;
+                ${notificationTokens.closeIconSize}: 1.5rem;
 
                 ${notificationTokens.padding}: 0.5625rem 1rem 1rem 1rem;
                 ${notificationTokens.textboxPaddingTopWithTopIcon}: 0.1875rem;

diff --git a/packages/sdds-dfa/src/components/Toast/Toast.config.ts b/packages/sdds-dfa/src/components/Toast/Toast.config.ts
@@ -35,6 +35,8 @@ export const config = {
                 ${toastTokens.maxWidth}: calc(100vw - 5rem);
                 ${toastTokens.padding}: 0.5625rem 0.75rem;
 
+                ${toastTokens.closeIconButtonSize}: 1rem;
+                ${toastTokens.closeIconSize}: 1.5rem;
                 ${toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
                 ${toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);

diff --git a/packages/sdds-finportal/src/components/Notification/Notification.config.ts b/packages/sdds-finportal/src/components/Notification/Notification.config.ts
@@ -73,6 +73,8 @@ export const config = {
             xs: css`
                 ${notificationTokens.closeIconTop}: 0.5rem;
                 ${notificationTokens.closeIconRight}: 0.5rem;
+                ${notificationTokens.closeIconButtonSize}: 1.5rem;
+                ${notificationTokens.closeIconSize}: 1.5rem;
 
                 ${notificationTokens.padding}: 0.375rem;
                 ${notificationTokens.textboxPaddingTopWithTopIcon}: 0rem;
@@ -87,6 +89,8 @@ export const config = {
             xxs: css`
                 ${notificationTokens.closeIconTop}: 0.8125rem;
                 ${notificationTokens.closeIconRight}: 1rem;
+                ${notificationTokens.closeIconButtonSize}: 1.5rem;
+                ${notificationTokens.closeIconSize}: 1.5rem;
 
                 ${notificationTokens.padding}: 0.5625rem 1rem 1rem 1rem;
                 ${notificationTokens.textboxPaddingTopWithTopIcon}: 0.1875rem;

diff --git a/packages/sdds-finportal/src/components/Toast/Toast.config.ts b/packages/sdds-finportal/src/components/Toast/Toast.config.ts
@@ -35,6 +35,8 @@ export const config = {
                 ${toastTokens.maxWidth}: calc(100vw - 5rem);
                 ${toastTokens.padding}: 0.5625rem 0.75rem;
 
+                ${toastTokens.closeIconButtonSize}: 1rem;
+                ${toastTokens.closeIconSize}: 1.5rem;
                 ${toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
                 ${toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);

diff --git a/packages/sdds-serv/src/components/Notification/Notification.config.ts b/packages/sdds-serv/src/components/Notification/Notification.config.ts
@@ -73,6 +73,8 @@ export const config = {
             xs: css`
                 ${notificationTokens.closeIconTop}: 0.5rem;
                 ${notificationTokens.closeIconRight}: 0.5rem;
+                ${notificationTokens.closeIconButtonSize}: 1.5rem;
+                ${notificationTokens.closeIconSize}: 1.5rem;
 
                 ${notificationTokens.padding}: 0.375rem;
                 ${notificationTokens.textboxPaddingTopWithTopIcon}: 0rem;
@@ -87,6 +89,8 @@ export const config = {
             xxs: css`
                 ${notificationTokens.closeIconTop}: 0.8125rem;
                 ${notificationTokens.closeIconRight}: 1rem;
+                ${notificationTokens.closeIconButtonSize}: 1.5rem;
+                ${notificationTokens.closeIconSize}: 1.5rem;
 
                 ${notificationTokens.padding}: 0.5625rem 1rem 1rem 1rem;
                 ${notificationTokens.textboxPaddingTopWithTopIcon}: 0.1875rem;

diff --git a/packages/sdds-serv/src/components/Toast/Toast.config.ts b/packages/sdds-serv/src/components/Toast/Toast.config.ts
@@ -35,6 +35,8 @@ export const config = {
                 ${toastTokens.maxWidth}: calc(100vw - 5rem);
                 ${toastTokens.padding}: 0.5625rem 0.75rem;
 
+                ${toastTokens.closeIconButtonSize}: 1rem;
+                ${toastTokens.closeIconSize}: 1.5rem;
                 ${toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
                 ${toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);