From a80bb387660a7d10f2c5656cb49dae8e94732e6d Mon Sep 17 00:00:00 2001
From: Fabrice Francois <fabricevladimir@gmail.com>
Date: Tue, 23 Jan 2024 07:49:35 -0500
Subject: [PATCH 1/7] implement input type

---
 src/components/input/index.ts                |  1 +
 src/components/input/inputTime/index.ts      |  1 +
 src/components/input/inputTime/inputTime.tsx | 45 ++++++++++++++++++++
 3 files changed, 47 insertions(+)
 create mode 100644 src/components/input/inputTime/index.ts
 create mode 100644 src/components/input/inputTime/inputTime.tsx

diff --git a/src/components/input/index.ts b/src/components/input/index.ts
index 830183a28..b4e427675 100644
--- a/src/components/input/index.ts
+++ b/src/components/input/index.ts
@@ -3,3 +3,4 @@ export * from './inputDate';
 export * from './inputNumberMax';
 export * from './inputSearch';
 export * from './inputText';
+export * from './inputTime';
diff --git a/src/components/input/inputTime/index.ts b/src/components/input/inputTime/index.ts
new file mode 100644
index 000000000..9ee629767
--- /dev/null
+++ b/src/components/input/inputTime/index.ts
@@ -0,0 +1 @@
+export { InputTime, type IInputTimeProps } from './inputTime';
diff --git a/src/components/input/inputTime/inputTime.tsx b/src/components/input/inputTime/inputTime.tsx
new file mode 100644
index 000000000..11c3244f8
--- /dev/null
+++ b/src/components/input/inputTime/inputTime.tsx
@@ -0,0 +1,45 @@
+import classNames from 'classnames';
+import { forwardRef, useRef } from 'react';
+import { mergeRefs } from 'react-merge-refs';
+import { Button } from '../../button';
+import { IconType } from '../../icon';
+import { InputContainer, type IInputComponentProps } from '../inputContainer';
+import { useInputProps } from '../useInputProps';
+
+export interface IInputTimeProps extends Omit<IInputComponentProps, 'maxLength' | 'inputLength'> {}
+
+export const InputTime = forwardRef<HTMLInputElement, IInputTimeProps>((props, ref) => {
+    const { containerProps, inputProps } = useInputProps(props);
+
+    const { className: containerClassName, ...otherContainerProps } = containerProps;
+    const { className: inputClassName, disabled, ...otherInputProps } = inputProps;
+
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const handleClockClick = () => {
+        inputRef.current?.showPicker();
+    };
+
+    return (
+        <InputContainer className={containerClassName} {...otherContainerProps}>
+            <input
+                type="time"
+                ref={mergeRefs([inputRef, ref])}
+                disabled={disabled}
+                className={classNames('calendar-icon:hidden calendar-icon:appearance-none', inputClassName)}
+                {...otherInputProps}
+            />
+            {!disabled && (
+                <Button
+                    variant="tertiary"
+                    size="sm"
+                    iconLeft={IconType.CLOCK}
+                    className="mr-2 shrink-0"
+                    onClick={handleClockClick}
+                />
+            )}
+        </InputContainer>
+    );
+});
+
+InputTime.displayName = 'InputTime';

From 4c8a000d5713ecccf91eccf9291430affbe62706 Mon Sep 17 00:00:00 2001
From: Fabrice Francois <fabricevladimir@gmail.com>
Date: Tue, 23 Jan 2024 08:57:48 -0500
Subject: [PATCH 2/7] input time story

---
 .../input/inputTime/inputTime.stories.tsx     | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 src/components/input/inputTime/inputTime.stories.tsx

