@megafon/ui-core 2.5.0 → 3.0.0-beta.11

package/dist/lib/colors/colorsData.js

@@ -10,34 +10,35 @@ var colors = {
     colorsGroup: [{
       description: 'Основные цвета бренда',
       colors: [{
-        name: 'Green',
-        code: '#00B956'
+        name: 'Brand Green',
+        code: 'brandGreen'
       }, {
-        name: 'Purple',
-        code: '#731982'
+        name: 'Brand Purple',
+        code: 'brandPurple'
       }]
     }, {
       description: 'Градация оттенков серого',
       colors: [{
         name: 'Base',
-        code: '#FFFFFF',
-        border: '1px solid #EDEDED'
+        code: 'base',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'Content',
-        code: '#333333'
+        code: 'content',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'Spb Sky 0',
-        code: '#F6F6F6',
-        border: '2px solid #EDEDED'
+        code: 'spbSky0',
+        border: '2px solid var(--spbSky1)'
       }, {
         name: 'Spb Sky 1',
-        code: '#EDEDED'
+        code: 'spbSky1'
       }, {
         name: 'Spb Sky 2',
-        code: '#D8D8D8'
+        code: 'spbSky2'
       }, {
         name: 'Spb Sky 3',
-        code: '#999999'
+        code: 'spbSky3'
       }]
     }]
   },
@@ -47,16 +48,16 @@ var colors = {
       description: 'Акцентные цвета',
       colors: [{
         name: 'Warm Red C',
-        code: '#EB5A40'
+        code: 'warmRedC'
       }, {
         name: '137C',
-        code: '#FFA717'
+        code: '137C'
       }, {
         name: '311C',
-        code: '#5BD9E5'
+        code: '311C'
       }, {
         name: 'Reflex Blue',
-        code: '#444189'
+        code: 'reflexBlue'
       }]
     }
   },
@@ -66,22 +67,22 @@ var colors = {
       description: 'Системные цвета, используемые для отображения состояний интерфейсов и ссылок',
       colors: [{
         name: 'Fury',
-        code: '#F62434'
+        code: 'fury'
       }, {
         name: 'System Blue',
-        code: '#34AAF2'
+        code: 'systemBlue'
       }, {
         name: 'Background',
-        code: '#FFFFFF'
+        code: 'background'
       }, {
         name: 'Button Hov. G.',
-        code: '#10E272'
+        code: 'buttonHoverGreen'
       }, {
         name: 'Button Hov. P.',
-        code: '#A500BF'
+        code: 'buttonhoverPurple'
       }, {
         name: 'Button Down',
-        code: '#404D46'
+        code: 'buttonDown'
       }]
     }
   },
@@ -91,15 +92,15 @@ var colors = {
       description: 'Градиентные заливки ',
       colors: [{
         name: 'Basic',
-        code: '#01873F #00B956 #14CD6A',
+        code: 'gradientBasic',
         gradient: 'linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%)'
       }, {
         name: 'VIP',
-        code: '#5B1168 #731982 #821E93',
+        code: 'gradientVIP',
         gradient: 'linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%)'
       }, {
         name: 'Exclusive',
-        code: '#2A2674 #444189 #504D93',
+        code: 'gradientExclusive',
         gradient: 'linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%)'
       }]
     }
@@ -110,11 +111,12 @@ var colors = {
       description: 'Цвета не зависящие от темы',
       colors: [{
         name: 'STC White',
-        code: '#FFFFFFF',
-        border: '1px solid #EDEDED'
+        code: 'stcWhite',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black',
-        code: '#333333'
+        code: 'stcBlack',
+        border: '1px solid var(--spbSky1)'
       }]
     }
   },
@@ -124,31 +126,36 @@ var colors = {
       description: 'Цвета c прозрачностью не зависящие от темы',
       colors: [{
         name: 'STC White 5%',
-        code: '#FFFFFF0D',
-        border: '1px solid #EDEDED'
+        code: 'stcWhite5',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC White 10%',
-        code: '#FFFFFF1A',
-        border: '1px solid #EDEDED'
+        code: 'stcWhite10',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC White 20%',
-        code: '#FFFFFF33',
-        border: '1px solid #EDEDED'
+        code: 'stcWhite20',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC White 50%',
-        code: '#FFFFFF80'
+        code: 'stcWhite50',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black 5%',
-        code: '#3333330D'
+        code: 'stcBlack5',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black 10%',
-        code: '#3333331A'
+        code: 'stcBlack10',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black 20%',
-        code: '#33333333'
+        code: 'stcBlack20',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black 50%',
-        code: '#33333380'
+        code: 'stcBlack50',
+        border: '1px solid var(--spbSky1)'
       }]
     }
   },
