@megafon/ui-shared 2.0.0-beta.24 → 2.0.0-beta.240

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

@@ -0,0 +1,26 @@
+import React, { Ref } from 'react';
+import './Container.less';
+export declare const BackgroundColors: {
+    readonly DEFAULT: "default";
+    readonly LIGHT_GRAY: "light-gray";
+    readonly GRAY: "gray";
+    readonly GREEN: "green";
+    readonly PURPLE: "purple";
+};
+declare type BackgroundColorType = typeof BackgroundColors[keyof typeof BackgroundColors];
+declare type Props = {
+    /** Атрибут корневого тега */
+    id?: string;
+    /** Ссылка на корневой элемент */
+    rootRef?: Ref<HTMLDivElement>;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Цвет фона */
+    backgroundColor?: BackgroundColorType;
+    /** Отключить отступ сверху */
+    disablePaddingTop?: boolean;
+    /** Отключить отступ снизу */
+    disablePaddingBottom?: boolean;
+};
+declare const Container: React.FC<Props>;
+export default Container;

package/dist/es/components/Container/Container.js

@@ -0,0 +1,46 @@
+import "core-js/modules/es.object.values";
+import React from 'react';
+import PropTypes from 'prop-types';
+import "./Container.css";
+import { ContentArea } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
+export var BackgroundColors = {
+  DEFAULT: 'default',
+  LIGHT_GRAY: 'light-gray',
+  GRAY: 'gray',
+  GREEN: 'green',
+  PURPLE: 'purple'
+};
+var cn = cnCreate('mfui-beta-container');
+
+var Container = function Container(_ref) {
+  var _ref$backgroundColor = _ref.backgroundColor,
+      backgroundColor = _ref$backgroundColor === void 0 ? 'default' : _ref$backgroundColor,
+      rootRef = _ref.rootRef,
+      id = _ref.id,
+      className = _ref.className,
+      children = _ref.children,
+      disablePaddingTop = _ref.disablePaddingTop,
+      disablePaddingBottom = _ref.disablePaddingBottom;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn({
+      'bg-color': backgroundColor,
+      'disable-padding-top': disablePaddingTop,
+      'disable-padding-bottom': disablePaddingBottom
+    }, [className]),
+    ref: rootRef,
+    id: id
+  }, /*#__PURE__*/React.createElement(ContentArea, null, children));
+};
+
+Container.propTypes = {
+  id: PropTypes.string,
+  className: PropTypes.string,
+  backgroundColor: PropTypes.oneOf(Object.values(BackgroundColors)),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  disablePaddingTop: PropTypes.bool,
+  disablePaddingBottom: PropTypes.bool
+};
+export default Container;

package/dist/es/components/DownloadLinks/DownloadLink.css

@@ -0,0 +1,36 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-beta-download-link {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.mfui-beta-download-link__icon {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  margin-right: 22px;
+}
+@media screen and (max-width: 1023px) {
+  .mfui-beta-download-link__icon {
+    width: 32px;
+    height: 32px;
+  }
+}
+.mfui-beta-download-link__icon-svg {
+  width: inherit;
+  height: inherit;
+}
+.mfui-beta-download-link__info {
+  margin: 0;
+  font-size: 12px;
+  line-height: 16px;
+  color: rgba(51, 51, 51, 0.5);
+  text-transform: uppercase;
+}

package/dist/es/components/DownloadLinks/DownloadLink.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import './DownloadLink.less';
+export interface IDownloadLink {
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Адресы ссылки */
+    href: string;
+    /** Текст ссылки */
+    text: string;
+    /** Расширение файла */
+    extension: string;
+    /** Размер файла */
+    fileSize: string;
+    /** Дополнительный класс для компонента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        link?: string;
+    };
+    /** Обработчик клика по ссылке */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+}
+declare const DownloadLink: React.FC<IDownloadLink>;
+export default DownloadLink;

package/dist/es/components/DownloadLinks/DownloadLink.js

@@ -0,0 +1,62 @@
+import "core-js/modules/es.array.concat";
+import "core-js/modules/es.string.link";
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { TextLink } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
+import "./DownloadLink.css";
+
+var DownloadIcon = function DownloadIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 40 40"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M21 6v14l2.68-4 1.65 1-4.44 6.74h-1.77L14.68 17l1.65-1L19 20V6zM8 20H6a14 14 0 0028 0h-2a12 12 0 01-24 0z"
+  }));
+};
+
+var cn = cnCreate('mfui-beta-download-link');
+
+var DownloadLink = function DownloadLink(_ref) {
+  var href = _ref.href,
+      text = _ref.text,
+      extension = _ref.extension,
+      fileSize = _ref.fileSize,
+      onClick = _ref.onClick,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      rootRef = _ref.rootRef;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn([className, classes.root]),
+    ref: rootRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('icon')
+  }, /*#__PURE__*/React.createElement(DownloadIcon, {
+    className: cn('icon-svg')
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TextLink, {
+    className: cn('link', [classes.link]),
+    href: href,
+    onClick: onClick,
+    download: true
+  }, text), /*#__PURE__*/React.createElement("p", {
+    className: cn('info')
+  }, "".concat(extension).concat(extension && fileSize ? ',' : '', " ").concat(fileSize))));
+};
+
+DownloadLink.propTypes = {
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  href: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+  extension: PropTypes.string.isRequired,
+  fileSize: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    link: PropTypes.string
+  }),
+  onClick: PropTypes.func
+};
+export default DownloadLink;

