intelicoreact 0.0.64 → 0.0.72

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

@@ -11,8 +11,6 @@ exports.InputDateRangeTemplate = exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -29,10 +27,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 global.lng = 'en';
 var _default = {
   title: 'Form Elements/InputDateRange',
@@ -46,171 +40,24 @@ var _default = {
   }
 };
 exports.default = _default;
-var tableData = {
-  header: [{
-    id: 1,
-    label: 'state'
-  }, {
-    id: 2,
-    label: 'Tags'
-  }, {
-    id: 3,
-    label: 'status'
-  }, {
-    id: 4,
-    label: 'loanAmountApproved'
-  }, {
-    id: 5,
-    label: 'loanAmountRejected'
-  }, {
-    id: 6,
-    label: 'approveRate'
-  }, {
-    id: 7,
-    label: 'actions',
-    type: 'actions'
-  }],
-  rows: [{
-    id: 1,
-    link: {
-      label: 'CA',
-      link: '#s'
-    },
-    tags: [{
-      label: 'Label 1'
-    }],
-    status: {
-      value: '90',
-      status: 'active'
-    },
-    loanAmountApproved: {
-      value: '$70,000'
-    },
-    loanAmountRejected: {
-      value: '$30,000'
-    },
-    approveRate: {
-      value: '70%'
-    }
-  }, {
-    id: 2,
-    link: {
-      label: 'NY',
-      link: '#s'
-    },
-    advancedTags: [{
-      labelLeft: 'home',
-      labelRight: 'hoods',
-      active: 3,
-      pause: 1,
-      merchants: 5
-    }, {
-      labelRight: 'jewelry',
-      active: 3,
-      pause: 1,
-      merchants: 5
-    }, {
-      labelLeft: 'home',
-      labelRight: 'improvement',
-      active: 0,
-      pause: 0,
-      warnLeft: true,
-      warnLeftMsg: 'landerNotIncluded',
-      warnRightMsg: 'noMerchants'
-    }, {
-      labelLeft: 'home',
-      labelRight: 'hoods',
-      active: 3,
-      pause: 1,
-      merchants: 5
-    }, {
-      labelRight: 'jewelry',
-      active: 3,
-      pause: 1,
-      merchants: 5
-    }],
-    status: {
-      label: 'Active',
-      className: 'color--green-haze'
-    },
-    loanAmountApproved: {
-      value: '$3,000'
-    },
-    loanAmountRejected: {
-      value: '$7,000'
-    },
-    approveRate: {
-      value: '30%'
-    }
-  }, {
-    id: 3,
-    link: {
-      label: 'NH',
-      link: '#s'
-    },
-    tags: [{
-      label: 'Label 1'
-    }, {
-      label: 'Label 2'
-    }, {
-      label: 'Label 3'
-    }],
-    status: {
-      status: 'error'
-    },
-    loanAmountApproved: {
-      value: '$70,000'
-    },
-    loanAmountRejected: {
-      value: '$30,000'
-    },
-    approveRate: {
-      value: '70%'
-    }
-  }]
-};
 
 var Template = function Template(args) {
-  var _state$rows;
-
   var dateRange = args.dateRange,
       restOfProps = (0, _objectWithoutProperties2.default)(args, _excluded);
 
   var _useState = (0, _react.useState)(dateRange),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       value = _useState2[0],
-      setValue = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(tableData),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      state = _useState4[0],
-      setState = _useState4[1];
-
-  var rowsWithActions = state === null || state === void 0 ? void 0 : (_state$rows = state.rows) === null || _state$rows === void 0 ? void 0 : _state$rows.map(function (row) {
-    return _objectSpread(_objectSpread({}, row), {}, {
-      actions: row.isDeleted ? [{
-        type: 'undo'
-      }] : [{
-        type: 'download'
-      }, {
-        type: 'edit'
-      }, {
-        type: 'delete'
-      }]
-    });
-  }); // useEffect(() => console.log(value), [value]);
+      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", {
     className: "mb20"
   }, /*#__PURE__*/_react.default.createElement(_InputDateRange.default, (0, _extends2.default)({}, restOfProps, {
     value: value,
     onChange: setValue
-  }))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Table.default, {
-    header: state.header,
-    rows: rowsWithActions,
-    onChange: setState
-  })));
+  }))));
 };
 
 var InputDateRangeTemplate = Template.bind({});
@@ -236,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,
@@ -383,6 +384,8 @@ var Datepicker = function Datepicker(props) {
     if (code === 27) doBlur(type, e);
   };
 
+  var startDateValue = startDate ? (0, _momentTimezone.default)(startDate).format('ll') : '';
+  var endDateValue = endDate ? (0, _momentTimezone.default)(endDate).subtract(1, 'm').format('ll') : '';
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('date-picker', className)
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -391,20 +394,20 @@ var Datepicker = function Datepicker(props) {
     className: "date-picker__inputs-block"
   }, /*#__PURE__*/_react.default.createElement(_Input.default, {
     dataTest: "datepicker_start-date-input",
-    className: (0, _classnames.default)('date-picker__date-input', {
+    className: (0, _classnames.default)({
       'date-picker__date-input_active': hoverStatus === 'start'
     }),
-    value: isStartFocused ? startDateInput : (0, _momentTimezone.default)(startDate).format('ll'),
-    disabled: !startDate,
+    value: isStartFocused ? startDateInput : startDateValue,
     onChange: function onChange(value) {
       return setStartDateInput(handleDateInputOnChange(value));
     },
     onFocus: handleStartDateFocus,
+    disabled: !startDate,
     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",
@@ -420,10 +423,10 @@ var Datepicker = function Datepicker(props) {
     className: "date-picker__inputs-separator date-picker__header--gray"
   }, "\u2014"), /*#__PURE__*/_react.default.createElement(_Input.default, {
     dataTest: "datepicker_end-date-input",
-    className: (0, _classnames.default)('date-picker__date-input', {
+    className: (0, _classnames.default)({
       'date-picker__date-input_active': hoverStatus === 'end'
     }),
-    value: isEndFocused ? endDateInput : (0, _momentTimezone.default)(subtractDay(endDate)).format('ll'),
+    value: isEndFocused ? endDateInput : endDateValue,
     disabled: !endDate,
     onChange: function onChange(value) {
       return setEndDateInput(handleDateInputOnChange(value));
@@ -432,8 +435,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 +464,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 +476,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
   })));
 });