Update:

- added dts
- fixed css className
- removed custom loadingElement
- removed one line file
- added test

.sass-lint.yml

@@ -61,7 +61,7 @@ rules:
   indentation: 2
   leading-zero: 2
   nesting-depth: [2, max-depth: 4]
-  property-sort-order: 2
+  property-sort-order: 0
   property-units: [2, global: ['px', 's']]
   quotes: 2
   shorthand-values: 2

src/components/Main.jsx

@@ -30,7 +30,6 @@ import {
 } from './distributionEntry';
 
 import {
-  ExampleSpinnerButton,
   ExampleForm,
   ExampleSelect,
 } from '../examples/exampleEntry';
@@ -331,34 +330,22 @@ class AppComponent extends React.Component {
 
         <h3>Spinner Buttons</h3>
         <div className="btn-panel">
-          <ExampleSpinnerButton className="btn-inverse">
-            Inverse
-          </ExampleSpinnerButton>
-          <ExampleSpinnerButton className="btn-inverse" bsStyle="primary">
-            Inverse Primary
-          </ExampleSpinnerButton>
-          <ExampleSpinnerButton className="btn-inverse" bsStyle="success">
-            Inverse Success
-          </ExampleSpinnerButton>
-          <ExampleSpinnerButton className="btn-borderless" bsSize="sm">
-            Borderless Small
-          </ExampleSpinnerButton>
-          <ExampleSpinnerButton
-            bsSize="lg"
-            bsStyle="success"
-            loadingElement={<SpinnerButton.Spinner size="medium" />}
-          >
-            Success
-          </ExampleSpinnerButton>
-          <ExampleSpinnerButton
+          <SpinnerButton isLoading className="btn-borderless" bsSize="sm">
+            Small Borderless
+          </SpinnerButton>
+          <SpinnerButton isLoading bsStyle="success" bsSize="large">
+            Big Success
+          </SpinnerButton>
+          <SpinnerButton
+            isLoading
             bsStyle="primary"
-            loadingHoverElement="hitting server hard"
+            loadingHoverElement="stay put"
           >
-            Try click and hover
-          </ExampleSpinnerButton>
-          <ExampleSpinnerButton disabled>
+            Primary
+          </SpinnerButton>
+          <SpinnerButton disabled>
             Disabled
-          </ExampleSpinnerButton>
+          </SpinnerButton>
         </div>
 
         <h1>Tabs</h1>

src/components/adslotUi/SpinnerButtonComponent.jsx

@@ -2,34 +2,28 @@ import React, { PropTypes } from 'react';
 import { Spinner } from 'alexandria-adslot';
 import _ from 'lodash';
 import 'styles/adslotUi/SpinnerButton.scss';
-import Button from './ButtonComponent';
-
-const isButtonProp = (val, key) => Button.propTypes[key];
+import Button from 'react-bootstrap/lib/Button';
+import expandDts from '../../helpers/expandDtsHelper';
 
 const SpinnerButton = (props) => {
   const {
     isLoading,
     children,
-    className = '',
-    loadingElement,
     loadingHoverElement = children,
-  //...btnProps
+    dts,
   } = props;
 
-  /*
-  const size = t.oneOf(['lg', 'large'])(props.bsSize)? null: 'medium'
-  loadingElement = React.cloneElement(loadingElement, { size })
-  */
-  const buttonProps = _.pick(props, isButtonProp);
-
   return (
     <Button
-      disabled={isLoading}
-      {...buttonProps}
-      className={`spinner-button-component ${className}`}
+      disabled={isLoading || props.disabled}
+      {..._.pick(props, _.keys(Button.propTypes))}
+      className={`spinner-button-component ${props.className}`}
+      {...expandDts(dts)}
     >
       <div className={`spinner-container ${isLoading ? '' : 'spinner-button-hidden'}`}>
-        <div className="spinner-button-spinner">{loadingElement}</div>
+        <div className="spinner-button-spinner">
+          <Spinner size={_.includes(['lg', 'large'], props.bsSize) ? 'medium' : 'small'} />
+        </div>
         <div className="spinner-button-hidden">{loadingHoverElement}</div>
       </div>
       <div className={isLoading ? 'spinner-button-hidden' : null}>{children}</div>
@@ -39,15 +33,15 @@ const SpinnerButton = (props) => {
 
 SpinnerButton.propTypes = _.assign({
   isLoading: PropTypes.bool,
-  loadingElement: PropTypes.node,
   loadingHoverElement: PropTypes.node,
+  dts: PropTypes.string,
 }, Button.propTypes);
 
 SpinnerButton.defaultProps = {
   className: '',
   isLoading: false,
-  loadingElement: <Spinner size="small" />,
 };
 
-SpinnerButton.Spinner = Spinner;
+// SpinnerButton.Spinner = Spinner;
+
 export default SpinnerButton;

src/components/distributionEntry.js

@@ -23,7 +23,7 @@ import Tab from 'react-bootstrap/lib/Tab';
 import Tabs from 'react-bootstrap/lib/Tabs';
 import Toggle from 'react-toggle';
 import SpinnerButton from 'components/adslotUi/SpinnerButtonComponent';
-import Button from 'components/adslotUi/ButtonComponent';
+import Button from 'react-bootstrap/lib/Button';
 import TreePickerGrid from 'components/adslotUi/TreePickerGridComponent';
 import TreePickerNav from 'components/adslotUi/TreePickerNavComponent';
 import TreePickerNode from 'components/adslotUi/TreePickerNodeComponent';

src/examples/exampleEntry.js

@@ -1,9 +1,7 @@
 import ExampleForm from './components/forms';
 import ExampleSelect from './components/selects';
-import ExampleSpinnerButton from './components/spinnerButton';
 
 export {
   ExampleForm,
   ExampleSelect,
-  ExampleSpinnerButton,
 };

src/styles/adslotUi/SpinnerButton.scss

@@ -1,32 +1,36 @@
 .spinner-button {
-  &-layer-fillparent {
+  @mixin fill-area {
     position: absolute;
-    margin-left: auto;
-    margin-right: auto;
-    left: 0;
     right: 0;
-  }  
+    left: 0;
+    margin-right: auto;
+    margin-left: auto;
+  }
 
   &-hidden {
     visibility: hidden;
   }
 
   &-spinner {
-    @extend .spinner-button-layer-fillparent;
+    @include fill-area;
   }
 
-  &-component {  
+  &-component {
+
     .spinner-container {
-      @extend .spinner-button-layer-fillparent;
-      
+      @include fill-area;
+
       &:hover {
+
         .spinner-button-spinner {
           visibility: hidden;
         }
+
         .spinner-button-hidden {
           visibility: initial;
         }
       }
+
       // workaround for vertical centering
       .spinner-component {
         .spinner {

test/components/adslotUi/SpinnerButtonComponentTest.jsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import SpinnerButton from 'components/adslotUi/SpinnerButtonComponent';
-import sinon from 'sinon';
 import { shallow } from 'enzyme';
 import assert from 'assert';
 
 describe('SpinnerButtonComponent', () => {
   it('should render with defaults', () => {
     const element = shallow(<SpinnerButton>Test</SpinnerButton>);
     assert(element.find('Spinner'));
+    const buttonElement = element.find('Button');
+    assert(!buttonElement.prop('disabled'));
+    assert(!buttonElement.prop('isLoading'));
     expect(element.children().last().text()).to.equal('Test');
   });
 
@@ -17,22 +19,15 @@ describe('SpinnerButtonComponent', () => {
     );
 
     const buttonElement = element.find('Button');
-    expect(buttonElement.prop('bsStyle')).is.equal('primary');
-    expect(buttonElement.prop('bsSize')).is.equal('lg');
-  });
-
-  it('should accept custom loading element', () => {
-    const element = shallow(
-      <SpinnerButton loadingElement="loading..">Test</SpinnerButton>
-    );
-    expect(element.children().first().text()).to.contain('loading..');
+    expect(buttonElement.prop('bsStyle')).to.equal('primary');
+    expect(buttonElement.prop('bsSize')).to.equal('lg');
   });
 
   it('should accept custom loading hover element', () => {
     const element = shallow(
-      <SpinnerButton loadingHoverElement="loading..">Test</SpinnerButton>
+      <SpinnerButton loadingHoverElement="loading…">Test</SpinnerButton>
     );
-    expect(element.children().first().text()).to.contain('loading..');
+    expect(element.children().first().text()).to.contains('loading…');
   });
 
   it('should be disabled in loading mode', () => {
@@ -43,4 +38,13 @@ describe('SpinnerButtonComponent', () => {
     const buttonElement = element.find('Button');
     assert(buttonElement.prop('disabled'));
   });
+
+  it('should have disabled state controled by disabled prop if present regardless of isLoading prop', () => {
+    const element = shallow(
+      <SpinnerButton isLoading="false" disabled>Test</SpinnerButton>
+    );
+
+    const buttonElement = element.find('Button');
+    assert(buttonElement.prop('disabled'));
+  });
 });