Merge e1c2443 into 52e491b

package.json

@@ -26,7 +26,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@lightelligence/styles": "1.2.1",
+    "@lightelligence/styles": "1.3.0",
     "classnames": "^2.2.6",
     "clipboard-copy": "^3.1.0",
     "humps": "^2.0.1",

src/components/Button/Button.js

@@ -17,6 +17,7 @@ export const Button = React.forwardRef(
       tag,
       iconLeft,
       iconRight,
+      loading,
       onClick,
       ...props
     },
@@ -38,6 +39,7 @@ export const Button = React.forwardRef(
           iconLeft && olt.ButtonIconLeft,
           iconRight && olt[`Icon${pascalize(iconRight)}`],
           iconRight && olt.ButtonIconRight,
+          loading && olt.ButtonProgress,
           className,
         )}
       >
@@ -75,6 +77,10 @@ Button.propTypes = {
    * The `disabled` state of this button.
    */
   disabled: bool,
+  /**
+   * The `laoding` state of this button.
+   */
+  loading: bool,
   /**
    * The label of this button.
    */
@@ -108,6 +114,7 @@ Button.defaultProps = {
   tag: 'button',
   className: undefined,
   disabled: undefined,
+  loading: false,
   icon: undefined,
   iconLeft: undefined,
   iconRight: undefined,

src/components/Button/Button.md

@@ -396,6 +396,23 @@ import { Button } from '@lightelligence/react';
 <Button disabled>Disabled</Button>;
 ```
 
+### Loading
+
+```js
+import { Button, FloatingList } from '@lightelligence/react';
+initialState = { loading: false};
+const load = () => {
+  setState({ loading: true });
+  setTimeout(()=>setState({ loading: false }), 2500)
+};
+
+<FloatingList>
+  <Button onClick={load} loading={state.loading}>Spin Them</Button>
+  <Button onClick={load} emphasis="secondary" loading={state.loading}>Spin Them</Button>
+  <Button onClick={load} emphasis="tertiary" loading={state.loading}>Spin Them</Button>
+</FloatingList>
+```
+
 ### Emphasis
 
 The emphasis of this button. Valid values are:

src/components/Button/Button.test.js

@@ -51,6 +51,15 @@ describe('Button', () => {
     expect(button.classList.contains('myClass')).toBe(true);
   });
 
+  test('correctly sets the css-modifier for loading', () => {
+    const { getByText } = renderButton({
+      children: 'Button',
+      loading: true,
+    });
+    const button = getByText('Button');
+    expect(button.classList.contains(oltStyles.ButtonProgress)).toBe(true);
+  });
+
   test('correctly sets the css-modifier for emphasis secondary', () => {
     const { getByText } = renderButton({
       children: 'Button',