feat: add the icon prop to DatePicker and DateTimePicker (#2324)

* feat: add the icon prop to DatePicker and DateTimePicker

* fix: remove trailing whitespace

Co-authored-by: Jose Leandro Torres <jtorressicilia@gmail.com>
Co-authored-by: Tahimi <tahimileon@gmail.com>

src/components/DatePicker/__test__/datePicker.spec.js

@@ -117,4 +117,8 @@ describe('<DatePicker/>', () => {
         const component = mount(<DatePicker value={value} />);
         expect(component.find('input').prop('value')).toBe('10/13/2019');
     });
+    it('should render the passed icon', () => {
+        const component = mount(<DatePicker icon={<span id="test" />} />);
+        expect(component.find('span#test').exists()).toBe(true);
+    });
 });

src/components/DatePicker/index.d.ts

@@ -28,6 +28,7 @@ export interface DatePickerProps extends BaseProps {
     locale?: string;
     selectionType?: 'single' | 'range';
     variant?: 'single' | 'double';
+    icon?: ReactNode;
 }
 
 export default function(props: DatePickerProps): JSX.Element | null;

src/components/DatePicker/index.js

@@ -41,6 +41,7 @@ const DatePicker = React.forwardRef((props, ref) => {
         locale,
         variant,
         selectionType,
+        icon: iconInProps,
     } = useReduxForm(props);
 
     const currentLocale = useLocale(locale);
@@ -102,13 +103,15 @@ const DatePicker = React.forwardRef((props, ref) => {
         [openModal, readOnly],
     );
 
+    const icon = iconInProps || <CalendarIcon />;
+
     return (
         <StyledContainer id={id} className={className} style={style}>
             <StyledInput
                 ref={inputRef}
                 label={label}
                 placeholder={placeholder}
-                icon={<CalendarIcon />}
+                icon={icon}
                 iconPosition="right"
                 required={required}
                 value={formattedDate}
@@ -206,6 +209,8 @@ DatePicker.propTypes = {
     selectionType: PropTypes.oneOf(['single', 'range']),
     /** The calendar variant. Defaults to 'single' */
     variant: PropTypes.oneOf(['single', 'double']),
+    /** 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,
 };
 
 DatePicker.defaultProps = {
@@ -235,6 +240,7 @@ DatePicker.defaultProps = {
     locale: undefined,
     selectionType: 'single',
     variant: 'single',
+    icon: undefined,
 };
 
 export default DatePicker;

src/components/DatePicker/readme.md

@@ -1,4 +1,5 @@
-##### DatePicker base:
+# DatePicker base
+##### Use a `DatePicker` to allow users to select a date with a friendly user interface.
 
 ```js
 import React from 'react';
@@ -39,7 +40,8 @@ const containerStyles = {
     </div>
 ```
 
-##### DatePicker with date constraints:
+# DatePicker with date constraints
+##### Use `minDate` and `maxDate` to limit the available dates.
 
 ```js
 import React from 'react';
@@ -65,7 +67,8 @@ const initialState = { date: new Date() };
     </div>
 ```
 
-##### DatePicker with different date formats:
+# DatePicker with different date formats
+##### Use the `formatStyle` prop to customize the date format.
 
 ```js
 import React from 'react';
@@ -101,7 +104,8 @@ const initialState = { date: new Date() };
     </div>
 ```
 
-##### DatePicker required:
+# DatePicker required
+##### You can pass the `required` prop to mark the input as required.
 
 ```js
 import React from 'react';
@@ -126,7 +130,8 @@ const initialState = { date: new Date() };
     </div>
 ```
 
-##### DatePicker with error:
+# DatePicker with error
+##### Pass the `error` prop to indicate that there is an error in the input.
 
 ```js
 import React from 'react';
@@ -153,7 +158,8 @@ const initialState = { date: undefined };
     </div>
 ```
 
-##### DatePicker disabled:
+# DatePicker disabled
+##### Use the `disabled` prop to render the input as disabled.
 
 ```js
 import React from 'react';
@@ -171,7 +177,8 @@ const containerStyles = {
     </div>;
 ```
 
-##### DatePicker readOnly:
+# DatePicker readOnly
+##### Pass the `readOnly` prop to prevent the user from modifying the value.
 
 ```js
 import React from 'react';
@@ -189,7 +196,8 @@ const containerStyles = {
     </div>
 ```
 
-##### DatePicker with range selection:
+# DatePicker with range selection
+##### You can allow the users to select a date range passing the `selectionType` prop as 'range'.
 
 ```js
 import React from 'react';
@@ -219,7 +227,8 @@ const containerStyles = {
     </div>
 ```
 
-##### DatePicker with variant double:
+# DatePicker with variant double
+##### Use the 'double' variant to show two months side by side.
 
 ```js
 import React from 'react';
@@ -247,7 +256,39 @@ const containerStyles = {
     </div>
 ```
 
-##### DatePicker select date:
+# DatePicker 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 { DatePicker } from 'react-rainbow-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCalendar } from '@fortawesome/free-solid-svg-icons';
+
+const initialState = {
+    date: undefined,
+};
+const containerStyles = {
+    maxWidth: 400,
+};
+
+    <div
+        className="rainbow-align-content_center rainbow-m-vertical_large rainbow-p-horizontal_small rainbow-m_auto"
+        style={containerStyles}
+    >
+        <DatePicker
+            id="datePicker-19"
+            label="DatePicker Label"
+            placeholder="Select date"
+            value={state.date}
+            onChange={date => setState({ date })}
+            icon={<FontAwesomeIcon icon={faCalendar} />}
+        />
+    </div>
+```
+
+# DatePicker select date
+##### This is an example use case for the DatePicker component
 
 ```js
 import React from 'react';

src/components/DateTimePicker/__test__/dateTimePicker.spec.js

@@ -105,4 +105,8 @@ describe('<DateTimePicker/>', () => {
         );
         expect(component.find('input').prop('value')).toBe('10/24/2019, 10:48 AM');
     });
+    it('should render the passed icon', () => {
+        const component = mount(<DateTimePicker icon={<span id="test" />} />);
+        expect(component.find('span#test').exists()).toBe(true);
+    });
 });

src/components/DateTimePicker/index.js

@@ -44,6 +44,7 @@ const DateTimePicker = React.forwardRef((props, ref) => {
         bottomHelpText,
         hour24,
         locale: localeProp,
+        icon: iconInProps,
     } = props;
 
     const inputRef = useRef();
@@ -103,13 +104,15 @@ const DateTimePicker = React.forwardRef((props, ref) => {
         onChange(...args);
     };
 
+    const icon = iconInProps || <DateTimeIcon />;
+
     return (
         <StyledContainer id={id} className={className} style={style}>
             <Input
                 ref={inputRef}
                 label={label}
                 placeholder={placeholder}
-                icon={<DateTimeIcon />}
+                icon={icon}
                 iconPosition="right"
                 required={required}
                 value={formattedDatetime}
@@ -209,6 +212,8 @@ DateTimePicker.propTypes = {
     locale: PropTypes.string,
     /** Specifies that the DateTimePicker 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 DateTime icon */
+    icon: PropTypes.node,
 };
 
 DateTimePicker.defaultProps = {
@@ -239,6 +244,7 @@ DateTimePicker.defaultProps = {
     isCentered: false,
     locale: undefined,
     hour24: false,
+    icon: undefined,
 };
 
 export default withReduxForm(DateTimePicker);

src/components/DateTimePicker/readme.md

@@ -1,4 +1,5 @@
-##### DateTimePicker base:
+# DateTimePicker base
+##### Use a `DateTimePicker` to allow users to select a date and time with a friendly user interface.
 
 ```js
 import React from 'react';
@@ -53,7 +54,8 @@ const cancelButtonLocalizedLabel = {
     </div>;
 ```
 
-##### DateTimePicker with date constraints:
+# DateTimePicker with date constraints
+##### Use `minDate` and `maxDate` to limit the available dates.
 
 ```js
 import React from 'react';
@@ -79,7 +81,8 @@ const initialState = { value: new Date() };
     </div>
 ```
 
-##### DateTimePicker with different date formats:
+# DateTimePicker with different date formats
+##### Use the `formatStyle` prop to customize the date format.
 
 ```js
 import React from 'react';
@@ -119,7 +122,8 @@ const initialState = { value: new Date() };
     </div>
 ```
 
-##### DateTimePicker with time in 24h format:
+# DateTimePicker with time in 24h format
+##### Pass the `use24` prop to show the time in 24H format.
 
 ```js
 import React from 'react';
@@ -145,7 +149,8 @@ const initialState = { value: new Date('2019-10-25 18:44') };
     </div>
 ```
 
-##### DateTimePicker required:
+# DateTimePicker required
+##### You can pass the `required` prop to mark the input as required.
 
 ```js
 import React from 'react';
@@ -169,7 +174,8 @@ const initialState = { value: new Date() };
     </div>
 ```
 
-##### DateTimePicker with error:
+# DateTimePicker with error
+##### Pass the `error` prop to indicate that there is an error in the input.
 
 ```js
 import React from 'react';
@@ -196,7 +202,8 @@ const initialState = { value: undefined };
     </div>
 ```
 
-##### DateTimePicker disabled:
+# DateTimePicker disabled
+##### Use the `disabled` prop to render the input as disabled.
 
 ```js
 import React from 'react';
@@ -214,7 +221,8 @@ const containerStyles = {
     </div>
 ```
 
-##### DateTimePicker readOnly:
+# DateTimePicker readOnly
+##### Pass the `readOnly` prop to prevent the user from modifying the value.
 
 ```js
 import React from 'react';
@@ -231,3 +239,28 @@ const containerStyles = {
         <DateTimePicker readOnly value={new Date()} label="DateTimePicker Label" />
     </div>
 ```
+
+# DateTimePicker 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 { DateTimePicker } from 'react-rainbow-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCalendar } from '@fortawesome/free-solid-svg-icons';
+
+const containerStyles = {
+    maxWidth: 400,
+};
+
+    <div
+        className="rainbow-align-content_center rainbow-m-vertical_large rainbow-p-horizontal_small rainbow-m_auto"
+        style={containerStyles}
+    >
+        <DateTimePicker
+            value={new Date()}
+            label="DateTimePicker Label"
+            icon={<FontAwesomeIcon icon={faCalendar} />}
+        />
+    </div>
+```

src/components/MarkdownOutput/readme.md

@@ -389,7 +389,7 @@ import styled from 'styled-components';
 import 'highlight.js/styles/dracula.css';
 import { Card, RadioButtonGroup, Textarea, MarkdownOutput } from 'react-rainbow-components';
 
-const markdownString = '# Code examples\n ### Standard \n```\nconst data = \'Lorem ipsum....\';\n\nconst doSomething = (param) => {\n};\n\nconst xx = doSomething(data);\n```\n\n ### Javascript \n```js\nconst data = \'Lorem ipsum....\';\n\nconst doSomething = (param) => {\n};\n\nconst xx = doSomething(data);\n```\n\n ### Shell \n```sh\n$ node index.js;\n```\n\n ### Java \n ```java\n String foo = 5;\n```';
+const markdownString = '# Code examples\n ### Standard \n```\nconst data = \'Lorem ipsum....\';\n\nconst doSomething = (param) => {\n};\n\nconst xx = doSomething(data);\n```\n\n ### Javascript \n```js\nconst data = \'Lorem ipsum....\';\n\nconst doSomething = (param) => {\n};\n\nconst xx = doSomething(data);\n```\n\n ### Shell \n```sh\n$ node index.js;\n```\n\n ### Java \n ```java\n String foo = 5;\n```\n ### Inline\n Hello, `const hello = 1` inline';
 
 const StyledCard = styled(Card)`
     padding: 1rem 2rem 2rem;