feat(toast-plate): design review fixes

core-ds · Jan 28, 2021 · 55b58fd · 55b58fd
1 parent bd8f226
commit 55b58fd
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 148 deletions.
diff --git a/packages/notification/src/__snapshots__/Component.test.tsx.snap b/packages/notification/src/__snapshots__/Component.test.tsx.snap
@@ -12,68 +12,68 @@ exports[`Notification Snapshots tests should match snapshot 1`] = `
         style="top: 108px;"
       >
         <div
-          class="mainSection hasChildren"
+          class="mainContentWrap"
         >
           <div
-            class="leftAddons"
+            class="mainSection"
           >
             <div
-              class="component m icon positive badge"
+              class="leftAddons"
             >
-              <svg
-                class="badgeIcon"
-                fill="currentColor"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+              <div
+                class="component m icon positive badge"
               >
-                <path
-                  clip-rule="evenodd"
-                  d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-1.5-6L17 9.5 15.5 8l-5 5-2-2L7 12.5l3.5 3.5z"
-                  fill-rule="evenodd"
-                />
-              </svg>
+                <svg
+                  class="badgeIcon"
+                  fill="currentColor"
+                  focusable="false"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-1.5-6L17 9.5 15.5 8l-5 5-2-2L7 12.5l3.5 3.5z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </div>
             </div>
-          </div>
-          <div
-            class="contentContainer"
-          >
             <div
               class="title"
             >
               title
             </div>
-            <div
-              class="content"
+          </div>
+          <div
+            class="actionsSection"
+          >
+            <button
+              aria-label="закрыть"
+              class="component ghost m iconOnly closeButton"
             >
-              text
-            </div>
+              <span
+                class="addons"
+              >
+                <svg
+                  fill="currentColor"
+                  focusable="false"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                >
+                  <path
+                    d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
+                  />
+                </svg>
+              </span>
+            </button>
           </div>
         </div>
         <div
-          class="actionsSection hasChildren"
+          class="children"
         >
-          <button
-            aria-label="закрыть"
-            class="component ghost m iconOnly closeButton"
-          >
-            <span
-              class="addons"
-            >
-              <svg
-                fill="currentColor"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
-                />
-              </svg>
-            </span>
-          </button>
+          text
         </div>
       </div>
     </div>

diff --git a/packages/toast-plate/src/__snapshots__/component.test.tsx.snap b/packages/toast-plate/src/__snapshots__/component.test.tsx.snap
@@ -7,45 +7,45 @@ exports[`Notification Snapshots tests should match snapshot 1`] = `
       class="component"
     >
       <div
-        class="mainSection hasChildren"
+        class="mainContentWrap"
       >
         <div
-          class="leftAddons"
+          class="mainSection"
         >
           <div
-            class="component m icon positive badge"
+            class="leftAddons"
           >
-            <svg
-              class="badgeIcon"
-              fill="currentColor"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
+            <div
+              class="component m icon positive badge"
             >
-              <path
-                clip-rule="evenodd"
-                d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-1.5-6L17 9.5 15.5 8l-5 5-2-2L7 12.5l3.5 3.5z"
-                fill-rule="evenodd"
-              />
-            </svg>
+              <svg
+                class="badgeIcon"
+                fill="currentColor"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-1.5-6L17 9.5 15.5 8l-5 5-2-2L7 12.5l3.5 3.5z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </div>
           </div>
-        </div>
-        <div
-          class="contentContainer"
-        >
           <div
             class="title"
           >
             title
           </div>
-          <div
-            class="content"
-          >
-            text
-          </div>
         </div>
       </div>
+      <div
+        class="children"
+      >
+        text
+      </div>
     </div>
   </div>
 </body>
@@ -58,18 +58,19 @@ exports[`Notification Snapshots tests should match snapshot with leftAddons 1`]
       class="component"
     >
       <div
-        class="mainSection"
+        class="mainContentWrap"
       >
         <div
-          class="leftAddons"
+          class="mainSection"
         >
-          <div>
-            leftAddons
+          <div
+            class="leftAddons"
+          >
+            <div>
+              leftAddons
+            </div>
           </div>
         </div>
-        <div
-          class="contentContainer"
-        />
       </div>
     </div>
   </div>
