@innovaccer/design-system 2.5.0-2 → 2.5.1

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

@@ -13,18 +13,14 @@ const FunctionValue = jest.fn();
 describe('TimePicker component prop:inputFormat snapshot', () => {
   const mapper: Record<string, any> = {
     inputFormat: valueHelper(timeFormat, { required: true, iterate: true }),
-    onTimeChange: valueHelper(FunctionValue, { required: true })
+    onTimeChange: valueHelper(FunctionValue, { required: true }),
   };
 
   const testFunc = (props: Record<string, any>): void => {
     const attr = filterUndefined(props) as Props;
 
     it(testMessageHelper(attr), () => {
-      const { baseElement } = render(
-        <TimePicker
-          {...attr}
-        />
-      );
+      const { baseElement } = render(<TimePicker {...attr} />);
       expect(baseElement).toMatchSnapshot();
     });
   };
@@ -35,18 +31,14 @@ describe('TimePicker component prop:inputFormat snapshot', () => {
 describe('TimePicker component prop:outputFormat snapshot', () => {
   const mapper: Record<string, any> = {
     outputFormat: valueHelper(timeFormat, { required: true, iterate: true }),
-    onTimeChange: valueHelper(FunctionValue, { required: true })
+    onTimeChange: valueHelper(FunctionValue, { required: true }),
   };
 
   const testFunc = (props: Record<string, any>): void => {
     const attr = filterUndefined(props) as Props;
 
     it(testMessageHelper(attr), () => {
-      const { baseElement } = render(
-        <TimePicker
-          {...attr}
-        />
-      );
+      const { baseElement } = render(<TimePicker {...attr} />);
       expect(baseElement).toMatchSnapshot();
     });
   };
@@ -63,11 +55,7 @@ describe('TimePicker component prop:validators snapshot', () => {
     const attr = filterUndefined(props) as Props;
 
     it(testMessageHelper(attr), () => {
-      const { baseElement } = render(
-        <TimePicker
-          {...attr}
-        />
-      );
+      const { baseElement } = render(<TimePicker {...attr} />);
       expect(baseElement).toMatchSnapshot();
     });
   };
@@ -84,11 +72,7 @@ describe('TimePicker component prop:time snapshot', () => {
     const attr = filterUndefined(props) as Props;
 
     it(testMessageHelper(attr), () => {
-      const { baseElement } = render(
-        <TimePicker
-          {...attr}
-        />
-      );
+      const { baseElement } = render(<TimePicker {...attr} />);
       expect(baseElement).toMatchSnapshot();
     });
   };
@@ -97,14 +81,9 @@ describe('TimePicker component prop:time snapshot', () => {
 });
 
 describe('TimePicker component with different prop:time values', () => {
-
   timeValues.forEach((time, key) => {
-    it(`check time if prop:time is passed as ${typeof (time)} `, () => {
-      const { getByTestId } = render(
-        <TimePicker
-          time={time}
-        />
-      );
+    it(`check time if prop:time is passed as ${typeof time} `, () => {
+      const { getByTestId } = render(<TimePicker time={time} />);
       expect(getByTestId('DesignSystem-Input')).toHaveValue(expectedTimeValue[key]);
     });
   });
@@ -112,58 +91,33 @@ describe('TimePicker component with different prop:time values', () => {
 
 describe('TimePicker component with different prop:inputFormat values', () => {
   it('check format if prop:inputFormat is hh:mm', () => {
-    const { getByTestId } = render(
-      <TimePicker
-        time={timeValues[0]}
-        inputFormat="hh:mm"
-      />
-    );
+    const { getByTestId } = render(<TimePicker time={timeValues[0]} inputFormat="hh:mm" />);
     expect(getByTestId('DesignSystem-Input')).toHaveValue('20:44');
   });
 
   it('check format if prop:inputFormat is hh:mm AM', () => {
-    const { getByTestId } = render(
-      <TimePicker
-        time={timeValues[0]}
-        inputFormat="hh:mm AM"
-      />
-    );
+    const { getByTestId } = render(<TimePicker time={timeValues[0]} inputFormat="hh:mm AM" />);
     expect(getByTestId('DesignSystem-Input')).toHaveValue(expectedTimeValue[0]);
   });
 });
 
 describe('TimePicker component event handler', () => {
   it('onBlur Event handler ', () => {
-    const { getByTestId } = render(
-      <TimePicker
-        time={timeValues[1]}
-        onTimeChange={FunctionValue}
-      />
-    );
+    const { getByTestId } = render(<TimePicker time={timeValues[1]} onTimeChange={FunctionValue} />);
     const InputTestId = getByTestId('DesignSystem-Input');
     fireEvent.blur(InputTestId);
     expect(FunctionValue).toHaveBeenCalled();
   });
 
   it('onChange Event handler ', () => {
-    const { getByTestId } = render(
-      <TimePicker
-        time={timeValues[1]}
-        onTimeChange={FunctionValue}
-      />
-    );
+    const { getByTestId } = render(<TimePicker time={timeValues[1]} onTimeChange={FunctionValue} />);
     const InputTestId = getByTestId('DesignSystem-Input');
     fireEvent.change(InputTestId, { target: { value: timeValues[0] } });
     expect(FunctionValue).toHaveBeenCalled();
   });
 
   it('onClear Event handler ', () => {
-    const { getByTestId } = render(
-      <TimePicker
-        time={timeValues[1]}
-        onTimeChange={FunctionValue}
-      />
-    );
+    const { getByTestId } = render(<TimePicker time={timeValues[1]} onTimeChange={FunctionValue} />);
     const InputTestId = getByTestId('DesignSystem-Input--closeIcon');
     fireEvent.click(InputTestId);
     expect(FunctionValue).toHaveBeenCalled();
@@ -192,7 +146,7 @@ describe('TimePicker component placeholder', () => {
         time={timeValues[1]}
         inputFormat="hh:mm"
         inputOptions={{
-          placeholderChar: '*'
+          placeholderChar: '*',
         }}
       />
     );
@@ -206,12 +160,7 @@ describe('TimePicker component placeholder', () => {
 describe('TimePicker component with different time format', () => {
   it('check when inputFormat and outputFormat is different', () => {
     const { getByTestId } = render(
-      <TimePicker
-        time={timeValues[1]}
-        onTimeChange={FunctionValue}
-        inputFormat="hh:mm AM"
-        outputFormat="hh:mm"
-      />
+      <TimePicker time={timeValues[1]} onTimeChange={FunctionValue} inputFormat="hh:mm AM" outputFormat="hh:mm" />
     );
     const InputTestId = getByTestId('DesignSystem-Input');
     fireEvent.blur(InputTestId);

package/core/components/patterns/dateRangePicker/withCustomPopover.story.tsx

@@ -14,7 +14,7 @@ const customCode = `
         startDate,
         endDate,
         selected: 'currWeek',
-        monthNav: DateRangePicker.utils.getCurrentMonth()
+        monthNav: DateRangePicker.utils.getCurrentMonth(),
       };
 
       this.renderChildren = this.renderChildren.bind(this);
@@ -28,12 +28,11 @@ const customCode = `
     }
 
     onReset() {
-      const { startDate, endDate } = DateRangePicker.utils.getCurrentWeek();
       this.setState({
-        startDate,
-        endDate,
-        selected: 'currWeek',
-        monthNav: DateRangePicker.utils.getCurrentMonth(),
+        startDate:null,
+        endDate:null,
+        selected: "",
+        monthNav: DateRangePicker.utils.getCurrentMonth()
       });
     }
 
@@ -43,68 +42,80 @@ const customCode = `
       return (
         <div className="pt-5 px-6" style={{ borderRight: 'var(--border)' }}>
           <div className="d-flex align-items-center justify-content-between">
-            <Heading size="s" className="py-3">Range</Heading>
+           <Heading size="s" className="py-3">Range</Heading>
             <Icon name="refresh" onClick={this.onReset} />
           </div>
           <div className="pt-5">
-            <Radio
+            <Chip
               label="This week"
+              clearButton={false}
+              type="selection"
+              className="mb-6 d-block"
+              selected={selected === "currWeek"}
               name="rangePicker"
-              value="currWeek"
-              className="pb-6"
-              checked={selected === 'currWeek'}
-              onChange={this.onReset}
+              onClick={() => {
+                this.setState({
+                  selected: "currWeek",
+                  monthNav: DateRangePicker.utils.getCurrentMonth(),
+                  ...DateRangePicker.utils.getCurrentWeek()
+                });
+              }}
             />
-            <Radio
+            <Chip
               label="Last week"
-              name="rangePicker"
-              value="prevWeek"
-              className="pb-6"
-              checked={selected === 'prevWeek'}
-              onChange={() => {
+              clearButton={false}
+              type="selection"
+              className="mb-6 d-block"
+              selected={selected === 'prevWeek'}
+              name={"chip"}
+              onClick={() => {
                 this.setState({
-                  selected: 'prevWeek',
+                  selected: "prevWeek",
                   monthNav: DateRangePicker.utils.getCurrentMonth(),
                   ...DateRangePicker.utils.getPreviousWeek()
                 });
               }}
             />
-            <Radio
+            <Chip
               label="Last month"
+              clearButton={false}
+              type="selection"
+              className="mb-6  d-block"
+              selected={selected === 'prevMonth'}
               name="rangePicker"
-              value="prevMonth"
-              className="pb-6"
-              checked={selected === 'prevMonth'}
-              onChange={() => {
+              onClick={() => {
                 this.setState({
-                  selected: 'prevMonth',
+                  selected: "prevMonth",
                   monthNav: DateRangePicker.utils.getCurrentMonth() - 1,
                   ...DateRangePicker.utils.getPreviousMonth()
                 });
               }}
             />
-            <Radio
+            <Chip
               label="Last 90 days"
+              clearButton={false}
+              type="selection"
+              className="mb-6  d-block"
+              selected={selected === 'prev90Days'}
               name="rangePicker"
-              value="prev90Days"
-              className="pb-6"
-              checked={selected === 'prev90Days'}
-              onChange={() => {
+              onClick={() => {
                 this.setState({
-                  selected: 'prev90Days',
+                  selected: "prev90Days",
                   monthNav: DateRangePicker.utils.getCurrentMonth(),
                   ...DateRangePicker.utils.getPrevious90Days()
                 });
               }}
             />
-            <Radio
+             <Chip
               label="Custom"
+              clearButton={false}
+              type="selection"
+              className="mb-6  d-block"
+              selected={selected === 'custom'}
               name="rangePicker"
-              value="custom"
-              checked={selected === 'custom'}
-              onChange={() => {
+              onClick={() => {
                 this.setState({
-                  selected: 'custom',
+                  selected: "custom",
                   monthNav: DateRangePicker.utils.getCurrentMonth(),
                   ...DateRangePicker.utils.getCustomDates()
                 });

package/core/index.tsx

@@ -80,6 +80,6 @@ export { PageHeader } from './components/organisms/pageHeader';
 export { FileList } from './components/molecules/fileList';
 export { VerificationCodeInput } from './components/molecules/verificationCodeInput';
 export { InlineMessage } from './components/organisms/inlineMessage';
-
+export { ChoiceList } from './components/organisms/choiceList';
 // @ts-ignore
 export { version } from '../package.json';

package/core/index.type.tsx

@@ -78,3 +78,4 @@ export { PageHeaderProps } from './components/organisms/pageHeader';
 export { FileListProps } from './components/molecules/fileList';
 export { VerificationCodeInputProps } from './components/molecules/verificationCodeInput';
 export { InlineMessageProps } from './components/organisms/inlineMessage';
+export { ChoiceListProps } from './components/organisms/choiceList';

package/core/utils/OverlayManager.tsx

@@ -35,9 +35,7 @@ class OverlayManager {
   isTopOverlay(overlay: HTMLDivElement | null) {
     if (overlay === null) return;
 
-    return (
-      !!this.overlays.length && this.overlays[this.overlays.length - 1] === overlay
-    );
+    return !!this.overlays.length && this.overlays[this.overlays.length - 1] === overlay;
   }
 }
 

package/core/utils/__tests__/__snapshots__/TS.test.tsx.snap

@@ -2377,6 +2377,7 @@ exports[`TS renders children 1`] = `
   >
     <div
       class="Grid-head"
+      data-test="DesignSystem-GridHead-wrapper"
     >
       <div
         class="Grid-row Grid-row--head"
@@ -2584,6 +2585,7 @@ exports[`TS renders children 1`] = `
   </div>
   <div
     class="Table"
+    data-test="DesignSystem-Table-wrapper"
   >
     <div
       class="Table-grid"
@@ -2602,6 +2604,7 @@ exports[`TS renders children 1`] = `
   </div>
   <div
     class="Table"
+    data-test="DesignSystem-Table-wrapper"
   >
     <div
       class="Table-grid"
@@ -2611,6 +2614,7 @@ exports[`TS renders children 1`] = `
       >
         <div
           class="Grid-head"
+          data-test="DesignSystem-GridHead-wrapper"
         >
           <div
             class="Grid-row Grid-row--head"

package/core/utils/types.tsx

@@ -2,10 +2,9 @@ export type SingleOrArray<T> = T | T[];
 
 export type MakeRequired<T> = Exclude<T, null | undefined>;
 
-export type MakeOptional<T extends {}, K extends keyof any> = Omit<T, K> &
-  {
-    [OK in keyof T & K]?: T[OK];
-  };
+export type MakeOptional<T extends {}, K extends keyof any> = Omit<T, K> & {
+  [OK in keyof T & K]?: T[OK];
+};
 
 type ValidatorFn<K extends any[] = any[]> = (...values: K) => boolean;
 export type Validators = SingleOrArray<ValidatorFn>;

package/css/dist/index.css

@@ -1112,16 +1112,20 @@ body {
 }
 
 .Button--transparent:hover {
-	background: var(--secondary-light);
+    background: var(--secondary-light);
+}
+
+.Button--transparent:focus {
+    background: rgba(229, 229, 229, 0.2);
+    /* box-shadow: var(--shadow-spread) var(--secondary-shadow); */
 }
 
 .Button--transparent:active {
 	background: var(--secondary);
 }
 
-.Button--transparent:focus {
-    background: rgba(229, 229, 229, 0.2);
-    /* box-shadow: var(--shadow-spread) var(--secondary-shadow); */
+.Button--transparent:focus:active {
+	background: var(--secondary);
 }
 
 .Button--transparent:disabled {
@@ -1817,6 +1821,32 @@ body {
   cursor: pointer;
 }
 
+.ChoiceList {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.ChoiceList-checkbox--vertical {
+  margin-top: var(--spacing)
+}
+
+.ChoiceList-radio--vertical {
+  margin-top: var(--spacing)
+}
+
+.ChoiceList--alignHorizontal {
+  display: flex;
+}
+
+.ChoiceList-checkbox--horizontal {
+  margin-left: var(--spacing-xl)
+}
+
+.ChoiceList-radio--horizontal {
+  margin-left: var(--spacing-xl)
+}
+
 .Collapsible-wrapper {
   position: relative;
   z-index: 600;
@@ -2874,6 +2904,7 @@ body {
 }
 
 .Grid-cellGroup--pinned {
+    position: -webkit-sticky;
     position: sticky;
     z-index: 1;
 }
@@ -3784,22 +3815,20 @@ body {
 
 @-webkit-keyframes modal-open {
   from {
-    top: 124px;
+    top: 20px;
     opacity: 0;
   }
   to {
-    top: 104px;
     opacity: 100;
   }
 }
 
 @keyframes modal-open {
   from {
-    top: 124px;
+    top: 20px;
     opacity: 0;
   }
   to {
-    top: 104px;
     opacity: 100;
   }
 }
@@ -5561,6 +5590,46 @@ body {
 .bg-transparent {
   background-color: transparent !important;
 }
+.border {
+  border: var(--border) !important;
+}
+
+.border-top {
+  border-top: var(--border) !important;
+}
+
+.border-bottom {
+  border-bottom: var(--border) !important;
+}
+
+.border-right {
+  border-right: var(--border) !important;
+}
+
+.border-left {
+  border-left: var(--border) !important;
+}
+
+.border-0 {
+  border: 0 !important;
+}
+
+.border-top-0 {
+  border-top: 0 !important;
+}
+
+.border-right-0 {
+  border-right: 0 !important;
+}
+
+.border-bottom-0 {
+  border-bottom: 0 !important;
+}
+
+.border-left-0 {
+  border-left: 0 !important;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -6154,6 +6223,7 @@ body {
 }
 
 .position-sticky {
+  position: -webkit-sticky !important;
   position: sticky !important;
 }
 .w-25 {