@megafon/ui-core 5.7.1 → 5.9.0

package/dist/es/components/Chips/components/ChipsDropdown.js

@@ -0,0 +1,101 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.find.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.values.js";
+import React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import Chip, { ChipColors, ChipPropType } from "../Chip";
+import "./ChipsDropdown.css";
+var cn = cnCreate('mfui-chips-dropdown');
+
+var ChipsDropdown = function ChipsDropdown(_ref) {
+  var color = _ref.color,
+      moreTitle = _ref.moreTitle,
+      _ref$items = _ref.items,
+      items = _ref$items === void 0 ? [] : _ref$items,
+      value = _ref.value,
+      onClick = _ref.onClick,
+      dataAttrs = _ref.dataAttrs;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isDropdownOpen = _React$useState2[0],
+      setIsDropdownOpen = _React$useState2[1];
+
+  var dropdownRef = React.useRef(null);
+  var listRef = React.useRef(null);
+  var currentItem = React.useMemo(function () {
+    return items.find(function (item) {
+      return item.id === value;
+    }) || {
+      id: '',
+      children: moreTitle
+    };
+  }, [items, value, moreTitle]);
+  var handleOutsideClick = React.useCallback(function (event) {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setIsDropdownOpen(false);
+    }
+  }, []);
+
+  var handleOpenItemList = function handleOpenItemList() {
+    setIsDropdownOpen(true);
+    document.addEventListener('mousedown', handleOutsideClick);
+  };
+
+  var handleItemClick = React.useCallback(function (item) {
+    return function (e) {
+      e.persist();
+      setIsDropdownOpen(false);
+      onClick(e, item.id);
+    };
+  }, [onClick]);
+  React.useEffect(function () {
+    if (!isDropdownOpen) {
+      document.removeEventListener('mousedown', handleOutsideClick);
+    }
+  }, [handleOutsideClick, isDropdownOpen]);
+  React.useEffect(function () {
+    return function () {
+      return document.removeEventListener('mousedown', handleOutsideClick);
+    };
+  }, [handleOutsideClick]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn(),
+    ref: dropdownRef
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(Chip, _extends({}, currentItem, {
+    className: cn('button'),
+    color: color,
+    checked: !!currentItem.id,
+    arrow: isDropdownOpen ? 'up' : 'down',
+    onClick: handleOpenItemList
+  })), isDropdownOpen && /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('list'),
+    ref: listRef
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list)), /*#__PURE__*/React.createElement("div", {
+    className: cn('list-inner')
+  }, items.map(function (item, key) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: key,
+      className: cn('list-item', {
+        'with-icon': !!item.icon
+      }),
+      onClick: handleItemClick(item),
+      onKeyDown: handleItemClick(item)
+    }, !!(item === null || item === void 0 ? void 0 : item.icon) && /*#__PURE__*/React.createElement("span", {
+      className: cn('icon')
+    }, item.icon), !!(item === null || item === void 0 ? void 0 : item.children) && item.children);
+  }))));
+};
+
+ChipsDropdown.propTypes = {
+  moreTitle: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  items: PropTypes.arrayOf(PropTypes.shape(ChipPropType).isRequired).isRequired,
+  color: PropTypes.oneOf(Object.values(ChipColors)).isRequired,
+  onClick: PropTypes.func.isRequired,
+  dataAttrs: PropTypes.objectOf(PropTypes.object)
+};
+export default ChipsDropdown;

package/dist/es/components/ContentView/ContentView.css

