Merge pull request #11 from bluewave-labs/feat/image-buttons

Added start and end icon props to buttons to allow for images, made p…

Client/src/Components/Button/index.jsx

@@ -24,22 +24,35 @@ const levelConfig = {
  * @typedef {Object} Props
  * @property {'primary' | 'secondary' | 'tertiary' | 'error'} level - The level of the button
  * @property {string} label - The label of the button
+ * @property {React.ReactNode} [startIcon] - Icon prepended to the label
+ * @property {React.ReactNode} [endIcon] - Icon appended to the button label
  * @property {boolean} [disabled] - Whether the button is disabled
+ * @property {(event: React.MouseEvent<HTMLButtonElement>) => void} [onClick] - The click handler of the button
  */
 
-const Button = ({ level, label, disabled }) => {
+const Button = ({ level, label, disabled, startIcon, endIcon, onClick }) => {
   const { variant, color } = levelConfig[level];
   return (
-    <MuiButton variant={variant} color={color} disabled={disabled}>
+    <MuiButton
+      variant={variant}
+      color={color}
+      disabled={disabled}
+      startIcon={startIcon}
+      endIcon={endIcon}
+      onClick={onClick}
+    >
       {label}
     </MuiButton>
   );
 };
 
 Button.propTypes = {
-  level: PropTypes.string.isRequired,
+  level: PropTypes.oneOf(["primary", "secondary", "tertiary", "error"]),
   label: PropTypes.string.isRequired,
+  startIcon: PropTypes.node,
+  endIcon: PropTypes.node,
   disabled: PropTypes.bool,
+  onClick: PropTypes.func,
 };
 
 export default Button;