From bd9e38c0544faeb8ab8ec9c98c89ad0b6ba60610 Mon Sep 17 00:00:00 2001
From: Lloyd Francis <lloydaf@gmail.com>
Date: Wed, 13 Oct 2021 14:37:56 +0200
Subject: [PATCH 1/2] fix: adding disabled state for datepicker, resolves #180

---
 src/components/Datepicker/DatepickerRangeInput.spec.tsx  | 9 +++++++++
 src/components/Datepicker/DatepickerRangeInput.tsx       | 7 +++++++
 src/components/Datepicker/DatepickerSingleInput.spec.tsx | 6 ++++++
 src/components/Datepicker/DatepickerSingleInput.tsx      | 6 ++++++
 4 files changed, 28 insertions(+)

diff --git a/src/components/Datepicker/DatepickerRangeInput.spec.tsx b/src/components/Datepicker/DatepickerRangeInput.spec.tsx
index 6beb1a83f..932271438 100644
--- a/src/components/Datepicker/DatepickerRangeInput.spec.tsx
+++ b/src/components/Datepicker/DatepickerRangeInput.spec.tsx
@@ -38,6 +38,15 @@ describe('DatepickerRangeInput', () => {
         expect(render(<DatepickerRangeInput />).container).toMatchSnapshot();
     });
 
+    it('can be disabled', () => {
+        const { getAllByRole } = render(<DatepickerRangeInput disabled />);
+        const inputs = getAllByRole('textbox');
+        expect(inputs).toHaveLength(2);
+        inputs.forEach(input => {
+            expect(input).toBeDisabled();
+        });
+    });
+
     describe('should call onClose function', () => {
         it('when clicking outside', async () => {
             const mockCloseHandler = jest.fn();
diff --git a/src/components/Datepicker/DatepickerRangeInput.tsx b/src/components/Datepicker/DatepickerRangeInput.tsx
index a1ea04366..1916eeed8 100644
--- a/src/components/Datepicker/DatepickerRangeInput.tsx
+++ b/src/components/Datepicker/DatepickerRangeInput.tsx
@@ -168,6 +168,10 @@ interface DatepickerRangeInputProps extends MarginProps, WidthProps {
      * @default 'normal'
      */
     variant?: 'compact' | 'normal';
+    /**
+     * Determines whether the datePicker is disabled or not
+     */
+    disabled?: boolean;
 }
 
 interface DateRangeInputText {
@@ -217,6 +221,7 @@ const DatepickerRangeInput: FC<DatepickerRangeInputProps> = ({
     startInputId,
     endInputId,
     variant = 'normal',
+    disabled,
     ...rest
 }: DatepickerRangeInputProps) => {
     const localeObject = useLocaleObject(locale);
@@ -350,6 +355,7 @@ const DatepickerRangeInput: FC<DatepickerRangeInputProps> = ({
                             width="100%"
                             onChange={handleStartDateInputChange}
                             data-error={error.startDate}
+                            disabled={disabled}
                         />
                         {focusedInput === START_DATE && <StartDateFocusedBlock />}
                         <DateArrow color={Colors.AUTHENTIC_BLUE_550} />
@@ -367,6 +373,7 @@ const DatepickerRangeInput: FC<DatepickerRangeInputProps> = ({
                             onChange={handleEndDateInputChange}
                             width="100%"
                             data-error={error.endDate}
+                            disabled={disabled}
                         />
                         {focusedInput === END_DATE && <EndDateFocusedBlock />}
                     </DateRangeWrapper>
diff --git a/src/components/Datepicker/DatepickerSingleInput.spec.tsx b/src/components/Datepicker/DatepickerSingleInput.spec.tsx
index 10c0170e7..950799bce 100644
--- a/src/components/Datepicker/DatepickerSingleInput.spec.tsx
+++ b/src/components/Datepicker/DatepickerSingleInput.spec.tsx
@@ -20,6 +20,12 @@ describe('DatepickerSingleInput', () => {
         expect(render(<DatepickerSingleInput />).container).toMatchSnapshot();
     });
 
+    it('can be disabled', () => {
+        const { getByRole } = render(<DatepickerSingleInput disabled />);
+        const input = getByRole('textbox');
+        expect(input).toBeDisabled();
+    });
+
     describe('should call onClose function', () => {
         it('when clicking outside', async () => {
             const mockCloseHandler = jest.fn();
diff --git a/src/components/Datepicker/DatepickerSingleInput.tsx b/src/components/Datepicker/DatepickerSingleInput.tsx
index 93d6d756b..908104c2c 100644
--- a/src/components/Datepicker/DatepickerSingleInput.tsx
+++ b/src/components/Datepicker/DatepickerSingleInput.tsx
@@ -71,6 +71,10 @@ interface DatepickerSingleInputProps extends MarginProps, WidthProps {
      * The id to be assigned to the input field
      */
     inputId?: string;
+    /**
+     * Determines whether the datePicker is disabled or not
+     */
+    disabled?: boolean;
 }
 
 const DatepickerSingleInput: FC<DatepickerSingleInputProps> = ({
@@ -87,6 +91,7 @@ const DatepickerSingleInput: FC<DatepickerSingleInputProps> = ({
     value,
     errorHandler,
     inputId,
+    disabled,
     ...rest
 }: DatepickerSingleInputProps) => {
     const localeObject = useLocaleObject(locale);
@@ -174,6 +179,7 @@ const DatepickerSingleInput: FC<DatepickerSingleInputProps> = ({
                         onBlur={handleDatepickerClose}
                         onChange={handleDateTextChange}
                         data-error={error}
+                        disabled={disabled}
                         {...rest}
                     />
                     {displayErrorMessage && error && !isFocused && (

From 89d8a77a7428870d1902cc66b48e74c455be4419 Mon Sep 17 00:00:00 2001
From: Lloyd Francis <lloydaf@gmail.com>
Date: Thu, 14 Oct 2021 13:04:44 +0200
Subject: [PATCH 2/2] improvement: adding the disabled icon color for
 datePicker

---
 src/components/Datepicker/DatepickerRangeInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Datepicker/DatepickerRangeInput.tsx b/src/components/Datepicker/DatepickerRangeInput.tsx
index 1916eeed8..24c6a4cb3 100644
--- a/src/components/Datepicker/DatepickerRangeInput.tsx
+++ b/src/components/Datepicker/DatepickerRangeInput.tsx
@@ -358,7 +358,7 @@ const DatepickerRangeInput: FC<DatepickerRangeInputProps> = ({
                             disabled={disabled}
                         />
                         {focusedInput === START_DATE && <StartDateFocusedBlock />}
-                        <DateArrow color={Colors.AUTHENTIC_BLUE_550} />
+                        <DateArrow color={disabled ? Colors.AUTHENTIC_BLUE_200 : Colors.AUTHENTIC_BLUE_550} />
                         <Input
                             id={endId}
                             ref={endDateRef}