refactor(loading): update to 7.x (carbon-design-system#559)

* refactor(loading): update to 7.x * fix(interior-left-nav): removed unused variable
joshblack · Apr 20, 2017 · 3a0471a · 3a0471a
1 parent c9f0445
commit 3a0471a
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 78 deletions.
diff --git a/.storybook/components/LoadingStory.js b/.storybook/components/LoadingStory.js
@@ -9,12 +9,29 @@ const loadingProps = {
 
 storiesOf('Loading', module)
   .addWithInfo(
-    '',
+    'Loading with overlay',
     `
       Loading spinners are used when retrieving data or performing slow computations,
       and help to notify users that loading is underway. The 'active' property is true by default;
       set to false to end the animation.
     `,
-    () => (
-      <Loading {...loadingProps} />
-  ));
+    () => <Loading {...loadingProps} />,
+  )
+  .addWithInfo(
+    'Loading without overlay',
+    `
+      Loading spinners are used when retrieving data or performing slow computations,
+      and help to notify users that loading is underway. The 'active' property is true by default;
+      set to false to end the animation.
+    `,
+    () => <Loading {...loadingProps} withOverlay={false} />,
+  )
+  .addWithInfo(
+    'Small loading',
+    `
+      Loading spinners are used when retrieving data or performing slow computations,
+      and help to notify users that loading is underway. The 'active' property is true by default;
+      set to false to end the animation.
+    `,
+    () => <Loading {...loadingProps} small={true} withOverlay={false} />,
+  );
diff --git a/components/Loading.js b/components/Loading.js
@@ -1,40 +1,48 @@
-/* global window */
-
 import React from 'react';
 import classNames from 'classnames';
 
-const propTypes = {
-  active: React.PropTypes.bool,
-  className: React.PropTypes.string,
-};
-
-const defaultProps = {
-  active: true,
-};
-
-const Loading = ({ className, active, ...other }) => {
-  const isIe = window.ActiveXObject || 'ActiveXObject' in window;
-
-  const loadingClasses = classNames(
-    'bx--loading',
-    className,
-    {
-      'bx--loading--ie': isIe,
+class Loading extends React.Component {
+  static propTypes = {
+    active: React.PropTypes.bool,
+    className: React.PropTypes.string,
+    withOverlay: React.PropTypes.bool,
+    small: React.PropTypes.bool,
+  };
+
+  static defaultProps = {
+    active: true,
+    withOverlay: true,
+    small: false,
+  };
+
+  render() {
+    const {
+      active,
+      className,
+      withOverlay,
+      small,
+      ...other
+    } = this.props;
+
+    const loadingClasses = classNames('bx--loading', className, {
+      'bx--loading--small': small,
       'bx--loading--stop': !active,
-      'bx--loading--stop--ie': !active && isIe,
-    },
-  );
-
-  return (
-    <div {...other} className={loadingClasses}>
-      <svg className="bx--loading__svg" viewBox="-75 -75 150 150">
-        <circle cx="0" cy="0" r="37.5" />
-      </svg>
-    </div>
-  );
-};
-
-Loading.propTypes = propTypes;
-Loading.defaultProps = defaultProps;
+    });
+
+    const loading = (
+      <div {...other} className={loadingClasses}>
+        <svg className="bx--loading__svg" viewBox="-75 -75 150 150">
+          <circle cx="0" cy="0" r="37.5" />
+        </svg>
+      </div>
+    );
+
+    return withOverlay
+      ? <div className="bx--loading-overlay">
+          {loading}
+        </div>
+      : loading;
+  }
+}
 
 export default Loading;
diff --git a/components/__tests__/Loading-test.js b/components/__tests__/Loading-test.js
@@ -2,26 +2,32 @@
 
 import React from 'react';
 import Loading from '../Loading';
-import { shallow, mount } from 'enzyme';
+import { mount } from 'enzyme';
 
 describe('Loading', () => {
   describe('Renders as expected', () => {
-    const wrapper = shallow(
-      <Loading className="extra-class" />
-    );
+    const wrapper = mount(<Loading className="extra-class" />);
+    const overlay = wrapper.find('.bx--loading-overlay');
+    const loader = wrapper.find('.bx--loading');
+    const svg = loader.find('svg');
 
-    const loader = wrapper.find('div');
-    const svg = wrapper.find('svg');
+    it('should render with an overlay', () => {
+      expect(overlay.length).toEqual(1);
+    });
 
-    it('should render a loader', () => {
+    it('should render with a loader', () => {
       expect(loader.length).toEqual(1);
     });
 
     it('shoud render an svg', () => {
       expect(svg.length).toEqual(1);
     });
 
-    it('has the expected classes', () => {
+    it('overlay has the expected class', () => {
+      expect(overlay.hasClass('bx--loading-overlay')).toEqual(true);
+    });
+
+    it('loader has the expected classes', () => {
       expect(loader.hasClass('bx--loading')).toEqual(true);
     });
 
@@ -35,46 +41,20 @@ describe('Loading', () => {
   });
 
   describe('Sets props and state as expected', () => {
-    const wrapper = mount(
-      <Loading className="extra-class" />
-    );
+    const wrapper = mount(<Loading className="extra-class" />);
 
-    const loader = wrapper.find('div');
     it('should remove and add bx--loading--stop class', () => {
+      const loader = wrapper.find('.bx--loading');
       wrapper.setProps({ active: false });
       expect(loader.hasClass('bx--loading--stop')).toEqual(true);
       wrapper.setProps({ active: true });
       expect(loader.hasClass('bx--loading--stop')).toEqual(false);
     });
-  });
-
-  describe('Has expected IE classes in IE environment', () => {
-    let wrapper;
-    let loader;
-
-    beforeAll(() => {
-      window.ActiveXObject = {};
-      wrapper = mount(
-        <Loading className="extra-class" />
-      );
-      loader = wrapper.find('div');
-    });
 
-    afterAll(() => {
-      window.ActiveXObject = undefined;
-    });
-
-    it('has the expected classes', () => {
-      expect(loader.hasClass('bx--loading')).toEqual(true);
-      expect(loader.hasClass('bx--loading--ie')).toEqual(true);
-    });
-
-    it('should remove and add bx--loading--stop--ie class', () => {
-      wrapper.setProps({ active: false });
-      expect(loader.hasClass('bx--loading--stop')).toEqual(true);
-      expect(loader.hasClass('bx--loading--stop--ie')).toEqual(true);
-      wrapper.setProps({ active: true });
-      expect(loader.hasClass('bx--loading--stop--ie')).toEqual(false);
+    it('should not render overlay when withOverlay is set to false', () => {
+      wrapper.setProps({ withOverlay: false });
+      const overlay = wrapper.find('.bx--loading-overlay');
+      expect(overlay.length).toEqual(0);
     });
   });
 });