@megafon/ui-core 3.10.0 → 3.12.0

package/CHANGELOG.md

@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.12.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.11.0...@megafon/ui-core@3.12.0) (2022-06-28)
+
+
+### Features
+
+* **tab:** add data-attribute for inner element ([43e58e1](https://github.com/MegafonWebLab/megafon-ui/commit/43e58e12b8da661020f4b48f55245492c21ad376))
+
+
+
+
+
+# [3.11.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.10.1...@megafon/ui-core@3.11.0) (2022-06-21)
+
+
+### Bug Fixes
+
+* **button:** fix font styles for extra small size ([f475b05](https://github.com/MegafonWebLab/megafon-ui/commit/f475b05ab9d62aa56645fb90ccdef88996e72a70))
+
+
+### Features
+
+* **button:** add prop ellipsis ([1978277](https://github.com/MegafonWebLab/megafon-ui/commit/1978277a918cb680e32259042c1a7e3c58056b1b))
+* **notification:** add ability to display button and collapse ([a5fe2f0](https://github.com/MegafonWebLab/megafon-ui/commit/a5fe2f0730b71469c2fb06a148b0e4574adb2d7b))
+
+
+
+
+
+## [3.10.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.10.0...@megafon/ui-core@3.10.1) (2022-06-07)
+
+
+### Bug Fixes
+
+* **banner:** fix bug with hover on autoplay ([93271d8](https://github.com/MegafonWebLab/megafon-ui/commit/93271d8c8f9dd900c031d41f89207f61c41db063))
+
+
+
+
+
 # [3.10.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.9.0...@megafon/ui-core@3.10.0) (2022-05-30)
 
 

package/dist/es/components/Banner/Banner.js

@@ -160,12 +160,6 @@ var Banner = function Banner(_ref) {
     setActiveIndex(realIndex);
     onChange === null || onChange === void 0 ? void 0 : onChange(realIndex);
   }, [onChange]);
-  var handleAutoplayStop = React.useCallback(function () {
-    setAutoPlaying(false);
-  }, []);
-  var handleAutoPlayStart = React.useCallback(function () {
-    setAutoPlaying(true);
-  }, []);
   React.useEffect(function () {
     var rootElement = rootRef.current;
 
@@ -175,9 +169,11 @@ var Banner = function Banner(_ref) {
 
     rootElement === null || rootElement === void 0 ? void 0 : rootElement.addEventListener('mouseenter', function () {
       swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.stop();
+      setAutoPlaying(false);
     });
     rootElement === null || rootElement === void 0 ? void 0 : rootElement.addEventListener('mouseleave', function () {
       swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.start();
+      setAutoPlaying(true);
     });
   }, [autoPlay, pauseOnHover, swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay]);
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
@@ -195,8 +191,6 @@ var Banner = function Banner(_ref) {
     onReachEnd: handleReachEnd,
     onFromEdge: handleFromEdge,
     onSlideChange: handleSlideChange,
-    onAutoplayStop: handleAutoplayStop,
-    onAutoplayStart: handleAutoPlayStart,
     onTouchEnd: increaseAutoplayDelay
   }), React.Children.map(children, function (child, i) {
     return /*#__PURE__*/React.createElement(SwiperSlide, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {

package/dist/es/components/Button/Button.css

@@ -8,6 +8,7 @@
   padding: 0 32px;
   border: none;
   border-radius: 30px;
+  overflow: hidden;
   color: var(--stcWhite);
   font-weight: 500;
   text-align: center;
@@ -21,7 +22,12 @@
           appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
+.mfui-button_size-all_extra-small {
+  padding: 0 16px;
+}
 .mfui-button_size-all_extra-small .mfui-button__inner {
+  font-size: 12px;
+  line-height: 16px;
   min-width: 26px;
   height: 26px;
 }
@@ -54,7 +60,12 @@
   height: 40px;
 }
 @media screen and (min-width: 1280px) {
+  .mfui-button_size-wide_extra-small {
+    padding: 0 16px;
+  }
   .mfui-button_size-wide_extra-small .mfui-button__inner {
+    font-size: 12px;
+    line-height: 16px;
     min-width: 26px;
     height: 26px;
   }
@@ -88,7 +99,12 @@
   }
 }
 @media screen and (min-width: 1024px) {
+  .mfui-button_size-desktop_extra-small {
+    padding: 0 16px;
+  }
   .mfui-button_size-desktop_extra-small .mfui-button__inner {
+    font-size: 12px;
+    line-height: 16px;
     min-width: 26px;
     height: 26px;
   }
@@ -122,7 +138,12 @@
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-button_size-tablet_extra-small {
+    padding: 0 16px;
+  }
   .mfui-button_size-tablet_extra-small .mfui-button__inner {
+    font-size: 12px;
+    line-height: 16px;
     min-width: 26px;
     height: 26px;
   }
@@ -156,7 +177,12 @@
   }
 }
 @media screen and (max-width: 767px) {
+  .mfui-button_size-mobile_extra-small {
+    padding: 0 16px;
+  }
   .mfui-button_size-mobile_extra-small .mfui-button__inner {
+    font-size: 12px;
+    line-height: 16px;
     min-width: 26px;
     height: 26px;
   }
@@ -213,6 +239,11 @@
 .mfui-button__text {
   margin-bottom: 2px;
 }
+.mfui-button__text_ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .mfui-button__content {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -221,6 +252,12 @@
       -ms-flex-align: center;
           align-items: center;
 }
+.mfui-button__content_ellipsis {
+  width: inherit;
+  max-width: -webkit-fit-content;
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+}
 .mfui-button__icon-arrow {
   width: 32px;
   height: 32px;

package/dist/es/components/Button/Button.d.ts

@@ -74,6 +74,8 @@ export interface IButtonProps {
     disabled?: boolean;
     /** Ссылка на элемент */
     buttonRef?: Ref<HTMLButtonElement | HTMLAnchorElement>;
+    /** Обрезать текст при недостаточной ширине и добавлять многоточие */
+    ellipsis?: boolean;
     /** Обработчик клика по кнопке */
     onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
 }

package/dist/es/components/Button/Button.js

@@ -81,6 +81,8 @@ var Button = function Button(_ref) {
       icon = _ref.icon,
       disabled = _ref.disabled,
       children = _ref.children,
+      _ref$ellipsis = _ref.ellipsis,
+      ellipsis = _ref$ellipsis === void 0 ? false : _ref$ellipsis,
       onClick = _ref.onClick,
       dataAttrs = _ref.dataAttrs,
       buttonRef = _ref.buttonRef;
@@ -123,15 +125,19 @@ var Button = function Button(_ref) {
     }
 
     return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content), {
-      className: cn('content', contentClassName)
+      className: cn('content', {
+        ellipsis: ellipsis
+      }, contentClassName)
     }), icon && /*#__PURE__*/React.createElement("div", {
       className: cn('icon')
     }, icon), children && /*#__PURE__*/React.createElement("span", {
-      className: cn('text')
+      className: cn('text', {
+        ellipsis: ellipsis
+      })
     }, children), !icon && showArrow && /*#__PURE__*/React.createElement(Arrow, {
       className: cn('icon-arrow')
     }));
-  }, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, contentClassName, showArrow]);
+  }, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, contentClassName, showArrow, ellipsis]);
   var contentType = React.useMemo(function () {
     switch (true) {
       case icon && !children:
@@ -238,6 +244,7 @@ Button.propTypes = {
   buttonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
   }), PropTypes.any])]),
+  ellipsis: PropTypes.bool,
   onClick: PropTypes.func
 };
 export default Button;

package/dist/es/components/Notification/Notification.css

@@ -7,17 +7,13 @@ h5 {
 }
 .mfui-notification {
   position: relative;
-  padding: 16px 12px;
+  padding: 20px 12px 20px 32px;
+  border-radius: 12px;
   background-color: var(--base);
 }
-@media screen and (min-width: 768px) {
+@media screen and (max-width: 767px) {
   .mfui-notification {
-    padding: 20px 28px;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .mfui-notification {
-    padding: 20px 32px;
+    padding: 16px 12px;
   }
 }
 .mfui-notification__container {
@@ -38,14 +34,43 @@ h5 {
   padding-right: 20px;
 }
 .mfui-notification__text {
-  font-size: 15px;
-  line-height: 24px;
+  font-size: 12px;
+  line-height: 16px;
+  position: relative;
   max-width: 100%;
   margin: 0;
   color: var(--content);
+  -webkit-transition: height 300ms;
+  transition: height 300ms;
 }
-.mfui-notification__text_close-padding {
-  padding-right: 20px;
+@media screen and (min-width: 768px) {
+  .mfui-notification__text {
+    font-size: 15px;
+    line-height: 24px;
+  }
+}
+.mfui-notification__short-text {
+  position: static;
+  visibility: visible;
+  opacity: 1;
+  -webkit-transition: opacity 200ms;
+  transition: opacity 200ms;
+}
+.mfui-notification__short-text_hidden,
+.mfui-notification__full-text {
+  position: absolute;
+  top: 0;
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition: opacity 300ms, visibility 300ms;
+  transition: opacity 300ms, visibility 300ms;
+}
+.mfui-notification__full-text_visible {
+  position: static;
+  visibility: visible;
+  opacity: 1;
+  -webkit-transition: opacity 200ms;
+  transition: opacity 200ms;
 }
 .mfui-notification__content {
   display: -webkit-box;
@@ -61,23 +86,8 @@ h5 {
   -ms-flex-item-align: center;
       align-self: center;
   width: 100%;
-  max-width: 212px;
   margin-left: 12px;
-}
-@media screen and (min-width: 768px) {
-  .mfui-notification__content {
-    max-width: 540px;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .mfui-notification__content {
-    max-width: 640px;
-  }
-}
-@media screen and (min-width: 1280px) {
-  .mfui-notification__content {
-    max-width: 840px;
-  }
+  overflow: hidden;
 }
 .mfui-notification__icon-container {
   display: -webkit-box;
@@ -104,6 +114,45 @@ h5 {
   min-width: 32px;
   height: 32px;
 }
+.mfui-notification__text-container {
+  width: 85%;
+  margin-right: 56px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-notification__text-container {
+    margin-right: 72px;
+  }
+}
+.mfui-notification__bottom {
+  z-index: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 16px;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  width: 100%;
+  margin-top: 8px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-notification__bottom {
+    gap: 20px;
+  }
+}
+.mfui-notification__bottom-block {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 16px;
+  overflow: hidden;
+}
+.mfui-notification__bottom_has-button {
+  margin-top: 12px;
+}
 .mfui-notification__link {
   font-size: 15px;
   line-height: 24px;
@@ -114,16 +163,58 @@ h5 {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  margin-top: 8px;
   cursor: pointer;
 }
-.mfui-notification__right-arrow {
+@media screen and (max-width: 767px) {
+  .mfui-notification__link {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+.mfui-notification__link-arrow,
+.mfui-notification__collapse-arrow {
   width: 20px;
   min-width: 20px;
   height: 20px;
-  margin-top: 4px;
   fill: var(--systemBlue);
 }
+.mfui-notification__link-arrow {
+  margin-bottom: -2px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-notification__link-arrow {
+    margin-bottom: -4px;
+  }
+}
+.mfui-notification__collapse-button {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  padding: 0;
+  border: none;
+  color: var(--systemBlue);
+  text-align: right;
+  background-color: transparent;
+  cursor: pointer;
+}
+@media screen and (max-width: 767px) {
+  .mfui-notification__collapse-button {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+.mfui-notification__collapse_hidden {
+  visibility: hidden;
+}
 .mfui-notification__close {
   position: absolute;
   top: 8px;
@@ -153,10 +244,17 @@ h5 {
     height: 32px;
   }
 }
+.mfui-notification__close:hover {
+  background-color: var(--spbSky1);
+}
+.mfui-notification__close:active {
+  background-color: var(--spbSky2);
+}
 .mfui-notification__close-icon {
   width: 10px;
   height: 10px;
-  fill: var(--stcBlack50);
+  opacity: 0.5;
+  fill: var(--content);
 }
 .mfui-notification_type_error .mfui-notification__icon-container {
   background-color: var(--fury20);
@@ -219,7 +317,7 @@ h5 {
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__link {
   color: var(--stcWhite);
 }
-.mfui-notification_colored.mfui-notification_type_error .mfui-notification__right-arrow {
+.mfui-notification_colored.mfui-notification_type_error .mfui-notification__link-arrow {
   fill: var(--stcWhite);
 }
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__icon-container {

package/dist/es/components/Notification/Notification.d.ts

@@ -33,6 +33,20 @@ export interface INotificationProps {
     hasCloseButton?: boolean;
     /** Заголовок */
     title?: string;
+    /** Короткий текст, отображаемый при закрытом расхлопе */
+    shortText?: string;
+    /** заголовок закрытого расхлопа */
+    closeCollapseTitle?: string;
+    /** заголовок открытого расхлопа */
+    openCollapseTitle?: string;
+    /** Управление состоянием открыт/закрыт расхлопа "Подробнее" */
+    isCollapseOpened?: boolean;
+    /** Текст кнопки */
+    buttonText?: string;
+    /** Лоадер кнопки */
+    buttonLoader?: boolean;
+    /** Заблокировать кнопку */
+    buttonDisable?: boolean;
     /** Текст ссылки внизу уведомления */
     link?: string;
     /** rel - аргумент тега <a> для ссылки */
@@ -50,11 +64,17 @@ export interface INotificationProps {
         text?: Record<string, string>;
         link?: Record<string, string>;
         close?: Record<string, string>;
+        button?: Record<string, string>;
+        collapseButton?: Record<string, string>;
     };
     /** Обработчик на закрытие */
     onClose?: () => void;
     /** Обработчик клика по ссылке */
     onLinkClick?: () => void;
+    /** Обработчик клика по кнопке */
+    onButtonClick?: () => void;
+    /** Обработчик клика по кнопке расхлопа */
+    onCollapseButtonClick?: (value: boolean) => void;
 }
 declare const Notification: React.FC<INotificationProps>;
 export default Notification;