@innovaccer/design-system 2.13.0 → 2.13.2

package/CHANGELOG.md

@@ -1,4 +1,37 @@
 
+## 2.13.1  (2022-06-24)
+
+### Highlights
+NA
+
+### Breaking changes
+NA
+
+### Migration guide
+NA
+
+### Deprecations
+NA
+
+### Features
+NA
+
+### Fixes
+*  fix(daterangepicker): fix error state on blur event (fcc00594)
+*  fix(daterangepicker): fix dateRangePicker input freeze (c98352c0)
+*  fix(popover): fix boundary element story (ca351ed5)
+*  fix(metricInput): fix default metric input story (0eb7e111)
+
+### Improvements
+NA
+
+### Documentation
+*  fix(docs): update distribution id for docs-dev (6e21010d)
+*  fix(docs): update distribution id for docs-dev (6c23c6ed)
+*  feat(docs): add component images (3f9e1fc4)
+*  feat(docs): add helptext component (4601c1e0)
+
+-------------------
 ## 2.13.0  (2022-06-21)
 
 ### Highlights

package/core/components/atoms/dropdown/DropdownList.tsx

@@ -3,7 +3,7 @@ import { scrollIntoView, _isEqual, _isSelectAllPresent } from './utility';
 import { Popover, Checkbox, Button, Text, Input } from '@/index';
 import { PopoverProps } from '@/index.type';
 import DropdownButton, { TriggerProps } from './DropdownButton';
-import Option, { ClickEvent, OptionRendererProps, OptionSchema } from './option';
+import Option, { OptionRendererProps, OptionSchema } from './option';
 import classNames from 'classnames';
 import Loading from './Loading';
 import { BaseProps, extractBaseProps } from '@/utils/types';
