feat(plate): update vars (#668)

* feat(plate): add some css-vars, add "open" prop (controlled way) * feat(toast): add "ToastPlate" prop (render-function)
core-ds · Jun 4, 2021 · cbecef5 · cbecef5
1 parent ded4ac4
commit cbecef5
Show file tree

Hide file tree

Showing 9 changed files with 289 additions and 145 deletions.
diff --git a/packages/plate/src/Component.test.tsx b/packages/plate/src/Component.test.tsx
@@ -100,6 +100,32 @@ describe('Plate', () => {
 
             expect(cb).toBeCalledTimes(1);
         });
+
+        it('should hide, if clicked on closer and prop `open` dont`t passed', () => {
+            const dataTestId = 'test-id';
+            const { getByTestId } = render(<Plate hasCloser={true} dataTestId={dataTestId} />);
+
+            const el = getByTestId(dataTestId);
+            const closeEl = el.querySelector('.closer') as Element;
+
+            fireEvent.click(closeEl);
+
+            expect(el).toHaveClass('isHidden');
+        });
+
+        it('should don`t hide, if clicked on closer and prop `open` is passed (controlled)', () => {
+            const dataTestId = 'test-id';
+            const { getByTestId } = render(
+                <Plate hasCloser={true} dataTestId={dataTestId} open={true} />,
+            );
+
+            const el = getByTestId(dataTestId);
+            const closeEl = el.querySelector('.closer') as Element;
+
+            fireEvent.click(closeEl);
+
+            expect(el).not.toHaveClass('isHidden');
+        });
     });
 
     it('should unmount without errors', () => {

diff --git a/packages/plate/src/Component.tsx b/packages/plate/src/Component.tsx
@@ -70,6 +70,11 @@ export type PlateProps = {
      */
     contentClassName?: string;
 
+    /**
+     * Управление видимостью компонента (controlled)
+     */
+    open?: boolean;
+
     /**
      * Обработчик клика по плашке
      */
@@ -100,15 +105,18 @@ export const Plate = forwardRef<HTMLDivElement, PlateProps>(
             className,
             buttonsClassName,
             contentClassName,
+            open,
+            dataTestId,
             onClick,
             onClose,
-            dataTestId,
         },
         ref,
     ) => {
         const plateRef = useRef<HTMLDivElement>(null);
         const buttonsRef = useRef<HTMLDivElement>(null);
 
+        const uncontrolled = open === undefined;
+
         const [focused] = useFocus(plateRef, 'keyboard');
 
         const [isHidden, setIsHidden] = useState(false);
@@ -142,13 +150,15 @@ export const Plate = forwardRef<HTMLDivElement, PlateProps>(
 
         const handleClose = useCallback(
             event => {
-                setIsHidden(true);
+                if (uncontrolled) {
+                    setIsHidden(true);
+                }
 
                 if (onClose) {
                     onClose(event);
                 }
             },
-            [onClose],
+            [onClose, uncontrolled],
         );
 
         const renderButtons = useCallback(

diff --git a/packages/plate/src/docs/component.stories.mdx b/packages/plate/src/docs/component.stories.mdx
@@ -0,0 +1,54 @@
+import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
+import { select, text, boolean } from '@storybook/addon-knobs';
+import { CssVars, ComponentHeader, Tabs } from 'storybook/blocks';
+import { CheckmarkOnCircleMIcon } from '@alfalab/icons-glyph';
+
+import { Plate } from '../';
+import { Button } from '../../../button/src';
+import Description from './description.mdx';
+import styles from '!!raw-loader!../index.module.css';
+
+import { name, version } from '../../package.json';
+
+<Meta
+    title='Компоненты'
+    component={Plate}
+/>
+
+<!-- Canvas -->
+
+<Story name='Plate'>
+    <Plate
+        view={select('view', ['common', 'negative', 'positive', 'attention'], 'positive')}
+        title={text('title', 'Поздравляем, полный успех')}
+        foldable={boolean('foldable', false)}
+        hasCloser={boolean('hasCloser', false)}
+        leftAddons={boolean('leftAddons', true) ? <CheckmarkOnCircleMIcon /> : null}
+        buttons={boolean('buttons', false) ? [
+            <Button>Хорошо</Button>,
+            <Button>Подробнее</Button>
+        ] : null}
+    >
+        {text('children', 'Вам одобрено. Согласитесь на предложение')}
+    </Plate>
+</Story>
+
+<!-- Docs -->
+
+<ComponentHeader
+    name='Plate'
+    version={version}
+    package='@alfalab/core-components-plate'
+    stage={2}
+/>
+
+```tsx
+import { Plate } from '@alfalab/core-components-plate';
+```
+
+<Tabs
+    description={<Description />}
+    prpos={<Props of={Plate} /> }
+    cssVars={<CssVars css={styles} />}
+/>
+
diff --git a/packages/plate/src/Component.stories.mdx → packages/plate/src/docs/description.mdx b/packages/plate/src/Component.stories.mdx → packages/plate/src/docs/description.mdx
@@ -1,55 +1,12 @@
-import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
-import {select, text, boolean} from '@storybook/addon-knobs';
-import { Container, Row } from 'storybook/blocks/grid';
-import { ComponentHeader } from 'storybook/blocks/component-header';
-
+import { Preview } from '@storybook/addon-docs/blocks';
 import { CheckmarkOnCircleMIcon } from '@alfalab/icons-glyph';
 import { AlertCircleMIcon } from '@alfalab/icons-glyph';
 import { InformationCircleMIcon } from '@alfalab/icons-glyph';
 
+import { Container, Row } from 'storybook/blocks/grid';
 
-import { Plate } from './Component';
-import { Button } from '../../button/src';
-import { Badge } from '../../badge/src';
-
-import { name, version } from '../package.json';
-
-
-<Meta
-    title='Компоненты'
-    component={Plate}
-/>
-
-<!-- Canvas -->
-
-<Story name='Plate'>
-    <Plate
-        view={select('view', ['common', 'negative', 'positive', 'attention'], 'positive')}
-        title={text('title', 'Поздравляем, полный успех')}
-        foldable={boolean('foldable', false)}
-        hasCloser={boolean('hasCloser', false)}
-        leftAddons={boolean('leftAddons', true) ? <CheckmarkOnCircleMIcon /> : null}
-        buttons={boolean('buttons', false) ? [
-            <Button>Хорошо</Button>,
-            <Button>Подробнее</Button>
-        ] : null}
-    >
-        {text('children', 'Вам одобрено. Согласитесь на предложение')}
-    </Plate>
-</Story>
-
-<!-- Docs -->
-
-<ComponentHeader
-    name='Plate'
-    version={version}
-    package='@alfalab/core-components-plate'
-    stage={2}
-/>
-
-```tsx
-import { Plate } from '@alfalab/core-components-plate';
-```
+import { Plate } from '../';
+import { Badge } from '../../../badge/src';
 
 Компонент плашки.
 
@@ -101,5 +58,3 @@ import { Plate } from '@alfalab/core-components-plate';
         </Row>
     </>
 </Preview>
-
-<Props of={Plate} />
diff --git a/packages/plate/src/index.module.css b/packages/plate/src/index.module.css
@@ -1,6 +1,11 @@
 @import '../../themes/src/default.css';
 
 :root {
+    /* border */
+    --plate-border: 1px solid;
+    --plate-border-radius: var(--border-radius-m);
+
+    /* icons */
     --plate-closer-icon: url('https://alfabank.st/icons/glyph_cross_m.svg');
     --plate-arrow-icon: url('https://alfabank.st/icons/glyph_chevron-down_m.svg');
 }
@@ -9,8 +14,8 @@
     position: relative;
     display: inline-flex;
     box-sizing: border-box;
-    border-radius: var(--border-radius-m);
-    border: 1px solid;
+    border-radius: var(--plate-border-radius);
+    border: var(--plate-border);
     color: var(--color-light-text-primary);
     width: 100%;
     min-height: 56px;

diff --git a/packages/toast/src/component.test.tsx b/packages/toast/src/component.test.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
+import React, { forwardRef } from 'react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as popoverModule from '@alfalab/core-components-popover';
-import { Toast } from './index';
+import { Toast, ToastProps } from './index';
 
 describe('Toast', () => {
     jest.useFakeTimers();
@@ -190,6 +190,27 @@ describe('Toast', () => {
 
             expect(onClose).not.toBeCalled();
         });
+
+        it('should render custom toast plate', async () => {
+            const dataTestId = 'testId';
+            const onClose = jest.fn();
+
+            const CustomToastPlate: ToastProps['ToastPlate'] = forwardRef((props, ref) => (
+                <div {...props} ref={ref} data-test-id={dataTestId} />
+            ));
+
+            const { getByTestId } = render(
+                <Toast
+                    onClose={onClose}
+                    open={true}
+                    autoCloseDelay={3000}
+                    getPortalContainer={getPortalContainer}
+                    ToastPlate={CustomToastPlate}
+                />,
+            );
+
+            await waitFor(() => expect(getByTestId(dataTestId)).toBeInTheDocument());
+        });
     });
 
     it('should unmount without errors', () => {

diff --git a/packages/toast/src/component.tsx b/packages/toast/src/component.tsx
@@ -10,7 +10,10 @@ import mergeRefs from 'react-merge-refs';
 import { CSSTransition } from 'react-transition-group';
 import cn from 'classnames';
 import { useClickOutside, usePrevious } from '@alfalab/hooks';
-import { ToastPlate, ToastPlateProps } from '@alfalab/core-components-toast-plate';
+import {
+    ToastPlate as ToastPlateComponent,
+    ToastPlateProps,
+} from '@alfalab/core-components-toast-plate';
 import { Popover, PopoverProps } from '@alfalab/core-components-popover';
 import { Portal } from '@alfalab/core-components-portal';
 import { Stack, stackingOrder } from '@alfalab/core-components-stack';
@@ -40,11 +43,6 @@ export type ToastProps = ToastPlateProps &
          */
         autoCloseDelay?: number;
 
-        /**
-         * Обработчик закрытия компонента.
-         */
-        onClose: () => void;
-
         /**
          * Отступ снизу (при fixed-позиционировании).
          */
@@ -54,8 +52,23 @@ export type ToastProps = ToastPlateProps &
          * z-index компонента
          */
         zIndex?: number;
+
+        /**
+         * Обработчик закрытия компонента.
+         */
+        onClose: () => void;
+
+        /**
+         * Плашка тоста.
+         * По-дефолту рендерит компонент ToastPlate
+         */
+        ToastPlate?: typeof ToastPlateComponent;
     };
 
+const DefaultToastPlate: ToastProps['ToastPlate'] = forwardRef((props, ref) => (
+    <ToastPlateComponent ref={ref} {...props} />
+));
+
 export const Toast = forwardRef<HTMLDivElement, ToastProps>(
     (
         {
@@ -69,6 +82,7 @@ export const Toast = forwardRef<HTMLDivElement, ToastProps>(
             style = {},
             block,
             zIndex = stackingOrder.TOAST,
+            ToastPlate = DefaultToastPlate,
             onMouseEnter,
             onMouseLeave,
             onTouchStart,