@@ -0,0 +1,61 @@
+.mfui-content-view {
+  min-width: 240px;
+  padding: 0 16px;
+  color: var(--content);
+  text-align: center;
+}
+.mfui-content-view__image {
+  max-width: 144px;
+  margin-bottom: 24px;
+  vertical-align: top;
+}
+.mfui-content-view__title {
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 28px;
+  letter-spacing: 0.5px;
+}
+.mfui-content-view__text {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+  margin-top: 4px;
+}
+.mfui-content-view__buttons {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 12px;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding-top: 32px;
+}
+.mfui-content-view_fullscreen {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  min-height: 100%;
+}
+.mfui-content-view_fullscreen .mfui-content-view__content {
+  margin-top: auto;
+}
+.mfui-content-view_fullscreen .mfui-content-view__buttons {
+  margin-top: auto;
+  padding-top: 24px;
+  padding-bottom: 24px;
+}

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

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import './ContentView.less';
+declare const imageMap: {
+    alarm: any;
+    empty: any;
+    error: any;
+    fail: any;
+    searchNoResult: any;
+    submit: any;
+    success: any;
+    update: any;
+    waiting: any;
+};
+declare type ElementType = {
+    /** Текст */
+    text?: string;
+    /** Атрибут href */
+    href?: string;
+    /** Атрибут target */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /** Обработчик клика */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+};
+export interface IContentViewProps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Заголовок */
+    title: string;
+    /** Тип встроенного изображения */
+    type?: keyof typeof imageMap;
+    /** Значение тега alt для изображения */
+    alt?: string;
+    /** Ссылка на изображение */
+    src?: string;
+    /** Параметры кнопки */
+    buttonParams?: ElementType;
+    /** Параметры ссылки */
+    linkParams?: ElementType;
+    /** Полноэкранный режим */
+    isFullscreen?: boolean;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        button?: Record<string, string>;
+        link?: Record<string, string>;
+    };
+}
+declare const ContentView: React.FC<IContentViewProps>;
+export default ContentView;

package/dist/es/components/ContentView/ContentView.js

@@ -0,0 +1,103 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.string.link.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import Button from "../Button/Button";
+import alarmImg from "./i/alarm.png";
+import emptyImg from "./i/empty.png";
+import errorImg from "./i/error.png";
+import failImg from "./i/fail.png";
+import searchNoResultImg from "./i/searchNoResult.png";
+import submitImg from "./i/submit.png";
+import successImg from "./i/success.png";
+import updateImg from "./i/update.png";
+import waitingImg from "./i/waiting.png";
+import "./ContentView.css";
+var imageMap = {
+  alarm: alarmImg,
+  empty: emptyImg,
+  error: errorImg,
+  fail: failImg,
+  searchNoResult: searchNoResultImg,
+  submit: submitImg,
+  success: successImg,
+  update: updateImg,
+  waiting: waitingImg
+};
+var cn = cnCreate('mfui-content-view');
+
+var ContentView = function ContentView(_ref) {
+  var className = _ref.className,
+      title = _ref.title,
+      type = _ref.type,
+      _ref$alt = _ref.alt,
+      alt = _ref$alt === void 0 ? '' : _ref$alt,
+      src = _ref.src,
+      buttonParams = _ref.buttonParams,
+      linkParams = _ref.linkParams,
+      isFullscreen = _ref.isFullscreen,
+      dataAttrs = _ref.dataAttrs,
+      children = _ref.children;
+  var imageSrc = type ? imageMap[type] : src;
+  var showButtons = !!(buttonParams === null || buttonParams === void 0 ? void 0 : buttonParams.text) || !!(linkParams === null || linkParams === void 0 ? void 0 : linkParams.text);
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      fullscreen: isFullscreen
+    }, [className])
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, /*#__PURE__*/React.createElement("img", {
+    className: cn('image'),
+    src: imageSrc,
+    alt: alt
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('title')
+  }, title), !!children && /*#__PURE__*/React.createElement("div", {
+    className: cn('text')
+  }, children)), showButtons && /*#__PURE__*/React.createElement("div", {
+    className: cn('buttons')
+  }, !!(buttonParams === null || buttonParams === void 0 ? void 0 : buttonParams.text) && /*#__PURE__*/React.createElement(Button, {
+    href: buttonParams.href,
+    target: buttonParams.target,
+    onClick: buttonParams.onClick,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    }
+  }, buttonParams.text), !!(linkParams === null || linkParams === void 0 ? void 0 : linkParams.text) && /*#__PURE__*/React.createElement(Button, {
+    type: "text",
+    href: linkParams.href,
+    target: linkParams.target,
+    onClick: linkParams.onClick,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link
+    }
+  }, linkParams.text)));
+};
+
+ContentView.propTypes = {
+  className: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(['waiting', 'error', 'submit', 'success', 'fail', 'update', 'alarm', 'empty', 'searchNoResult']),
+  alt: PropTypes.string,
+  src: PropTypes.string,
+  buttonParams: PropTypes.shape({
+    text: PropTypes.string,
+    href: PropTypes.string,
+    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+    onClick: PropTypes.func
+  }),
+  linkParams: PropTypes.shape({
+    text: PropTypes.string,
+    href: PropTypes.string,
+    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+    onClick: PropTypes.func
+  }),
+  isFullscreen: PropTypes.bool,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    button: PropTypes.objectOf(PropTypes.string.isRequired),
+    link: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
+};
+export default ContentView;

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