@@ -157,61 +164,61 @@ var colors = {
     colorsList: {
       description: 'Дополнительная (вспомогательная) палитра, образованная от Basic, Secondary и System цветов. Каждый цвет из Soft палитры работает в паре с его родительским цветом.',
       colors: [{
-        name: 'Green 80',
-        code: '#0CDC78',
-        parentColor: '#00B956'
+        name: 'Brand Green 80',
+        code: 'brandGreen80',
+        parentColor: 'green'
       }, {
-        name: 'Purple 80',
-        code: '#AA67C1',
-        parentColor: '#731982'
+        name: 'Brand Purple 80',
+        code: 'brandPurple80',
+        parentColor: 'purple'
       }, {
         name: 'Warm Red C 80',
-        code: '#FF765D',
-        parentColor: '#EB5A40'
+        code: 'warmRedC80',
+        parentColor: 'warmRedC'
       }, {
         name: '137C 80',
-        code: '#FFB945',
-        parentColor: '#FFB945'
+        code: '137C80',
+        parentColor: '137C'
       }, {
         name: '311C 80',
-        code: '#62E3FF',
-        parentColor: '#5BD9E5'
+        code: '311C80',
+        parentColor: '311C'
       }, {
         name: 'Reflex Blue 80',
-        code: '#554FC9',
-        parentColor: '#444189'
+        code: 'reflexBlue80',
+        parentColor: 'reflexBlue'
       }, {
         name: 'Fury 80',
-        code: '#F8505D',
-        parentColor: '#F62434'
+        code: 'fury80',
+        parentColor: 'fury'
       }, {
-        name: 'Green 20',
-        code: '#DDFFEC',
-        parentColor: '#00B956'
+        name: 'Brand Green 20',
+        code: 'brandGreen20',
+        parentColor: 'green'
       }, {
-        name: 'Purple 20',
-        code: '#FFEEFF',
-        parentColor: '#731982'
+        name: 'Brand Purple 20',
+        code: 'brandPurple20',
+        parentColor: 'purple'
       }, {
         name: 'Warm Red C 20',
-        code: '#FFCFC7',
-        parentColor: '#EB5A40'
+        code: 'warmRedC20',
+        parentColor: 'warmRedC'
       }, {
         name: '137C 20',
-        code: '#FFEDD1',
-        parentColor: '#FFB945'
+        code: '137C20',
+        parentColor: '137C'
       }, {
         name: '311C 20',
-        code: '#E1FAFF',
-        parentColor: '#5BD9E5'
+        code: '311C20',
+        parentColor: '311C'
       }, {
         name: 'Reflex Blue 20',
-        code: '#EBEAFF',
-        parentColor: '#444189'
+        code: 'reflexBlue20',
+        parentColor: 'reflexBlue'
       }, {
         name: 'Fury 20',
-        code: '#FFC5C9',
-        parentColor: '#F62434'
+        code: 'fury20',
+        parentColor: 'fury'
       }]
     }
   }

package/dist/lib/components/Accordion/Accordion.css

@@ -1,22 +1,15 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-accordion {
-  border-top: 1px solid #D8D8D8;
-  border-bottom: 1px solid #D8D8D8;
+  border-top: 1px solid var(--spbSky2);
+  border-bottom: 1px solid var(--spbSky2);
 }
 .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);
