diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000000..e9a2b0416a --- /dev/null +++ b/.gitignore @@ -0,0 +1,322 @@ +### Project files ### + +# Only used for release server authentication +/.npmrc + +# React Storybook +storybook/ +storybook-based-tests/ + +# Publishing and dist build +.tmp* + +# For build server. A copy of itself from master is pulled down in order to publish itself. +design-system-react + +# Allow custom pre-commit +scripts/pre-commit.sh + +# Visual diff images. These are the images that compare differences +# in the current and previous capture +__diff_output__ + +# Dev notes +dev-notes.txt + +# --- MACHINE GENERATED BELOW THIS LINE --- + +### Node ### +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Typescript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + +### Code ### +# Visual Studio Code - https://code.visualstudio.com/ +.settings/ +.vscode/ +tsconfig.json +jsconfig.json + +### Emacs ### +# -*- mode: gitignore; -*- +*~ +\#*\# +/.emacs.desktop +/.emacs.desktop.lock +*.elc +auto-save-list +tramp +.\#* + +# Org-mode +.org-id-locations +*_archive + +# flymake-mode +*_flymake.* + +# eshell files +/eshell/history +/eshell/lastdir + +# elpa packages +/elpa/ + +# reftex files +*.rel + +# AUCTeX auto folder +/auto/ + +# cask packages +.cask/ +/dist/ + +# Flycheck +flycheck_*.el + +# server auth directory +/server/ + +# projectiles files +.projectile +projectile-bookmarks.eld + +# directory configuration +.dir-locals.el + +# saveplace +places + +# url cache +url/cache/ + +# cedet +ede-projects.el + +# smex +smex-items + +# company-statistics +company-statistics-cache.el + +# anaconda-mode +anaconda-mode/ + +### macOS ### +*.DS_Store +.AppleDouble +.LSOverride + +# Removed due to Icon component not working on NPM. +# Icon must end with two \r +# Icon + +# Thumbnails +._* + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns +.com.apple.timemachine.donotpresent + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk + +### SublimeText ### +# cache files for sublime text +*.tmlanguage.cache +*.tmPreferences.cache +*.stTheme.cache + +# workspace files are user-specific +*.sublime-workspace + +# project files should be checked into the repository, unless a significant +# proportion of contributors will probably not be using SublimeText +# *.sublime-project + +# sftp configuration file +sftp-config.json + +# Package control specific files +Package Control.last-run +Package Control.ca-list +Package Control.ca-bundle +Package Control.system-ca-bundle +Package Control.cache/ +Package Control.ca-certs/ +Package Control.merged-ca-bundle +Package Control.user-ca-bundle +oscrypto-ca-bundle.crt +bh_unicode_properties.cache + +# Sublime-github package stores a github token in this file +# https://packagecontrol.io/packages/sublime-github +GitHub.sublime-settings + +### Vim ### +# swap +[._]*.s[a-v][a-z] +[._]*.sw[a-p] +[._]s[a-v][a-z] +[._]sw[a-p] +# session +Session.vim +# temporary +.netrwhist +# auto-generated tag files +tags + +### WebStorm ### +# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm +# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 + +# User-specific stuff: +.idea/**/workspace.xml +.idea/**/tasks.xml +.idea/dictionaries + +# Sensitive or high-churn files: +.idea/**/dataSources/ +.idea/**/dataSources.ids +.idea/**/dataSources.xml +.idea/**/dataSources.local.xml +.idea/**/sqlDataSources.xml +.idea/**/dynamic.xml +.idea/**/uiDesigner.xml + +# Gradle: +.idea/**/gradle.xml +.idea/**/libraries + +# CMake +cmake-build-debug/ + +# Mongo Explorer plugin: +.idea/**/mongoSettings.xml + +## File-based project format: +*.iws + +## Plugin-specific files: + +# IntelliJ +/out/ + +# mpeltonen/sbt-idea plugin +.idea_modules/ + +# JIRA plugin +atlassian-ide-plugin.xml + +# Cursive Clojure plugin +.idea/replstate.xml + +# Ruby plugin and RubyMine +/.rakeTasks + +# Crashlytics plugin (for Android Studio and IntelliJ) +com_crashlytics_export_strings.xml +crashlytics.properties +crashlytics-build.properties +fabric.properties + +### WebStorm Patch ### +# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721 + +# *.iml +# modules.xml +# .idea/misc.xml +# *.ipr + +# Sonarlint plugin +.idea/sonarlint + +### Windows ### +# Windows thumbnail cache files +Thumbs.db +ehthumbs.db +ehthumbs_vista.db + +# Folder config file +Desktop.ini + +# Recycle Bin used on file shares +$RECYCLE.BIN/ + +# Windows Installer files +*.cab +*.msi +*.msm +*.msp + +# Windows shortcuts +*.lnk + +# Intellij IDE +.idea/* +*.iml diff --git a/LICENSE.txt b/LICENSE.txt new file mode 100644 index 0000000000..5c48ca436c --- /dev/null +++ b/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. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000000..745d1126e0 --- /dev/null +++ b/README.md @@ -0,0 +1,54 @@ +# Design System for React + +### Accessible, localization-friendly, presentational React components + +## Install + +``` +$ npm install @salesforce-ux/design-system @salesforce/design-system-react +``` + +## Getting Started + +Welcome to the project! :wave: This library is the [React](https://facebook.github.io/react/) implementation of the [Salesforce Lightning Design System](https://www.lightningdesignsystem.com/). This library has a peer dependency on `@salesforce-ux/design-system`, `react`, and `react-dom`. + +* [Getting Started](https://react.lightningdesignsystem.com/getting-started/) +* [Documentation and interactive examples](https://react.lightningdesignsystem.com) + +### Quick Setup (CommonJS) + +A CommonJS-compatible version has been included within the NPM package to allows usage without transpiling. Use the following named `import` syntax to access CommonJS components from `/lib/index.js`: + +``` +import { Button } from '@salesforce/design-system-react'; + + +``` + +### Recommended Usage (ES6 modules) + +Recommended usage requires that your babel presets are set up correctly. `create-react-app` and environments that do not transpile code within `node_modules` are not compatible with the component import below. All the examples on the [documentation site](https://react.lightningdesignsystem.com/) use this syntax. You can use the Babel preset, `@salesforce/babel-preset-design-system-react`, to get started. [This preset](npmjs.com/package/@salesforce-ux/babel-preset-design-system-react) will keep Babel compatible with Design System React and allow ES6 module benefits such as tree-shaking. + +``` +import Button from '@salesforce/design-system-react/components/button'; + + +``` + +#### Transpile with `.babelrc` settings + +```json +{ + "presets": ["@salesforce/babel-preset-design-system-react"] +} +``` + +## Licenses + +* Source code is licensed under [BSD 3-Clause](https://git.io/sfdc-license) +* All icons and images are licensed under [Creative Commons Attribution-NoDerivatives 4.0](https://github.com/salesforce/licenses/blob/master/LICENSE-icons-images.txt) +* The Salesforce Sans font is licensed under our [font license](https://github.com/salesforce/licenses/blob/master/LICENSE-font.txt) + +## Got feedback? + +If you have support questions, please post a question to [StackOverflow](https://stackoverflow.com/questions/tagged/design-system-react) and tag with `design-system-react`. If you find any bugs, create a [GitHub Issue](https://github.com/salesforce/design-system-react/issues). diff --git a/assets/images/global-header/logo.svg b/assets/images/global-header/logo.svg new file mode 100644 index 0000000000..aa3d4370d4 --- /dev/null +++ b/assets/images/global-header/logo.svg @@ -0,0 +1,16 @@ + + \ No newline at end of file diff --git a/assets/images/illustrations/empty-state-no-access.svg b/assets/images/illustrations/empty-state-no-access.svg new file mode 100644 index 0000000000..736ee6586b --- /dev/null +++ b/assets/images/illustrations/empty-state-no-access.svg @@ -0,0 +1,45 @@ + \ No newline at end of file diff --git a/assets/images/illustrations/empty-state-no-results.svg b/assets/images/illustrations/empty-state-no-results.svg new file mode 100644 index 0000000000..e1f2ef5a4c --- /dev/null +++ b/assets/images/illustrations/empty-state-no-results.svg @@ -0,0 +1,58 @@ + \ No newline at end of file diff --git a/assets/images/illustrations/empty-state-not-available-in-lightning.svg b/assets/images/illustrations/empty-state-not-available-in-lightning.svg new file mode 100644 index 0000000000..7fedf66c18 --- /dev/null +++ b/assets/images/illustrations/empty-state-not-available-in-lightning.svg @@ -0,0 +1,36 @@ + \ No newline at end of file diff --git a/components/README.md b/components/README.md new file mode 100644 index 0000000000..f279282426 --- /dev/null +++ b/components/README.md @@ -0,0 +1,5 @@ +# Components + +* This folder contains approved SLDS components and "lower order" components that get passed in (typically as children) to the approved SLDS components. +* Components within folders labelled `private` are for internal usage only and are not intended to be a part of the public API of this project. +* Components in `utilities` are shared components that are not part of the public API of this project. diff --git a/components/SLDSSettings.js b/components/SLDSSettings.js new file mode 100644 index 0000000000..fac0dfd6c8 --- /dev/null +++ b/components/SLDSSettings.js @@ -0,0 +1,14 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _settings = _interopRequireDefault(require("./settings")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +// Alias +var _default = _settings.default; +exports.default = _default; \ No newline at end of file diff --git a/components/accordion/__docs__/__snapshots__/storybook-stories.storyshot b/components/accordion/__docs__/__snapshots__/storybook-stories.storyshot new file mode 100644 index 0000000000..34f61c3d86 --- /dev/null +++ b/components/accordion/__docs__/__snapshots__/storybook-stories.storyshot @@ -0,0 +1,354 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DOM snapshots SLDSAccordion Base 1`] = ` +
icon
prop and use the label
prop.
+ */
+ assistiveText: _propTypes.default.shape({
+ icon: _propTypes.default.string
+ }),
+
+ /**
+ * Disables the button and adds disabled styling.
+ */
+ disabled: _propTypes.default.bool,
+
+ /**
+ * Name of the icon. Visit Lightning Design System Icons to reference icon names.
+ */
+ iconName: _propTypes.default.string,
+
+ /**
+ * Determines the size of the icon.
+ */
+ iconSize: _propTypes.default.oneOf(['x-small', 'small', 'medium', 'large']),
+
+ /**
+ * Triggered when focus is removed.
+ */
+ onBlur: _propTypes.default.func,
+
+ /**
+ * Triggered when the button is clicked.
+ */
+ onClick: _propTypes.default.func,
+
+ /**
+ * Triggered when component is focused.
+ */
+ onFocus: _propTypes.default.func,
+
+ /**
+ * Triggered when a key is pressed down
+ */
+ onKeyDown: _propTypes.default.func,
+
+ /**
+ * Triggered when a key is pressed and released
+ */
+ onKeyPress: _propTypes.default.func,
+
+ /**
+ * Triggered when a key is released
+ */
+ onKeyUp: _propTypes.default.func,
+
+ /**
+ * Triggered when a mouse button is pressed down
+ */
+ onMouseDown: _propTypes.default.func,
+
+ /**
+ * Triggered when a mouse arrow hovers
+ */
+ onMouseEnter: _propTypes.default.func,
+
+ /**
+ * If true, button scales to 100% width on small form factors.
+ */
+ responsive: _propTypes.default.bool,
+
+ /**
+ * Initial label and icon (optional) of button.
+ */
+ stateOne: _propTypes.default.object,
+
+ /**
+ * Selected label and icon (optional) of button.
+ */
+ stateTwo: _propTypes.default.object,
+
+ /**
+ * Deselect label and icon (optional) of button.
+ */
+ stateThree: _propTypes.default.object,
+
+ /**
+ * Write "-1" if you don't want the user to tab to the button.
+ */
+ tabIndex: _propTypes.default.string,
+
+ /**
+ * Different types of buttons
+ */
+ variant: _propTypes.default.oneOf(['base', 'neutral', 'brand', 'destructive', 'icon'])
+}; // i18n
+
+var defaultProps = {
+ assistiveText: {
+ icon: ''
+ },
+ disabled: false,
+ iconSize: 'medium',
+ responsive: false,
+ stateOne: {
+ iconName: 'add',
+ label: 'Follow'
+ },
+ stateTwo: {
+ iconName: 'check',
+ label: 'Following'
+ },
+ stateThree: {
+ iconName: 'close',
+ label: 'Unfollow'
+ }
+};
+/**
+ * The ButtonStateful component is a variant of the Lightning Design System Button component. It is used for buttons that have a state of unselected or selected.
+ * For icon buttons, use variant='icon'
. For buttons with labels or buttons with labels and icons, pass data to the state props (ie. stateOne={{iconName: 'add', label: 'Join'}}
).
+ */
+
+var ButtonStateful =
+/*#__PURE__*/
+function (_React$Component) {
+ _inherits(ButtonStateful, _React$Component);
+
+ function ButtonStateful(props) {
+ var _this;
+
+ _classCallCheck(this, ButtonStateful);
+
+ _this = _possibleConstructorReturn(this, _getPrototypeOf(ButtonStateful).call(this, props));
+
+ _defineProperty(_assertThisInitialized(_this), "handleBlur", function (e) {
+ if (_this.props.onBlur) _this.props.onBlur(e);
+ e.currentTarget.blur();
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
+ if ((0, _lodash.default)(_this.props.onClick)) _this.props.onClick(e);
+
+ if (typeof _this.props.active !== 'boolean') {
+ _this.setState(function (prevState) {
+ return {
+ active: !prevState.active
+ };
+ });
+ }
+ });
+
+ _this.state = {
+ active: false
+ };
+ return _this;
+ }
+
+ _createClass(ButtonStateful, [{
+ key: "componentWillMount",
+ value: function componentWillMount() {
+ (0, _checkProps.default)(_constants.BUTTON_STATEFUL, this.props, _docs.default);
+ }
+ }, {
+ key: "getClassName",
+ value: function getClassName(active) {
+ return (0, _classnames.default)(this.props.className, 'slds-button', {
+ 'slds-button_neutral': this.props.variant !== 'icon',
+ 'slds-button_inverse': this.props.variant === 'inverse',
+ 'slds-not-selected': !active,
+ 'slds-is-selected': active,
+ 'slds-max-small-button_stretch': this.props.responsive,
+ 'slds-button_icon-border': this.props.variant === 'icon'
+ });
+ }
+ }, {
+ key: "render",
+ value: function render() {
+ var _this$props = this.props,
+ active = _this$props.active,
+ disabled = _this$props.disabled,
+ iconName = _this$props.iconName,
+ iconSize = _this$props.iconSize,
+ id = _this$props.id,
+ onFocus = _this$props.onFocus,
+ onKeyDown = _this$props.onKeyDown,
+ onKeyPress = _this$props.onKeyPress,
+ onKeyUp = _this$props.onKeyUp,
+ onMouseDown = _this$props.onMouseDown,
+ onMouseEnter = _this$props.onMouseEnter,
+ stateOne = _this$props.stateOne,
+ stateTwo = _this$props.stateTwo,
+ stateThree = _this$props.stateThree,
+ tabIndex = _this$props.tabIndex,
+ variant = _this$props.variant;
+ var iconAssistiveText = typeof this.props.assistiveText === 'string' ? this.props.assistiveText : _objectSpread({}, defaultProps.assistiveText, this.props.assistiveText).icon;
+ var isActive = typeof active === 'boolean' ? active : this.state.active;
+
+ if (variant === 'icon') {
+ return _react.default.createElement("button", {
+ "aria-live": "polite",
+ className: this.getClassName(isActive),
+ disabled: disabled,
+ id: id,
+ onBlur: this.handleBlur,
+ onClick: this.handleClick,
+ onFocus: onFocus,
+ onKeyDown: onKeyDown,
+ onKeyPress: onKeyPress,
+ onKeyUp: onKeyUp,
+ onMouseDown: onMouseDown,
+ onMouseEnter: onMouseEnter,
+ onMouseLeave: this.handleBlur,
+ tabIndex: tabIndex
+ }, _react.default.createElement(_buttonIcon.default, {
+ disabled: disabled,
+ name: iconName,
+ size: iconSize,
+ className: "slds-button__icon_stateful"
+ }), iconAssistiveText ? _react.default.createElement("span", {
+ className: "slds-assistive-text"
+ }, iconAssistiveText) : null);
+ }
+
+ return _react.default.createElement("button", {
+ "aria-live": "assertive",
+ className: this.getClassName(isActive),
+ disabled: disabled,
+ id: id,
+ onBlur: this.handleBlur,
+ onClick: this.handleClick,
+ onFocus: onFocus,
+ onKeyDown: onKeyDown,
+ onKeyPress: onKeyPress,
+ onKeyUp: onKeyUp,
+ onMouseEnter: onMouseEnter,
+ onMouseLeave: this.handleBlur,
+ tabIndex: tabIndex
+ }, _react.default.createElement("span", {
+ className: "slds-text-not-selected"
+ }, _react.default.createElement(_buttonIcon.default, {
+ disabled: disabled,
+ name: stateOne.iconName,
+ size: "small",
+ position: "left",
+ className: "slds-button__icon_stateful"
+ }), stateOne.label), _react.default.createElement("span", {
+ className: "slds-text-selected"
+ }, _react.default.createElement(_buttonIcon.default, {
+ disabled: disabled,
+ name: stateTwo.iconName,
+ size: "small",
+ position: "left",
+ className: "slds-button__icon_stateful"
+ }), stateTwo.label), _react.default.createElement("span", {
+ className: "slds-text-selected-focus"
+ }, _react.default.createElement(_buttonIcon.default, {
+ disabled: disabled,
+ name: stateThree.iconName,
+ size: "small",
+ position: "left",
+ className: "slds-button__icon_stateful"
+ }), stateThree.label));
+ }
+ }]);
+
+ return ButtonStateful;
+}(_react.default.Component);
+
+ButtonStateful.displayName = _constants.BUTTON_STATEFUL;
+ButtonStateful.propTypes = propTypes;
+ButtonStateful.defaultProps = defaultProps;
+var _default = ButtonStateful;
+exports.default = _default;
\ No newline at end of file
diff --git a/components/button/__docs__/__snapshots__/storybook-stories.storyshot b/components/button/__docs__/__snapshots__/storybook-stories.storyshot
new file mode 100644
index 0000000000..ee8d117eaa
--- /dev/null
+++ b/components/button/__docs__/__snapshots__/storybook-stories.storyshot
@@ -0,0 +1,661 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DOM snapshots SLDSButton Base 1`] = `
+label
or assistiveText.icon
is required; see the Prop Details table below. For buttons that maintain selected/unselected states, use the ButtonStateful component.
+ * Although not listed in the prop table, all `aria-*` props will be added to the `button` element if passed in.
+ */
+
+var Button =
+/*#__PURE__*/
+function (_React$Component) {
+ _inherits(Button, _React$Component);
+
+ function Button() {
+ var _getPrototypeOf2;
+
+ var _this;
+
+ _classCallCheck(this, Button);
+
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+
+ _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Button)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+ _defineProperty(_assertThisInitialized(_this), "getClassName", function () {
+ var _classNames;
+
+ var isIcon = _this.props.variant === 'icon';
+ var iconVariant = _this.props.iconVariant;
+ var iconMore = iconVariant === 'more';
+ var iconBorder = iconVariant === 'border';
+ var iconGlobalHeader = iconVariant === 'global-header';
+ var showButtonVariant = _this.props.variant !== 'base' && !iconVariant && !_this.props.inverse && _this.props.variant !== 'link' || iconVariant === 'bare';
+ var plainInverseBtn = _this.props.inverse && !isIcon;
+ var plainInverseIcon = _this.props.inverse && isIcon && !iconMore && !iconBorder;
+ var moreInverseIcon = _this.props.inverse && iconMore;
+ var borderInverseIcon = _this.props.inverse && iconBorder; // After hijacking `iconVariant` to let `Button` know it's in the header, we reset to container style for the actual button CSS.
+
+ if (iconVariant === 'global-header') {
+ iconVariant = 'container';
+ }
+
+ return (0, _classnames.default)((_classNames = {
+ 'slds-button': _this.props.variant !== 'link'
+ }, _defineProperty(_classNames, "slds-button_".concat(_this.props.variant), showButtonVariant), _defineProperty(_classNames, 'slds-button_inverse', plainInverseBtn), _defineProperty(_classNames, 'slds-button_icon-inverse', plainInverseIcon || moreInverseIcon), _defineProperty(_classNames, 'slds-button_icon-border-inverse', borderInverseIcon), _defineProperty(_classNames, "slds-button_icon-".concat(iconVariant), iconVariant && !borderInverseIcon), _defineProperty(_classNames, 'slds-global-header__button_icon', iconGlobalHeader), _defineProperty(_classNames, "slds-button_icon-".concat(_this.props.iconSize), iconVariant && _this.props.iconSize !== 'medium'), _defineProperty(_classNames, 'slds-button_reset', _this.props.variant === 'link'), _defineProperty(_classNames, 'slds-text-link', _this.props.variant === 'link'), _classNames), _this.props.className);
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "handleClick", function (event) {
+ if (_this.props.onClick) {
+ _this.props.onClick(event, {});
+ }
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "renderIcon", function (name) {
+ var iconSize = _this.props.iconSize === '' || _this.props.iconVariant ? null : _this.props.iconSize;
+ return _react.default.createElement(_buttonIcon.default, {
+ category: _this.props.iconCategory || 'utility' // BREAKING CHANGE we will introduce in 1.0. For the moment, set default prop here if none specified.
+ ,
+ className: (0, _classnames.default)({
+ 'slds-global-header__icon': _this.props.iconVariant === 'global-header'
+ }, _this.props.iconClassName),
+ hint: _this.props.hint,
+ inverse: _this.props.inverse,
+ name: name,
+ path: _this.props.iconPath,
+ position: _this.props.iconPosition,
+ size: iconSize
+ });
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "renderLabel", function () {
+ var iconOnly = _this.props.iconName || _this.props.iconPath;
+ var assistiveTextIcon = typeof _this.props.assistiveText === 'string' ? _this.props.assistiveText : _objectSpread({}, defaultProps.assistiveText, _this.props.assistiveText).icon;
+ return iconOnly && assistiveTextIcon ? _react.default.createElement("span", {
+ className: "slds-assistive-text"
+ }, assistiveTextIcon) : _this.props.label;
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "renderButton", function () {
+ var ariaProps = (0, _getAriaProps.default)(_this.props);
+ return _react.default.createElement("button", _extends({
+ className: _this.getClassName(),
+ disabled: _this.props.disabled,
+ id: _this.props.id,
+ onBlur: _this.props.onBlur,
+ onClick: _this.handleClick,
+ onFocus: _this.props.onFocus,
+ onKeyDown: _this.props.onKeyDown,
+ onKeyPress: _this.props.onKeyPress,
+ onKeyUp: _this.props.onKeyUp,
+ onMouseDown: _this.props.onMouseDown,
+ onMouseEnter: _this.props.onMouseEnter,
+ onMouseLeave: _this.props.onMouseLeave,
+ onMouseUp: _this.props.onMouseUp,
+ ref: function ref(component) {
+ if (_this.props.buttonRef) {
+ _this.props.buttonRef(component);
+ }
+ },
+ tabIndex: _this.props.tabIndex,
+ title: _this.props.title,
+ type: _this.props.type,
+ style: _this.props.style
+ }, ariaProps), _this.props.iconPosition === 'right' ? _this.renderLabel() : null, _this.props.iconName || _this.props.iconPath ? _this.renderIcon(_this.props.iconName) : null, _this.props.iconVariant === 'more' ? _react.default.createElement(_buttonIcon.default, {
+ category: "utility",
+ name: "down",
+ size: "x-small",
+ className: _this.props.iconClassName
+ }) : null, _this.props.iconPosition === 'left' || !_this.props.iconPosition ? _this.renderLabel() : null, _this.props.children // eslint-disable-line react/prop-types
+ );
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "renderTooltip", function () {
+ return _react.default.createElement(_tooltip.default, {
+ content: _this.props.tooltip
+ }, _this.renderButton);
+ });
+
+ return _this;
+ }
+
+ _createClass(Button, [{
+ key: "componentWillMount",
+ value: function componentWillMount() {
+ // `checkProps` issues warnings to developers about properties (similar to React's built in development tools)
+ (0, _checkProps.default)(_constants.BUTTON, this.props, _docs.default);
+ }
+ }, {
+ key: "render",
+ value: function render() {
+ return this.props.tooltip ? this.renderTooltip() : this.renderButton();
+ }
+ }]);
+
+ return Button;
+}(_react.default.Component);
+
+_defineProperty(Button, "displayName", _constants.BUTTON);
+
+_defineProperty(Button, "propTypes", {
+ /**
+ * **Assistive text for accessibility.**
+ * This object is merged with the default props object on every render.
+ * * `icon`: Text that is visually hidden but read aloud by screenreaders to tell the user what the icon means. If the button has an icon and a visible label, you can omit the assistiveText.icon
prop and use the label
prop.
+ */
+ assistiveText: _propTypes.default.shape({
+ icon: _propTypes.default.string
+ }),
+
+ /**
+ * Callback that passes in the DOM reference of the `