feat: add prop icon to the FileSelector component (#1811)

* feat: add prop icon to the FileSelector component

fix: #1800

* fix: change prop description

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

library/exampleComponents/Icons/picture.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Picture = props => {
+    const { className, style } = props;
+    return (
+        <svg
+            className={className}
+            style={style}
+            fill="currentColor"
+            width="50px"
+            height="40px"
+            viewBox="0 0 50 40"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+        >
+            <title>picture</title>
+            <g id="Campaigns" stroke="none" strokeWidth="1" fillRule="evenodd">
+                <g
+                    id="new-campaign-with-upload-image-gallery"
+                    transform="translate(-384.000000, -305.000000)"
+                >
+                    <path
+                        d="M427.749514,305 C431.194617,305 433.999771,307.805154 433.999771,311.250257 L433.999771,311.250257 L433.999771,338.749743 C433.999771,342.194846 431.194617,345 427.749514,345 L427.749514,345 L390.2498,345 C386.805154,345 384,342.194846 384,338.749743 L384,338.749743 L384,311.250257 C384,307.805154 386.805154,305 390.2498,305 L390.2498,305 Z M427.749514,310.000114 L390.2498,310.000114 C389.559955,310.000114 389.000114,310.559955 389.000114,311.250257 L389.000114,311.250257 L389.000114,334.847337 L395.899934,327.949807 C397.607379,326.240072 400.390103,326.240072 402.099838,327.949807 L402.099838,327.949807 L405.124717,330.967362 L414.409924,319.822732 C415.239844,318.827562 416.454739,318.252615 417.749743,318.245291 C419.05207,318.275045 420.264677,318.800096 421.102378,319.782449 L421.102378,319.782449 L428.999657,328.99762 L428.999657,311.250257 C428.999657,310.559955 428.439816,310.000114 427.749514,310.000114 L427.749514,310.000114 Z M396.500057,312.499943 C399.257605,312.499943 401.499714,314.74251 401.499714,317.500057 C401.499714,320.257604 399.257605,322.500172 396.500057,322.500172 C393.74251,322.500172 391.499943,320.257604 391.499943,317.500057 C391.499943,314.74251 393.74251,312.499943 396.500057,312.499943 Z"
+                        id="picture"
+                    />
+                </g>
+            </g>
+        </svg>
+    );
+};
+
+Picture.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+};
+Picture.defaultProps = {
+    className: undefined,
+    style: undefined,
+};
+
+export default Picture;

library/setup.js

@@ -71,6 +71,7 @@ import HomeFilledIcon from './exampleComponents/Icons/homeFilled';
 import ExportBorderIcon from './exampleComponents/Icons/exportBorder';
 import ExportFilledIcon from './exampleComponents/Icons/exportFilled';
 import ArrowDownIcon from './exampleComponents/Icons/arrowDown';
+import PictureIcon from './exampleComponents/Icons/picture';
 import Coin from './exampleComponents/Icons/coin';
 
 global.GlobalHeader = GlobalHeader;
@@ -149,4 +150,5 @@ global.HomeFilledIcon = HomeFilledIcon;
 global.ExportBorderIcon = ExportBorderIcon;
 global.ExportFilledIcon = ExportFilledIcon;
 global.ArrowDownIcon = ArrowDownIcon;
+global.PictureIcon = PictureIcon;
 global.Coin = Coin;

src/components/FileSelector/__test__/fileSelector.spec.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUser } from '@fortawesome/free-solid-svg-icons';
 import FileSelector from '../';
 import ErrorText from '../../Input/styled/errorText';
 import HelpText from '../../Input/styled/helpText';
@@ -56,6 +58,11 @@ describe('<FileSelector />', () => {
         expect(component.find(HelpText).exists()).toBe(true);
     });
 
+    it('should render the right icon when it is passed', () => {
+        const component = mount(<FileSelector icon={<FontAwesomeIcon icon={faUser} />} />);
+        expect(component.find(FontAwesomeIcon).prop('icon')).toBe(faUser);
+    });
+
     it('should fire change event when a file is picked', () => {
         const onChangeMockFn = jest.fn();
         const component = mount(<FileSelector label="custom label" onChange={onChangeMockFn} />);

src/components/FileSelector/helpers/getIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ErrorIcon, FileIcon, FilesIcon, UploadIcon } from '../icons';
 
-export default function getIcon(files, error, isDragOver) {
+export default function getIcon(files, error, icon, isDragOver) {
     if (!isDragOver) {
         if (error) {
             return <ErrorIcon />;
@@ -13,5 +13,8 @@ export default function getIcon(files, error, isDragOver) {
             return <FilesIcon />;
         }
     }
+    if (icon) {
+        return icon;
+    }
     return <UploadIcon />;
 }

src/components/FileSelector/index.d.ts

@@ -6,6 +6,7 @@ export interface FileSelectorProps extends BaseProps {
     name?: string;
     label?: ReactNode;
     error?: ReactNode;
+    icon?: ReactNode;
     bottomHelpText?: ReactNode;
     placeholder?: string;
     tabIndex?: string | number;

src/components/FileSelector/index.js

@@ -26,6 +26,7 @@ const FileSelector = React.forwardRef((props, ref) => {
         name,
         label,
         error,
+        icon,
         bottomHelpText,
         placeholder,
         tabIndex,
@@ -114,7 +115,7 @@ const FileSelector = React.forwardRef((props, ref) => {
         onBlur(event);
     };
 
-    const icon = getIcon(files, error, isDragOver);
+    const currentIcon = getIcon(files, error, icon, isDragOver);
     const text = getText(files, placeholder);
 
     const isFileSelected = files && files.length > 0;
@@ -165,7 +166,7 @@ const FileSelector = React.forwardRef((props, ref) => {
                         error={error}
                         disabled={disabled}
                     >
-                        {icon}
+                        {currentIcon}
                     </StyledIconContainer>
                     <TruncatedText>{text}</TruncatedText>
                     <RenderIf isTrue={shouldRenderCancel}>
@@ -206,6 +207,8 @@ FileSelector.propTypes = {
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     /** Specifies that an input field must be filled out before submitting the form. */
     error: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    /** The icon shown in the FileSelector. In case of not being specified, a cloud icon will be shown by default. */
+    icon: PropTypes.node,
     /** Shows the help message below the input. */
     bottomHelpText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     /** Text that is displayed when the field is empty, to prompt the user for a valid entry. */
@@ -240,6 +243,7 @@ FileSelector.defaultProps = {
     name: undefined,
     label: undefined,
     error: undefined,
+    icon: undefined,
     bottomHelpText: undefined,
     placeholder: 'Drag & Drop or Click to Browse',
     tabIndex: undefined,

src/components/FileSelector/readme.md

@@ -288,3 +288,39 @@ function FileSelectorExample(props) {
 
 <FileSelectorExample />
 ```
+
+##### FileSelector multiline with custom icon
+
+```js
+import React, { useState } from 'react';
+import { FileSelector } from 'react-rainbow-components';
+
+const containerStyles = {
+    maxWidth: 300,
+};
+
+function FileSelectorExample(props) {
+    const [files, setFiles] = useState([]);
+
+    const handleChange = files => {
+        setFiles(files);
+    }
+
+    return (
+        <div>
+            <FileSelector
+                className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
+                style={containerStyles}
+                label="File selector"
+                icon={<PictureIcon />}
+                placeholder="Drag & Drop or Click to Browse"
+                bottomHelpText="Select only one file"
+                variant="multiline"
+                onChange={handleChange}
+            />
+        </div>
+    );
+}
+
+<FileSelectorExample />
+```