diff --git a/src/components/input/inputTime/inputTime.stories.tsx b/src/components/input/inputTime/inputTime.stories.tsx
new file mode 100644
index 000000000..f2c0ac628
--- /dev/null
+++ b/src/components/input/inputTime/inputTime.stories.tsx
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { InputTime } from './inputTime';
+
+const meta: Meta<typeof InputTime> = {
+    title: 'components/Input/InputTime',
+    component: InputTime,
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/ISSDryshtEpB7SUSdNqAcw/branch/jfKRr1V9evJUp1uBeyP3Zz/Aragon-ODS?type=design&node-id=10080-1869&mode=design&t=DMhjcmSjhuHsGH3N-0',
+        },
+    },
+};
+
+type Story = StoryObj<typeof InputTime>;
+
+/**
+ * Default usage example of the InputTime component.
+ */
+export const Default: Story = {
+    args: {},
+};
+
+export default meta;

From d5c759f63c7f27bb2e9d690abbdfd9ce55cdf042 Mon Sep 17 00:00:00 2001
From: Fabrice Francois <fabricevladimir@gmail.com>
Date: Tue, 23 Jan 2024 11:39:53 -0500
Subject: [PATCH 3/7] inputTime tests

---
 .../input/inputTime/inputTime.test.tsx        | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 src/components/input/inputTime/inputTime.test.tsx

