Add Input icons

recipes/src/components/Input/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import TextField, { HelperText, Input as Field } from '@material/react-text-field';
 import classNames from 'classnames';
+import Icon from '../Icon';
 
 import '@material/react-text-field/dist/text-field.css';
 import './styles.scss';
@@ -36,25 +37,36 @@ const Input = ({
 			'mdc-text-field--no-label': style === 'display',
 		}
 	);
+
 	return (
-	<TextField
-		label={label}
-		helperText={helperText ? (<HelperText>{helperText || ''}</HelperText>) : undefined}
-		textarea={textarea}
-		className={fieldClasses}
-		fullWidth={style==='display'}
-	>
-		<Field
-			value={value}
-			//@ts-ignore
-			onChange={onChange}
-			onKeyDown={onKeyDown}
-			type={type}
-			min={0}
-			rows={1}
-			placeholder={style === 'display' ? label : ''}
-		/>
-	</TextField>
+		<div className='cbk-input-container'>
+			{
+				icon && 
+				<Icon
+					icon={icon}
+					width={46}
+					fill='#9E9E9E'
+				></Icon>
+			}
+			<TextField
+				label={label}
+				helperText={helperText ? (<HelperText>{helperText || ''}</HelperText>) : undefined}
+				textarea={textarea}
+				className={fieldClasses}
+				fullWidth={style === 'display'}
+			>
+				<Field
+					value={value}
+					//@ts-ignore
+					onChange={onChange}
+					onKeyDown={onKeyDown}
+					type={type}
+					min={0}
+					rows={1}
+					placeholder={style === 'display' ? label : ''}
+				/>
+			</TextField>
+		</div>
 )};
 
 export default Input;

recipes/src/components/Input/styles.scss

@@ -1,5 +1,13 @@
 @import 'styles/_variables.scss';
 
+.cbk-input-container { 
+  display: flex;
+
+  .cbk-icon {
+    align-self: flex-end;
+    fill: $grey-400;
+  }
+}
 .cbk-input.mdc-text-field {
   width: 100%;
   background-color: white;

recipes/src/containers/Recipes/Create.tsx

@@ -110,6 +110,7 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
                   label='Preparation time'
                   value={form.details.preparationTime}
                   onChange={this.updateField(['details', 'preparationTime'])}
+                  icon='preparation'
                 />
               </Cell>
               <Cell columns={3}>
@@ -117,6 +118,7 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
                   label='Cooking time'
                   value={form.details.cookingTime}
                   onChange={this.updateField(['details', 'cookingTime'])}
+                  icon='cooking'
                 />
               </Cell>
               <Cell columns={3}>
@@ -125,6 +127,7 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
                   value={form.details.servings}
                   onChange={this.updateField(['details', 'servings'])}
                   type='number'
+                  icon='servings'
                 />
               </Cell>
               <Cell columns={3}>
@@ -132,6 +135,7 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
                   label='recipe url'
                   value={form.details.url || ''}
                   onChange={this.updateField(['details', 'url'])}
+                  icon='recipe'
                 />
               </Cell>
               <Cell columns={12}>