@megafon/ui-core 6.0.0-beta.3 → 6.0.0

package/dist/es/components/RadioButton/RadioButton.css

@@ -1 +1,120 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-radio-button__input{left:0;opacity:0;position:absolute;top:0}.mfui-radio-button__label{cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;outline:none;position:relative}.mfui-radio-button__custom-input,.mfui-radio-button__label{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-radio-button__custom-input{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:32px;justify-content:center;margin-right:6px;width:32px}.mfui-radio-button__custom-input:before{border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;content:"";display:block;height:22px;-webkit-transition:background-color,border-color;transition:background-color,border-color;-webkit-transition-duration:.3s;transition-duration:.3s;width:22px}.mfui-radio-button__label_dark{color:var(--content)}.mfui-radio-button__label_dark .mfui-radio-button__custom-input:before{background-color:var(--base);border:2px solid var(--spbSky2)}.mfui-radio-button__input_dark:checked+.mfui-radio-button__custom-input:before{border:7px solid var(--brandGreen)}@media (hover:hover){.mfui-radio-button__label_dark:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__custom-input:before{border-color:var(--buttonHoverGreen)}}.mfui-radio-button__label_dark:not(.mfui-radio-button__label_disabled):active .mfui-radio-button__custom-input:before{border-color:var(--buttonDown)}.mfui-radio-button__label_dark.mfui-radio-button__label_disabled{color:var(--spbSky3);cursor:default}.mfui-radio-button__label_dark.mfui-radio-button__label_disabled .mfui-radio-button__custom-input:before,.mfui-radio-button__label_dark.mfui-radio-button__label_disabled .mfui-radio-button__input:checked+.mfui-radio-button__custom-input:before{background-color:var(--spbSky1);border-color:var(--spbSky2)}.mfui-radio-button__label_light{color:var(--stcWhite)}.mfui-radio-button__label_light .mfui-radio-button__custom-input:before{background-color:var(--stcWhite);border:2px solid var(--stcWhite)}.mfui-radio-button__input_light:checked+.mfui-radio-button__custom-input:before{background-color:var(--stcBlack);border:7px solid var(--stcWhite)}@media (hover:hover){.mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__custom-input:before{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__input:checked+.mfui-radio-button__custom-input:before{background-color:var(--stcBlack)}}.mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):active .mfui-radio-button__custom-input:before{background-color:var(--buttonDown);border-color:var(--buttonDown)}.mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):active .mfui-radio-button__input:checked+.mfui-radio-button__custom-input:before{background-color:var(--stcWhite)}.mfui-radio-button__label_light.mfui-radio-button__label_disabled{color:var(--stcWhite50);cursor:default}.mfui-radio-button__label_light.mfui-radio-button__label_disabled .mfui-radio-button__custom-input:before,.mfui-radio-button__label_light.mfui-radio-button__label_disabled .mfui-radio-button__input:checked+.mfui-radio-button__custom-input:before{background-color:var(--stcWhite);border-color:var(--spbSky2)}.mfui-radio-button__text_size_small{font-size:12px;line-height:18px}.mfui-radio-button__text_size_medium{font-size:15px;font-weight:400;line-height:24px}
+.mfui-radio-button__input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+}
+.mfui-radio-button__label {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  outline: none;
+  cursor: pointer;
+}
+.mfui-radio-button__custom-input {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 32px;
+  height: 32px;
+  margin-right: 6px;
+}
+.mfui-radio-button__custom-input:before {
+  content: '';
+  display: block;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  -webkit-transition: background-color, border-color;
+  transition: background-color, border-color;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
+}
+.mfui-radio-button__label_dark {
+  color: var(--content);
+}
+.mfui-radio-button__label_dark .mfui-radio-button__custom-input:before {
+  border: 2px solid var(--spbSky2);
+  background-color: var(--base);
+}
+.mfui-radio-button__input_dark:checked + .mfui-radio-button__custom-input:before {
+  border: 7px solid var(--brandGreen);
+}
+@media (hover: hover) {
+  .mfui-radio-button__label_dark:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__custom-input:before {
+    border-color: var(--buttonHoverGreen);
+  }
+}
+.mfui-radio-button__label_dark:not(.mfui-radio-button__label_disabled):active .mfui-radio-button__custom-input:before {
+  border-color: var(--buttonDown);
+}
+.mfui-radio-button__label_dark.mfui-radio-button__label_disabled {
+  color: var(--spbSky3);
+  cursor: default;
+}
+.mfui-radio-button__label_dark.mfui-radio-button__label_disabled .mfui-radio-button__custom-input:before,
+.mfui-radio-button__label_dark.mfui-radio-button__label_disabled .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
+  border-color: var(--spbSky2);
+  background-color: var(--spbSky1);
+}
+.mfui-radio-button__label_light {
+  color: var(--stcWhite);
+}
+.mfui-radio-button__label_light .mfui-radio-button__custom-input:before {
+  border: 2px solid var(--stcWhite);
+  background-color: var(--stcWhite);
+}
+.mfui-radio-button__input_light:checked + .mfui-radio-button__custom-input:before {
+  border: 7px solid var(--stcWhite);
+  background-color: var(--stcBlack);
+}
+@media (hover: hover) {
+  .mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__custom-input:before {
+    border-color: var(--buttonHoverGrey);
+    background-color: var(--buttonHoverGrey);
+  }
+}
+@media (hover: hover) {
+  .mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
+    background-color: var(--stcBlack);
+  }
+}
+.mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):active .mfui-radio-button__custom-input:before {
+  border-color: var(--buttonDown);
+  background-color: var(--buttonDown);
+}
+.mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):active .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
+  background-color: var(--stcWhite);
+}
+.mfui-radio-button__label_light.mfui-radio-button__label_disabled {
+  color: var(--stcWhite50);
+  cursor: default;
+}
+.mfui-radio-button__label_light.mfui-radio-button__label_disabled .mfui-radio-button__custom-input:before,
+.mfui-radio-button__label_light.mfui-radio-button__label_disabled .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
+  border-color: var(--spbSky2);
+  background-color: var(--stcWhite);
+}
+.mfui-radio-button__text_size_small {
+  font-size: 12px;
+  line-height: 18px;
+}
+.mfui-radio-button__text_size_medium {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import './RadioButton.scss';
+import './RadioButton.less';
 export interface IRadioButtonProps {
     /** Тема кнопки */
     color?: 'dark' | 'light';

package/dist/es/components/RadioButton/RadioButton.js

@@ -1,41 +1,47 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import "core-js/modules/es.array.concat.js";
-import "core-js/modules/es.array.is-array.js";
 import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.array.is-array.js";
+import "core-js/modules/es.array.concat.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
 import "./RadioButton.css";
 var cn = cnCreate('mfui-radio-button');
+
 var RadioButton = function RadioButton(_ref) {
+  var _cn;
+
   var _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'dark' : _ref$color,
-    isChecked = _ref.isChecked,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    name = _ref.name,
-    value = _ref.value,
-    _ref$textSize = _ref.textSize,
-    textSize = _ref$textSize === void 0 ? 'medium' : _ref$textSize,
-    children = _ref.children,
-    inputRef = _ref.inputRef,
-    className = _ref.className,
-    _ref$classes = _ref.classes,
-    classes = _ref$classes === void 0 ? {} : _ref$classes,
-    dataAttrs = _ref.dataAttrs,
-    onChange = _ref.onChange;
+      color = _ref$color === void 0 ? 'dark' : _ref$color,
+      isChecked = _ref.isChecked,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      name = _ref.name,
+      value = _ref.value,
+      _ref$textSize = _ref.textSize,
+      textSize = _ref$textSize === void 0 ? 'medium' : _ref$textSize,
+      children = _ref.children,
+      inputRef = _ref.inputRef,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs,
+      onChange = _ref.onChange;
   var checkedProp = isChecked !== undefined ? {
     checked: isChecked
   } : {};
   var rootClassNames = Array.isArray(className) ? [].concat(_toConsumableArray(className), [classes.root]) : [className, classes.root];
+
   var handleChange = function handleChange() {
     return onChange === null || onChange === void 0 ? void 0 : onChange(value);
   };
+
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn(rootClassNames)
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("label", {
-    className: cn('label', _defineProperty(_defineProperty({}, color, true), "disabled", disabled), classes.label)
+    className: cn('label', (_cn = {}, _defineProperty(_cn, color, true), _defineProperty(_cn, "disabled", disabled), _cn), classes.label)
   }, /*#__PURE__*/React.createElement("input", _extends({}, checkedProp, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
     className: cn('input', _defineProperty({}, color, true)),
     type: "radio",
@@ -52,4 +58,30 @@ var RadioButton = function RadioButton(_ref) {
     }, classes.labelText)
   }), children)));
 };