@@ -13,6 +13,8 @@ export declare const SearchItemsPaddings: {
 export declare type SearchItem = {
     /** Значение value элемента */
     value: string;
+    /** Ссылка элемента */
+    href?: string;
     /** Настраиваемое отображение элементов в выпадающем списке */
     searchView?: ElementOrString;
     /** Размер горизонтальных отступов элемента */

package/dist/es/components/Search/Search.js

@@ -152,8 +152,12 @@ var Search = function Search(_ref) {
       return;
     }
 
-    var chosenValue = items[index].value;
-    onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(chosenValue);
+    var chosenItem = items[index];
+    onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(chosenItem.value);
+
+    if (chosenItem.href) {
+      window.location.href = chosenItem.href;
+    }
   }, [disabled, items, onSubmit]);
   var handleSelectSubmit = React.useCallback(function (index) {
     return function () {
@@ -465,6 +469,7 @@ Search.propTypes = {
   hideIcon: PropTypes.bool,
   items: PropTypes.arrayOf(PropTypes.shape({
     value: PropTypes.string.isRequired,
+    href: PropTypes.string,
     searchView: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
     paddings: PropTypes.oneOf(Object.values(SearchItemsPaddings))
   }).isRequired),

package/dist/es/components/Sliders/Slider/Slider.css

@@ -0,0 +1,127 @@
+.mfui-slider {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.mfui-slider__head {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+  margin-bottom: 8px;
+}
+.mfui-slider__display-value {
+  margin-left: auto;
+}
+.mfui-slider__range-input {
+  height: 12px;
+  margin: 6px 0;
+  border-radius: 100px;
+  background: var(--spbSky0);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--brandGreen)), to(var(--brandGreen)));
+  background-image: linear-gradient(var(--brandGreen), var(--brandGreen));
+  background-repeat: no-repeat;
+  outline: none;
+  cursor: pointer;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.mfui-slider__range-input:focus {
+  outline: none;
+}
+.mfui-slider__range-input::-webkit-slider-thumb {
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+}
+.mfui-slider__range-input::-moz-range-thumb {
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+}
+.mfui-slider__range-input::-ms-thumb {
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+}
+.mfui-slider__range-input::-webkit-slider-runnable-track {
+  border: none;
+  background: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  -webkit-appearance: none;
+}
+.mfui-slider__range-input::-moz-range-track {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  -webkit-appearance: none;
+}
+.mfui-slider__range-input::-ms-track {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  -webkit-appearance: none;
+}
+.mfui-slider_disabled .mfui-slider__head {
+  color: var(--spbSky3);
+}
+.mfui-slider_disabled .mfui-slider__range-input {
+  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--spbSky1)), to(var(--spbSky1)));
+  background-image: linear-gradient(var(--spbSky1), var(--spbSky1));
+  cursor: default;
+}
+.mfui-slider_disabled .mfui-slider__range-input::-webkit-slider-thumb {
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  background-color: var(--spbSky2);
+}
+.mfui-slider_disabled .mfui-slider__range-input::-moz-range-thumb {
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  background-color: var(--spbSky2);
+}
+.mfui-slider_disabled .mfui-slider__range-input::-ms-thumb {
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  background-color: var(--spbSky2);
+}

package/dist/es/components/Sliders/Slider/Slider.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { DisplayValueType } from '../components/SliderDisplayValue/SliderDisplayValue';
+import { ScaleType } from '../components/SliderScale/SliderScale';
+import './Slider.less';
+export interface ISlider {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Текущее значение */
+    value?: number;
+    /** Минимальное значение */
+    minValue: number;
+    /** Максимальное значение */
+    maxValue: number;
+    /** Лейбл */
+    label?: string;
+    /** Тип выводимого значения */
+    displayValueType?: DisplayValueType;
+    /** Единица измерения выводимого значения */
+    displayValueUnit?: string;
+    /** Переводит компонент в контролируемое состояние */
+    isControlled?: boolean;
+    /** Шаг */
+    step?: number;
+    /** Тип встроенной шкалы */
+    scale?: ScaleType;
+    /** Кастомная шкала */
+    customScale?: string[];
+    /** Переводит компонент в выключенное состояние */
+    disabled?: boolean;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        input?: Record<string, string>;
+        rangeInput?: Record<string, string>;
+        scale?: Record<string, string>;
+    };
+    /** Обработчик изменения значения */
+    onChange?: (value: number) => void;
+}
+declare const Slider: React.FC<ISlider>;
+export default Slider;

