@megafon/ui-shared 8.14.0 → 8.14.2

package/dist/lib/components/Card/types.d.ts

@@ -0,0 +1,86 @@
+type Target = '_self' | '_blank' | '_parent' | '_top';
+export type Link = {
+    /** Ссылка */
+    href?: string;
+    /** Target свойство ссылки */
+    target?: Target;
+};
+export type Image = {
+    /** Ссылка на изображение */
+    src: string;
+    /** Значение тега alt для изображения */
+    alt?: string;
+    /** Позиция изображения */
+    position?: 'top' | 'bottom';
+};
+export type Title = {
+    /** Текст */
+    text: string;
+    /** Выравнивание */
+    align?: 'left' | 'center';
+};
+export type MarkerList = {
+    /** Заголовок */
+    title: string;
+    /** Примечание */
+    note?: string;
+}[];
+export type TextsList = {
+    /** Заголовок */
+    title?: string;
+    /** Описание */
+    desc: string;
+}[];
+export type FeaturesList = {
+    /** Список */
+    items: {
+        /** Заголовок */
+        title: string;
+        /** Значение */
+        value: string;
+    }[];
+    /** Описание */
+    desc?: string;
+};
+export type IconsList = {
+    /** Список */
+    items: {
+        /** Иконка */
+        icon: React.ReactNode;
+        /** Текст */
+        text: string;
+    }[];
+    /** Описание */
+    desc?: string;
+};
+export type Price = {
+    /** Старая цена */
+    oldValue?: string;
+    /** Текущая цена */
+    value: string;
+    /** Период */
+    period?: string;
+};
+export type ButtonType = {
+    /** Название */
+    title: string;
+    /** Ссылка */
+    href?: string;
+    /** Target свойство кнопки */
+    target?: Target;
+    /** Центрировать кнопку */
+    isCentered?: boolean;
+    /** Обработчик клика по кнопке */
+    onClick?: () => void;
+};
+export type MainButtonType = ButtonType & {
+    /** Тип кнопки */
+    type?: 'primary' | 'outline';
+    /** Тема кнопки */
+    theme?: 'green' | 'green-soft';
+};
+export type ExtraButtonType = ButtonType & {
+    /** Тип кнопки */
+    type?: 'outline' | 'text';
+};
+export {};

package/dist/lib/components/Card/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ICard } from '../Card/Card';
+interface ICardsBoxProps {
+    /** Выводить по две колонки в ряду для 2 или 4 карточек */
+    renderTwoColumnsInRow?: boolean;
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        column?: Record<string, string>;
+    };
+    children: Array<React.ReactElement<ICard>> | React.ReactElement<ICard>;
+}
+declare const CardsBox: React.FC<ICardsBoxProps>;
+export default CardsBox;

package/dist/lib/components/CardsBox/CardsBox.js

@@ -0,0 +1,36 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.array.map.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiCore = require("@megafon/ui-core");
+var _uiHelpers = require("@megafon/ui-helpers");
+var _helpers = _interopRequireDefault(require("./helpers"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var cn = (0, _uiHelpers.cnCreate)('mfui-cards-box');
+var CardsBox = function CardsBox(_ref) {
+  var _ref$renderTwoColumns = _ref.renderTwoColumnsInRow,
+    renderTwoColumnsInRow = _ref$renderTwoColumns === void 0 ? false : _ref$renderTwoColumns,
+    dataAttrs = _ref.dataAttrs,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn()
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(_uiCore.Grid, {
+    guttersBottom: "medium",
+    guttersLeft: "medium"
+  }, React.Children.map(children, function (child, i) {
+    return /*#__PURE__*/React.createElement(_uiCore.GridColumn, (0, _extends2["default"])({
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.column
+      }
+    }, (0, _helpers["default"])(React.Children.count(children), i, renderTwoColumnsInRow)), child);
+  })));
+};
+var _default = exports["default"] = CardsBox;

package/dist/lib/components/CardsBox/helpers.d.ts

@@ -0,0 +1,10 @@
+type TGridSizeValues = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
+type GridConfig = {
+    all?: TGridSizeValues;
+    tablet?: TGridSizeValues;
+    mobile?: TGridSizeValues;
+    leftOffsetWide?: TGridSizeValues;
+    leftOffsetDesktop?: TGridSizeValues;
+};
+declare const getColumnConfig: (count: number, index: number, renderTwoColumnsInRow: boolean) => GridConfig;
+export default getColumnConfig;

package/dist/lib/components/CardsBox/helpers.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var getColumnConfig = function getColumnConfig(count, index, renderTwoColumnsInRow) {
+  var offset = renderTwoColumnsInRow ? '2' : undefined;
+  var offsetForEvenColumn = index % 2 ? undefined : offset;
+  var columnSize = {
+    all: '4',
+    tablet: '6',
+    mobile: '12'
+  };
+  switch (count) {
+    case 2:
+    case 4:
+      return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
+        leftOffsetWide: offsetForEvenColumn,
+        leftOffsetDesktop: offsetForEvenColumn
+      });
+    default:
+      return (0, _extends2["default"])({}, columnSize);
+  }
+};
+var _default = exports["default"] = getColumnConfig;

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Carousel } from '@megafon/ui-core';
+type CarouselPropsTypes = React.ComponentProps<typeof Carousel>;
+type DesktopSlidesPerView = 3 | 4;
+interface ICarouselBox extends CarouselPropsTypes {
+    /** Количество видимых слайдов на разрешении 1280 и выше */
+    desktopSlidesPerView?: DesktopSlidesPerView;
+}
+declare const CarouselBox: React.FC<ICarouselBox>;
+export default CarouselBox;

