Create Button Component

recipes/package.json

@@ -7,6 +7,7 @@
     "@material/react-card": "^0.11.0",
     "@material/react-chips": "^0.12.0",
     "@material/react-drawer": "^0.11.0",
+    "@material/react-icon-button": "^0.12.0",
     "@material/react-layout-grid": "^0.11.0",
     "@material/react-list": "^0.11.0",
     "@material/react-material-icon": "^0.12.0",

recipes/src/components/Button/index.tsx

@@ -1,19 +1,34 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import Button from '@material/react-button';
+import IconButton from '@material/react-icon-button';
+import MaterialIcon from '@material/react-material-icon';
+
 import '@material/react-button/dist/button.css';
+import '@material/react-icon-button/dist/icon-button.css'
+import '@material/react-material-icon/dist/material-icon.css';
 
 type CBKButtonProps = {
-  children: string,
+  children: string|ReactElement,
   className?: string,
   unelevated?: boolean,
   raised?: boolean,
   outlined?: boolean,
+  icon?: string,
+  onClick?: () => void,
 }
 
 export default function CBKButton(props: any) {
-  return (
-    <Button >
-      Click Me!
-    </Button>
-  )
-}
+  if (props.icon) {
+    return (
+      <IconButton onClick={props.onClick} {...props}>
+        <MaterialIcon icon={props.icon} />
+      </IconButton>
+    );
+  } else {
+    return (
+      <Button {...props}>
+        { props.children }
+      </Button>
+    )
+  }
+};

recipes/src/components/Input/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import TextField, { HelperText, Input as Field } from '@material/react-text-field';
 import classNames from 'classnames';
-import Button from '@material/react-button';
+import Button from 'components/Button';
 import Icon from '../Icon';
 
 import '@material/react-text-field/dist/text-field.css';
@@ -77,13 +77,7 @@ const Input = ({
 			</TextField>
 			{
 				button && 
-				<Button className='cbk-input-button' onClick={button.onClick}>
-					<Icon
-						icon={button.icon}
-						width={24}
-						fill='#9E9E9E'
-					/>
-				</Button>
+				<Button className='cbk-input-button' onClick={button.onClick} icon={button.icon} />
 			}
 		</div>
 )};

recipes/src/containers/Recipes/Create.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { assocPath } from 'ramda';
 import  Navbar from 'components/Navbar';
 import { Grid, Row, Cell } from '@material/react-layout-grid';
+import Btn from 'components/Button';
 
 import Input from 'components/Input';
 import TagInput from 'components/TagInput';
@@ -69,8 +70,8 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
 
   addButton(subrecipe: number, index: number) {
     return this.state.form.ingredients[subrecipe].ingredients.length === index +1 ?
-      { icon: 'add', onClick: this.addIngredient(subrecipe, index) } :
-      { icon: 'trash', onClick: () => {}};
+      { icon: 'add_circle_outline', onClick: this.addIngredient(subrecipe, index) } :
+      { icon: 'remove_circle_outline', onClick: () => {}};
   }