+  background: var(--spbSky0);
 }
 .mfui-accordion.mfui-accordion_open .mfui-accordion__title-wrap {
-  background: #EDEDED;
+  background: var(--spbSky1);
 }
 .mfui-accordion__title-wrap {
   position: relative;
@@ -42,29 +35,16 @@ h5 {
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   opacity: 1;
+  fill: var(--content);
 }
 .mfui-accordion__content-inner {
   padding: 24px 16px;
 }
-@media screen and (min-width: 768px) and (max-width: 1023px) {
+@media screen and (min-width: 768px) {
   .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-accordion__content-inner_v-padding {
-  padding-top: 24px;
-  padding-bottom: 24px;
-}
 .mfui-accordion__icon {
-  fill: #000000;
+  fill: var(--content);
 }

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

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

package/dist/lib/components/Accordion/Accordion.js

@@ -50,8 +50,6 @@ var Accordion = function Accordion(_ref) {
       title = _ref.title,
       _ref$isOpened = _ref.isOpened,
       isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
-      _ref$hasVerticalPaddi = _ref.hasVerticalPaddings,
-      hasVerticalPaddings = _ref$hasVerticalPaddi === void 0 ? false : _ref$hasVerticalPaddi,
       className = _ref.className,
       _ref$classes = _ref.classes;
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
@@ -72,33 +70,36 @@ var Accordion = function Accordion(_ref) {
     setIsOpenedState(isOpened);
   }, [isOpened]);
 
-  var handleClickTitle = function handleClickTitle() {
-    onClickAccordion === null || onClickAccordion === void 0 ? void 0 : onClickAccordion(!isOpenedState, title);
-    setIsOpenedState(!isOpenedState);
+  var handleClickTitle = function handleClickTitle(e) {
+    if ((0, _uiHelpers.checkEventIsClickOrEnterPress)(e)) {
+      onClickAccordion && onClickAccordion(!isOpenedState);
+      setIsOpenedState(!isOpenedState);
+    }
   };
 
   var openedClassName = isOpenedState ? openedClass : undefined;
-  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     ref: rootRef,
     className: cn({
       open: isOpenedState
     }, [className, rootPropsClasses, openedClassName])
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.titleWrap), {
     className: cn('title-wrap', [titleWrapPropsClasses]),
-    onClick: handleClickTitle
-  }, /*#__PURE__*/React.createElement(_Header["default"], {
+    onClick: handleClickTitle,
+    onKeyDown: handleClickTitle
+  }), /*#__PURE__*/React.createElement(_Header["default"], (0, _extends2["default"])({
     as: "h5"
-  }, title), /*#__PURE__*/React.createElement("div", {
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header)), title), /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    role: "button",
     className: cn('icon-box', {
       open: isOpenedState
     })
-  }, isOpenedState ? /*#__PURE__*/React.createElement(ArrowUp, null) : /*#__PURE__*/React.createElement(ArrowDown, null))), /*#__PURE__*/React.createElement(_Collapse["default"], {
+  }, isOpenedState ? /*#__PURE__*/React.createElement(ArrowUp, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowUp)) : /*#__PURE__*/React.createElement(ArrowDown, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowDown)))), /*#__PURE__*/React.createElement(_Collapse["default"], (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.collapse), {
     className: cn('content', collapsePropsClasses),
-    classNameContainer: cn('content-inner', {
-      'v-padding': hasVerticalPaddings
-    }),
+    classNameContainer: cn('content-inner'),
     isOpened: isOpenedState
-  }, children));
+  }), children));
 };
 
 Accordion.propTypes = {
@@ -107,9 +108,6 @@ Accordion.propTypes = {
   }), PropTypes.any])]),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
   isOpened: PropTypes.bool,
-  hasVerticalPaddings: function hasVerticalPaddings(props, propName) {
-    return props[propName] && new Error('Failed prop type: Prop "hasVerticalPaddings" is deprecated');
-  },
   className: PropTypes.string,
   classes: PropTypes.shape({
     openedClass: PropTypes.string,
@@ -117,7 +115,14 @@ Accordion.propTypes = {
     collapse: PropTypes.string,
     titleWrap: PropTypes.string
   }),
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    header: PropTypes.objectOf(PropTypes.string.isRequired),
+    collapse: PropTypes.objectOf(PropTypes.string.isRequired),
+    titleWrap: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowUp: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowDown: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   onClickAccordion: PropTypes.func
 };
 var _default = Accordion;

package/dist/lib/components/Banner/Banner.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-banner {
   position: relative;
   overflow: hidden;
@@ -41,11 +34,6 @@ h5 {
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
-@media screen and (max-width: 767px) {
-  .mfui-banner__arrow {
-    display: none;
-  }
-}
 .mfui-banner__arrow_prev {
   left: 12px;
 }
@@ -105,33 +93,10 @@ h5 {
   background-color: transparent;
 }
 .mfui-banner__pagination_theme_green {
-  background-color: #00B956;
+  background-color: var(--brandGreen);
 }
 .mfui-banner__pagination_theme_dark {
-  background-color: rgba(0, 0, 0, 0.25);
-}
-.mfui-banner__pagination_bottom-offset {
-  bottom: 60px;
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-banner__pagination_bottom-offset {
-    bottom: 89px;
-  }
-}
-@media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-banner__pagination_bottom-offset {
-    bottom: 90px;
-  }
-}
-@media screen and (min-width: 1280px) and (max-width: 1439px) {
-  .mfui-banner__pagination_bottom-offset {
-    bottom: 65px;
-  }
-}
-@media screen and (min-width: 1440px) {
-  .mfui-banner__pagination_bottom-offset {
-    bottom: 72px;
-  }
+  background-color: var(--stcBlack20);
 }
 .mfui-banner__dot {
   width: 12px;

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

@@ -16,8 +16,16 @@ export interface IBannerProps {
         slide?: string;
         arrow?: string;
     };
-    /** Предполагается использование с наезжанием на баннер следующего за баннером элемента */
-    withPaginationBottomOffset?: boolean;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        swiper?: Record<string, string>;
+        slide?: Record<string, string>;
+        arrowPrev?: Record<string, string>;
+        arrowNext?: Record<string, string>;
+        pagination?: Record<string, string>;
+        dot?: Record<string, string>;
+    };
     /** Автоматическая прокрутка */
     autoPlay?: boolean;
     /** Задержка автоматической прокрутки */