Add href and type to button component

3 files changed, 76 insertions, 24 deletions

diff --git a/package-lock.json b/package-lock.json
index 6b10c8689..a432dda40 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2724,7 +2724,7 @@
       "requires": {
         "@mdi/js": "^3.3.92",
         "@mdi/react": "^1.1.0",
-        "@meetfranz/theme": "file:packages/theme",
+        "@meetfranz/theme": "^1.0.4",
         "react-html-attributes": "^1.4.3",
         "react-loader": "^2.4.5"
       },
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
index 784ead04c..92d69ae0e 100644
--- a/packages/forms/src/button/index.tsx
+++ b/packages/forms/src/button/index.tsx
@@ -8,16 +8,23 @@ import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 import Loader from 'react-loader';
 
-import { IFormField, IWithStyle } from '../typings/generic';
+import { IFormField, IWithStyle, Omit } from '../typings/generic';
 
 type ButtonType = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'inverted';
 
-interface IProps extends React.InputHTMLAttributes<HTMLButtonElement>, IFormField, IWithStyle {
+interface IProps extends IFormField, IWithStyle {
+  className?: string;
+  disabled?: boolean;
+  id?: string;
+  type?: string;
+  onClick: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>) => void;
   buttonType?: ButtonType;
   stretch?: boolean;
   loaded?: boolean;
   busy?: boolean;
   icon?: keyof typeof mdiIcons;
+  href?: string;
+  target?: string;
 }
 
 interface IState {
@@ -28,7 +35,7 @@ const styles = (theme: Theme) => ({
   button: {
     borderRadius: theme.borderRadiusSmall,
     border: 'none',
-    display: 'flex',
+    display: 'inline-flex',
     position: 'relative' as CSS.PositionProperty,
     transition: 'background .5s',
     textAlign: 'center' as CSS.TextAlignProperty,
@@ -37,6 +44,7 @@ const styles = (theme: Theme) => ({
     padding: 0,
     width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.WidthProperty<string>,
     fontSize: theme.uiFontSize,
+    textDecoration: 'none',
   },
   label: {
     margin: '10px 20px',
@@ -127,6 +135,7 @@ class ButtonComponent extends Component<IProps> {
     buttonType: 'primary' as ButtonType,
     stretch: false,
     busy: false,
+    // target: '_self'
   };
 
   state = {
@@ -163,6 +172,8 @@ class ButtonComponent extends Component<IProps> {
       loaded,
       icon: iconName,
       busy: busyProp,
+      href,
+      target,
     } = this.props;
 
     const {
@@ -185,19 +196,8 @@ class ButtonComponent extends Component<IProps> {
       showLoader = busy;
     }
 
-    return (
-      <button
-        id={id}
-        type={type}
-        onClick={onClick}
-        className={classnames({
-          [`${classes.button}`]: true,
-          [`${classes[buttonType as ButtonType]}`]: true,
-          [`${classes.disabled}`]: disabled,
-          [`${className}`]: className,
-        })}
-        disabled={disabled}
-      >
+    const content = (
+      <>
         <div className={classes.loaderContainer}>
           {showLoader && (
             <Loader
@@ -219,8 +219,47 @@ class ButtonComponent extends Component<IProps> {
           )}
           {label}
         </div>
-      </button>
+      </>
     );
+
+    let wrapperComponent = null;
+
+    if (!href) {
+      wrapperComponent = (
+        <button
+          id={id}
+          type={type}
+          onClick={onClick}
+          className={classnames({
+            [`${classes.button}`]: true,
+            [`${classes[buttonType as ButtonType]}`]: true,
+            [`${classes.disabled}`]: disabled,
+            [`${className}`]: className,
+          })}
+          disabled={disabled}
+        >
+          {content}
+        </button>
+      );
+    } else {
+      wrapperComponent = (
+        <a
+          href={href}
+          target={target}
+          onClick={onClick}
+          className={classnames({
+            [`${classes.button}`]: true,
+            [`${classes[buttonType as ButtonType]}`]: true,
+            [`${className}`]: className,
+          })}
+          rel={target === '_blank' ? 'noopener' : ''}
+        >
+          {content}
+        </a>
+      );
+    }
+
+    return wrapperComponent;
   }
 }
 
diff --git a/uidev/src/stories/button.stories.tsx b/uidev/src/stories/button.stories.tsx
index b5906211a..d81808530 100644
--- a/uidev/src/stories/button.stories.tsx
+++ b/uidev/src/stories/button.stories.tsx
@@ -10,7 +10,6 @@ const defaultProps = {
   id: 'test1',
   name: 'test1',
   type: 'button',
-  onClick: (e: React.MouseEvent<HTMLButtonElement>)  => console.log('click event', e),
   disabled: false,
 };
 
@@ -22,13 +21,13 @@ const WithStoreButton = observer(({ store }: { store: any }) => (
   <>
     <Button
       {...Object.assign({}, defaultProps, store)}
-      onClick={() => {
+      onClick={!store.onClick ? () => {
         store.busy = !store.busy;
 
         window.setTimeout(() => {
           store.busy = !store.busy;
         },                1000);
-      }}
+      } : store.onClick}
     />
   </>
 ));
@@ -77,8 +76,22 @@ storiesOf('Button')
       busy: true,
     })} />
   ))
-  .add('With icon', () => (
+  .add('As link', () => (
     <WithStoreButton store={createStore({
-      icon: 'mdiAccountCircle',
+      href: 'https://meetfranz.com',
     })} />
-  ));
+  ))
+  .add('As link (target=_blank)', () => (
+    <WithStoreButton store={createStore({
+      href: 'https://meetfranz.com',
+      target: '_blank',
+    })} />
+  ))
+  .add('As link (with onClick)', () => (
+    <WithStoreButton store={createStore({
+      href: 'https://meetfranz.com',
+      onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
+        e.preventDefault();
+        alert('Click event');
+      },
+    })} />));