fix(ui-tollkit): improve loading button styles

fixes #754

packages/ui-toolkit/src/button/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import remcalc from 'remcalc';
 import PropTypes from 'prop-types';
-import is from 'styled-is';
+import is, { isOr } from 'styled-is';
 import styled, { css } from 'styled-components';
 import { A, Button as NButton } from 'normalized-styled-components';
 import { Link } from 'react-router-dom';
@@ -124,7 +124,9 @@ const style = css`
     }
   `};
 
-  ${is('disabled')`
+  ${isOr('disabled', 'loading')`
+    cursor: not-allowed;
+    pointer-events: none;
     color: ${props => props.theme.grey};
     background-color: ${props => props.theme.disabled};
     border-color: ${props => props.theme.grey};
@@ -200,7 +202,7 @@ const Button = props => {
   const View = Views.reduce((sel, view) => (sel ? sel : view()), null);
 
   const children = loading ? (
-    <StatusLoader secondary={!secondary} />
+    <StatusLoader secondary={!secondary} small/>
   ) : (
     props.children
   );
@@ -225,6 +227,7 @@ Button.propTypes = {
   secondary: PropTypes.bool,
   tertiary: PropTypes.bool,
   small: PropTypes.bool,
+  loading: PropTypes.bool,
   /**
    * When used, will give button an active state (Only for tertiary for now)
    */

packages/ui-toolkit/src/button/usage.md

@@ -1,5 +1,3 @@
-### with text
-
 ```jsx
 <span>
   <Button>Inspire the lazy</Button>
@@ -8,7 +6,7 @@
 </span>
 ```
 
-### secondary
+#### Button > Secondary
 
 ```jsx
 <span>
@@ -18,7 +16,7 @@
 </span>
 ```
 
-### tertiary
+#### Button > Tertiary
 
 ```jsx
 <span>
@@ -30,7 +28,7 @@
 </span>
 ```
 
-### disabled
+#### Button > Disabled
 
 ```jsx
 <span>
@@ -39,3 +37,12 @@
   <Button href='#4' disabled>Inspire the liars (anchor)</Button>
 </span>
 ```
+
+
+#### Button > Loading
+
+```jsx
+<span>
+  <Button secondary loading>Inspire the liars</Button>
+</span>
+```

packages/ui-toolkit/src/status-loader/index.js

@@ -41,9 +41,9 @@ const Msg = P.extend`
   margin-left: ${remcalc(6)};
 `;
 
-export default ({ msg, row, inline }) => (
+export default ({ msg, row, inline, small }) => (
   <Container row={row} inline={inline}>
     <Loader />
-    <Msg>{msg || 'Loading...'}</Msg>
+    {!small && <Msg>{msg || 'Loading...'}</Msg>}
   </Container>
 );