intelicoreact 0.0.63 → 0.0.71

package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss

@@ -1,23 +1,24 @@
 :root {
-  --input-height: 26px;
+  --input-height: 28px;
   --label-line-height: 16px;
   // --border-color: rgba(0, 0, 0, 0.3);
-  --border-color: #e2e5ec;
+  --border-color: #E2E5EC;
   --calendar-range-point-color: #6b81dd;
-  --font-size: 12px;
+  --font-family: 'Roboto';
+  --font-size: 13px;
   --line-height: 20px;
-  --border-radius: 4px;
+  --border-radius: 3px;
 }
 
 .date-range-input {
-  position: relative;
-  width: 430px;
-  height: calc(var(--input-height) + var(--label-line-height));
+  /*position: relative;
+  width: 335px;
+  //height: calc(var(--input-height) + var(--label-line-height));
 
   display: flex;
   flex-flow: column nowrap;
   justify-content: flex-end;
-  align-items: flex-start;
+  align-items: flex-start;*/
 
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
@@ -26,6 +27,7 @@
 
   &__label {
     margin-bottom: 2px;
+    font-family: var(--font-family);
     font-size: var(--font-size);
     line-height: var(--label-line-height);
   }
@@ -48,11 +50,11 @@
     flex-flow: column nowrap;
     justify-content: flex-start;
     align-items: flex-start;
-  
+
     background: transparent;
     z-index: 1;
 
-    
+
     &_right-position {
       left: auto;
       right: 0;
@@ -70,7 +72,7 @@
     flex-flow: row nowrap;
     justify-content: flex-end;
     align-items: flex-start;
-  
+
     background: #FFFFFF;
     border: 1px solid var(--border-color);
   }
@@ -86,7 +88,7 @@
     width: 100%;
     height: 100%;
     padding: 0 10px;
-    
+
     display: flex;
     flex-direction: row;
     flex-flow: row nowrap;
@@ -95,10 +97,10 @@
 
     cursor: pointer;
   }
-  
+
   &__interval-key {
     display: inline-block;
-    margin-right: 10px;
+    margin-right: 5px;
     text-transform: capitalize;
     white-space: nowrap;
     text-align: left;
@@ -224,17 +226,21 @@
 
     text-transform: capitalize;
     white-space: nowrap;
+    font-style: normal;
+    font-weight: 300;
+    font-family: var(--font-family);
     font-size: var(--font-size);
     line-height: var(--line-height);
     cursor: pointer;
-   
+
     display: flex;
     flex-flow: row nowrap;
     justify-content: flex-start;
     align-items: center;
 
     &:hover {
-      background-color: rgba(128, 128, 128, 0.1);
+      // background-color: rgba(128, 128, 128, 0.1);
+      background-color: #F2F2F8;
     }
 
     &-icon-active {
@@ -265,8 +271,9 @@
     box-sizing: border-box;
     width: 100%;
     height: fit-content;
-    padding: 5px;
+    padding: 7.5px 15px;
     border: none;
+    background-color: #F7FAFC;
 
     display: flex;
     flex-flow: column nowrap;
@@ -285,6 +292,7 @@
     line-height: var(--line-height);
 
     &>div:not(.date-picker__inputs-separator) {
+      width: 110px;
       height: 100%;
       margin-right: 9px;
 
@@ -307,6 +315,11 @@
       }
     }
 
+    &>div.dropdown {
+      width: 80px;
+      border-radius: var(--border-radius);
+    }
+
     .date-picker__inputs-separator {
       margin-right: 9px;
     }
@@ -317,12 +330,13 @@
     width: fit-content;
     height: fit-content;
     padding: 3px 10px;
+    border-radius: var(--border-radius);
 
-    font-family: inherit;
-    font-style: inherit;
-    font-weight: inherit;
-    font-size: inherit;
-    line-height: inherit;
+    font-family: var(--font-family);
+    font-style: normal;
+    font-weight: 300;
+    font-size: var(--font-size);
+    line-height: var(--input-height);
     letter-spacing: inherit;
     color: inherit;
   }
