Release commit for 0.8.1-commonjs [ci skip]

Author: interactivellama

.gitignore

@@ -0,0 +1,32 @@
+# filesystem
+.DS_Store
+
+# dependencies
+node_modules
+
+# gh-pages
+_site/*
+
+# Editors / IDEs
+.idea
+.vscode
+*.sublime-project
+*.sublime-workspace
+
+# node_module cache for TravisCI, etc.
+node_modules.tar.gz
+
+npm-debug.log
+.esformatter
+.npm
+.tmp*
+server/node_modules
+server/public/assets/bundle
+scripts/pre-commit.sh
+coverage/
+storybook/
+
+# For build server
+design-system-react
+
+package-lock.json

CONTRIBUTING.md

@@ -0,0 +1,58 @@
+# Contributing to Design System React
+
+First, on behalf of the core maintainers, I'd like to thank you for wanting to contribute and make the user experience for your end-users better and improve the developer experience of this library. :+1::tada: -- [@interactivellama](https://github.com/interactivellama/)
+
+## Contributing process
+1. Read the [Codebase Overview](docs/codebase-overview.md) to learn concepts and best practices for the codebase and to confirm it is within project scope.
+1. Create a new issue before starting your solution to keep track of what you are trying to contribute. That way, we can offer suggestions, collaborate on a public API (props), or let you know if there is already an effort in progress.
+1. Fork this repository, clone your fork locally. Create a topic branch locally.
+1. Add the new component to the `/components` folder
+1. Add the component name to `/components/constants.js`
+1. Add documentation site examples and dev storybook stories in `/components/[COMPONENT]/__examples__/`
+1. Add Mocha and Snapshot tests to `/components/[COMPONENT]/__tests__/`
+1. Hook up site and storybook examples in `/components/[COMPONENT]/__docs__/`
+1. Hook up documentation site examples in `/components/site-stories.js`. Site examples only have access to variables exported in `/components/index.js`, so you should limit your imports to these within site examples.
+1. Push to your username's forked repository.
+1. Send us a well-documented pull request targeting `master` from your forked repository. GitHub pull requests should have a descriptive title, a brief summary, @mention several relevant people to review the code, add helpful GitHub comments on lines where you have questions or concerns. All contributors must sign a [Contributor License Agreement](https://cla.salesforce.com/sign-cla).
+1. We'll review your code, suggest any needed changes, and hopefully merge it in. Thank you!
+
+## Contributing Guidelines
+- Are you a first-time contributor? If you would like a simple task to start out with, you might consider [these issues](https://deepscan.io/dashboard/#view=project&pid=1475&bid=4666&subview=issues) or run `npm run lint` and fix a few warnings.
+- UX pattern / design must exist in [SLDS](https://www.lightningdesignsystem.com/). Components in the process of being added to SLDS will be considered as prototypes.
+- All new props and components need tests. **Please review the [testing readme](/tests/README.md)**
+- Follow Eslint settings.
+- If you are adding a feature, [add a story](https://storybook.js.org/basics/writing-stories/) to the React Storybook that uses your feature, so that reviewers can test it.
+- Add enough Storybook stories and testing examples to show use of all component prop and values--if they are enumerated. All examples that are present for a component in the [SLDS website](https://www.lightningdesignsystem.com/) should be created as a Storybook story _and_ imported into the documentaiton site examples.
+- Prop description tables on the documentation site are generated from propType comments within the component. Use `npm run build-docs` to confirm comment compatibility. Introductory component descriptions are generated from the comment directly before the component declaration with [react-docgen](https://github.com/reactjs/react-docgen).
+- All props descriptions should have a _Tested with snapshot testing._ or _Tested with Mocha framework._ notice in them.
+
+## The review process
+1. Read through the modified/added code in the pull request. 
+1. `git clone` this repository. Pull down the pull requested branch. It will be within the contributor's forked repository. For instance, `git checkout -b interactivellama-data-table-width master` then `git pull [email protected]:interactivellama/design-system-react.git data-table-width`. You could also create an additional remote and pull down the branch directly.
+1. Run `npm install` and `npm start`.
+1. Review the appropriate Storybook stories at `http://localhost:9001/`.
+1. Review tests. Open `http://localhost:8001/` and confirm that tests are passing in your browser.
+1. Compare component markup to SLDS markup. Reviewing the snapshot strings is the easiest way. Add year-first date and commit SHA to `last-slds-markup-review` in package.json and push to pull request branch.
+1. Request a review of the new component/feature by the Salesforce UX Accessibility Team. Add year-first review date, and commit SHA, `last-accessibility-review`, to `package.json` and push to pull request branch.
+    ```js
+    {
+      "component": "",
+      "status": "prod",
+      "display-name": "",
+      "last-accessibility-review": {
+        "date-iso-8601": "2017/12/31",
+        "commit-sha": ""
+      },
+      "last-slds-markup-review": {
+        "date-iso-8601": "2017/12/30",
+        "commit-sha": ""
+      },
+      "SLDS-component-path": ""
+    },
+    ```
+1. While the contributor's branch is checked out, run `npm run local-update` within locally cloned [site repo](https://github.com/salesforce-ux/design-system-react-site) to confirm the site will function correctly at the next release. This will also build the bundle (`npm run dist`) and use the bundle in the documentation site and confirm that the bundle works.
+
+## Testing the documentation site (internal)
+1. Pull down the documentation site (currenly private) and place in the same parent folder as this library: `git clone [email protected]:salesforce-ux/design-system-react-site.git` and run `npm install`.
+`.
+1. Run `npm run local-update` from within `design-system-react-site` to build, copy, and serve a local version of this library into the site. You should be able to now view the updated site at `http://localhost:8080/` and resolve any issues with updated documentation.

LICENSE.txt

@@ -0,0 +1,24 @@
+Copyright (c) 2015-present, 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 the Salesforce.com 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 COPYRIGHT HOLDER 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.

README.md

@@ -0,0 +1,13 @@
+
+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.
+
+* Tailored for building Salesforce apps: Using Design System React ensures that your app's UI reflect the Salesforce Lightning look, feel, and behaviors.
+* Continuously updated: As long as you’re using the latest version of Design System React, your pages are always up to date with Salesforce UI changes.
+
+## Documentation
+
+[Design System React website](https://react.lightningdesignsystem.com/)
+
+[Salesforce Lightning Design System website](https://www.lightningdesignsystem.com/)

components/SLDSSettings.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _settings = require('./settings');
+
+var _settings2 = _interopRequireDefault(_settings);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _settings2.default; // Alias

components/accordion/__docs__/site-stories.js

@@ -0,0 +1,10 @@
+'use strict';
+
+// This object is imported into the documentation site. An example for the documentation site should be part of the pull request for the component. The object key is the kabob case of the "URL folder". In the case of `http://localhost:8080/components/app-launcher/`, `app-launcher` is the `key`. The folder name is created by `components.component` value in `package.json`. Keep in mind, some components like `forms/checkbox` will be changed to `forms-checkbox`. The following uses webpack's raw-loader plugin to get "text files" that will be eval()'d by CodeMirror within the documentation site on page load.
+
+/* eslint-env node */
+/* eslint-disable global-require */
+
+var siteStories = [require('raw-loader!design-system-react/components/accordion/__examples__/base.jsx')];
+
+module.exports = siteStories;