package/dist/lib/components/CarouselBox/CarouselBox.js

@@ -0,0 +1,55 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.index-of.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiCore = require("@megafon/ui-core");
+var _uiHelpers = require("@megafon/ui-helpers");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var getDefaultSlideSettings = function getDefaultSlideSettings(desktopSlidesPerView) {
+  return (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _uiHelpers.breakpoints.MOBILE_SMALL_START, {
+    slidesPerView: 1,
+    spaceBetween: 16
+  }), _uiHelpers.breakpoints.MOBILE_BIG_START, {
+    slidesPerView: 2,
+    spaceBetween: 20
+  }), _uiHelpers.breakpoints.DESKTOP_SMALL_START, {
+    slidesPerView: 3,
+    spaceBetween: 20
+  }), _uiHelpers.breakpoints.DESKTOP_MIDDLE_START, {
+    slidesPerView: desktopSlidesPerView,
+    spaceBetween: 20
+  });
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-carousel-box');
+var CarouselBox = function CarouselBox(_a) {
+  var children = _a.children,
+    slidesSettings = _a.slidesSettings,
+    _a$desktopSlidesPerVi = _a.desktopSlidesPerView,
+    desktopSlidesPerView = _a$desktopSlidesPerVi === void 0 ? 4 : _a$desktopSlidesPerVi,
+    props = __rest(_a, ["children", "slidesSettings", "desktopSlidesPerView"]);
+  var settings = slidesSettings || getDefaultSlideSettings(desktopSlidesPerView);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, /*#__PURE__*/React.createElement(_uiCore.Carousel, (0, _extends2["default"])({}, props, {
+    slidesSettings: settings
+  }), children));
+};
+var _default = exports["default"] = CarouselBox;

package/dist/lib/components/ChipsBox/ChipBox.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Chip } from '@megafon/ui-core';
+export type ChipBoxPropsType = Omit<React.ComponentProps<typeof Chip>, 'color' | 'checked'>;
+declare const ChipBox: React.FC<ChipBoxPropsType>;
+export default ChipBox;

package/dist/lib/components/ChipsBox/ChipBox.js

@@ -0,0 +1,17 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+/* eslint-disable react/no-unused-prop-types */
+
+var ChipBox = function ChipBox(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+var _default = exports["default"] = ChipBox;

package/dist/lib/components/ChipsBox/ChipsBox.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-chips-box__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.mfui-chips-box__panel{display:none}.mfui-chips-box__panel_current{display:block}

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Chips } from '@megafon/ui-core';
+import { ChipBoxPropsType } from './ChipBox';
+import './ChipsBox.scss';
+export type ChipsItemsPropsType = React.ComponentProps<typeof Chips>['items'];
+export type ChipBoxChildrenType = Array<React.ReactElement<ChipBoxPropsType>>;
+export type ChipsBoxPropsType = Omit<React.ComponentProps<typeof Chips>, 'items'> & {
+    /** Рендер содержимого только для текущего варианта */
+    renderOnlyCurrentPanel?: boolean;
+    /** Дочерние элементы */
+    children: ChipBoxChildrenType;
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+};
+declare const ChipsBox: React.FC<ChipsBoxPropsType>;
+export default ChipsBox;

package/dist/lib/components/ChipsBox/ChipsBox.js

@@ -0,0 +1,85 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.index-of.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.promise.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiCore = require("@megafon/ui-core");
+var _uiHelpers = require("@megafon/ui-helpers");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-chips-box');
+var ChipsBox = function ChipsBox(_a) {
+  var _b;
+  var _a$renderOnlyCurrentP = _a.renderOnlyCurrentPanel,
+    renderOnlyCurrentPanel = _a$renderOnlyCurrentP === void 0 ? false : _a$renderOnlyCurrentP,
+    _a$isScrollable = _a.isScrollable,
+    isScrollable = _a$isScrollable === void 0 ? true : _a$isScrollable,
+    rootRef = _a.rootRef,
+    children = _a.children,
+    value = _a.value,
+    onChange = _a.onChange,
+    chipsProps = __rest(_a, ["renderOnlyCurrentPanel", "isScrollable", "rootRef", "children", "value", "onChange"]);
+  var childArray = React.Children.toArray(children).filter(function (child) {
+    return /*#__PURE__*/React.isValidElement(child);
+  });
+  var chipsItems = childArray.map(function (child) {
+    return (0, _extends2["default"])((0, _extends2["default"])({}, child.props), {
+      children: null
+    });
+  });
+  var _React$useState = React.useState(value || ((_b = chipsItems[0]) === null || _b === void 0 ? void 0 : _b.id)),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    currentId = _React$useState2[0],
+    setCurrentId = _React$useState2[1];
+  var panels = childArray.map(function (child) {
+    var props = child.props;
+    var id = props.id,
+      panel = props.children;
+    var isCurrentPanel = currentId === id;
+    if (!panel || renderOnlyCurrentPanel && !isCurrentPanel) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      key: id,
+      className: cn('panel', {
+        current: isCurrentPanel
+      })
+    }, panel);
+  });
+  var handleChange = React.useCallback(function (id) {
+    setCurrentId(id);
+    onChange === null || onChange === void 0 ? void 0 : onChange(id);
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: rootRef,
+    className: cn()
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('wrapper')
+  }, /*#__PURE__*/React.createElement(_uiCore.Chips, (0, _extends2["default"])({}, chipsProps, {
+    value: currentId,
+    items: chipsItems,
+    isScrollable: isScrollable,
+    onChange: handleChange
+  }))), panels);
+};
+var _default = exports["default"] = ChipsBox;