Release commit for 0.8.0-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,36 @@
+# Contributing to Design System React
+
+## The 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 also offer suggestions 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 component to `/components` folder
+1. Add the component name to `constants.js`
+1. Add Storybook examples to `/examples`
+1. Add documentation site examples to `/examples/index.js`
+1. Add tests to `/tests`.
+1. Push to your username's forked repository.
+1. Send us a well-documented pull request based on `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.
+1. We'll review your code, suggest any needed changes, and hopefully merge it in. Thank you!
+
+## Contributing Guidelines
+- 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.
+- Stories are stored in [examples folder](/examples) along with Documentation site examples. To add a story to the interactive examples on the [documentation site](https://react.lightningdesignsystem.com/components/), add the JSX file to [examples/index.js](/examples/index.js). All examples that are present for a component in the [SLDS website](https://www.lightningdesignsystem.com/) or it's internal site should be created as a Storybook story _and_ listed in `examples/index.js`.
+- Prop description tables on the documentation site are generated from propType comments within the component. All props descriptions should have a _Tested with snapshot testing._ or _Tested with Mocha framework._ notice in them.
+- Introductory component descriptions are generated from the comment directly before the component declaration with [react-docgen](https://github.com/reactjs/react-docgen).
+
+## The review process (internal)
+- `git clone` this repository
+- `npm install`
+- 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.
+- `npm start` and review the appropriate React Story example at `http://localhost:9001/`. Open `http://localhost:8001/` and confirm that tests are passing in your environment.
+- Check that any modified or added examples for the documentation site are working and are present in `examples/index.js`.
+4. Request a review of the new component/feature by the Salesforce UX Accessibility Team.
+
+## Testing the documentation site (internal)
+1. Pull down the documentation site 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