@alfalab/core-components 29.3.0 → 30.0.1

package/plate/cssm/index.module.css

@@ -13,6 +13,7 @@
     --color-light-text-primary: #0b1f35;
 }
 :root {
+    --shadow-s: 0 0 8px rgba(11, 31, 53, 0.04), 0 4px 8px rgba(11, 31, 53, 0.08);
 
     /* Hard */
 
@@ -25,9 +26,7 @@
     --gap-2xs: 4px;
     --gap-xs: 8px;
     --gap-s: 12px;
-    --gap-m: 16px;
-    --gap-xl: 24px;
-    --gap-2xs-neg: -4px;
+    --gap-l: 20px;
 }
 :root {
     --border-radius-m: 8px;
@@ -38,9 +37,18 @@
 }
 :root {
     /* border */
-    --plate-border: 1px solid;
+    --plate-border-left: 2px;
+    --plate-border: 0 0 0 1px;
     --plate-border-radius: var(--border-radius-m);
 
+    /* width limit */
+
+    --plate-width-limit: 560px;
+
+    /* custom view */
+    --plate-background: transparent;
+    --plate-border-color: var(--color-static-status-grey);
+
     /* icons */
     --plate-closer-icon: url('https://alfabank.servicecdn.ru/icons/glyph_cross_m.svg');
     --plate-arrow-icon: url('https://alfabank.servicecdn.ru/icons/glyph_chevron-down_m.svg');
@@ -49,14 +57,20 @@
     position: relative;
     display: inline-flex;
     box-sizing: border-box;
-    border-radius: var(--plate-border-radius);
-    border: var(--plate-border);
     color: var(--color-light-text-primary);
     width: 100%;
     min-height: 56px;
-    padding: var(--gap-m);
-    outline: none;
-}
+    padding: var(--gap-s);
+    outline: none
+}
+.component:before {
+        content: '';
+        width: var(--plate-border-left);
+        position: absolute;
+        height: 100%;
+        top: 0;
+        left: 0;
+    }
 .foldable {
     cursor: pointer;
 }
@@ -73,36 +87,85 @@
     display: flex;
     justify-content: space-between;
 }
+.rounded:before, .noBorder:before {
+        display: none;
+    }
+.rounded {
+    border-radius: var(--plate-border-radius);
+}
+.shadow {
+    box-shadow: var(--shadow-s);
+}
 .common {
     background-color: var(--color-light-bg-secondary);
-    border-color: var(--color-static-status-grey);
+    box-shadow: var(--plate-border) var(--color-static-status-grey)
 }
+.common:before {
+        background-color: var(--color-static-status-grey);
+    }
 .negative {
     background-color: var(--color-light-bg-negative-muted);
-    border-color: var(--color-static-status-red);
+    box-shadow: var(--plate-border) var(--color-static-status-red)
 }
+.negative:before {
+        background-color: var(--color-static-status-red);
+    }
 .positive {
     background-color: var(--color-light-bg-positive-muted);
-    border-color: var(--color-static-status-green);
+    box-shadow: var(--plate-border) var(--color-static-status-green)
 }
+.positive:before {
+        background-color: var(--color-static-status-green);
+    }
 .attention {
     background-color: var(--color-light-bg-attention-muted);
-    border-color: var(--color-static-status-orange);
+    box-shadow: var(--plate-border) var(--color-static-status-orange)
+}
+.attention:before {
+        background-color: var(--color-static-status-orange);
+    }
+.custom {
+    background: var(--plate-background);
+    box-shadow: var(--plate-border) var(--plate-border-color)
+}
+.custom:before {
+        background-color: var(--plate-border-color);
+    }
+.rect,
+.noBorder {
+    box-shadow: none;
 }
 .isHidden {
     display: none;
 }
+.leftAddons,
+.rightAddons {
+    padding: var(--gap-2xs);
+}
 .leftAddons {
     flex-shrink: 0;
     min-width: 24px;
-    margin-right: var(--gap-s);
+    margin-right: var(--gap-2xs);
+}
+.subAddons {
+    cursor: default;
+    align-self: flex-start;
 }
