Add Spinner component, react-story, and test. (#340)

* Add Spinner component, react-story, and test.

* Add a bit more to the release notes

Author: donnieberg

README.md

@@ -33,7 +33,7 @@ npm run dist
 
 ## Getting Started
 
-Note: `design-system-react` is optimized for React 0.14.x and uses Lightning Design System 1.0.3.
+Note: `design-system-react` is optimized for React 0.14.x and uses Lightning Design System 2.1.0-beta.3.
 
 ### NPM
 
@@ -85,7 +85,7 @@ Note: the SLDSPopoverTooltip requires a focusable element as a child (ie. either
 
 4.  **Which version of React and Lightning Design System do you support?**
 
-    Design System React is optimized for React 0.14.x and uses Lightning Design System 1.0.3.
+    Design System React is optimized for React 0.14.x and uses Lightning Design System 2.1.0-beta.3.
 
 5.  **Which browsers are supported?**
 

RELEASENOTES.md

@@ -2,6 +2,18 @@
 # React Components: design-system-react
 # Release notes
 
+## Release 0.0.31
+
+**MAJOR CHANGES**
+- Added new Spinner component
+- Updated the ContextBar component
+- Added a highlighting utility
+- Added a custom cell type to DataTable using the highlighter
+
+**OTHER**
+- Remove isRequired for iconCategory in ButtonGroup
+- Additional bug fixes and code cleanup
+
 ## Release 0.0.29
 
 **MAJOR CHANGES**

components/index.js

@@ -98,6 +98,9 @@ export PageHeader from './page-header';
 export SLDSPopoverTooltip from './popover-tooltip';
 export PopoverTooltip from './popover-tooltip';
 
+export SLDSSpinner from './spinner';
+export Spinner from './spinner';
+
 export SLDSTimepicker from './time-picker';
 export Timepicker from './time-picker';
 

components/spinner/index.jsx

@@ -0,0 +1,75 @@
+/*
+Copyright (c) 2015, salesforce.com, inc. All rights reserved.
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+Neither the name of salesforce.com, inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 'AS IS' AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+*/
+
+// # Spinner Component --- SLDS for React
+
+// Implements the [Spinner design pattern - 2.1.0-beta.3 (204)](https://latest-204.lightningdesignsystem.com/components/spinners) in React.
+
+// ### React
+// React is an external dependency of the project.
+import React from 'react';
+
+import classNames from 'classnames';
+
+// ## Constants
+import { SPINNER } from '../../utilities/constants';
+
+// Removes the need for `PropTypes`.
+const { PropTypes } = React;
+
+// ### Prop Types
+const PROP_TYPES = {
+	/**
+	 * Determines the size of the spinner
+	 */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+	/**
+	 * Determines the color of the spinner: `base` is gray, `brand` is blue, and `inverse` is white.
+	 */
+  variant: PropTypes.oneOf(['base', 'brand', 'inverse'])
+};
+
+const DEFAULT_PROPS = {
+  size: 'medium',
+  variant: 'base'
+};
+
+// ## Spinner
+const Spinner = (props) => {
+	const {
+		variant,
+		size
+	} = props;
+
+  const sizeClass = `slds-spinner--${props.size}`;
+  const variants = {
+    brand: 'slds-spinner--brand',
+    inverse: 'slds-spinner--inverse'
+  };
+
+	return (
+			<div className='slds-spinner_container'>
+				<div
+					className={classNames('slds-spinner', sizeClass, variants[props.variant])}
+					aria-hidden='false'
+					role='alert'
+				>
+					<div className='slds-spinner__dot-a'></div>
+					<div className='slds-spinner__dot-b'></div>
+				</div>
+			</div>
+	);
+};
+
+Spinner.displayName = SPINNER;
+Spinner.propTypes = PROP_TYPES;
+Spinner.defaultProps = DEFAULT_PROPS;
+
+module.exports = Spinner;
+

package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-system-react",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "description": "Salesforce Lightning Design System React components",
   "license": "BSD-3-Clause",
   "scripts": {

stories/index.js

@@ -7,3 +7,4 @@ export default from './context-bar';
 export default from './data-table';
 export default from './icon';
 export default from './input';
+export default from './spinner';

stories/spinner/index.jsx

@@ -0,0 +1,32 @@
+/* eslint-disable indent */
+
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+
+import { SPINNER } from '../../utilities/constants';
+import Spinner from '../../components/spinner';
+
+const getSpinner = props => (
+	<Spinner {...props} />
+);
+
+const inverseContainer = {
+  backgroundColor: '#4bca81',
+  position: 'absolute',
+  width: '100%',
+  height: '100%'
+};
+
+storiesOf(SPINNER, module)
+	.addDecorator(getStory => <div className="slds-p-around--medium">{getStory()}</div>)
+	.add('Small', () => getSpinner({ size: 'small', variant: 'base' }))
+	.add('Medium', () => getSpinner({ size: 'medium', variant: 'base' }))
+	.add('Large', () => getSpinner({ size: 'large', variant: 'base' }))
+	.add('Brand Small', () => getSpinner({ size: 'small', variant: 'brand' }))
+	.add('Brand Medium', () => getSpinner({ size: 'medium', variant: 'brand' }))
+	.add('Brand Large', () => getSpinner({ size: 'large', variant: 'brand' }))
+
+	.addDecorator(getStory => <div className="slds-p-around--medium" style={inverseContainer}>{getStory()}</div>)
+	.add('Inverse Small', () => getSpinner({ size: 'small', variant: 'inverse' }))
+	.add('Inverse Medium', () => getSpinner({ size: 'medium', variant: 'inverse' }))
+	.add('Inverse Large', () => getSpinner({ size: 'large', variant: 'inverse' }))

tests/spinner/spinner.test.jsx

@@ -0,0 +1,65 @@
+/* eslint-disable indent */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import assign from 'lodash.assign';
+import chai from 'chai';
+
+import {Spinner} from '../../components';
+
+chai.should();
+
+describe('Spinner: ', function () {
+	// Setup and takedown
+	const renderSpinner = (instance) => {
+		return function () {
+			this.dom = document.createElement('div');
+			document.body.appendChild(this.dom);
+			this.component = ReactDOM.render(instance, this.dom);
+		};
+	};
+
+	function removeSpinner () {
+		ReactDOM.unmountComponentAtNode(this.dom);
+		document.body.removeChild(this.dom);
+	};
+
+	const getSpinner = dom => dom.querySelector('.slds-spinner');
+
+	// Tests
+  describe('Default spinner renders properly', () => {
+		before(renderSpinner(
+			<Spinner />
+		));
+
+		after(removeSpinner);
+
+		it('Spinner exists', function () {
+			const spinner = getSpinner(this.dom);
+			spinner.should.not.be.undefined;
+		});
+
+		it('renders default classes when no props passed in', function () {
+			const spinner = getSpinner(this.dom);
+      spinner.className.should.equal('slds-spinner slds-spinner--medium');
+		});
+  })
+
+	describe('Props render proper css classes', function () {
+
+		beforeEach(renderSpinner(
+			<Spinner size='small' variant='brand' />
+		));
+
+		afterEach(removeSpinner);
+
+		it('renders correct classes when props passed in', function () {
+			const spinner = getSpinner(this.dom);
+      spinner.className.should.include('slds-spinner--small slds-spinner--brand');
+		});
+
+	});
+
+});
+
+

utilities/constants.js

@@ -32,3 +32,4 @@ export const ICON_INPUT = 'SLDSIconInput';
 export const LOOKUP = 'SLDSLookup';
 export const MEDIA_OBJECT = 'SLDSMediaObject';
 export const MENU_DROPDOWN = 'SLDSMenuDropdown';
+export const SPINNER = 'SLDSSPINNER';