@@ -331,7 +345,7 @@
     width: 70px;
     height: fit-content;
     border-radius: var(--border-radius);
-    
+
     &>.dropdown__trigger {
       width: 100%;
       height: 100%;
@@ -399,45 +413,49 @@
       box-sizing: border-box;
       width: fit-content;
       height: fit-content;
-    
+
       &-header {
         height: fit-content;
         margin-bottom: 12px;
 
         font-size: calc(var(--font-size) + 2px);
         line-height: calc(var(--line-height) + 4px);
-    
+
+        font-style: normal;
+        font-weight: 500;
+
         display: flex;
         justify-content: space-between;
         align-items: center;
-      
+
         &__title {
           text-align: center;
         }
-      
+
         &__next, &__prev {
+          background-color: transparent;
           cursor: pointer;
         }
       }
-    
+
       &__week {
         display: flex;
-    
+
         &-title {
           margin-bottom: 5px;
         }
       }
-    
+
       &__day {
         position: relative;
         box-sizing: border-box;
-        width: 36px;
-        height: 24px;
+        width: 29px;
+        height: 22px;
         margin: 1px 0;
         flex-grow: 1;
         flex-basis: 0;
         user-select: none;
-    
+
         display: flex;
         justify-content: center;
         align-items: center;
@@ -445,80 +463,80 @@
         font-size: var(--font-size);
         line-height: var(--line-height);
         text-align: center;
-    
+
         &--clickable {
           cursor: pointer;
-    
+
           &:hover {
             background: #E2E6F8;
           }
         }
-    
+
         &--disabled {
           cursor: default;
           opacity: 0.2;
           pointer-events: none;
-    
-          &:hover {
-            background: inherit;
-          }
-        }
-    
-        &--range-end {
-          background: #EAF2FF;
-          border: 1px solid #EAF2FF;
-          border-radius: 0 24px 24px 0;
-          color: var(--calendar-range-point-color);
-
-          &::before {
-            content: '';
-            display: block;
-            width: 100%;
-            height: 100%;
-            box-sizing: border-box;
-            position: absolute;
-            border: 1px solid var(--calendar-range-point-color);
-            border-radius: 24px;
-            pointer-events: none;
-          }
 
           &:hover {
-            color: #F8FBFF;
-            background-color: var(--calendar-range-point-color);
-            border-radius: 24px;
+            background: inherit;
           }
         }
 
-        &--range-start {
+        // &--range-end {
+        //   background: #EAF2FF;
+        //   border: 1px solid #EAF2FF;
+        //   border-radius: 0 24px 24px 0;
+        //   color: var(--calendar-range-point-color);
+
+        //   &::before {
+        //     content: '';
+        //     display: block;
+        //     width: 100%;
+        //     height: 100%;
+        //     box-sizing: border-box;
+        //     position: absolute;
+        //     border: 1px solid var(--calendar-range-point-color);
+        //     border-radius: 24px;
+        //     pointer-events: none;
+        //   }
+
+        //   &:hover {
+        //     color: #F8FBFF;
+        //     background-color: var(--calendar-range-point-color);
+        //     border-radius: 24px;
+        //   }
+        // }
+
+        &--range-start, &--range-end {
           background: var(--calendar-range-point-color);
           border: 1px solid var(--calendar-range-point-color);
           box-sizing: border-box;
-          border-radius: 24px;
+          border-radius: var(--border-radius);
           color: #F8FBFF;
-    
+
           &:hover {
             background: var(--calendar-range-point-color);
             color: #F8FBFF;
           }
         }
-    
+
         &--range-inside {
           background: #EAF2FF;
         }
-    
+
         &--prev-range-end {
           background: #E2E5EC;
           border-radius: var(--border-radius);
         }
-    
+
         &--prev-range-inside {
           background: #F7F8FA;
         }
-    
+
         &--title {
-          font-size: calc(var(--font-size) + 2px);
-          line-height: calc(var(--line-height) + 4px);
-    
+          font-size: var(--font-size);
+          line-height: var(--line-height);
+
           &:hover {
             background: inherit;
           }
@@ -533,6 +551,7 @@
     padding: 8px 16px;
     border-radius: 0 0 var(--border-radius) 0;
     border: none;
+    background-color: #F7FAFC;
 
     display: flex;
     flex-flow: row nowrap;
@@ -552,12 +571,18 @@
 
   &__button {
     text-transform: capitalize;
-    
+
     &:first-child {
+      width: 80px;
       margin-right: 16px;
+      background-color: #FFFFFF;
+      border: 1px solid #A6ACB1;
+      border-radius: var(--border-radius);
     }
 
     &:last-child {
+      width: 110px;
+      border-radius: var(--border-radius);
     }
   }
 

package/dist/Atomic/FormElements/InputDateRange/InputDateRange.stories.js

@@ -19,6 +19,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _InputDateRange = _interopRequireDefault(require("./InputDateRange"));
 
+var _Table = _interopRequireDefault(require("../Table/Table"));
+
 var _excluded = ["dateRange"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -46,7 +48,8 @@ var Template = function Template(args) {
   var _useState = (0, _react.useState)(dateRange),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       value = _useState2[0],
-      setValue = _useState2[1]; // return <InputDateRange {...restOfProps} value={value} onChange={setValue} />;
+      setValue = _useState2[1]; // useEffect(() => console.log(value), [value]);
+  // return <InputDateRange {...restOfProps} value={value} onChange={setValue} />;
 
 
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
@@ -80,7 +83,8 @@ InputDateRangeTemplate.args = {
   isIntervalsHidden: false,
   isCompareHidden: true,
   hideArrows: false,
-  isOptionsRight: false // limitRange,
+  isOptionsRight: false,
+  isShortWeekNames: false // limitRange,
   // isUseAbs,
   // absTooltip
 

package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js

@@ -66,7 +66,8 @@ var Datepicker = function Datepicker(props) {
       isCompareHidden = props.isCompareHidden,
       limitRange = props.limitRange,
       handleItemClick = props.handleItemClick,
-      setActiveInterval = props.setActiveInterval;
+      setActiveInterval = props.setActiveInterval,
+      isShortWeekNames = props.isShortWeekNames;
   var _values$start = values.start,
       start = _values$start === void 0 ? null : _values$start,
       _values$end = values.end,
@@ -403,8 +404,8 @@ var Datepicker = function Datepicker(props) {
     onBlur: handleStartDateBlur,
     onKeyUp: function onKeyUp(code, e) {
       return handleKeyPressed(code, e, 'start');
-    },
-    ref: startDateInputRef // mask={moment(startDate).format('L').replace(/[0-9]/g, '9')}
+    } //ref={startDateInputRef}
+    // mask={moment(startDate).format('L').replace(/[0-9]/g, '9')}
 
   }), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
     dataTest: "datepicker_start-hour-select-input",
@@ -432,8 +433,8 @@ var Datepicker = function Datepicker(props) {
     onBlur: handleEndDateBlur,
     onKeyUp: function onKeyUp(code, e) {
       return handleKeyPressed(code, e, 'end');
-    },
-    ref: endDateInputRef
+    } //ref={endDateInputRef}
+
   }), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
     dataTest: "datepicker_end-hour-select-input",
     className: (0, _classnames.default)('date-picker__hour-select-input'),
@@ -461,7 +462,8 @@ var Datepicker = function Datepicker(props) {
     endPrevDate: endPrevDate,
     onClick: handleClick,
     onHover: handleHover,
-    limitRange: limitRange
+    limitRange: limitRange,
+    isShortWeekNames: isShortWeekNames
   }), /*#__PURE__*/_react.default.createElement(_RangeCalendar.default, {
     className: "date-picker__calendar",
     date: date2,
@@ -472,7 +474,8 @@ var Datepicker = function Datepicker(props) {
     startPrevDate: startPrevDate,
     endPrevDate: endPrevDate,
     onClick: handleClick,
-    onHover: handleHover
+    onHover: handleHover,
+    isShortWeekNames: isShortWeekNames
   }))), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('date-picker__footer', {
       'date-picker__footer_once-element': isCompareHidden

package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js

@@ -55,7 +55,8 @@ var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       setCurrent = props.setCurrent,
       isCompare = props.isCompare,
       setIsCompare = props.setIsCompare,
-      toggleOff = props.toggleOff;
+      toggleOff = props.toggleOff,
+      isShortWeekNames = props.isShortWeekNames;
 
   var items = isCompact ? (0, _toConsumableArray2.default)(Object.keys(_dependencies.INTERVALS)) : [].concat((0, _toConsumableArray2.default)(Object.keys(_dependencies.INTERVALS)), [_dependencies.CUSTOM_INTERVAL_KEY]);
 
@@ -118,7 +119,7 @@ var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
       key: index,
       item: item,
-      label: (txt === null || txt === void 0 ? void 0 : txt.labels) && (txt === null || txt === void 0 ? void 0 : txt.labels[item]) || ((_intervals$item = _dependencies.INTERVALS[item]) === null || _intervals$item === void 0 ? void 0 : _intervals$item.label) || item,
+      label: (txt === null || txt === void 0 ? void 0 : txt.labels) && (txt === null || txt === void 0 ? void 0 : txt.labels[item]) || ((_intervals$item = _dependencies.INTERVALS[item]) === null || _intervals$item === void 0 ? void 0 : _intervals$item.label) || (item === _dependencies.CUSTOM_INTERVAL_KEY ? _dependencies.CUSTOM_INTERVAL_KEY_TEXT : item),
       isActive: activeInterval === item,
       onItemClick: function onItemClick() {
         return handleItemClick(item.value || item);
@@ -146,7 +147,8 @@ var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onCancel: toggleOff,
     isCompareHidden: isCompareHidden,
     limitRange: limitRange,
-    setActiveInterval: setActiveInterval
+    setActiveInterval: setActiveInterval,
+    isShortWeekNames: isShortWeekNames
   })));
 });
 

