@innovaccer/design-system 2.5.0 → 2.7.0-0

package/core/components/organisms/choiceList/ChoiceList.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Checkbox, Radio, Label } from '@/index';
 import { BaseProps } from '@/utils/types';
+import { ChangeEvent } from '@/common.type';
 
-export type Alignment = 'horizontal' | 'vertical';
-export type Size = 'regular' | 'tiny';
-type ChangeEvent = React.ChangeEvent<HTMLInputElement>;
+export type ChoiceListAlignment = 'horizontal' | 'vertical';
+export type ChoiceListSize = 'regular' | 'tiny';
 type noop = (ev: ChangeEvent) => void;
 
 export interface Choice {
@@ -43,12 +43,12 @@ export interface ChoiceListProps extends BaseProps {
    * Alignment in which the coices will be rendered
    * @default "vertical"
    */
-  alignment?: Alignment;
+  alignment?: ChoiceListAlignment;
   /**
    * Size of the `ChoiceList`
    * @default "regular"
    */
-  size?: Size;
+  size?: ChoiceListSize;
   /**
    * renders `checkbox` if `true` and renders `radio` if `false` of the `ChoiceList`
    * @default false
@@ -73,8 +73,8 @@ const renderCheckbox = (
   list: Choice[],
   handleOnChange: noop,
   ChoiceListDisabled: boolean,
-  size: Size,
-  alignment: Alignment,
+  size: ChoiceListSize,
+  alignment: ChoiceListAlignment,
   selected: string[]
 ) => {
   return list.map((item: Choice, checkboxIndex: number) => {
@@ -100,8 +100,8 @@ const renderRadio = (
   list: Choice[],
   handleOnChange: noop,
   ChoiceListDisabled: boolean,
-  size: Size,
-  alignment: Alignment,
+  size: ChoiceListSize,
+  alignment: ChoiceListAlignment,
   selected: string[]
 ) => {
   return list.map((item: Choice, radioIndex: number) => {
@@ -123,7 +123,7 @@ const renderRadio = (
   });
 };
 
-const getCheckboxClassName = (alignment: Alignment, index: number) => {
+const getCheckboxClassName = (alignment: ChoiceListAlignment, index: number) => {
   const ChoiceListCheckboxClass = classNames({
     [`ChoiceList-checkbox--${alignment}`]: true,
     ['ml-0']: index === 0 && alignment === 'horizontal',
@@ -132,7 +132,7 @@ const getCheckboxClassName = (alignment: Alignment, index: number) => {
   return ChoiceListCheckboxClass;
 };
 
-const getRadioClassName = (alignment: Alignment, index: number) => {
+const getRadioClassName = (alignment: ChoiceListAlignment, index: number) => {
   const ChoiceListRadioClass = classNames({
     [`ChoiceList-radio--${alignment}`]: true,
     ['ml-0']: index === 0 && alignment === 'horizontal',
@@ -187,7 +187,7 @@ export const ChoiceList = (props: ChoiceListProps) => {
     <>
       <fieldset className={ChoiceListClass} data-test="DesignSystem-ChoiceList-Wrapper">
         {title && title.trim() && <Label>{title.trim()}</Label>}
-        {!!allowMultiple ? (
+        {allowMultiple ? (
           <div className={`${alignment === 'horizontal' ? ChoiceHorizontalClass : ChoiceListVerticalClass}`}>
             {renderCheckbox(choices, handleOnChange, disabled, size, alignment, selected)}
           </div>

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

@@ -58,6 +58,14 @@ export type DatePickerProps = SharedProps & {
    * Close Popover on date selection
    */
   closeOnSelect: boolean;
+  /**
+   * Add or remove the select today's date chip from DatePicker Footer
+   */
+  showTodayDate?: boolean;
+  /**
+   * Element to be rendered inside Popover
+   */
+  children: React.ReactNode;
 };
 
 export interface DatePickerState {
@@ -182,13 +190,15 @@ export class DatePicker extends React.Component<DatePickerProps, DatePickerState
       onDateChange,
       closeOnSelect,
       size,
+      showTodayDate = true,
+      children = <></>,
       ...rest
     } = this.props;
 
     const { date } = this.state;
     const { months } = config;
     const todayDate = new Date(Date.now());
-    const todayMonthAndDate: string = `${months[todayDate.getMonth()]} ${todayDate.getDate()}`;
+    const todayMonthAndDate = `${months[todayDate.getMonth()]} ${todayDate.getDate()}`;
     const currDate = convertToDate(date, inputFormat, validators);
     const dateDisabledBefore = convertToDate(disabledBefore, inputFormat, validators);
     const dateDisabledAfter = convertToDate(disabledAfter, inputFormat, validators);
@@ -205,23 +215,28 @@ export class DatePicker extends React.Component<DatePickerProps, DatePickerState
     };
     return (
       <div>
-        <Calendar
-          {...rest}
-          size={size}
-          date={currDate}
-          disabledBefore={dateDisabledBefore}
-          disabledAfter={dateDisabledAfter}
-          onDateChange={this.onDateChangeHandler}
-        />
-        <div className="d-flex justify-content-center pb-6" data-test="DesignSystem-Select--TodaysDate-wrapper">
-          <Chip
-            label={`Today, ${todayMonthAndDate}`}
-            name="chip"
-            type="action"
-            disabled={isTodayDisabled()}
-            onClick={() => this.onDateChangeHandler(new Date())}
+        <div className="d-flex">
+          {children}
+          <Calendar
+            {...rest}
+            size={size}
+            date={currDate}
+            disabledBefore={dateDisabledBefore}
+            disabledAfter={dateDisabledAfter}
+            onDateChange={this.onDateChangeHandler}
           />
         </div>
+        {showTodayDate && (
+          <div className="d-flex justify-content-center pb-6" data-test="DesignSystem-Select--TodaysDate-wrapper">
+            <Chip
+              label={`Today, ${todayMonthAndDate}`}
+              name="chip"
+              type="action"
+              disabled={isTodayDisabled()}
+              onClick={() => this.onDateChangeHandler(new Date())}
+            />
+          </div>
+        )}
       </div>
     );
   }

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

@@ -61,11 +61,7 @@ export const Trigger = (props: TriggerProps) => {
       error={showError}
       mask={mask}
       value={
-        date
-          ? translateToString(inputFormat, date)
-          : init // @ts-ignore
-          ? InputMask.utils.getDefaultValue(mask, placeholderChar)
-          : ''
+        date ? translateToString(inputFormat, date) : init ? InputMask.utils.getDefaultValue(mask, placeholderChar) : ''
       }
       onChange={onChangeHandler}
       onBlur={onBlurHandler}