@megafon/ui-core 2.0.0-beta.96 → 2.0.0

package/README.md

@@ -10,67 +10,3 @@ $ npm install --save @megafon/ui-core@beta
 ```bash
 $ yarn add @megafon/ui-core@beta
 ```
-
-## Development notes
-
-### Build
-
-```bash
-$ yarn run build
-```
-
-## How gulp modify svg
-Для модификации используется плагин gulp-svgmin(на основе svgo), который добавляет уникальный атрибут `id` для тегов и переводит тег `<style>` в инлайн стили.
-В svg могут оставаться много тегов `<mask>` и `<clipPath>`, которые не всегда правильно воспринимаются бразуером при использовании спрайта.
-Разработчик svgo не нашел хорошего алгоритма для того, чтобы убирать `<mask>` и `<clipPath>`. [Svgo Issue](https://github.com/svg/svgo/issues/680)
-
-Для `<mask>` написан скрипт, который рекурсивно находит все вложенности и заменяет теги.
-
-Стили добавляются программой дизайнеров, в идеале их не должно быть. В спрайте тег `<defs>` кладется в отдельное место, что затрудняет чтение тегов браузером, лучше от них избавляться по возможности. Градиенты всегда находятся в `<defs>`, поэтому Icons с ними могут не работать в спрайте.
-
-`<clipPath>` заменять в коде файла.
-
-Пример, было:
-``` xml
-<svg id="Ready" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
-    <defs>
-        <style>
-        .cls-1,
-        .cls-2 {
-            fill: none;
-        }
-
-        .cls-1 {
-            clip-rule: evenodd;
-        }
-
-        .cls-3 {
-            clip-path: url(#clip-path);
-        }
-
-        .cls-4 {
-            clip-path: url(#clip-path-2);
-        }
-        </style>
-        <clipPath id="clip-path">
-            <path class="cls-1" d="M28,16a15.78,15.78,0,0,1-1.94,1.73L27.83,20,26.2,21.16l-1.77-2.31a16.29,16.29,0,0,1-2.62,1.24l.94,2.73-1.92.59-.94-2.74a16.66,16.66,0,0,1-2.89.43v2.64H15V21.11a16.7,16.7,0,0,1-3-.45l-.86,2.52-1.92-.59.87-2.52a16.29,16.29,0,0,1-2.54-1.21L5.8,21.16,4.17,20l1.77-2.3A15.78,15.78,0,0,1,4,16l1.51-1.26a14.47,14.47,0,0,0,21,0Zm-4-5.07-1,1.81a13.7,13.7,0,0,0-7-2,13.57,13.57,0,0,0-7,2L8,10.94A15.68,15.68,0,0,1,24,10.94Z" />
-        </clipPath>
-        <clipPath id="clip-path-2">
-            <rect class="cls-2" y="-0.25" width="32" height="32" />
-        </clipPath>
-    </defs>
-    <title>Artboard 21</title>
-    <g class="cls-3">
-        <g class="cls-4">
-            <rect x="-1" y="3.75" width="34" height="25" />
-        </g>
-    </g>
-</svg>
-```
-Стало:
-``` xml
-<svg id="Ready" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
-    <title>Artboard 21</title>
-    <path class="cls-1" d="M28,16a15.78,15.78,0,0,1-1.94,1.73L27.83,20,26.2,21.16l-1.77-2.31a16.29,16.29,0,0,1-2.62,1.24l.94,2.73-1.92.59-.94-2.74a16.66,16.66,0,0,1-2.89.43v2.64H15V21.11a16.7,16.7,0,0,1-3-.45l-.86,2.52-1.92-.59.87-2.52a16.29,16.29,0,0,1-2.54-1.21L5.8,21.16,4.17,20l1.77-2.3A15.78,15.78,0,0,1,4,16l1.51-1.26a14.47,14.47,0,0,0,21,0Zm-4-5.07-1,1.81a13.7,13.7,0,0,0-7-2,13.57,13.57,0,0,0-7,2L8,10.94A15.68,15.68,0,0,1,24,10.94Z" />
-</svg>
-```

package/dist/es/colors/Colors.css

@@ -6,8 +6,8 @@ h5 {
   margin: 0;
 }
 .colors {
-  margin: 0 auto;
   max-width: 835px;
+  margin: 0 auto;
 }
 .colors__inner {
   display: -webkit-box;
@@ -47,9 +47,9 @@ h5 {
   margin-bottom: 24px;
 }
 .colors__color {
-  border-radius: 50%;
-  height: 48px;
   width: 48px;
+  height: 48px;
+  border-radius: 50%;
 }
 .colors__item_border .colors__color {
   border: 1px solid #E5E5E5;

package/dist/es/colors/Colors.js

@@ -1,10 +1,10 @@
 import "core-js/modules/es.array.map";
 import "core-js/modules/es.function.name";
 import * as React from 'react';
-import "./Colors.css";
+import { cnCreate } from '@megafon/ui-helpers';
 import Header from "../components/Header/Header";
 import Paragraph from "../components/Paragraph/Paragraph";
-import cnCreate from "../utils/cnCreate";
+import "./Colors.css";
 import colors from "./colorsData";
 var cn = cnCreate('colors');
 

package/dist/es/colors/colorsData.js

@@ -34,7 +34,7 @@ export default [{
     name: '137C',
     value: '#FFA717'
   }, {
-    name: '311C',
+    name: 'Pantone311C',
     value: '#5BD9E5'
   }, {
     name: 'Reflex Blue',

package/dist/es/components/Accordion/Accordion.css

@@ -5,40 +5,66 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-accordion {
+.mfui-accordion {
   border-top: 1px solid #D8D8D8;
-}
-.mfui-beta-accordion:last-child {
   border-bottom: 1px solid #D8D8D8;
 }
-.mfui-beta-accordion:not(.mfui-beta-accordion_open) .mfui-beta-accordion__title-wrap:hover {
+.mfui-accordion + .mfui-accordion {
+  border-top: none;
+}
+.mfui-accordion:not(.mfui-accordion_open) .mfui-accordion__title-wrap:hover {
   background: rgba(237, 237, 237, 0.5);
 }
-.mfui-beta-accordion.mfui-beta-accordion_open .mfui-beta-accordion__title-wrap {
+.mfui-accordion.mfui-accordion_open .mfui-accordion__title-wrap {
   background: #EDEDED;
 }
-.mfui-beta-accordion__title-wrap {
-  cursor: pointer;
+.mfui-accordion__title-wrap {
   position: relative;
-  padding: 24px 68px 24px 24px;
+  padding: 24px 52px 24px 16px;
+  cursor: pointer;
+}
+@media screen and (min-width: 768px) {
+  .mfui-accordion__title-wrap {
+    padding: 24px 68px 24px 24px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-accordion__title-wrap {
+    padding: 24px 72px 24px 24px;
+  }
 }
-.mfui-beta-accordion__icon-box {
+.mfui-accordion__icon-box {
   position: absolute;
-  right: 20px;
   top: 50%;
+  right: 20px;
   width: 32px;
   height: 32px;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   opacity: 1;
 }
-.mfui-beta-accordion__content-inner {
-  padding: 0 68px 0 40px;
+.mfui-accordion__content-inner {
+  padding: 24px 16px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-accordion__content-inner {
+    padding: 24px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-accordion__content-inner {
+    padding: 24px 48px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-accordion__content-inner {
+    padding: 24px 40px;
+  }
 }
-.mfui-beta-accordion__content-inner_v-padding {
+.mfui-accordion__content-inner_v-padding {
   padding-top: 24px;
   padding-bottom: 24px;
 }
-.mfui-beta-accordion__icon {
+.mfui-accordion__icon {
   fill: #000000;
 }

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

@@ -1,8 +1,11 @@
 import * as React from 'react';
+import { IFilterDataAttrs } from '@megafon/ui-helpers';
 import './Accordion.less';
-export interface IAccordionProps {
+export interface IAccordionProps extends IFilterDataAttrs {
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
     /** Заголовок */
-    title: string;
+    title: string | React.ReactNode | React.ReactNode[];
     /** Состояние открытости */
     isOpened?: boolean;
     /** Вертикальные отступы */
@@ -11,11 +14,13 @@ export interface IAccordionProps {
     className?: string;
     /** Дополнительные классы для корневого и внутренних элементов */
     classes?: {
+        openedClass?: string;
         root?: string;
         collapse?: string;
+        titleWrap?: string;
     };
     /** Обработчик клика */
-    onClickAccordion?: (isOpened: boolean, title: string) => void;
+    onClickAccordion?: (isOpened: boolean, title: string | React.ReactNode | React.ReactNode[]) => void;
 }
 declare const Accordion: React.FC<IAccordionProps>;
 export default Accordion;

package/dist/es/components/Accordion/Accordion.js

@@ -1,32 +1,33 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
-import "./Accordion.css";
-import cnCreate from "../../utils/cnCreate";
-import Header from "../Header/Header";
 import Collapse from "../Collapse/Collapse";
+import Header from "../Header/Header";
+import "./Accordion.css";
 
-var ArrowUp = function ArrowUp(props) {
+var ArrowDown = function ArrowDown(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M20.8 20L16 15.2 11.2 20l-1.7-1.6L16 12l6.5 6.4z"
+    d: "M11.2 12l4.8 4.8 4.8-4.8 1.7 1.6L16 20l-6.5-6.4z"
   }));
 };
 
-var ArrowDown = function ArrowDown(props) {
+var ArrowUp = function ArrowUp(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M11.2 12l4.8 4.8 4.8-4.8 1.7 1.6L16 20l-6.5-6.4z"
+    d: "M20.8 20L16 15.2 11.2 20l-1.7-1.6L16 12l6.5 6.4z"
   }));
 };
 
-var cn = cnCreate('mfui-beta-accordion');
+var cn = cnCreate('mfui-accordion');
 
 var Accordion = function Accordion(_ref) {
-  var title = _ref.title,
+  var rootRef = _ref.rootRef,
+      title = _ref.title,
       _ref$isOpened = _ref.isOpened,
       isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
       _ref$hasVerticalPaddi = _ref.hasVerticalPaddings,
@@ -34,8 +35,11 @@ var Accordion = function Accordion(_ref) {
       className = _ref.className,
       _ref$classes = _ref.classes;
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
-  var rootPropsClasses = _ref$classes.root,
+  var openedClass = _ref$classes.openedClass,
+      rootPropsClasses = _ref$classes.root,
       collapsePropsClasses = _ref$classes.collapse,
+      titleWrapPropsClasses = _ref$classes.titleWrap,
+      dataAttrs = _ref.dataAttrs,
       onClickAccordion = _ref.onClickAccordion,
       children = _ref.children;
 
@@ -53,12 +57,14 @@ var Accordion = function Accordion(_ref) {
     setIsOpenedState(!isOpenedState);
   };
 
-  return /*#__PURE__*/React.createElement("div", {
+  var openedClassName = isOpenedState ? openedClass : undefined;
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
+    ref: rootRef,
     className: cn({
       open: isOpenedState
-    }, [className, rootPropsClasses])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cn('title-wrap'),
+    }, [className, rootPropsClasses, openedClassName])
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('title-wrap', [titleWrapPropsClasses]),
     onClick: handleClickTitle
   }, /*#__PURE__*/React.createElement(Header, {
     as: "h5"
@@ -76,14 +82,20 @@ var Accordion = function Accordion(_ref) {
 };
 
 Accordion.propTypes = {
-  title: PropTypes.string.isRequired,
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
   isOpened: PropTypes.bool,
   hasVerticalPaddings: PropTypes.bool,
   className: PropTypes.string,
   classes: PropTypes.shape({
+    openedClass: PropTypes.string,
     root: PropTypes.string,
-    collapse: PropTypes.string
+    collapse: PropTypes.string,
+    titleWrap: PropTypes.string
   }),
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
   onClickAccordion: PropTypes.func
 };
 export default Accordion;

package/dist/es/components/Banner/Banner.css

@@ -5,108 +5,110 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-banner {
-  overflow: hidden;
+.mfui-banner {
   position: relative;
+  overflow: hidden;
 }
-.mfui-beta-banner .swiper-wrapper {
+.mfui-banner .swiper-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
-.mfui-beta-banner__slide {
-  height: 500px;
+.mfui-banner__slide {
   -ms-flex-negative: 0;
       flex-shrink: 0;
+  height: 500px;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-banner__slide {
+  .mfui-banner__slide {
     height: 540px;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-beta-banner__slide {
+  .mfui-banner__slide {
     height: 420px;
   }
 }
 @media screen and (min-width: 1280px) {
-  .mfui-beta-banner__slide {
+  .mfui-banner__slide {
     height: 400px;
   }
 }
-.mfui-beta-banner__arrow {
+.mfui-banner__arrow {
   position: absolute;
   top: 50%;
+  z-index: 10;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
-.mfui-beta-banner__arrow_prev {
+.mfui-banner__arrow_prev {
   left: 12px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-banner__arrow_prev {
+  .mfui-banner__arrow_prev {
     left: 8px;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-banner__arrow_prev {
+  .mfui-banner__arrow_prev {
     left: 16px;
   }
 }
 @media screen and (min-width: 1280px) {
-  .mfui-beta-banner__arrow_prev {
+  .mfui-banner__arrow_prev {
     left: 20px;
   }
 }
-.mfui-beta-banner__arrow_next {
+.mfui-banner__arrow_next {
   right: 12px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-banner__arrow_next {
+  .mfui-banner__arrow_next {
     right: 8px;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-banner__arrow_next {
+  .mfui-banner__arrow_next {
     right: 16px;
   }
 }
 @media screen and (min-width: 1280px) {
-  .mfui-beta-banner__arrow_next {
+  .mfui-banner__arrow_next {
     right: 20px;
   }
 }
-.mfui-beta-banner__pagination {
+.mfui-banner__pagination {
   position: absolute;
   bottom: 16px;
   left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
+  z-index: 10;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   padding: 6px;
   border-radius: 12px;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
 }
-.mfui-beta-banner__pagination_theme_light {
+.mfui-banner__pagination_theme_light {
   background-color: transparent;
 }
-.mfui-beta-banner__pagination_theme_green {
+.mfui-banner__pagination_theme_green {
   background-color: #00B956;
 }
-.mfui-beta-banner__pagination_theme_dark {
+.mfui-banner__pagination_theme_dark {
   background-color: rgba(0, 0, 0, 0.25);
 }
-.mfui-beta-banner__dot {
+.mfui-banner__dot {
   width: 12px;
   height: 12px;
 }
-.mfui-beta-banner__dot:not(:last-child) {
+.mfui-banner__dot:not(:last-child) {
   margin-right: 8px;
 }

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

@@ -11,6 +11,11 @@ export interface IBannerProps {
     className?: string;
     /** Прокрутка с зацикливанием */
     loop?: boolean;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        slide?: string;
+        arrow?: string;
+    };
     /** Автоматическая прокрутка */
     autoPlay?: boolean;
     /** Задержка автоматической прокрутки */

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

@@ -3,12 +3,12 @@ import "core-js/modules/es.object.values";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
-import "./Banner.css";
-import cnCreate from "../../utils/cnCreate";
 import SwiperCore, { Autoplay } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import NavArrow, { Theme as ArrowTheme } from "../NavArrow/NavArrow";
+import "./Banner.css";
 import BannerDot from "./BannerDot";
 SwiperCore.use([Autoplay]);
 export var NavTheme = {
@@ -26,10 +26,12 @@ var getAutoPlayConfig = function getAutoPlayConfig(delay) {
   };
 };
 
-var cn = cnCreate('mfui-beta-banner');
+var cn = cnCreate('mfui-banner');
 
 var Banner = function Banner(_ref) {
   var className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
       _ref$autoPlay = _ref.autoPlay,
       autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
       _ref$autoPlayDelay = _ref.autoPlayDelay,
@@ -162,19 +164,19 @@ var Banner = function Banner(_ref) {
   }, React.Children.map(children, function (child, i) {
     return /*#__PURE__*/React.createElement(SwiperSlide, {
       key: i,
-      className: cn('slide')
+      className: cn('slide', classes === null || classes === void 0 ? void 0 : classes.slide)
     }, child);
   })), /*#__PURE__*/React.createElement(NavArrow, {
     className: cn('arrow', {
       prev: true
-    }),
+    }, [classes.arrow]),
     onClick: handlePrevClick,
     disabled: !loop && isBeginning,
     theme: navArrowTheme
   }), /*#__PURE__*/React.createElement(NavArrow, {
     className: cn('arrow', {
       next: true
-    }),
+    }, [classes.arrow]),
     view: "next",
     onClick: handleNextClick,
     disabled: !loop && isEnd,
@@ -199,6 +201,9 @@ var Banner = function Banner(_ref) {
 Banner.propTypes = {
   className: PropTypes.string,
   loop: PropTypes.bool,
+  classes: PropTypes.shape({
+    slide: PropTypes.string
+  }),
   autoPlay: PropTypes.bool,
   autoPlayDelay: PropTypes.number,
   navTheme: PropTypes.oneOf(Object.values(NavTheme)),

package/dist/es/components/Banner/BannerDot.css

@@ -5,9 +5,7 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-banner-dot {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+.mfui-banner-dot {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -17,47 +15,49 @@ h5 {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   padding: 2px;
   border-radius: 50%;
   cursor: pointer;
 }
-.mfui-beta-banner-dot:before {
+.mfui-banner-dot:before {
   content: '';
+  display: block;
   width: 100%;
   height: 100%;
-  display: block;
-  background-color: rgba(255, 255, 255, 0.5);
   border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.5);
 }
-.mfui-beta-banner-dot_active {
+.mfui-banner-dot_active {
   padding: 0;
   cursor: default;
 }
-.mfui-beta-banner-dot_active:before {
+.mfui-banner-dot_active:before {
   background-color: #FFFFFF;
 }
-.mfui-beta-banner-dot_active.mfui-beta-banner-dot_timer:before {
+.mfui-banner-dot_active.mfui-banner-dot_timer:before {
   display: none;
 }
-.mfui-beta-banner-dot__timer {
+.mfui-banner-dot__timer {
   display: block;
   width: 100%;
   height: 100%;
+  border-radius: 50%;
   -webkit-transform: rotate(90deg);
           transform: rotate(90deg);
-  border-radius: 50%;
 }
-.mfui-beta-banner-dot__timer-circle {
-  fill: rgba(255, 255, 255, 0.5);
-  stroke: #FFFFFF;
-  stroke-width: 100;
-  stroke-dasharray: 1000;
-  -webkit-animation: timer linear;
-          animation: timer linear;
+.mfui-banner-dot__timer-circle {
   -webkit-transform: scale(-1, 1);
           transform: scale(-1, 1);
   -webkit-transform-origin: center;
           transform-origin: center;
+  -webkit-animation: timer linear;
+          animation: timer linear;
+  fill: rgba(255, 255, 255, 0.5);
+  stroke: #FFFFFF;
+  stroke-width: 100;
+  stroke-dasharray: 1000;
 }
 @-webkit-keyframes timer {
   0% {

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./BannerDot.css";
-import cnCreate from "../../utils/cnCreate";
-var cn = cnCreate('mfui-beta-banner-dot');
+var cn = cnCreate('mfui-banner-dot');
 
 var BannerDot = function BannerDot(_ref) {
   var className = _ref.className,