Merge branch 'master' into GH315_input-icon-accessibility

# Conflicts:
#	components/forms/input/index.jsx
#	tests/input/input.test.jsx

Author: David Brainer-Banker

README-dist.md

@@ -1,5 +1,5 @@
 
-Welcome to [Design System React](https://design-system-react.herokuapp.com).
+Welcome to [Design System React](https://react.lightningdesignsystem.com/).
 
 Presented here are Javascript components based on [Lightning Design System](https://www.lightningdesignsystem.com/) and designed for React.
 
@@ -8,6 +8,6 @@ Presented here are Javascript components based on [Lightning Design System](http
 
 ## Documentation
 
-[Design System React website](https://design-system-react.herokuapp.com)
+[Design System React website](https://react.lightningdesignsystem.com/)
 
-[Salesforce Lightning Design System website](https://www.lightningdesignsystem.com)
+[Salesforce Lightning Design System website](https://www.lightningdesignsystem.com/)

README.md

@@ -9,7 +9,7 @@ For example, `SLDSMenuDropdown` represents [Lightning Design System Menu > Dropd
 and `SLDSLookup` represents [Lightning Design System Lookup > Base](http://www.lightningdesignsystem.com/components/lookups/#base).
 
 
-This project is in beta and very experimental. Please visit [Design System React](https://react.lightningdesignsystem.com/) for documentation and examples of using the Design System React Components. If you are using the ECMAScript 6 source files in `./components/`, you will need to enable your ES5 transpiler to allow stage-1 proposed features. If you are using Babel, it may be helpful to install the NPM module, `babel-preset-stage-1`, into your project and review the `.babelrc` file in this project.
+This project is in beta and very experimental. Please visit [Design System React](https://react.lightningdesignsystem.com/) for documentation and examples of using the Design System React Components. If you are using the ECMAScript 6 source files in `./components/`, you will need to enable your ES5 transpiler to allow stage-1 proposed features. If you are using Babel, it may be helpful to install the NPM module `babel-preset-stage-1` into your project and review the `.babelrc` file in this project.
 
 ### Run local server
 
@@ -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. You can find a more complete [getting started guide](https://react.lightningdesignsystem.com/getting-started) on the documentation site.
 
 ### NPM
 
@@ -42,7 +42,7 @@ Because this project is not open-sourced, we cannot publish it to npm. Therefore
 ```
 # package.json
 
-"design-system-react": "git+ssh://[email protected]:salesforce-ux/design-system-react.git#v0.0.30",
+"design-system-react": "git+ssh://[email protected]:salesforce-ux/design-system-react.git#v0.0.32",
 ```
 
 Then, in your React code, import each Lightning Design System component you need.
@@ -71,25 +71,7 @@ Note: the SLDSPopoverTooltip requires a focusable element as a child (ie. either
 ```
 
 ## FAQ
-1.  **What is the [Lightning Design System](http://www.lightningdesignsystem.com/)?**
-
-    It is collection of design patterns, components, and guidelines for creating unified UI in the Salesforce ecosystem.
-
-2.  **How is the Design System React Library different than the Lightning Design System?**
-
-    The Lightning Design System consists of static markup components. The Design System React Library is the ReactJS implementation.
-
-3.  **Are the Design System React components accessible?**
-
-    We strive to make all components accessible for keyboard users and screen readers. If you find any accessibility bugs, please submit a [Github Issue](https://github.com/salesforce-ux/design-system-react/issues).
-
-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.
-
-5.  **Which browsers are supported?**
-
-    We support the same browsers as the Lightning Design System. Please visit [Lightning Design System - FAQ](http://www.lightningdesignsystem.com/faq/#what-browsers-are-supported) for details.
+Read our [FAQ](https://react.lightningdesignsystem.com/faq) on the documentation site.
 
 ## Contributing to the code base
 

RELEASENOTES.md

@@ -2,6 +2,21 @@
 # React Components: design-system-react
 # Release notes
 
+## Release 0.0.32
+- Added containerClassName prop to Spinner
+
+## 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/button-group/index.jsx

@@ -10,7 +10,7 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 */
 
 import React from 'react';
-const classNames = require('classnames');
+import classNames from 'classnames';
 
 import { BUTTON_GROUP } from '../../utilities/constants';
 

components/button/index.jsx

@@ -10,13 +10,18 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 */
 
 import React from 'react';
-const classNames = require('classnames');
+import classNames from 'classnames';
 import ButtonIcon from '../icon/button-icon';
 import TooltipTrigger from '../popover-tooltip/trigger';
 import omit from 'lodash.omit';
 
 import { BUTTON } from '../../utilities/constants';
 
+// ### shortid
+// [npmjs.com/package/shortid](https://www.npmjs.com/package/shortid)
+// shortid is a short, non-sequential, url-friendly, unique id generator
+import shortid from 'shortid';
+
 const displayName = BUTTON;
 const propTypes = {
 	/**
@@ -34,7 +39,7 @@ const propTypes = {
 	 */
 	iconName: React.PropTypes.string,
 
-	iconCategory: React.PropTypes.oneOf(['action', 'custom', 'doctype', 'standard', 'utility']).isRequired,
+	iconCategory: React.PropTypes.oneOf(['action', 'custom', 'doctype', 'standard', 'utility']),
 	/**
 	 * If omitted, icon position is centered.
 	 */
@@ -65,6 +70,7 @@ const propTypes = {
 	variant: React.PropTypes.oneOf(['base', 'neutral', 'brand', 'destructive', 'icon', 'inverse', 'icon-inverse'])
 };
 const defaultProps = {
+	id: shortid.generate(),
 	disabled: false,
 	hint: false,
 	iconSize: 'medium',

components/card/index.jsx

@@ -32,6 +32,11 @@ import Empty from './empty';
 // Removes the need for `PropTypes`.
 const { PropTypes } = React;
 
+// ### shortid
+// [npmjs.com/package/shortid](https://www.npmjs.com/package/shortid)
+// shortid is a short, non-sequential, url-friendly, unique id generator
+import shortid from 'shortid';
+
 import { CARD } from '../../utilities/constants';
 
 // Allow for predicatable DOM queries with `querySelectorAll(cssClasses.base)`
@@ -84,11 +89,12 @@ const Card = React.createClass({
 		/**
 		 * Set the HTML `id` of the card. This also sets the `id` of the filter and the header actions.
 		 */
-		id: PropTypes.string.isRequired
+		id: PropTypes.string
 	},
 
 	getDefaultProps () {
 		return {
+			id: shortid.generate(),
 			heading: 'Related Items'
 		};
 	},

components/data-table/index.jsx

@@ -18,6 +18,11 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 // ### React
 import React from 'react';
 
+// ### shortid
+// [npmjs.com/package/shortid](https://www.npmjs.com/package/shortid)
+// shortid is a short, non-sequential, url-friendly, unique id generator
+import shortid from 'shortid';
+
 // ### classNames
 import classNames from 'classnames';
 
@@ -33,9 +38,6 @@ import isFunction from 'lodash.isfunction';
 // ### reject
 import reject from 'lodash.reject';
 
-// ### uniqueId
-import uniqueId from 'lodash.uniqueid';
-
 // This component's `checkProps` which issues warnings to developers about properties when in development mode (similar to React's built in development tools)
 import checkProps from './check-props';
 
@@ -86,12 +88,15 @@ const DataTable = React.createClass({
 		 * Class names to be added to the table.
 		 */
 		className: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
+		/**
+		 * A unique ID is needed in order to support keyboard navigation and ARIA support.
+		 */
 		id: PropTypes.string,
-    /**
+		/**
  		 * The collection of items to render in the table.
  		 */
 		items: PropTypes.array.isRequired,
-    /**
+		/**
 		 * This function fires when the selection of rows changes.
 		 */
 		onChange: PropTypes.func,
@@ -124,7 +129,7 @@ const DataTable = React.createClass({
 	getDefaultProps () {
 		return {
 			bordered: false,
-			id: uniqueId(`${DATA_TABLE}-`),
+			id: shortid.generate(),
 			selection: [],
 			selectRows: false,
 			stacked: false,

components/forms/checkbox/index.jsx

@@ -19,8 +19,10 @@ import React from 'react';
 // ### isFunction
 import isFunction from 'lodash.isfunction';
 
-// ### uniqueId
-import uniqueId from 'lodash.uniqueid';
+// ### shortid
+// [npmjs.com/package/shortid](https://www.npmjs.com/package/shortid)
+// shortid is a short, non-sequential, url-friendly, unique id generator
+import shortid from 'shortid';
 
 // ### Event Helpers
 import { KEYS, EventUtil } from '../../../utilities';
@@ -68,6 +70,9 @@ const Checkbox = React.createClass({
 		 * Message to display when the Checkbox is in an error state. When this is present, also visually highlights the component as in error.
 		 */
 		errorText: React.PropTypes.string,
+		/**
+		 * A unique ID is needed in order to support keyboard navigation and ARIA support.
+		 */
 		id: PropTypes.string,
 		/**
 		 * An optional label for the Checkbox.
@@ -85,7 +90,7 @@ const Checkbox = React.createClass({
 
 	getDefaultProps () {
 		return {
-			id: uniqueId(`${FORMS_CHECKBOX}-`)
+			id: shortid.generate()
 		};
 	},
 

components/forms/input/check-props.js

@@ -17,16 +17,17 @@ let checkProps = function () {};
 
 if (process.env.NODE_ENV !== 'production') {
 	checkProps = function (COMPONENT, props) {
-		/* eslint-disable max-len */
-		oneOfRequiredProperty(COMPONENT, {
-			assistiveText: props.assistiveText,
-			label: props.label
-		});
+		if (!props.inlineEditTrigger) {
+			oneOfRequiredProperty(COMPONENT, {
+				assistiveText: props.assistiveText,
+				label: props.label
+			});
+		}
+		
 		onlyOneOfProperties(COMPONENT, {
 			assistiveText: props.assistiveText,
 			label: props.label
 		});
-		/* eslint-enable max-len */
 	};
 }
 

components/forms/input/index.jsx

@@ -17,6 +17,11 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 // React is an external dependency of the project.
 import React from 'react';
 
+// ### shortid
+// [npmjs.com/package/shortid](https://www.npmjs.com/package/shortid)
+// shortid is a short, non-sequential, url-friendly, unique id generator
+import shortid from 'shortid';
+
 // ### classNames
 // [github.com/JedWatson/classnames](https://github.com/JedWatson/classnames)
 // This project uses `classnames`, "a simple javascript utility for conditionally
@@ -104,7 +109,7 @@ const Input = React.createClass({
 		/**
 		 * Every input must have a unique ID in order to support keyboard navigation and ARIA support.
 		 */
-		id: PropTypes.string.isRequired,
+		id: PropTypes.string,
 		/**
 		 * This label appears above the input.
 		 */
@@ -113,6 +118,10 @@ const Input = React.createClass({
 		 * This event fires when the input changes.
 		 */
 		onChange: PropTypes.func,
+		/**
+		 * This event fires when the input is clicked.
+		 */
+		onClick: PropTypes.func,
 		/**
 		 * This event fires when the icon is clicked.
 		 */
@@ -161,6 +170,7 @@ const Input = React.createClass({
 
 	getDefaultProps () {
 		return {
+			id: shortid.generate(),
 			iconPosition: 'left',
 			type: 'text'
 		};
@@ -197,8 +207,11 @@ const Input = React.createClass({
 			iconName,
 			iconPosition,
 			id,
+			inlineEditTrigger, // eslint-disable-line react/prop-types
 			label,
 			onChange,
+			onClick,
+			onIconClick, // eslint-disable-line no-unused-vars
 			placeholder,
 			readOnly,
 			required,
@@ -241,7 +254,7 @@ const Input = React.createClass({
 						'slds-input-has-icon',
 						`slds-input-has-icon--${iconPosition}`
 					], {
-						'slds-has-divider--bottom': readOnly
+						'slds-has-divider--bottom': readOnly && !inlineEditTrigger
 					})}
 				>
 					{hasIcon && this.getIconRender('left')}
@@ -254,16 +267,17 @@ const Input = React.createClass({
 						disabled={disabled}
 						id={id}
 						onChange={onChange}
+						onClick={onClick}
 						placeholder={placeholder}
 						required={required}
 						type={type}
 						value={value}
 					/>}
-
 					{hasIcon && this.getIconRender('right')}
 
-					{readOnly && <span className="slds-form-element__static">
+					{readOnly && <span className="slds-form-element__static" onClick={onClick}>
 						{value}
+						{inlineEditTrigger}
 					</span>}
 				</div>
 				{errorText && <div className="slds-form-element__help">{errorText}</div>}