+
+RadioButton.propTypes = {
+  color: PropTypes.oneOf(['dark', 'light']),
+  value: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  textSize: PropTypes.oneOf(['small', 'medium']),
+  disabled: PropTypes.bool,
+  isChecked: PropTypes.bool,
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    label: PropTypes.string,
+    customInput: PropTypes.string,
+    labelText: PropTypes.string
+  }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    input: PropTypes.objectOf(PropTypes.string.isRequired),
+    text: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  children: PropTypes.node,
+  onChange: PropTypes.func,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])])
+};
 export default RadioButton;

package/dist/es/components/Row/Row.css

@@ -1 +1,238 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-row{background-color:var(--base);border:none;border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}@media screen and (min-width:768px){.mfui-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-row{padding:24px 32px}}.mfui-row__icon-container,.mfui-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (max-width:767px){.mfui-row__icon-container{margin-left:-4px}}@media screen and (min-width:768px){.mfui-row__icon-container{height:48px;margin-right:12px;width:48px}}@media screen and (min-width:1024px){.mfui-row__icon-container{height:56px;margin-right:16px;width:56px}}.mfui-row__icon-container svg{fill:var(--content)}.mfui-row__icon-container_colored{background-color:var(--brandGreen20);border-radius:50%}.mfui-row__icon-container_colored svg{fill:var(--brandGreen)}.mfui-row__icon,.mfui-row__icon svg{height:32px;min-width:32px;width:32px}@media screen and (min-width:1024px){.mfui-row__icon,.mfui-row__icon svg{height:40px;min-width:40px;width:40px}}.mfui-row__header{margin-right:auto;padding-right:12px}@media screen and (max-width:767px){.mfui-row__title{font-size:15px;font-weight:500;line-height:24px}}.mfui-row__sub-title{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:2px}@media screen and (min-width:768px){.mfui-row__sub-title:not(.mfui-row_size_small){font-size:15px;line-height:24px;margin-top:4px}}.mfui-row__arrow{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}@media screen and (min-width:768px){.mfui-row__arrow{margin-left:4px}}@media screen and (min-width:1024px){.mfui-row__arrow{margin-left:12px}}.mfui-row__children{font-size:15px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-row__children{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}}@media screen and (min-width:768px) and (min-width:1280px){.mfui-row__children{font-size:20px;line-height:28px}}.mfui-row_view_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-row_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-row_pointer{cursor:pointer}.mfui-row_pointer.mfui-row_view_shadow:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-row_pointer.mfui-row_view_shadow:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-row_pointer.mfui-row_view_stroke:hover{background-color:var(--spbSky0)}.mfui-row_has-arrow{padding-right:8px}@media screen and (min-width:768px){.mfui-row_has-arrow{padding-right:16px}}@media screen and (min-width:1024px){.mfui-row_has-arrow{padding-right:20px}.mfui-row_has-arrow.mfui-row_size_small{padding-right:16px}}@media screen and (min-width:768px){.mfui-row_size_small{padding:16px 24px 16px 20px}}@media screen and (min-width:1024px){.mfui-row_size_small{padding:20px 24px}.mfui-row_size_small .mfui-row__sub-title{font-size:15px;line-height:24px;margin-top:4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-row_size_small .mfui-row__icon-container{height:40px;width:40px}.mfui-row_size_small .mfui-row__arrow{margin-right:-4px}}.mfui-row_size_small .mfui-row__children{font-size:15px;font-weight:500;line-height:24px}
+.mfui-row {
+  position: relative;
+  display: inline-block;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  padding: 12px 16px;
+  border: none;
+  border-radius: 12px;
+  color: var(--content);
+  text-decoration: none;
+  background-color: var(--base);
+  -webkit-transition: background-color, color, -webkit-box-shadow;
+  transition: background-color, color, -webkit-box-shadow;
+  transition: background-color, color, box-shadow;
+  transition: background-color, color, box-shadow, -webkit-box-shadow;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
+}
+@media screen and (min-width: 768px) {
+  .mfui-row {
+    padding: 20px 24px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-row {
+    padding: 24px 32px;
+  }
+}
+.mfui-row__wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.mfui-row__icon-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-right: 8px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-row__icon-container {
+    margin-left: -4px;
+  }
+}
+@media screen and (min-width: 768px) {
+  .mfui-row__icon-container {
+    width: 48px;
+    height: 48px;
+    margin-right: 12px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-row__icon-container {
+    width: 56px;
+    height: 56px;
+    margin-right: 16px;
+  }
+}
+.mfui-row__icon-container svg {
+  fill: var(--content);
+}
+.mfui-row__icon-container_colored {
+  border-radius: 50%;
+  background-color: var(--brandGreen20);
+}
+.mfui-row__icon-container_colored svg {
+  fill: var(--brandGreen);
+}
+.mfui-row__icon,
+.mfui-row__icon svg {
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-row__icon,
+  .mfui-row__icon svg {
+    width: 40px;
+    min-width: 40px;
+    height: 40px;
+  }
+}
+.mfui-row__header {
+  margin-right: auto;
+  padding-right: 12px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-row__title {
+    font-size: 15px;
+    line-height: 24px;
+    font-weight: 500;
+  }
+}
+.mfui-row__sub-title {
+  font-size: 12px;
+  line-height: 18px;
+  margin-top: 2px;
+  color: var(--spbSky3);
+}
+@media screen and (min-width: 768px) {
+  .mfui-row__sub-title:not(.mfui-row_size_small) {
+    font-size: 15px;
+    line-height: 24px;
+    margin-top: 4px;
+  }
+}
+.mfui-row__arrow {
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  fill: var(--spbSky3);
+}
+@media screen and (min-width: 768px) {
+  .mfui-row__arrow {
+    margin-left: 4px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-row__arrow {
+    margin-left: 12px;
+  }
+}
+.mfui-row__children {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+}
+@media screen and (min-width: 768px) {
+  .mfui-row__children {
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 24px;
+    letter-spacing: 0.5px;
+  }
+}
+@media screen and (min-width: 768px) and screen and (min-width: 1280px) {
+  .mfui-row__children {
+    font-size: 20px;
+    line-height: 28px;
+  }
+}
+.mfui-row_view_shadow {
+  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+.mfui-row_view_stroke {
+  border: 1px solid var(--spbSky2);
+  background-color: inherit;
+}
+.mfui-row_pointer {
+  cursor: pointer;
+}
+.mfui-row_pointer.mfui-row_view_shadow:hover {
+  -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
+}
+.mfui-row_pointer.mfui-row_view_shadow:hover:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 12px;
+  background-color: var(--stcWhite10);
+  pointer-events: none;
+}
+.mfui-row_pointer.mfui-row_view_stroke:hover {
+  background-color: var(--spbSky0);
+}
+.mfui-row_has-arrow {
+  padding-right: 8px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-row_has-arrow {
+    padding-right: 16px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-row_has-arrow {
+    padding-right: 20px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-row_has-arrow.mfui-row_size_small {
+    padding-right: 16px;
+  }
+}
+@media screen and (min-width: 768px) {
+  .mfui-row_size_small {
+    padding: 16px 24px 16px 20px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-row_size_small {
+    padding: 20px 24px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-row_size_small .mfui-row__sub-title {
+    font-size: 15px;
+    line-height: 24px;
+    margin-top: 4px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-row_size_small .mfui-row__icon-container {
+    width: 40px;
+    height: 40px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-row_size_small .mfui-row__arrow {
+    margin-right: -4px;
+  }
+}
+.mfui-row_size_small .mfui-row__children {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+}

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import './Row.scss';
+import React from 'react';
+import './Row.less';
 export interface IRowProps {
     /** Заголовок */
     title: string;

package/dist/es/components/Row/Row.js

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
-import * as React from 'react';
+import React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
 import Header from "../Header/Header";
 import Preloader from "../Preloader/Preloader";
 import "./Row.css";
+
 var ArrowRight = function ArrowRight(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
@@ -11,37 +13,41 @@ var ArrowRight = function ArrowRight(props) {
     d: "M12.5 20.8l4.8-4.8-4.8-4.8 1.6-1.7 6.4 6.5-6.4 6.5z"
   }));
 };
+
 var cn = cnCreate('mfui-row');
+
 var Row = function Row(_ref) {
   var title = _ref.title,
-    subTitle = _ref.subTitle,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'big' : _ref$size,
-    _ref$backgroundView = _ref.backgroundView,
-    backgroundView = _ref$backgroundView === void 0 ? 'shadow' : _ref$backgroundView,
-    icon = _ref.icon,
-    _ref$isIconColored = _ref.isIconColored,
-    isIconColored = _ref$isIconColored === void 0 ? false : _ref$isIconColored,
-    _ref$showArrow = _ref.showArrow,
-    showArrow = _ref$showArrow === void 0 ? false : _ref$showArrow,
-    _ref$showLoader = _ref.showLoader,
-    showLoader = _ref$showLoader === void 0 ? false : _ref$showLoader,
-    href = _ref.href,
-    _ref$target = _ref.target,
-    target = _ref$target === void 0 ? '_self' : _ref$target,
-    rel = _ref.rel,
-    onClick = _ref.onClick,
-    children = _ref.children,
-    className = _ref.className,
-    _ref$classes = _ref.classes,
-    classes = _ref$classes === void 0 ? {} : _ref$classes,
-    dataAttrs = _ref.dataAttrs;
+      subTitle = _ref.subTitle,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'big' : _ref$size,
+      _ref$backgroundView = _ref.backgroundView,
+      backgroundView = _ref$backgroundView === void 0 ? 'shadow' : _ref$backgroundView,
+      icon = _ref.icon,
+      _ref$isIconColored = _ref.isIconColored,
+      isIconColored = _ref$isIconColored === void 0 ? false : _ref$isIconColored,
+      _ref$showArrow = _ref.showArrow,
+      showArrow = _ref$showArrow === void 0 ? false : _ref$showArrow,
+      _ref$showLoader = _ref.showLoader,
+      showLoader = _ref$showLoader === void 0 ? false : _ref$showLoader,
+      href = _ref.href,
+      _ref$target = _ref.target,
+      target = _ref$target === void 0 ? '_self' : _ref$target,
+      rel = _ref.rel,
+      onClick = _ref.onClick,
+      children = _ref.children,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs;
   var ElementType = href ? 'a' : 'div';
   var isActive = !showLoader && (!!href || !!onClick);
   var isSmallSize = size === 'small';
+
   var handleClick = function handleClick(e) {
     onClick === null || onClick === void 0 ? void 0 : onClick(e);
   };
+
   return /*#__PURE__*/React.createElement(ElementType, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       size: size,
@@ -79,4 +85,23 @@ var Row = function Row(_ref) {
     }
   })));
 };
+
+Row.propTypes = {
+  title: PropTypes.string.isRequired,
+  subTitle: PropTypes.string,
+  size: PropTypes.oneOf(['big', 'small']),
+  backgroundView: PropTypes.oneOf(['shadow', 'stroke']),
+  icon: PropTypes.element,
+  isIconColored: PropTypes.bool,
+  showArrow: PropTypes.bool,
+  showLoader: PropTypes.bool,
+  href: PropTypes.string,
+  target: PropTypes.oneOf(['_self', '_blank']),
+  rel: PropTypes.string,
+  onClick: PropTypes.func,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  classes: PropTypes.objectOf(PropTypes.string),
+  dataAttrs: PropTypes.objectOf(PropTypes.object)
+};
 export default Row;