@@ -83,23 +84,23 @@ exports[`Notification Snapshots tests should match snapshot without icon 1`] = `
       class="component"
     >
       <div
-        class="mainSection hasChildren"
+        class="mainContentWrap"
       >
         <div
-          class="contentContainer"
+          class="mainSection"
         >
           <div
             class="title"
           >
             title
           </div>
-          <div
-            class="content"
-          >
-            text
-          </div>
         </div>
       </div>
+      <div
+        class="children"
+      >
+        text
+      </div>
     </div>
   </div>
 </body>

diff --git a/packages/toast-plate/src/component.stories.mdx b/packages/toast-plate/src/component.stories.mdx
@@ -23,7 +23,7 @@ import { name, version } from '../package.json';
                 hasCloser={boolean('hasCloser', true)}
                 block={boolean('block', false)}
                 onClose={Function.prototype}
-                actionButton={<Button view="ghost" size="s">Button Ghost S</Button> }
+                actionButton={boolean('renderActionButton', true) ? <Button view="ghost" size="s">Button Ghost S</Button> : null }
             >
                 {text('children', '')}
             </ToastPlate>

diff --git a/packages/toast-plate/src/component.test.tsx b/packages/toast-plate/src/component.test.tsx
@@ -49,7 +49,9 @@ describe('Notification', () => {
         it('should set `className` class', () => {
             const className = 'test-class';
             const dataTestId = 'test-id';
-            const { getByTestId } = render(<ToastPlate className={className} dataTestId={dataTestId} />);
+            const { getByTestId } = render(
+                <ToastPlate className={className} dataTestId={dataTestId} />,
+            );
 
             const el = getByTestId(dataTestId);
 
@@ -58,7 +60,9 @@ describe('Notification', () => {
 
         it('should set `hasCloser` class', () => {
             const dataTestId = 'test-id';
-            const { getByTestId } = render(<ToastPlate hasCloser={true} dataTestId={dataTestId} />);
+            const { getByTestId } = render(
+                <ToastPlate hasCloser={true} dataTestId={dataTestId} onClose={jest.fn()} />,
+            );
 
             const el = getByTestId(dataTestId);
 

diff --git a/packages/toast-plate/src/component.tsx b/packages/toast-plate/src/component.tsx
@@ -108,57 +108,52 @@ export const ToastPlate = forwardRef<HTMLDivElement, ToastPlateProps>(
             <div
                 className={cn(
                     styles.component,
-                    { [styles.block]: block, [styles.hasCloser]: hasCloser },
+                    { [styles.block]: block, [styles.hasCloser]: needRenderCloser },
                     className,
                 )}
                 ref={ref}
                 data-test-id={dataTestId}
                 {...restProps}
             >
-                <div
-                    className={cn(styles.mainSection, { [styles.hasChildren]: Boolean(children) })}
-                >
-                    {(leftAddons || badge) && (
-                        <div className={styles.leftAddons}>
-                            {leftAddons ||
-                                (badge && (
-                                    <Badge
-                                        view='icon'
-                                        content={iconComponents[badge]}
-                                        iconColor={badge}
-                                        className={styles.badge}
-                                    />
-                                ))}
-                        </div>
-                    )}
+                <div className={styles.mainContentWrap}>
+                    <div className={cn(styles.mainSection)}>
+                        {(leftAddons || badge) && (
+                            <div className={styles.leftAddons}>
+                                {leftAddons ||
+                                    (badge && (
+                                        <Badge
+                                            view='icon'
+                                            content={iconComponents[badge]}
+                                            iconColor={badge}
+                                            className={styles.badge}
+                                        />
+                                    ))}
+                            </div>
+                        )}
 
-                    <div className={styles.contentContainer}>
                         {title && <div className={styles.title}>{title}</div>}
-                        {children && <div className={styles.content}>{children}</div>}
                     </div>
-                </div>
 
-                {needRenderActionsSection && (
-                    <div
-                        className={cn(styles.actionsSection, {
-                            [styles.hasChildren]: Boolean(children),
-                        })}
-                    >
-                        {actionButton && (
-                            <div className={styles.actionButtonWrapper}>{actionButton}</div>
-                        )}
+                    {needRenderActionsSection && (
+                        <div className={cn(styles.actionsSection)}>
+                            {actionButton || null}
+
+                            {needRenderCloser && (
+                                <Button
+                                    className={cn(styles.closeButton, {
+                                        [styles.hasActionButton]: Boolean(actionButton),
+                                    })}
+                                    view='ghost'
+                                    onClick={onClose}
+                                    aria-label='закрыть'
+                                    leftAddons={<CrossMIcon />}
+                                />
+                            )}
+                        </div>
+                    )}
+                </div>
 
-                        {needRenderCloser && (
-                            <Button
-                                className={styles.closeButton}
-                                view='ghost'
-                                onClick={onClose}
-                                aria-label='закрыть'
-                                leftAddons={<CrossMIcon />}
-                            />
-                        )}
-                    </div>
-                )}
+                {children && <div className={styles.children}>{children}</div>}
             </div>
         );
     },