intelicoreact 0.0.64 → 0.0.72

package/src/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/src/Atomic/FormElements/InputDateRange/InputDateRange.stories.js

@@ -1,4 +1,4 @@
-import React, { /*useEffect,*/ useState } from 'react';
+import React, { /* useEffect, */ useState } from 'react';
 import InputDateRange from './InputDateRange';
 import Table from '../Table/Table';
 
@@ -17,132 +17,45 @@ export default {
   }
 };
 
-const 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%' }
-    }
-  ]
-};
-
 const Template = args => {
-    const { dateRange, ...restOfProps } = args;
-    const [value, setValue] = useState(dateRange);
-
-    const [state, setState] = useState(tableData);
-
-    const rowsWithActions = state?.rows?.map(row => ({
-      ...row,
-      actions: row.isDeleted ? [{ type: 'undo' }] : [{ type: 'download' }, { type: 'edit' }, { type: 'delete' }]
-    }));
-
-    // useEffect(() => console.log(value), [value]);
-
-    // return <InputDateRange {...restOfProps} value={value} onChange={setValue} />;
-    return (
-      <div>
-        <div className="mb20">
-          <InputDateRange {...restOfProps} value={value} onChange={setValue} />
-        </div>
-        <div>
-          <Table header={state.header} rows={rowsWithActions} onChange={setState} />
-        </div>
+  const { dateRange, ...restOfProps } = args;
+  const [value, setValue] = useState(dateRange);
+  // useEffect(() => console.log(value), [value]);
+
+  // return <InputDateRange {...restOfProps} value={value} onChange={setValue} />;
+  return (
+    <div>
+      <div className="mb20">
+        <InputDateRange {...restOfProps} value={value} onChange={setValue} />
       </div>
-    );
+    </div>
+  );
 };
 
 export const InputDateRangeTemplate = Template.bind({});
 
 InputDateRangeTemplate.args = {
-    txt: {},
-    buttonsTypes: {
-      // apply: 'ellipse-apply',
-      cancel: 'bark-outline'
-    },
-    label: 'Date Range',
-    dateRange: { intervalKey: 'today'},
-    id: 'anyToggleButtonId',
-    className: 'anyExternalContainerClassName',
-    error: false,
-    disabled: false,
-    isHoverable: false,
-    // short: true,
-    isCompact: false,
-    // isFocused: true,
-    isIntervalsHidden: false,
-    isCompareHidden: true,
-    hideArrows: false,
-    isOptionsRight: false,
-    // limitRange,
-    // isUseAbs,
-    // absTooltip
+  txt: {},
+  buttonsTypes: {
+    // apply: 'ellipse-apply',
+    cancel: 'bark-outline'
+  },
+  label: 'Date Range',
+  dateRange: { intervalKey: 'today' },
+  id: 'anyToggleButtonId',
+  className: 'anyExternalContainerClassName',
+  error: false,
+  disabled: false,
+  isHoverable: false,
+  // short: true,
+  isCompact: false,
+  // isFocused: true,
+  isIntervalsHidden: false,
+  isCompareHidden: true,
+  hideArrows: false,
+  isOptionsRight: false,
+  isShortWeekNames: false
+  // limitRange,
+  // isUseAbs,
+  // absTooltip
 };

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

@@ -40,7 +40,8 @@ const Datepicker = props => {
         isCompareHidden,
         limitRange,
         handleItemClick,
-        setActiveInterval
+        setActiveInterval,
+        isShortWeekNames
     } = props;
     const { start = null, end = null, compare = false } = values;
     const startDateInputRef = useRef(null);
@@ -293,20 +294,23 @@ const Datepicker = props => {
         if (code === 27) doBlur(type, e);
     };
 