package/dist/Atomic/FormElements/InputDateRange/components/SelectItem.js

@@ -36,9 +36,9 @@ var SelectItem = function SelectItem(_ref) {
   }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M13.3333 4L5.99999 11.3333L2.66666 8",
     stroke: "black",
-    "stroke-width": "1.33333",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
+    strokeWidth: "1.33333",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
   })), label);
 };
 

package/dist/Atomic/FormElements/InputDateRange/dependencies.js

@@ -202,11 +202,9 @@ var getActualDateRange = function getActualDateRange(inputDateRange) {
   var _INTERVALS$inputDateR, _INTERVALS$inputDateR2, _INTERVALS$inputDateR3, _INTERVALS$inputDateR4;
 
   var actualIntervalKey = function () {
-    if (inputDateRange.intervalKey && inputDateRange.intervalKey !== CUSTOM_INTERVAL_KEY) {
+    if (inputDateRange.intervalKey && Object.keys(INTERVALS).includes(inputDateRange.intervalKey)) {
       return inputDateRange.intervalKey;
-    }
-
-    if (inputDateRange.start && inputDateRange.end) {
+    } else if (inputDateRange.start && inputDateRange.end) {
       for (var _i = 0, _Object$entries = Object.entries(INTERVALS); _i < _Object$entries.length; _i++) {
         var _Object$entries$_i = (0, _slicedToArray2.default)(_Object$entries[_i], 2),
             key = _Object$entries$_i[0],
@@ -216,16 +214,26 @@ var getActualDateRange = function getActualDateRange(inputDateRange) {
           return key;
         }
       }
+
+      return CUSTOM_INTERVAL_KEY;
     }
 
-    return null;
+    return ALL_TIME_KEY;
   }();
 
+  if (actualIntervalKey === ALL_TIME_KEY) return {
+    intervalKey: ALL_TIME_KEY,
+    start: null,
+    end: null,
+    compare: inputDateRange.compare,
+    startPrevDate: null,
+    endPrevDate: null
+  };
   var actualValues = {
     // intervalKey: inputDateRange.intervalKey || customIntervalKey,
     intervalKey: actualIntervalKey || CUSTOM_INTERVAL_KEY,
-    start: inputDateRange.intervalKey === CUSTOM_INTERVAL_KEY ? inputDateRange === null || inputDateRange === void 0 ? void 0 : inputDateRange.start : (_INTERVALS$inputDateR = INTERVALS[inputDateRange.intervalKey]) === null || _INTERVALS$inputDateR === void 0 ? void 0 : (_INTERVALS$inputDateR2 = _INTERVALS$inputDateR.start()) === null || _INTERVALS$inputDateR2 === void 0 ? void 0 : _INTERVALS$inputDateR2.toDate(),
-    end: inputDateRange.intervalKey === CUSTOM_INTERVAL_KEY ? inputDateRange === null || inputDateRange === void 0 ? void 0 : inputDateRange.end : (_INTERVALS$inputDateR3 = INTERVALS[inputDateRange.intervalKey]) === null || _INTERVALS$inputDateR3 === void 0 ? void 0 : (_INTERVALS$inputDateR4 = _INTERVALS$inputDateR3.end()) === null || _INTERVALS$inputDateR4 === void 0 ? void 0 : _INTERVALS$inputDateR4.toDate(),
+    start: inputDateRange.intervalKey === CUSTOM_INTERVAL_KEY ? inputDateRange === null || inputDateRange === void 0 ? void 0 : inputDateRange.start : (_INTERVALS$inputDateR = INTERVALS[inputDateRange.intervalKey]) === null || _INTERVALS$inputDateR === void 0 ? void 0 : (_INTERVALS$inputDateR2 = _INTERVALS$inputDateR.start()) === null || _INTERVALS$inputDateR2 === void 0 ? void 0 : _INTERVALS$inputDateR2.format('YYYY-MM-DDTHH:mm'),
+    end: inputDateRange.intervalKey === CUSTOM_INTERVAL_KEY ? inputDateRange === null || inputDateRange === void 0 ? void 0 : inputDateRange.end : (_INTERVALS$inputDateR3 = INTERVALS[inputDateRange.intervalKey]) === null || _INTERVALS$inputDateR3 === void 0 ? void 0 : (_INTERVALS$inputDateR4 = _INTERVALS$inputDateR3.end()) === null || _INTERVALS$inputDateR4 === void 0 ? void 0 : _INTERVALS$inputDateR4.format('YYYY-MM-DDTHH:mm'),
     compare: inputDateRange.compare
   };
 

package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.js

@@ -43,7 +43,8 @@ var RangeCalendar = function RangeCalendar(props) {
       onHover = _props$onHover === void 0 ? function () {} : _props$onHover,
       startPrevDate = props.startPrevDate,
       endPrevDate = props.endPrevDate,
-      limitRange = props.limitRange;
+      limitRange = props.limitRange,
+      isShortWeekNames = props.isShortWeekNames;
 
   var _useState = (0, _react.useState)({}),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -125,6 +126,10 @@ var RangeCalendar = function RangeCalendar(props) {
     setDate((0, _momentTimezone.default)(date).add(1, 'month').toDate());
   };
 
+  var getFormatedWeekName = function getFormatedWeekName(input) {
+    return isShortWeekNames ? input.charAt(0) : input;
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('range-calendar', className)
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -147,7 +152,7 @@ var RangeCalendar = function RangeCalendar(props) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "day-of-week_".concat(dayOfWeek),
       className: "range-calendar__day range-calendar__day--title"
-    }, (0, _momentTimezone.default)().weekday(dayOfWeek).format('dd').charAt(0));
+    }, getFormatedWeekName((0, _momentTimezone.default)().weekday(dayOfWeek).format('dd')));
   })), Object.keys(days).map(function (week, index) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "week_".concat(index),

package/dist/Atomic/FormElements/Table/Table.scss

@@ -1,4 +1,4 @@
-@import '../../../scss/anme/anme-vars';
+@import '~anme/scss/anme-vars';
 
 .table-header {
     &--weight-actions {

package/dist/Atomic/FormElements/Textarea/Textarea.scss

@@ -1,5 +1,5 @@
 @import "../../../scss/vars";
-@import "../../../scss/anme/anme-mixins";
+@import "~anme/scss/anme-mixins";
 
 .textarea {
   border: 1px solid #e2e5ec;

package/dist/Atomic/MainMenu/MainMenu.scss

@@ -1,5 +1,5 @@
-@import "../../scss/anme/anme-vars";
-@import "../../scss/anme/anme-mixins";
+@import "~anme/scss/anme-vars";
+@import "~anme/scss/anme-mixins";
 
 .main-menu {
   display: flex;

package/dist/Atomic/UI/Accordion/Accordion.scss

@@ -1,5 +1,5 @@
-@import '../../../scss/anme/anme-vars';
-@import '../../../scss/anme/anme-mixins';
+@import '~anme/scss/anme-vars';
+@import '~anme/scss/anme-mixins';
 
 .accordion {
     &--item {

package/dist/Atomic/UI/Arrow/Arrow.js

@@ -37,8 +37,7 @@ var Arrow = function Arrow(_ref) {
       setColor = _useState2[1];
 
   (0, _react.useEffect)(function () {
-    if (ref.current) {
-      setColor((0, _utils.getStyles)(ref.current, 'color'));
+    if (ref.current) {//setColor(getStyles(ref.current, 'color'));
     }
 
     ;
@@ -58,9 +57,9 @@ var Arrow = function Arrow(_ref) {
   }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M15 18L9 12L15 6",
     stroke: color,
-    "stroke-width": "2",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
   })) : /*#__PURE__*/_react.default.createElement("svg", {
     width: "24",
     height: "24",
@@ -70,9 +69,9 @@ var Arrow = function Arrow(_ref) {
   }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M9 18L15 12L9 6",
     stroke: color,
-    "stroke-width": "2",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
   })));
 };
 

package/dist/Atomic/UI/Calendar/Calendar.js

@@ -34,7 +34,8 @@ function _default(props) {
       allowPrev = _props$allowPrev === void 0 ? true : _props$allowPrev,
       _props$allowNext = props.allowNext,
       allowNext = _props$allowNext === void 0 ? true : _props$allowNext,
-      params = props.params;
+      params = props.params,
+      className = props.className;
   var minDate = params.minDate,
       maxDate = params.maxDate;
 
@@ -112,7 +113,7 @@ function _default(props) {
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "calendar"
+    className: "calendar ".concat(className)
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "calendar-header"
   }, /*#__PURE__*/_react.default.createElement("div", {

package/dist/Atomic/UI/Calendar/Calendar.stories.js

@@ -13,7 +13,7 @@ var _Calendar = _interopRequireDefault(require("./Calendar"));
 
 global.lng = 'en';
 var _default = {
-  title: 'UI/Calendar',
+  title: 'Calendar',
   component: _Calendar.default
 };
 exports.default = _default;
@@ -33,5 +33,6 @@ CalendarTemplate.args = {
   params: {},
   setDate: function setDate() {
     return null;
-  }
+  },
+  className: ''
 };