package/dist/es/components/DownloadLinks/DownloadLinks.css

@@ -0,0 +1,36 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-beta-download-links__column:nth-child(n + 4) {
+    margin-top: 24px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-beta-download-links__column:nth-child(n + 3) {
+    margin-top: 24px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-download-links__column:not(:first-child) {
+    margin-top: 24px;
+  }
+}
+@media screen and (min-width: 768px) {
+  .mfui-beta-download-links_count_2 .mfui-beta-download-links__column:nth-child(n + 2) {
+    margin-top: 24px;
+  }
+}
+@media screen and (min-width: 768px) {
+  .mfui-beta-download-links_count_3 .mfui-beta-download-links__column:nth-child(n + 3),
+  .mfui-beta-download-links_count_4 .mfui-beta-download-links__column:nth-child(n + 3) {
+    margin-top: 24px;
+  }
+}
+.mfui-beta-download-links__item:not(:first-child) {
+  margin-top: 24px;
+}

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import './DownloadLinks.less';
+import { IDownloadLink } from './DownloadLink';
+interface IDownloadLinks {
+    /** Выстраивать ссылки в одну колонку вне зависимости от количества */
+    inOneColumn?: boolean;
+    children: Array<React.ReactElement<IDownloadLink>> | React.ReactElement<IDownloadLink>;
+}
+declare const DownloadLinks: React.FC<IDownloadLinks>;
+export default DownloadLinks;

package/dist/es/components/DownloadLinks/DownloadLinks.js

@@ -0,0 +1,75 @@
+import "core-js/modules/es.array.map";
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { Grid, GridColumn } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
+import "./DownloadLinks.css";
+
+var getColumnConfig = function getColumnConfig(itemsCount) {
+  switch (true) {
+    case itemsCount <= 2:
+      {
+        return {
+          all: '7',
+          mobile: '12'
+        };
+      }
+
+    case itemsCount <= 4:
+      {
+        return {
+          all: '6',
+          mobile: '12'
+        };
+      }
+
+    default:
+      {
+        return {
+          wide: '4',
+          desktop: '4',
+          tablet: '6',
+          mobile: '12'
+        };
+      }
+  }
+};
+
+var cn = cnCreate('mfui-beta-download-links');
+
+var DownloadLinks = function DownloadLinks(_ref) {
+  var _ref$inOneColumn = _ref.inOneColumn,
+      inOneColumn = _ref$inOneColumn === void 0 ? false : _ref$inOneColumn,
+      children = _ref.children;
+
+  if (inOneColumn) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn()
+    }, React.Children.map(children, function (child) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: cn('item')
+      }, child);
+    }));
+  }
+
+  var itemsCount = React.Children.count(children);
+  var columnConfig = getColumnConfig(itemsCount);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn({
+      count: "".concat(itemsCount)
+    })
+  }, /*#__PURE__*/React.createElement(Grid, {
+    guttersLeft: "medium"
+  }, React.Children.map(children, function (child) {
+    return /*#__PURE__*/React.createElement(GridColumn, _extends({}, columnConfig, {
+      className: cn('column')
+    }), child);
+  })));
+};
+
+DownloadLinks.propTypes = {
+  inOneColumn: PropTypes.bool,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element]).isRequired
+};
+export default DownloadLinks;