-.title {
+.bold,
+.light {
+    word-break: break-word;
+}
+.bold {
     font-size: 18px;
-    line-height: 24px;
+    line-height: 22px;
     font-weight: 700;
-
-    word-break: break-word;
+    padding: 5px var(--gap-s) 5px var(--gap-2xs);
+}
+.light {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+    padding: 6px var(--gap-s) 6px var(--gap-2xs);
 }
 .content {
     font-size: 14px;
@@ -112,8 +175,6 @@
     max-height: 300vh;
     overflow: hidden;
     transition: max-height 2s ease-in-out;
-    padding: var(--gap-2xs);
-    margin: var(--gap-2xs-neg);
     cursor: default
 }
 .content.isFolded {
@@ -122,14 +183,22 @@
     }
 .contentContainer {
     flex: 1;
-    max-width: 586px;
     margin-right: auto
 }
 .contentContainer.withoutTitle {
         padding-top: var(--gap-3xs);
     }
-.title + .content > .contentInner {
-    padding-top: var(--gap-xs);
+.limitWidth {
+    max-width: var(--plate-width-limit);
+}
+.description {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+    padding: var(--gap-2xs) var(--gap-s) var(--gap-2xs) var(--gap-2xs);
+}
+.footer {
+    padding: var(--gap-l) 0 var(--gap-2xs) var(--gap-2xs);
 }
 .closer,
 .folder {
@@ -139,7 +208,7 @@
     opacity: 1;
     transition: opacity 0.2s ease;
     cursor: pointer;
-    margin-left: var(--gap-m)
+    margin-left: var(--gap-s)
 }
 .closer:hover, .folder:hover {
         opacity: 0.7;
@@ -158,12 +227,6 @@
 .folder.isFolded {
         transform: rotate(0deg);
     }
-.buttons {
-    margin-top: var(--gap-xl);
-}
-.button {
-    margin-right: var(--gap-s)
-}
-.button:last-child {
-        margin-right: 0;
+.button:not(:last-child) {
+        margin-right: var(--gap-xs);
     }

package/plate/esm/Component.d.ts

@@ -23,6 +23,26 @@ type PlateProps = {
      * Слот слева
      */
     leftAddons?: ReactNode;
+    /**
+     * Слот для субаддонов (слева от крестика)
+     */
+    subAddons?: ReactNode | Array<ReactElement<ButtonProps>>;
+    /**
+     * Включить/выключить скругление
+     */
+    rounded?: boolean;
+    /**
+     * Включить/Выключить обводку
+     */
+    border?: boolean;
+    /**
+     * Включить/выключить тени
+     */
+    shadow?: boolean;
+    /**
+     * Включить/выключить ограничение максимальной ширины контента в 560px
+     */
+    limitContentWidth?: boolean;
     /**
      * Дочерние элементы
      */
@@ -31,10 +51,14 @@ type PlateProps = {
      * Заголовок компонента
      */
     title?: ReactNode;
+    /**
+     * Вид заголовка
+     */
+    titleView?: 'bold' | 'light';
     /**
      * Вид компонента
      */
-    view?: 'common' | 'negative' | 'positive' | 'attention';
+    view?: 'common' | 'negative' | 'positive' | 'attention' | 'custom';
     /**
      * Набор действий
      */
@@ -51,6 +75,10 @@ type PlateProps = {
      * Дополнительный класс для контента
      */
     contentClassName?: string;
+    /**
+     * Дополнительный класс для субаддонов
+     */
+    subAddonsClassName?: string;
     /**
      * Обработчик клика по плашке
      */

package/plate/esm/Component.js

@@ -3,31 +3,37 @@ import cn from 'classnames';
 import mergeRefs from 'react-merge-refs';
 import { useFocus } from '@alfalab/hooks';
 import { Button } from '../../button/esm';
+import { ButtonList } from './components/button-list/component.js';
 
-var styles = {"component":"plate__component_8e6iw","foldable":"plate__foldable_8e6iw","focused":"plate__focused_8e6iw","inner":"plate__inner_8e6iw","common":"plate__common_8e6iw","negative":"plate__negative_8e6iw","positive":"plate__positive_8e6iw","attention":"plate__attention_8e6iw","isHidden":"plate__isHidden_8e6iw","leftAddons":"plate__leftAddons_8e6iw","title":"plate__title_8e6iw","content":"plate__content_8e6iw","isFolded":"plate__isFolded_8e6iw","contentContainer":"plate__contentContainer_8e6iw","withoutTitle":"plate__withoutTitle_8e6iw","contentInner":"plate__contentInner_8e6iw","closer":"plate__closer_8e6iw","folder":"plate__folder_8e6iw","buttons":"plate__buttons_8e6iw","button":"plate__button_8e6iw"};
+var styles = {"component":"plate__component_c6ckn","foldable":"plate__foldable_c6ckn","focused":"plate__focused_c6ckn","inner":"plate__inner_c6ckn","rounded":"plate__rounded_c6ckn","noBorder":"plate__noBorder_c6ckn","shadow":"plate__shadow_c6ckn","common":"plate__common_c6ckn","negative":"plate__negative_c6ckn","positive":"plate__positive_c6ckn","attention":"plate__attention_c6ckn","custom":"plate__custom_c6ckn","rect":"plate__rect_c6ckn","isHidden":"plate__isHidden_c6ckn","leftAddons":"plate__leftAddons_c6ckn","rightAddons":"plate__rightAddons_c6ckn","subAddons":"plate__subAddons_c6ckn","bold":"plate__bold_c6ckn","light":"plate__light_c6ckn","content":"plate__content_c6ckn","isFolded":"plate__isFolded_c6ckn","contentContainer":"plate__contentContainer_c6ckn","withoutTitle":"plate__withoutTitle_c6ckn","limitWidth":"plate__limitWidth_c6ckn","description":"plate__description_c6ckn","footer":"plate__footer_c6ckn","closer":"plate__closer_c6ckn","folder":"plate__folder_c6ckn","button":"plate__button_c6ckn"};
 require('./index.css');
 
+/* eslint-disable complexity */
 var Plate = forwardRef(function (_a, ref) {
-    var _b, _c, _d, _e;
-    var hasCloser = _a.hasCloser, _f = _a.foldable, foldableProp = _f === void 0 ? false : _f, foldedProp = _a.folded, _g = _a.defaultFolded, defaultFolded = _g === void 0 ? true : _g, leftAddons = _a.leftAddons, children = _a.children, buttons = _a.buttons, title = _a.title, _h = _a.view, view = _h === void 0 ? 'common' : _h, className = _a.className, buttonsClassName = _a.buttonsClassName, contentClassName = _a.contentClassName, dataTestId = _a.dataTestId, onClick = _a.onClick, onClose = _a.onClose, onToggle = _a.onToggle;
+    var _b, _c, _d, _e, _f;
+    var hasCloser = _a.hasCloser, _g = _a.foldable, foldableProp = _g === void 0 ? false : _g, foldedProp = _a.folded, _h = _a.defaultFolded, defaultFolded = _h === void 0 ? true : _h, _j = _a.rounded, rounded = _j === void 0 ? true : _j, _k = _a.limitContentWidth, limitContentWidth = _k === void 0 ? true : _k, leftAddons = _a.leftAddons, subAddons = _a.subAddons, children = _a.children, buttons = _a.buttons, title = _a.title, _l = _a.titleView, titleView = _l === void 0 ? 'bold' : _l, _m = _a.view, view = _m === void 0 ? 'common' : _m, _o = _a.border, border = _o === void 0 ? view !== 'custom' : _o, _p = _a.shadow, shadow = _p === void 0 ? view === 'custom' : _p, className = _a.className, buttonsClassName = _a.buttonsClassName, contentClassName = _a.contentClassName, subAddonsClassName = _a.subAddonsClassName, dataTestId = _a.dataTestId, onClick = _a.onClick, onClose = _a.onClose, onToggle = _a.onToggle;
     var plateRef = useRef(null);
     var contentRef = useRef(null);
+    var subAddonsRef = useRef(null);
     var focused = useFocus(plateRef, 'keyboard')[0];
-    var _j = useState(false), isHidden = _j[0], setIsHidden = _j[1];
-    var _k = useState(defaultFolded), foldedState = _k[0], setFoldedState = _k[1];
+    var _q = useState(false), isHidden = _q[0], setIsHidden = _q[1];
+    var _r = useState(defaultFolded), foldedState = _r[0], setFoldedState = _r[1];
     var uncontrolled = foldedProp === undefined;
     var foldable = !!title && !!children && foldableProp;
     var folded = uncontrolled ? foldedState : foldedProp;
     var hasButtons = !!buttons && typeof buttons !== 'boolean';
     var hasContent = children || hasButtons;
-    var buttonsIsArray = Array.isArray(buttons) && buttons.length > 0;
+    var hasSubAddons = !!subAddons && typeof subAddons !== 'boolean';
+    var hasAnyAddons = leftAddons || subAddons || foldable || hasCloser;
     var handleClick = useCallback(function (event) {
         var target = event.target;
         var eventInsideComponent = plateRef.current && plateRef.current.contains(target);
         var eventInsideContent = contentRef.current && contentRef.current.contains(target);
+        var eventInsideSubAddons = subAddonsRef.current && subAddonsRef.current.contains(target);
         var clickSimilarKeys = ['Enter', ' '].includes(event.key);
         var shouldChangeIsFolded = eventInsideComponent &&
             !eventInsideContent &&
+            !eventInsideSubAddons &&
             (event.type === 'click' || clickSimilarKeys);
         if (foldable && shouldChangeIsFolded) {
             if (uncontrolled) {
@@ -47,49 +53,44 @@ var Plate = forwardRef(function (_a, ref) {
             onClose(event);
         }
     }, [onClose]);
-    var renderButtons = function () {
-        if (buttonsIsArray) {
-            return (React.createElement("div", { className: cn(styles.buttons, buttonsClassName) }, buttons.map(function (button, index) {
-                return button
-                    ? React.cloneElement(button, {
-                        // eslint-disable-next-line react/no-array-index-key
-                        key: index,
-                        size: 'xs',
-                        view: index === 0 ? 'outlined' : 'link',
-                        className: cn(button.props.className, styles.button),
-                    })
-                    : null;
-            })));
-        }
-        return React.createElement("div", { className: cn(styles.buttons, buttonsClassName) }, buttons);
-    };
-    return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    React.createElement("div", { className: cn(styles.component, styles[view], (_b = {},
-            _b[styles.foldable] = foldable,
-            _b[styles.focused] = focused,
-            _b[styles.isHidden] = hasCloser && isHidden,
-            _b[styles.isFolded] = foldable && folded,
-            _b), className), onClick: handleClick, onKeyDown: handleClick, role: 'alert', ref: mergeRefs([plateRef, ref]), 
-        /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
-        tabIndex: foldable ? 0 : -1, "data-test-id": dataTestId },
-        React.createElement("div", { className: styles.inner },
-            leftAddons && React.createElement("div", { className: styles.leftAddons }, leftAddons),
-            React.createElement("div", { className: cn(styles.contentContainer, contentClassName, (_c = {},
-                    _c[styles.withoutTitle] = !title,
-                    _c)) },
-                title && React.createElement("div", { className: styles.title }, title),
-                hasContent && (React.createElement("div", { ref: contentRef, className: cn(styles.content, (_d = {},
-                        _d[styles.isFolded] = foldable && folded,
+    return (React.createElement("div", { className: cn((_b = {},
+            _b[styles.shadow] = shadow,
+            _b[styles.rounded] = rounded,
+            _b)) },
+        React.createElement("div", { className: cn(styles.component, styles[view], (_c = {},
+                _c[styles.foldable] = foldable,
+                _c[styles.focused] = focused,
+                _c[styles.isHidden] = hasCloser && isHidden,
+                _c[styles.isFolded] = foldable && folded,
+                _c[styles.rounded] = rounded,
+                _c[styles.rect] = !rounded,
+                _c[styles.noBorder] = !border,
+                _c), className), onClick: handleClick, onKeyDown: handleClick, role: 'alert', ref: mergeRefs([plateRef, ref]), 
+            /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
+            tabIndex: foldable ? 0 : -1, "data-test-id": dataTestId },
+            React.createElement("div", { className: styles.inner },
+                leftAddons && React.createElement("div", { className: styles.leftAddons }, leftAddons),
+                React.createElement("div", { className: cn(styles.contentContainer, contentClassName, (_d = {},
+                        _d[styles.withoutTitle] = !title && hasAnyAddons,
+                        _d[styles.limitWidth] = limitContentWidth,
                         _d)) },
-                    React.createElement("div", { className: styles.contentInner },
-                        children,
-                        hasButtons ? renderButtons() : null)))),
-            foldable && (React.createElement("div", { className: cn(styles.folder, (_e = {},
-                    _e[styles.isFolded] = folded,
-                    _e)) })),
-            hasCloser && !foldable && (React.createElement(Button, { className: styles.closer, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', view: 'ghost', onClick: handleClose })))));
+                    title && React.createElement("div", { className: styles[titleView] }, title),
+                    hasContent && (React.createElement("div", { ref: contentRef, className: cn(styles.content, (_e = {},
+                            _e[styles.isFolded] = foldable && folded,
+                            _e)) },
+                        children && (React.createElement("div", { className: styles.description }, children)),
+                        hasButtons && (React.createElement("div", { className: styles.footer },
+                            React.createElement(ButtonList, { buttons: buttons, containerClassName: buttonsClassName, buttonClassName: cn(styles.button, buttonsClassName) })))))),
+                hasSubAddons && (React.createElement("div", { ref: subAddonsRef, className: styles.subAddons },
+                    React.createElement(ButtonList, { buttons: subAddons, containerClassName: subAddonsClassName, buttonClassName: styles.button }))),
+                foldable && (React.createElement("div", { className: styles.rightAddons },
+                    React.createElement("div", { className: cn(styles.folder, (_f = {},
+                            _f[styles.isFolded] = folded,
+                            _f)) }))),
+                hasCloser && !foldable && (React.createElement("div", { className: styles.rightAddons },
+                    React.createElement(Button, { className: styles.closer, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', view: 'ghost', onClick: handleClose })))))));
 });
+/* eslint-enable complexity */
 /**
  * Для отображения в сторибуке
  */

package/plate/esm/components/button-list/component.d.ts

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react';
+type ButtonListProps = {
+    /**
+     * Кнопки для рендера
+     */
+    buttons: ReactNode;
+    /**
+     * Дополнительный класс для контейнера
+     */
+    containerClassName?: string;
+    /**
+     * Дополнительный класс для кнопок
+     */
+    buttonClassName?: string;
+};
+declare const ButtonList: FC<ButtonListProps>;
+export { ButtonListProps, ButtonList };

package/plate/esm/components/button-list/component.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import cn from 'classnames';
+
+var ButtonList = function (_a) {
+    var buttons = _a.buttons, buttonClassName = _a.buttonClassName, containerClassName = _a.containerClassName;
+    var buttonsIsArray = Array.isArray(buttons) && buttons.length > 0;
+    if (buttonsIsArray) {
+        return (React.createElement("div", { className: containerClassName }, buttons.map(function (button, index) {
+            return button
+                ? React.cloneElement(button, {
+                    // eslint-disable-next-line react/no-array-index-key
+                    key: index,
+                    size: 'xxs',
+                    view: index === 0 ? 'secondary' : 'link',
+                    className: cn(button.props.className, buttonClassName),
+                })
+                : null;
+        })));
+    }
+    return React.createElement("div", { className: containerClassName }, buttons);
+};
+
+export { ButtonList };