fix(Toaster): fix toast paddings (#172)

* feat(Toaster): add css variable for toaster width managing

* feat(Toaster): add extra space for toast icon

* feat: extend jest config

* feat(Toaster): fix toast paddings

* fix: amje review fixes

jest.config.js

@@ -7,7 +7,8 @@ module.exports = {
     },
     coverageDirectory: './coverage',
     testEnvironment: 'jsdom',
-    setupFilesAfterEnv: ['<rootDir>/src/setup-tests.ts'],
+    setupFiles: ['<rootDir>/test-utils/setup-tests.ts'],
+    setupFilesAfterEnv: ['<rootDir>/test-utils/setup-tests-after.ts'],
     moduleNameMapper: {
         '\\.(css|less|scss|sass)$': 'jest-transform-css',
     },

src/components/Toaster/Toast/Toast.scss

@@ -11,7 +11,7 @@ $block: '.#{$ns}toast';
     position: absolute;
     width: inherit;
     margin-bottom: 10px;
-    padding: 18px;
+    padding: 16px 16px 16px 48px;
     font-size: 13px;
     border-radius: 8px;
     box-shadow: 0px 0px 15px var(--yc-color-sfx-shadow);
@@ -34,10 +34,20 @@ $block: '.#{$ns}toast';
         animation: toast-set-indents 0.35s ease forwards, toast-move-left 0.25s ease forwards 0.35s;
     }
 
+    &_show-animation#{&}_default {
+        animation: toast-set-symmetrical-indents 0.35s ease forwards,
+            toast-move-left 0.25s ease forwards 0.35s;
+    }
+
     &_show-animation#{&}_mobile {
         animation: toast-set-indents 0.35s ease forwards, toast-move-top 0.25s ease forwards 0.35s;
     }
 
+    &_show-animation#{&}_mobile#{&}_default {
+        animation: toast-set-symmetrical-indents 0.35s ease forwards,
+            toast-move-top 0.25s ease forwards 0.35s;
+    }
+
     &_hide-animation {
         animation: toast-move-right 0.25s ease forwards,
             toast-remove-height 0.35s ease forwards 0.25s;
@@ -53,6 +63,7 @@ $block: '.#{$ns}toast';
     }
 
     &_default {
+        padding: 16px;
         background-color: var(--yc-color-base-float);
     }
 
@@ -97,6 +108,8 @@ $block: '.#{$ns}toast';
     }
 
     #{$containerClass} {
+        display: grid;
+        row-gap: 8px;
         width: 100%;
         height: 100%;
 
@@ -123,7 +136,9 @@ $block: '.#{$ns}toast';
     }
 
     #{$iconClass} {
-        margin-right: 6px;
+        position: absolute;
+        top: 16px;
+        left: 16px;
     }
 
     &__action {
@@ -133,8 +148,8 @@ $block: '.#{$ns}toast';
 
     & &__btn-close {
         position: absolute;
-        top: 16px;
-        right: 16px;
+        top: 14px;
+        right: 14px;
     }
 }
 
@@ -192,9 +207,17 @@ $block: '.#{$ns}toast';
     }
 }
 
+// with extra space for icon placement
 @keyframes toast-set-indents {
     to {
         margin-bottom: 10px;
-        padding: 18px;
+        padding: 16px 16px 16px 48px;
+    }
+}
+
+@keyframes toast-set-symmetrical-indents {
+    to {
+        margin-bottom: 10px;
+        padding: 16px;
     }
 }

src/components/Toaster/Toast/Toast.tsx

@@ -162,20 +162,28 @@ function renderActions({actions, onClose}: RenderActionsProps) {
         return null;
     }
 
-    return actions.map(({label, onClick, removeAfterClick = true}, index) => {
-        const onActionClick = () => {
-            onClick();
-            if (removeAfterClick) {
-                onClose();
-            }
-        };
-
-        return (
-            <Link key={`${label}__${index}`} className={b('action')} onClick={onActionClick}>
-                {label}
-            </Link>
-        );
-    });
+    return (
+        <div className={b('actions')}>
+            {actions.map(({label, onClick, removeAfterClick = true}, index) => {
+                const onActionClick = () => {
+                    onClick();
+                    if (removeAfterClick) {
+                        onClose();
+                    }
+                };
+
+                return (
+                    <Link
+                        key={`${label}__${index}`}
+                        className={b('action')}
+                        onClick={onActionClick}
+                    >
+                        {label}
+                    </Link>
+                );
+            })}
+        </div>
+    );
 }
 
 interface RenderIconProps {
@@ -231,16 +239,14 @@ export function Toast(props: ToastUnitedProps) {
             {...closeOnTimeoutProps}
         >
             <div className={b('container')}>
-                <div className={b('title')}>
-                    {renderIcon({type})}
-                    {title}
-                </div>
+                {renderIcon({type})}
+                <div className={b('title')}>{title}</div>
                 {isClosable && (
                     <Button view="flat-secondary" className={b('btn-close')} onClick={handleClose}>
                         <Icon data={CrossIcon} size={CROSS_ICON_SIZE} />
                     </Button>
                 )}
-                {content}
+                {Boolean(content) && <div className={b('content')}>{content}</div>}
                 {renderActions({actions, onClose: handleClose})}
             </div>
         </div>

src/components/Toaster/ToastList/ToastList.scss

@@ -6,7 +6,7 @@ $block: '.#{$ns}toaster';
     position: fixed;
     bottom: 0;
     right: 10px;
-    width: 312px;
+    width: var(--yc-toaster-desktop-width);
     z-index: 100000;
     display: flex;
     flex-direction: column;
@@ -18,3 +18,7 @@ $block: '.#{$ns}toaster';
         width: calc(100% - 20px);
     }
 }
+
+.yc-root {
+    --yc-toaster-desktop-width: 312px;
+}

src/components/Toaster/__stories__/ToasterShowcase.tsx

@@ -11,7 +11,7 @@ import './ToasterShowcase.scss';
 
 const b = block('toaster-story');
 
-const CONTENT = <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, atque!</p>;
+const CONTENT = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, atque!';
 
 const ACTIONS = [
     {

test-utils/setup-tests.ts

@@ -0,0 +1,3 @@
+import {configure} from '@testing-library/dom';
+
+configure({testIdAttribute: 'data-qa'});