components/accordion/__docs__/storybook-stories.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _react3 = require('@storybook/react');
+
+var _constants = require('../../../utilities/constants');
+
+var _base = require('../__examples__/base');
+
+var _base2 = _interopRequireDefault(_base);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(0, _react3.storiesOf)(_constants.ACCORDION, module).addDecorator(function (getStory) {
+	return _react2.default.createElement(
+		'div',
+		{ className: 'slds-p-around--medium' },
+		getStory()
+	);
+}).add('Base', function () {
+	return _react2.default.createElement(_base2.default, { action: _react3.action });
+});

components/accordion/__examples__/base.js

@@ -0,0 +1,167 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _accordion = require('../../../../components/accordion');
+
+var _accordion2 = _interopRequireDefault(_accordion);
+
+var _panel = require('../../../../components/accordion/panel');
+
+var _panel2 = _interopRequireDefault(_panel);
+
+var _iconSettings = require('../../../../components/icon-settings');
+
+var _iconSettings2 = _interopRequireDefault(_iconSettings);
+
+var _menuDropdown = require('../../../../components/menu-dropdown');
+
+var _menuDropdown2 = _interopRequireDefault(_menuDropdown);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // `~` is replaced with design-system-react at runtime
+// `~` is replaced with design-system-react at runtime
+// `~` is replaced with design-system-react at runtime
+
+
+// `~` is replaced with design-system-react at runtime
+
+var Example = function (_React$Component) {
+	_inherits(Example, _React$Component);
+
+	function Example(props) {
+		_classCallCheck(this, Example);
+
+		var _this = _possibleConstructorReturn(this, (Example.__proto__ || Object.getPrototypeOf(Example)).call(this, props));
+
+		_this.state = {
+			expandedPanels: {},
+			items: [{
+				id: '1',
+				summary: 'Accordion Summary',
+				details: 'Accordion details - A'
+			}, {
+				id: '2',
+				summary: 'Accordion Summary',
+				details: 'Accordion details - B'
+			}, {
+				id: '3',
+				summary: 'Accordion Summary',
+				details: 'Accordion details - C'
+			}]
+		};
+		return _this;
+	}
+
+	_createClass(Example, [{
+		key: 'menuDropdown',
+		value: function menuDropdown(selectedItem) {
+			var _this2 = this;
+
+			return _react2.default.createElement(_menuDropdown2.default, {
+				align: 'right',
+				id: 'ButtonGroupExampleDropdown',
+				assistiveText: 'More Options',
+				buttonVariant: 'icon',
+				buttonClassName: 'slds-shrink-none',
+				iconName: 'down',
+				iconVariant: 'border-filled',
+				onSelect: function onSelect(option) {
+					if (option.label === 'delete') {
+						_this2.setState(function (state) {
+							return _extends({}, state, {
+								items: state.items.filter(function (item) {
+									return item.id !== selectedItem.id;
+								})
+							});
+						});
+					} else if (console) {
+						console.log('onSelect', event, option);
+					}
+				},
+				options: [{
+					label: 'delete',
+					value: 'A0'
+				}, {
+					label: 'redo',
+					value: 'B0'
+				}, {
+					label: 'activate',
+					value: 'C0'
+				}],
+				iconSize: 'x-small'
+			});
+		}
+	}, {
+		key: 'togglePanel',
+		value: function togglePanel(event, data) {
+			this.setState(function (state) {
+				return _extends({}, state, {
+					expandedPanels: _extends({}, state.expandedPanels, _defineProperty({}, data.id, !state.expandedPanels[data.id]))
+				});
+			});
+			if (this.props.action) {
+				var dataAsArray = Object.keys(data).map(function (id) {
+					return data[id];
+				});
+				this.props.action('onClick').apply(undefined, [event].concat(_toConsumableArray(dataAsArray)));
+			} else if (console) {
+				console.log('[onSelect] (event, data)', event, data);
+			}
+		}
+	}, {
+		key: 'render',
+		value: function render() {
+			var _this3 = this;
+
+			return _react2.default.createElement(
+				_iconSettings2.default,
+				{ iconPath: '/assets/icons' },
+				_react2.default.createElement(
+					_accordion2.default,
+					{ id: 'base-example-accordion' },
+					this.state.items.map(function (item, i) {
+						return _react2.default.createElement(
+							_panel2.default,
+							{
+								expanded: !!_this3.state.expandedPanels[item.id],
+								id: item.id,
+								panelContentActions: _this3.menuDropdown(item),
+								key: item.id,
+								onTogglePanel: function onTogglePanel() {
+									return _this3.togglePanel(event, item);
+								},
+								summary: item.summary
+							},
+							item.details
+						);
+					})
+				)
+			);
+		}
+	}]);
+
+	return Example;
+}(_react2.default.Component);
+
+Example.displayName = 'AccordionExample';
+exports.default = Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime