Enhancement/input icon

docs/stories/customComponents/Inputs.stories.js

@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 /* eslint-disable import/no-extraneous-dependencies */
 import { storiesOf } from '@storybook/react';
 import { Inputs } from '@buffetjs/custom';
+import { Globe, GlobeCrossed } from '@buffetjs/icons';
 import { isUndefined } from 'lodash';
-
 import Presentation from '../ui/Presentation';
 import Pre from '../ui/Pre';
 import Subtitle from '../ui/Subtitle';
@@ -23,6 +23,7 @@ const form = {
     styleName: 'col-6',
     description: 'You should enter your name',
     label: 'Name',
+    labelIcon: <GlobeCrossed />,
     placeholder: 'Paul Bocuse',
     type: 'text',
     validations: {
@@ -34,6 +35,7 @@ const form = {
     styleName: 'col-6',
     label: 'Time',
     description: 'Select a slot',
+    labelIcon: <Globe />,
     type: 'time',
     validations: {
       required: true,
@@ -192,6 +194,7 @@ function InputStory() {
             {`
 import React, { useState } from 'react';
 import { Inputs } from '@buffetjs/custom';
+import { Globe } from '@buffetjs/icons';
 
 const Foo = () => (
   <div>This is a custom component that can be passed to the component</div>
@@ -210,6 +213,9 @@ const form = {
     label: 'First Name',
     placeholder: 'Viky',
     type: 'text',
+    labelIcon: (
+      <Globe />
+    ),
     validations: {
       required: true,
       uppercase: true,

docs/stories/icons/icons.stories.js

@@ -15,6 +15,8 @@ import {
   Enumeration,
   Envelope,
   Fail,
+  Globe,
+  GlobeCrossed,
   Grab,
   GrabLarge,
   Json,
@@ -133,6 +135,20 @@ const IconsStory = () => {
       width: '55px',
       height: '55px',
     },
+    {
+      name: 'globe',
+      Compo: Globe,
+      props: {
+        fill: '#b3b5b9',
+      },
+    },
+    {
+      name: 'globeCrossed',
+      Compo: GlobeCrossed,
+      props: {
+        fill: '#b3b5b9',
+      },
+    },
     {
       name: 'grab',
       Compo: Grab,

packages/buffetjs-custom/src/components/Inputs/Wrapper.js

@@ -38,4 +38,9 @@ const Wrapper = styled.div`
     `}
 `;
 
+const IconWrapper = styled.span`
+  margin-left: 5px;
+`;
+
 export default Wrapper;
+export { IconWrapper };

packages/buffetjs-custom/src/components/Inputs/index.js

@@ -24,7 +24,7 @@ import {
 import { Description, ErrorMessage } from '@buffetjs/styles';
 
 import DateTime from '../DateTime';
-import Wrapper from './Wrapper';
+import Wrapper, { IconWrapper } from './Wrapper';
 /* eslint-disable react/forbid-prop-types */
 
 const inputs = {
@@ -113,8 +113,11 @@ function Inputs({
         <Wrapper error={error}>
           {type !== 'checkbox' && (
             <Label htmlFor={inputId}>
-              {label}
-              {isEmpty(label) && <>&nbsp;</>}
+              <span>
+                {label}
+                {isEmpty(label) && <>&nbsp;</>}
+              </span>
+              {rest.labelIcon && <IconWrapper>{rest.labelIcon}</IconWrapper>}
             </Label>
           )}
           <InputComponent
@@ -161,6 +164,7 @@ Inputs.defaultProps = {
   id: null,
   error: null,
   label: null,
+  labelIcon: null,
   onBlur: null,
   onChange: () => {},
   translatedErrors: {
@@ -187,6 +191,7 @@ Inputs.propTypes = {
   error: PropTypes.string,
   id: PropTypes.string,
   label: PropTypes.string,
+  labelIcon: PropTypes.any,
   name: PropTypes.string.isRequired,
   onBlur: PropTypes.func,
   onChange: () => {},

packages/buffetjs-icons/src/index.js

@@ -11,6 +11,8 @@ export { default as Email } from './components/Email';
 export { default as Enumeration } from './components/Enumeration';
 export { default as Envelope } from './components/Envelope';
 export { default as Fail } from './components/Fail';
+export { default as Globe } from './components/Globe';
+export { default as GlobeCrossed } from './components/GlobeCrossed';
 export { default as Grab } from './components/Grab';
 export { default as GrabLarge } from './components/GrabLarge';
 export { default as Json } from './components/Json';