diff --git a/src/components/input/inputTime/inputTime.test.tsx b/src/components/input/inputTime/inputTime.test.tsx
new file mode 100644
index 000000000..433f9b9db
--- /dev/null
+++ b/src/components/input/inputTime/inputTime.test.tsx
@@ -0,0 +1,63 @@
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import React from 'react';
+import * as MergeRefs from 'react-merge-refs';
+import { IconType } from '../../icon';
+import { InputTime, type IInputTimeProps } from './inputTime';
+
+describe('<InputTime /> component', () => {
+    const useRefMock = jest.spyOn(React, 'useRef');
+    const mergeRefMock = jest.spyOn(MergeRefs, 'mergeRefs');
+
+    afterEach(() => {
+        useRefMock.mockReset();
+        mergeRefMock.mockReset();
+    });
+
+    const createTestComponent = (props?: Partial<IInputTimeProps>) => {
+        const completeProps = { ...props };
+
+        return <InputTime {...completeProps} />;
+    };
+
+    it('renders a time input', () => {
+        const label = 'Test label';
+        render(createTestComponent({ label }));
+
+        const timeInput = screen.getByLabelText<HTMLInputElement>(label);
+
+        expect(timeInput).toBeInTheDocument();
+        expect(timeInput.type).toEqual('time');
+    });
+
+    it('renders a button which opens the time picker on click', () => {
+        const showPicker = jest.fn();
+        useRefMock.mockReturnValue({ current: { showPicker } });
+        mergeRefMock.mockReturnValue(() => null);
+
+        render(createTestComponent());
+        const timeButton = screen.getByRole('button');
+
+        expect(timeButton).toBeInTheDocument();
+        expect(within(timeButton).getByTestId(IconType.CLOCK)).toBeInTheDocument();
+
+        fireEvent.click(timeButton);
+        expect(showPicker).toHaveBeenCalled();
+    });
+
+    it('renders the input as disabled when the isDisabled property is set to true', () => {
+        const isDisabled = true;
+        const label = 'Test label';
+
+        render(createTestComponent({ label, isDisabled }));
+
+        expect(screen.getByLabelText(label)).toBeDisabled();
+    });
+
+    it('hides the time picker button when the disabled property is set to true', () => {
+        const isDisabled = true;
+
+        render(createTestComponent({ isDisabled }));
+
+        expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+});

From fae93a342a3d4e591347d6350e8ae3ce3029f002 Mon Sep 17 00:00:00 2001
From: Fabrice Francois <fabricevladimir@gmail.com>
Date: Tue, 23 Jan 2024 12:05:24 -0500
Subject: [PATCH 4/7] add controlled story

---
 .../input/inputTime/inputTime.stories.tsx     | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/input/inputTime/inputTime.stories.tsx b/src/components/input/inputTime/inputTime.stories.tsx
index f2c0ac628..5129c254e 100644
--- a/src/components/input/inputTime/inputTime.stories.tsx
+++ b/src/components/input/inputTime/inputTime.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { InputTime } from './inputTime';
+import { useState, type ChangeEvent } from 'react';
+import { InputTime, type IInputTimeProps } from './inputTime';
 
 const meta: Meta<typeof InputTime> = {
     title: 'components/Input/InputTime',
@@ -16,10 +17,26 @@ const meta: Meta<typeof InputTime> = {
 type Story = StoryObj<typeof InputTime>;
 
 /**
- * Default usage example of the InputTime component.
+ * Default usage example of the `InputTime` component.
  */
 export const Default: Story = {
     args: {},
 };
 
+const ControlledComponent = (props: IInputTimeProps) => {
+    const [value, setValue] = useState<string>('13:00');
+
+    const handleChange = (event: ChangeEvent<HTMLInputElement>) => setValue(event.target.value);
+
+    return <InputTime value={value} onChange={handleChange} {...props} />;
+};
+
+/**
+ * Usage example of a controlled `InputTime` component.
+ */
+export const Controlled: Story = {
+    args: { step: 130 },
+    render: (props) => <ControlledComponent {...props} />,
+};
+
 export default meta;

From 24408ee43f6e3a0a16c1c7d8a3d5f3bc75085171 Mon Sep 17 00:00:00 2001
From: Fabrice Francois <fabricevladimir@gmail.com>
Date: Tue, 23 Jan 2024 12:10:16 -0500
Subject: [PATCH 5/7] update changelog

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b7ee76891..22c7ebc08 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+-   Implement `InputTime` component
+
 ## [1.0.9] - 2024-01-23
 
 ### Fixed

From 87c578573498733f3ec55ec6e8f753fddf309847 Mon Sep 17 00:00:00 2001
From: Fabrice Francois <fabricevladimir@gmail.com>
Date: Tue, 23 Jan 2024 12:13:17 -0500
Subject: [PATCH 6/7] update InputContainer import path

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

diff --git a/src/components/input/inputTime/inputTime.tsx b/src/components/input/inputTime/inputTime.tsx
index 11c3244f8..a1cd306b2 100644
--- a/src/components/input/inputTime/inputTime.tsx
+++ b/src/components/input/inputTime/inputTime.tsx
@@ -3,8 +3,8 @@ import { forwardRef, useRef } from 'react';
 import { mergeRefs } from 'react-merge-refs';
 import { Button } from '../../button';
 import { IconType } from '../../icon';
+import { useInputProps } from '../hooks';
 import { InputContainer, type IInputComponentProps } from '../inputContainer';
-import { useInputProps } from '../useInputProps';
 
 export interface IInputTimeProps extends Omit<IInputComponentProps, 'maxLength' | 'inputLength'> {}
 

From 538771dcc370e734f987fe0e07de83a42a4a1b24 Mon Sep 17 00:00:00 2001
From: Fabrice Francois <fabricevladimir@gmail.com>
Date: Thu, 25 Jan 2024 08:42:32 -0500
Subject: [PATCH 7/7] add note about firefox time picker

---
 src/components/input/inputTime/inputTime.stories.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/input/inputTime/inputTime.stories.tsx b/src/components/input/inputTime/inputTime.stories.tsx
index 5129c254e..51cfe21bd 100644
--- a/src/components/input/inputTime/inputTime.stories.tsx
+++ b/src/components/input/inputTime/inputTime.stories.tsx
@@ -18,7 +18,14 @@ type Story = StoryObj<typeof InputTime>;
 
 /**
  * Default usage example of the `InputTime` component.
+ *
+ * Note: The time picker is disabled by default on Firefox and can be enabled by setting the
+ * `dom.forms.datetime.timepicker` preference to `true`. Please be aware that this may enable experimental features.
+ *
+ * More information about how to change Firefox browser preferences can be found in the
+ * [Firefox documentation](https://support.mozilla.org/en-US/kb/about-config-editor-firefox).
  */
+
 export const Default: Story = {
     args: {},
 };