+    const startDateValue = startDate ? moment(startDate).format('ll') : '';
+    const endDateValue = endDate ? moment(endDate).subtract(1, 'm').format('ll') : '';
+
     return (
         <div className={cn('date-picker', className)}>
             <div className="date-picker__header">
                 <div className="date-picker__inputs-block">
                     <TextInput
                         dataTest="datepicker_start-date-input"
-                        className={cn('date-picker__date-input', { 'date-picker__date-input_active': hoverStatus === 'start' })}
-                        value={isStartFocused ? startDateInput : moment(startDate).format('ll')}
-                        disabled={!startDate}
+                        className={cn( { 'date-picker__date-input_active': hoverStatus === 'start' })}
+                        value={isStartFocused ? startDateInput : startDateValue}
                         onChange={value => setStartDateInput(handleDateInputOnChange(value))}
                         onFocus={handleStartDateFocus}
+                        disabled={!startDate}
                         onBlur={handleStartDateBlur}
                         onKeyUp={(code, e) => handleKeyPressed(code, e, 'start')}
-                        ref={startDateInputRef}
+                        //ref={startDateInputRef}
                         // mask={moment(startDate).format('L').replace(/[0-9]/g, '9')}
                     />
                     <SelectInput
@@ -321,14 +325,14 @@ const Datepicker = props => {
                     <div className="date-picker__inputs-separator date-picker__header--gray">—</div>
                     <TextInput
                         dataTest="datepicker_end-date-input"
-                        className={cn('date-picker__date-input', { 'date-picker__date-input_active': hoverStatus === 'end' })}
-                        value={isEndFocused ? endDateInput : moment(subtractDay(endDate)).format('ll')}
+                        className={cn({ 'date-picker__date-input_active': hoverStatus === 'end' })}
+                        value={isEndFocused ? endDateInput : endDateValue}
                         disabled={!endDate}
                         onChange={value => setEndDateInput(handleDateInputOnChange(value))}
                         onFocus={handleEndDateFocus}
                         onBlur={handleEndDateBlur}
                         onKeyUp={(code, e) => handleKeyPressed(code, e, 'end')}
-                        ref={endDateInputRef}
+                        //ref={endDateInputRef}
                     />
                     <SelectInput
                         dataTest="datepicker_end-hour-select-input"
@@ -362,6 +366,7 @@ const Datepicker = props => {
                         onClick={handleClick}
                         onHover={handleHover}
                         limitRange={limitRange}
+                        isShortWeekNames={isShortWeekNames}
                     />
                     <Calendar
                         className="date-picker__calendar"
@@ -374,6 +379,7 @@ const Datepicker = props => {
                         endPrevDate={endPrevDate}
                         onClick={handleClick}
                         onHover={handleHover}
+                        isShortWeekNames={isShortWeekNames}
                     />
                 </div>
             </div>

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

@@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react';
 import moment from 'moment-timezone';
 import cn from 'classnames';
 
-import {INTERVALS as intervals, CUSTOM_INTERVAL_KEY as customKey } from '../dependencies';
+import {INTERVALS as intervals, CUSTOM_INTERVAL_KEY as customKey, CUSTOM_INTERVAL_KEY_TEXT } from '../dependencies';
 
 import SelectItem from './SelectItem';
 import Datepicker from './Datepicker';
@@ -25,10 +25,11 @@ const OpenedPart = React.forwardRef((props, ref) => {
         isCompare,
         setIsCompare,
         toggleOff,
+        isShortWeekNames
     } = props;
-  
+
     const items = isCompact ? [...Object.keys(intervals)] : [...Object.keys(intervals), customKey];
-    
+
     const [activeInterval, setActiveInterval] = useState(actualValues.intervalKey);
 
     const handleItemClick = item => {
@@ -76,7 +77,7 @@ const OpenedPart = React.forwardRef((props, ref) => {
                             <SelectItem
                                 key={index}
                                 item={item}
-                                label={(txt?.labels && txt?.labels[item]) || intervals[item]?.label || item}
+                                label={(txt?.labels && txt?.labels[item]) || intervals[item]?.label || (item === customKey ? CUSTOM_INTERVAL_KEY_TEXT : item )}
                                 isActive={activeInterval === item}
                                 onItemClick={() => handleItemClick(item.value || item)}
                                 disabled={item === customKey}
@@ -103,6 +104,7 @@ const OpenedPart = React.forwardRef((props, ref) => {
                         isCompareHidden={isCompareHidden}
                         limitRange={limitRange}
                         setActiveInterval={setActiveInterval}
+                        isShortWeekNames={isShortWeekNames}
                     />
                 )}
             </div>

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

@@ -15,7 +15,7 @@ const SelectItem = ({ item, label, isActive, onItemClick, onMouseEnter, disabled
     >
         {isActive && (
             <svg className={cn('opened-part__intervals-item-icon-active')} width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M13.3333 4L5.99999 11.3333L2.66666 8" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M13.3333 4L5.99999 11.3333L2.66666 8" stroke="black" strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round"/>
             </svg>
         )}
         {label}