feat: add the icon prop to TimePicker component

src/components/TimePicker/__test__/timePicker.spec.js

@@ -107,4 +107,8 @@ describe('<TimePicker/>', () => {
         wrapper.update();
         expect(wrapper.find('input').props().value).toBe('23:01');
     });
+    it('should render the passed icon', () => {
+        const component = mount(<TimePicker icon={<span id="test" />} />);
+        expect(component.find('span#test').exists()).toBe(true);
+    });
 });

src/components/TimePicker/index.js

@@ -39,6 +39,7 @@ const TimePicker = React.forwardRef((props, ref) => {
         onBlur,
         onFocus,
         value: valueProp,
+        icon: iconInProps,
     } = useReduxForm(props);
     const [isOpen, setIsOpen] = useState(false);
     const [value, setValue] = useState(hour24 ? valueProp : get12HourTime(valueProp));
@@ -94,14 +95,16 @@ const TimePicker = React.forwardRef((props, ref) => {
         setValue(hour24 ? valueProp : get12HourTime(valueProp));
     }, [valueProp, hour24]);
 
+    const icon = iconInProps || <ClockIcon />;
+
     return (
         <StyledContainer id={id} className={className} style={style}>
             <Input
                 id="time-picker_time-input"
                 ref={inputRef}
                 label={label}
                 placeholder={placeholder}
-                icon={<ClockIcon />}
+                icon={icon}
                 iconPosition="right"
                 required={required}
                 value={getTriggerInputValue()}
@@ -189,6 +192,8 @@ TimePicker.propTypes = {
     style: PropTypes.object,
     /** Specifies that the TimePicker will be in a 24hr format. This value defaults to false. */
     hour24: PropTypes.bool,
+    /** The icon to show if it is passed. It must be a svg icon or a font icon. Defaults to a Calendar icon */
+    icon: PropTypes.node,
 };
 
 TimePicker.defaultProps = {
@@ -215,6 +220,7 @@ TimePicker.defaultProps = {
     className: undefined,
     style: undefined,
     hour24: false,
+    icon: undefined,
 };
 
 export default TimePicker;

src/components/TimePicker/readme.md

@@ -1,4 +1,5 @@
-##### TimePicker base:
+# TimePicker base:
+##### Use a `TimePicker` to allow users to pick a time with a friendly user interface.
 
 ```js
 import React from 'react';
@@ -18,7 +19,8 @@ const containerStyles = {
     />
 ```
 
-##### TimePicker with initial value:
+# TimePicker with initial value:
+##### To set the initial time, just pass it in the `value` prop.
 
 ```js
 import React from 'react';
@@ -39,7 +41,8 @@ const initialState = { time: '13:32' };
     />
 ```
 
-##### TimePicker with 24hr format:
+# TimePicker with 24hr format:
+##### Pass the `hour24` prop to format the time as 24hr clock.
 
 ```js
 import React from 'react';
@@ -61,7 +64,8 @@ const initialState = { time: '16:32' };
     />
 ```
 
-##### TimePicker required:
+# TimePicker required:
+##### You can pass the `required` prop to mark the input as required.
 
 ```js
 import React from 'react';
@@ -81,7 +85,8 @@ const containerStyles = {
     />
 ```
 
-##### TimePicker with error:
+# TimePicker with error:
+##### Pass the `error` prop to indicate that there is an error in the input.
 
 ```js
 import React from 'react';
@@ -102,7 +107,8 @@ const containerStyles = {
     />
 ```
 
-##### TimePicker disabled:
+# TimePicker disabled:
+##### Use the `disabled` prop to render the input as disabled.
 
 ```js
 import React from 'react';
@@ -121,7 +127,8 @@ const containerStyles = {
     />
 ```
 
-##### TimePicker readOnly:
+# TimePicker readOnly:
+##### Pass the `readOnly` prop to prevent the user from modifying the value.
 
 ```js
 import React from 'react';
@@ -139,3 +146,25 @@ const containerStyles = {
         className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
     />
 ```
+
+# TimePicker with custom icon:
+##### It is possible to provide a custom icon for the input if you pass the `icon` prop.
+
+```js
+import React from 'react';
+import { TimePicker } from 'react-rainbow-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faClock } from '@fortawesome/free-solid-svg-icons';
+
+const containerStyles = {
+    maxWidth: 400,
+};
+
+    <TimePicker
+        value="13:32"
+        label="TimePicker Label"
+        style={containerStyles}
+        className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
+        icon={<FontAwesomeIcon icon={faClock} />}
+    />
+```