added buttons

src/components/input/Button/index.tsx

@@ -1,20 +1,63 @@
-import * as React from 'react';
+import classnames from 'classnames';
+import * as styles from './styles.scss';
+import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react';
+import { Icon } from '~/components/input/Icon';
+import { IIcon } from "~/redux/types";
 
-const style = require('./style.scss');
+type IButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+  size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro';
+  iconLeft?: IIcon;
+  iconRight?: IIcon;
+  seamless?: boolean;
+  transparent?: boolean;
+  title?: string;
+  red?: boolean,
+  grey?: boolean,
+  non_submitting?: boolean;
+  is_loading?: boolean;
+};
 
-interface IButtonProps {
-  children?: string,
-  label?: string,
-
-  onClick?: React.MouseEventHandler,
-}
-
-export const Button: React.FunctionComponent<IButtonProps> = ({
+export const Button: FC<IButtonProps> = ({
+  className = '',
+  size = 'normal',
+  iconLeft,
+  iconRight,
   children,
-  label,
-  onClick = () => {},
+  seamless = false,
+  transparent = false,
+  non_submitting = false,
+  red = false,
+  grey = false,
+  is_loading,
+  title,
+  ...props
 }) => (
-  <div className={style.container} onClick={onClick}>
-    {label || children || ''}
-  </div>
+  React.createElement(
+    (seamless || non_submitting) ? 'div' : 'button',
+    {
+      className: classnames(
+        styles.button,
+        className,
+        styles[size],
+        {
+          red,
+          grey,
+          seamless,
+          transparent,
+          disabled: props.disabled,
+          icon: (iconLeft || iconRight) && !title && !children,
+          is_loading,
+        }),
+      children: [
+        iconLeft && <Icon icon={iconLeft} size={20} key={0} />,
+        (
+          title
+            ? <span key={1}>{title}</span>
+            : (children && <span key={1}>{children}</span>) || null
+        ),
+        iconRight && <Icon icon={iconRight} size={20} key={2} />,
+      ],
+      ...props,
+    },
+  )
 );