@@ -322,7 +322,7 @@ const DropdownList = (props: OptionsProps) => {
 
   const SelectAllClass = classNames(
     {
-      ['Option-checkbox']: !selected,
+      ['Option-checkbox']: true,
       ['Option-checkbox--active']: cursor === 0,
       ['OptionWrapper']: true,
     },
@@ -347,10 +347,6 @@ const DropdownList = (props: OptionsProps) => {
 
   const optionClickHandler = (item: any) => {
     props.onOptionSelect(item);
-    if (withCheckbox) {
-      const optionIsSelected = tempSelected.findIndex((option) => option.value === item.value) !== -1;
-      props.onSelect(item, !optionIsSelected);
-    }
     dropdownTriggerRef.current?.focus();
   };
 
@@ -512,11 +508,7 @@ const DropdownList = (props: OptionsProps) => {
           active={active}
           checkboxes={withCheckbox}
           menu={menu}
-          onClick={(e: ClickEvent) => {
-            e.preventDefault();
-            e.stopPropagation();
-            optionClickHandler(item);
-          }}
+          onClick={() => optionClickHandler(item)}
           onChange={(e) => props.onSelect(item, e.target.checked)}
           optionType={props.optionType}
         />

package/core/components/atoms/dropdown/option/CheckboxOption.tsx

@@ -5,7 +5,7 @@ import { Text, MetaList } from '@/index';
 import { MetaListProps } from '@/index.type';
 
 const CheckboxOption = (props: OptionTypeProps) => {
-  const { className, selected, optionData, onClickHandler, onChangeHandler, onUpdateActiveOption, dataTest } = props;
+  const { className, selected, optionData, onChangeHandler, onUpdateActiveOption, dataTest } = props;
   const { subInfo, label, disabled } = optionData;
 
   const renderSubInfo = (subInfo: string | MetaListProps) => {
@@ -39,19 +39,12 @@ const CheckboxOption = (props: OptionTypeProps) => {
   };
 
   return (
-    //eslint-disable-next-line
-    <div
-      onClick={onClickHandler}
-      className={className}
-      onMouseEnter={onUpdateActiveOption}
-      data-test={dataTest}
-      data-disabled={disabled}
-    >
+    <div className={className} onMouseEnter={onUpdateActiveOption} data-test={dataTest} data-disabled={disabled}>
       <Checkbox
-        onChange={onChangeHandler}
         label={label}
         disabled={disabled}
         checked={selected}
+        onChange={onChangeHandler}
         tabIndex={-1}
         className={`OptionCheckbox ${subInfo ? 'pb-0' : ''}`}
         data-test={`${dataTest}--Checkbox`}

package/core/components/atoms/dropdown/option/index.tsx

@@ -66,7 +66,7 @@ interface OptionProps extends OptionRendererProps {
   index: number;
   active?: boolean;
   menu?: boolean;
-  onClick?: (event: ClickEvent) => void;
+  onClick?: () => void;
   onChange?: (event: ChangeEvent) => void;
   updateActiveOption?: (index: number) => void;
 }
@@ -94,7 +94,7 @@ const Option = (props: OptionProps) => {
   });
 
   const CheckboxClassName = classNames({
-    ['Option-checkbox']: !selected,
+    ['Option-checkbox']: true,
     ['Option-checkbox--active']: active,
     ['OptionWrapper']: true,
   });
@@ -119,7 +119,7 @@ const Option = (props: OptionProps) => {
     e.stopPropagation();
     if (disabled) return;
 
-    if (onClick) onClick(e);
+    if (onClick) onClick();
   };
 
   const onChangeHandler = (e: ChangeEvent) => {

package/core/components/atoms/metricInput/__stories__/DefaultMetric.story.jsx

@@ -30,7 +30,7 @@ const customCode = `() => {
 
   return (
     <div className="d-flex align-items-center">
-      <Label htmlFor="metric-input" className="mr-5">
+      <Label htmlFor="metric-input" className="mr-5">  No. of Days </Label>
       <div style={{ width: 'var(--spacing-6)' }}>
         <MetricInput
           id="metric-input"

package/core/components/molecules/inputMask/InputMask.tsx

@@ -79,6 +79,7 @@ const InputMask = React.forwardRef<HTMLInputElement, InputMaskProps>((props, for
     onFocus,
     onClear,
     className,
+    id,
     ...rest
   } = props;
 
@@ -125,6 +126,10 @@ const InputMask = React.forwardRef<HTMLInputElement, InputMaskProps>((props, for
 
   React.useImperativeHandle(forwardRef, () => ref.current as HTMLInputElement);
 
+  React.useEffect(() => {
+    setValue(valueProp || '');
+  }, [valueProp]);
+
   React.useEffect(() => {
     setCursorPosition(newSelectionPos.current);
   }, [value]);
@@ -213,7 +218,7 @@ const InputMask = React.forwardRef<HTMLInputElement, InputMaskProps>((props, for
       enteredVal = inputVal.slice(start, end);
       updatedVal = insertAtIndex(enteredVal, start);
       let oldValue = value;
-      if (oldValue.length === 0) {
+      if (oldValue.length === 0 && id === 'parent-TimePicker') {
         oldValue = defaultPlaceholderValue;
       }
       insertedStringLength = updatedVal.length;

package/core/components/molecules/popover/__stories__/variants/boundaryElement.story.jsx

@@ -38,8 +38,8 @@ export const boundaryElement = () => {
   const ref = React.useRef<HTMLDivElement>(null);
 
   return (
-    <div ref={ref} style={{ height: 150, border: '1px dashed', padding: 20, overflow: 'auto' }}>
-      <Popover {...options} boundaryElement={ref}>
+    <div ref={ref.current} style={{ height: 150, border: '1px dashed', padding: 20, overflow: 'auto' }}>
+      <Popover {...options} boundaryElement={ref.current}>
         <div style={{ width: 100 }} className="mx-6 my-6">
           <Text>Popup</Text>
           <Button className="mt-4" appearance="primary" onClick={action('button clicked inside popover')}>

package/core/components/organisms/datePicker/__tests__/DatePicker.test.tsx

@@ -133,7 +133,7 @@ describe('renders DatePicker component Event Handlers ', () => {
     const { getByTestId } = render(<DatePicker onDateChange={FunctionValue} withInput={true} />);
     const input = getByTestId('DesignSystem-Input');
     fireEvent.blur(input);
-    expect(input).toHaveValue('');
+    expect(input).toHaveValue('__/__/____');
   });
   it('checks onFocus Event', () => {
     const { getByTestId } = render(<DatePicker onDateChange={FunctionValue} withInput={true} />);

package/core/components/organisms/dateRangePicker/SingleInputTrigger.tsx

@@ -76,6 +76,20 @@ export const SingleInputTrigger = (props: TriggerProps) => {
     });
   };
 
+  const getErrorState = (currentVal: string, siblingVal: string) => {
+    const hasNumber = /\d/;
+
+    if (currentVal && siblingVal && !currentVal.includes(placeholderChar) && siblingVal.includes(placeholderChar)) {
+      return true;
+    } else if (currentVal && hasNumber.test(currentVal) && currentVal.includes(placeholderChar)) {
+      return true;
+    } else if ((currentVal && !hasNumber.test(currentVal)) || !currentVal) {
+      return false;
+    }
+
+    return null;
+  };
+
   const onBlurHandler = (_e: React.ChangeEvent<HTMLInputElement>, val: string) => {
     setState({
       init: true,
@@ -85,6 +99,13 @@ export const SingleInputTrigger = (props: TriggerProps) => {
     const startVal = date[0];
     const endVal = date[1];
 
+    const startErr = getErrorState(startVal, endVal);
+    const endErr = getErrorState(endVal, startVal);
+
+    if (startErr !== null && endErr !== null) {
+      setState({ startError: startErr, endError: endErr });
+    }
+
     if (!startVal || startVal.includes(placeholderChar)) setState({ startDate: undefined });
     if (!endVal || endVal.includes(placeholderChar)) setState({ endDate: undefined });
   };
@@ -123,7 +144,7 @@ export const SingleInputTrigger = (props: TriggerProps) => {
           error={showError}
           caption={showError ? errorMessage : ''}
           validators={[inputValidator]}
-          clearOnEmptyBlur={false}
+          clearOnEmptyBlur={true}
         />
       </Column>
     </Row>

package/core/components/organisms/dateRangePicker/Trigger.tsx

@@ -66,12 +66,29 @@ export const Trigger = (props: TriggerProps) => {
     setState({
       init: true,
     });
+    const hasNumber = /\d/;
+
     if (type === 'start') {
       const { placeholderChar = '_' } = startInputOptions;
+
+      if (val && hasNumber.test(val) && val.includes(placeholderChar)) {
+        setState({ startError: true });
+      } else if ((val && !hasNumber.test(val)) || !val) {
+        setState({ startError: false });
+      }
+
       if (!val || val.includes(placeholderChar)) setState({ startDate: undefined });
     }
+
     if (type === 'end') {
       const { placeholderChar = '_' } = endInputOptions;
+
+      if (val && hasNumber.test(val) && val.includes(placeholderChar)) {
+        setState({ endError: true });
+      } else if ((val && !hasNumber.test(val)) || !val) {
+        setState({ endError: false });
+      }
+
       if (!val || val.includes(placeholderChar)) setState({ endDate: undefined });
     }
   };
@@ -145,7 +162,7 @@ export const Trigger = (props: TriggerProps) => {
           error={showStartError}
           caption={showStartError ? startErrorMessage : ''}
           validators={[inputValidator]}
-          clearOnEmptyBlur={false}
+          clearOnEmptyBlur={true}
         />
       </Column>
       <Column size={'6'} sizeXS={'12'} className="DateRangePicker-input DateRangePicker-input--endDate">
@@ -177,7 +194,7 @@ export const Trigger = (props: TriggerProps) => {
           error={showEndError}
           caption={showEndError ? endErrorMessage : ''}
           validators={[inputValidator]}
-          clearOnEmptyBlur={false}
+          clearOnEmptyBlur={true}
         />
       </Column>
     </Row>

package/core/components/organisms/timePicker/TimePicker.tsx

@@ -108,6 +108,7 @@ export const TimePicker = (props: TimePickerProps) => {
       onChange={onChangeHandler}
       onClear={onClearHandler}
       onBlur={onBlurHandler}
+      id="parent-TimePicker"
     />
   );
 };

package/core/utils/masks.ts

@@ -3,7 +3,7 @@ import { DatePickerProps, InputMaskProps } from '@/index.type';
 
 type DateFormat = DatePickerProps['inputFormat'];
 export const date: Record<DateFormat, Mask> = {
-  'dd/mm/yyyy': [/[0123]/, /\d/, '/', /\[01]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
+  'dd/mm/yyyy': [/[0123]/, /\d/, '/', /[01]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
   'mm/dd/yyyy': [/[01]/, /\d/, '/', /[0123]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
   'yyyy/mm/dd': [/\d/, /\d/, /\d/, /\d/, '/', /[01]/, /\d/, '/', /[0123]/, /\d/],
   'dd-mm-yyyy': [/[0123]/, /\d/, '-', /[01]/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
@@ -16,7 +16,7 @@ export const rangeDate: Record<DateFormat, Mask> = {
     /[0123]/,
     /\d/,
     '/',
-    /\[01]/,
+    /[01]/,
     /\d/,
     '/',
     /\d/,
@@ -29,7 +29,7 @@ export const rangeDate: Record<DateFormat, Mask> = {
     /[0123]/,
     /\d/,
     '/',
-    /\[01]/,
+    /[01]/,
     /\d/,
     '/',
     /\d/,

package/css/dist/index.css

@@ -2155,14 +2155,6 @@ body {
   padding-right: var(--spacing-l);
 }
 
-.Option:active {
-  background-color: var(--jal-lighter);
-}
-
-.Option > .Checkbox-input {
-  background-color: var(--white);
-}
-
 .OptionCheckbox {
   width: 100%;
   padding-left: var(--spacing-l);
@@ -2170,18 +2162,6 @@ body {
   padding-bottom: 6px;
 }
 
-.Option-checkbox > .OptionCheckbox > .Checkbox-outerWrapper {
-  background-color: var(--shadow-0);
-}
-
-.Option-checkbox:hover > .OptionCheckbox > .Checkbox-outerWrapper > .Checkbox-input ~ .Checkbox-wrapper {
-  border: var(--spacing-xs) solid var(--stone-dark);
-}
-
-.Option-checkbox:active > .OptionCheckbox > .Checkbox-outerWrapper > .Checkbox-input ~ .Checkbox-wrapper {
-  background-color: var(--secondary-light);
-}
-
 .Option--active,
 .Option-checkbox--active {
   background-color: var(--secondary-lightest);