package/dist/es/components/Sliders/Slider/Slider.js

@@ -0,0 +1,126 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.object.values.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import SliderDisplayValue, { DisplayValue } from "../components/SliderDisplayValue/SliderDisplayValue";
+import SliderScale, { Scale } from "../components/SliderScale/SliderScale";
+import { getRangeValue, getTrackSize } from "../helpers";
+import "./Slider.css";
+var cn = cnCreate('mfui-slider');
+
+var Slider = function Slider(_ref) {
+  var className = _ref.className,
+      label = _ref.label,
+      displayValueType = _ref.displayValueType,
+      displayValueUnit = _ref.displayValueUnit,
+      _ref$value = _ref.value,
+      outerRangeValue = _ref$value === void 0 ? 0 : _ref$value,
+      minValue = _ref.minValue,
+      maxValue = _ref.maxValue,
+      _ref$isControlled = _ref.isControlled,
+      isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
+      _ref$step = _ref.step,
+      step = _ref$step === void 0 ? 1 : _ref$step,
+      scale = _ref.scale,
+      customScale = _ref.customScale,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      dataAttrs = _ref.dataAttrs,
+      onChange = _ref.onChange;
+  var defaultRangeValue = outerRangeValue || minValue;
+
+  var _React$useState = React.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      rawInputValue = _React$useState2[0],
+      setRawInputValue = _React$useState2[1];
+
+  var _React$useState3 = React.useState(defaultRangeValue),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      innerRangeValue = _React$useState4[0],
+      setInnerRangeValue = _React$useState4[1];
+
+  var rangeValue = isControlled ? outerRangeValue : innerRangeValue;
+  var trackSize = getTrackSize(rangeValue, minValue, maxValue);
+  var showHead = !!label || !!displayValueType;
+
+  var handleInputChange = function handleInputChange(isRange) {
+    return function (e) {
+      var targetValue = e.target.value;
+      var newRangeValue = getRangeValue(targetValue, minValue, maxValue, step);
+      !isControlled && setInnerRangeValue(newRangeValue);
+      !isRange && setRawInputValue(targetValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(newRangeValue);
+    };
+  };
+
+  var handleInputBlur = function handleInputBlur() {
+    setRawInputValue(null);
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn({
+      disabled: disabled
+    }, [className])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), showHead && /*#__PURE__*/React.createElement("div", {
+    className: cn('head')
+  }, !!label && /*#__PURE__*/React.createElement("div", {
+    className: cn('label')
+  }, label), !!displayValueType && /*#__PURE__*/React.createElement(SliderDisplayValue, {
+    className: cn('display-value'),
+    value: rawInputValue !== null && rawInputValue !== void 0 ? rawInputValue : rangeValue,
+    displayValueType: displayValueType,
+    displayValueUnit: displayValueUnit,
+    disabled: disabled,
+    onChange: handleInputChange(false),
+    onBlur: handleInputBlur,
+    dataAttrs: {
+      input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input
+    }
+  })), /*#__PURE__*/React.createElement("input", _extends({
+    className: cn('range-input'),
+    type: "range",
+    value: rangeValue,
+    min: minValue,
+    max: maxValue,
+    step: step,
+    onChange: handleInputChange(true),
+    disabled: disabled,
+    style: {
+      backgroundSize: "".concat(trackSize, "% 100%")
+    }
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.rangeInput))), (!!scale || !!customScale) && /*#__PURE__*/React.createElement(SliderScale, {
+    minValue: minValue,
+    maxValue: maxValue,
+    scale: scale,
+    customScale: customScale,
+    disabled: disabled,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.scale
+    }
+  }));
+};
+
+Slider.propTypes = {
+  className: PropTypes.string,
+  value: PropTypes.number,
+  minValue: PropTypes.number.isRequired,
+  maxValue: PropTypes.number.isRequired,
+  label: PropTypes.string,
+  displayValueType: PropTypes.oneOf(Object.values(DisplayValue)),
+  displayValueUnit: PropTypes.string,
+  isControlled: PropTypes.bool,
+  step: PropTypes.number,
+  scale: PropTypes.oneOf(Object.values(Scale)),
+  customScale: PropTypes.arrayOf(PropTypes.string.isRequired),
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    input: PropTypes.objectOf(PropTypes.string.isRequired),
+    rangeInput: PropTypes.objectOf(PropTypes.string.isRequired),
+    scale: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
+};
+export default Slider;