feat(toast-plate): updates

core-ds · Jan 26, 2021 · 2303335 · 2303335
1 parent 896ac02
commit 2303335
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 44 deletions.
diff --git a/packages/toast-plate/src/component.stories.mdx b/packages/toast-plate/src/component.stories.mdx
@@ -19,10 +19,11 @@ import { name, version } from '../package.json';
         return (
             <ToastPlate
                 badge={select('badge', ['negative', 'positive', 'attention', undefined], 'positive')}
-                title={text('title', 'Поздравляем, полный успех')}
+                title={text('title', 'Toast Message')}
                 hasCloser={boolean('hasCloser', true)}
                 block={boolean('block', false)}
                 onClose={Function.prototype}
+                actionButton={<Button view="ghost" size="s">Button Ghost S</Button> }
             >
                 {text('children', '')}
             </ToastPlate>

diff --git a/packages/toast-plate/src/component.tsx b/packages/toast-plate/src/component.tsx
@@ -6,9 +6,16 @@ import { Badge } from '@alfalab/core-components-badge';
 import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import { CrossCircleMIcon } from '@alfalab/icons-glyph/CrossCircleMIcon';
 import { AlertCircleMIcon } from '@alfalab/icons-glyph/AlertCircleMIcon';
+import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
 
 import styles from './index.module.css';
 
+export type BadgeIcons = {
+    negative: JSX.Element;
+    positive: JSX.Element;
+    attention: JSX.Element;
+};
+
 export type ToastPlateProps = HTMLAttributes<HTMLDivElement> & {
     /**
      * Дополнительный класс
@@ -59,9 +66,14 @@ export type ToastPlateProps = HTMLAttributes<HTMLDivElement> & {
      * Обработчик клика по крестику
      */
     onClose?: (event?: MouseEvent<HTMLButtonElement>) => void;
+
+    /**
+     * Функция, с помощью которой можно переопределить иконки в Badge
+     */
+    getBadgeIcons?: (icons: BadgeIcons) => BadgeIcons;
 };
 
-const iconComponent = {
+const iconDefaultComponents = {
     negative: <CrossCircleMIcon className={styles.badgeIcon} />,
     positive: <CheckmarkCircleMIcon className={styles.badgeIcon} />,
     attention: <AlertCircleMIcon className={styles.badgeIcon} />,
@@ -77,16 +89,21 @@ export const ToastPlate = forwardRef<HTMLDivElement, ToastPlateProps>(
             badge,
             title,
             children,
-            onClose,
             actionButton,
             block,
+            onClose,
+            getBadgeIcons,
             ...restProps
         },
         ref,
     ) => {
         const needRenderCloser = hasCloser && Boolean(onClose);
         const needRenderActionsSection = needRenderCloser || Boolean(actionButton);
 
+        const iconComponents = getBadgeIcons
+            ? getBadgeIcons(iconDefaultComponents)
+            : iconDefaultComponents;
+
         return (
             <div
                 className={cn(
@@ -107,7 +124,7 @@ export const ToastPlate = forwardRef<HTMLDivElement, ToastPlateProps>(
                                 (badge && (
                                     <Badge
                                         view='icon'
-                                        content={iconComponent[badge]}
+                                        content={iconComponents[badge]}
                                         iconColor={badge}
                                         className={styles.badge}
                                     />
@@ -137,7 +154,7 @@ export const ToastPlate = forwardRef<HTMLDivElement, ToastPlateProps>(
                                 view='ghost'
                                 onClick={onClose}
                                 aria-label='закрыть'
-                                leftAddons={<div className={styles.closeIcon} />}
+                                leftAddons={<CrossMIcon />}
                             />
                         )}
                     </div>

diff --git a/packages/toast-plate/src/index.module.css b/packages/toast-plate/src/index.module.css
@@ -6,17 +6,6 @@
     --toast-plate-color: var(--color-light-text-primary-inverted);
     --toast-plate-border-radius: 8px;
     --toast-plate-title-font-weight: 700;
-
-    /* Close icon */
-    --toast-plate-close-icon-size: 18px;
-    --toast-plate-close-icon-background-image: url('https://alfabank.st/icons/icon_close_s_white.svg');
-
-    /* Badge */
-    --toast-plate-badge-size: 24px;
-    --toast-plate-badge-icon-size: 30px;
-
-    /* Left addons */
-    --toast-plate-left-addons-margin: 0 var(--gap-m) 0 0;
 }
 
 .component {
@@ -31,10 +20,6 @@
     padding: var(--gap-m);
     background-color: var(--toast-plate-bg-color);
     box-shadow: var(--shadow-s);
-
-    &.hasCloser {
-        padding-right: var(--gap-s);
-    }
 }
 
 .block {
@@ -59,15 +44,14 @@
 
     &.hasChildren {
         align-items: flex-start;
-        margin-left: var(--gap-l);
     }
 }
 
 .leftAddons {
     display: flex;
     flex-shrink: 0;
     min-width: 24px;
-    margin: var(--toast-plate-left-addons-margin);
+    margin-right: var(--gap-xs);
 }
 
 .title {
@@ -101,26 +85,5 @@
 }
 
 .actionButtonWrapper {
-    margin-right: var(--gap-s);
-}
-
-.closeIcon {
-    width: var(--toast-plate-close-icon-size);
-    height: var(--toast-plate-close-icon-size);
-    background-image: var(--toast-plate-close-icon-background-image);
-    background-size: contain;
-    background-repeat: no-repeat;
-    transition: opacity 0.2s ease-out;
-}
-
-.badge {
-    width: var(--toast-plate-badge-size);
-    height: var(--toast-plate-badge-size);
-}
-
-/* Переопределение стилей в компоненте Badge  */
-.component svg.badgeIcon {
-    max-height: none;
-    width: var(--toast-plate-badge-icon-size);
-    height: var(--toast-plate-badge-icon-size);
+    margin-right: var(--gap-m);
 }