+
+`;
+
+exports[`DOM snapshots SLDSAccordion Base Open 1`] = `
+-
+
-
+
+ ++++ +
++ +++ Accordion details - A ++
+ -
+
+ ++++ +
++ +++ Accordion details - B ++
+ -
+
+ ++++ +
++ +++ Accordion details - C ++
+
+
+`;
diff --git a/components/accordion/__docs__/storybook-stories.jsx b/components/accordion/__docs__/storybook-stories.jsx
new file mode 100644
index 0000000000..3fcec27482
--- /dev/null
+++ b/components/accordion/__docs__/storybook-stories.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { ACCORDION } from '../../../utilities/constants';
+
+import Base from '../__examples__/base';
+import BaseOpen from '../__examples__/base-open';
+
+storiesOf(ACCORDION, module)
+ .addDecorator((getStory) => (
+ -
+
-
+
+ ++++ +
++ Accordion details - A ++
+ -
+
+ ++++ +
++ Accordion details - B ++
+ -
+
+ ++++ +
++ Accordion details - C ++
+
{getStory()}
+ ))
+ .add('Base', () =>
+
+`;
+
+exports[`DOM snapshots SLDSAlert Custom Class Names 1`] = `
+
+
+
+
+
+
+`;
+
+exports[`DOM snapshots SLDSAlert Custom Styles 1`] = `
+
+
+
+
+
+`;
+
+exports[`DOM snapshots SLDSAlert Dismissable 1`] = `
+
+
+
+
+
+`;
+
+exports[`DOM snapshots SLDSAlert Error 1`] = `
+
+
+
+
+
+`;
+
+exports[`DOM snapshots SLDSAlert Info 1`] = `
+
+
+
+
+ error
+
+
+
+
+
+
+ + Your browser is currently not supported. Your Salesforce may be degraded. + + + More Information + +
+
+
+`;
+
+exports[`DOM snapshots SLDSAlert Offline 1`] = `
+
+
+
+
+
+`;
+
+exports[`DOM snapshots SLDSAlert Warning 1`] = `
+
+
+
+
+
+`;
diff --git a/components/alert/__docs__/storybook-stories.jsx b/components/alert/__docs__/storybook-stories.jsx
new file mode 100644
index 0000000000..6798fd73c2
--- /dev/null
+++ b/components/alert/__docs__/storybook-stories.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { ALERT } from '../../../utilities/constants';
+import Info from '../__examples__/info';
+import Warning from '../__examples__/warning';
+import ErrorAlert from '../__examples__/error';
+import Offline from '../__examples__/offline';
+import Dismissable from '../__examples__/dismissable';
+import CloseAlert from '../__examples__/close-alert';
+import CustomClassNames from '../__examples__/custom-class-name';
+import CustomStyles from '../__examples__/custom-style';
+
+/* eslint-disable react/display-name */
+
+storiesOf(ALERT, module)
+ .addDecorator((getStory) => (
+
+
+
+
+ warning
+
+
+
+
+
+
+ + Your browser is outdated. Your Salesforce experience may be degraded. + + + More Information + +
+{getStory()}
+ ))
+ .add('Info', () =>
+
+
+ {
+ action('Section `All App` open -->');
+ this.setState({ allAppsOpen: !this.state.allAppsOpen });
+ }}
+ title="All Apps"
+ >
+
+
+ Accounts
+ Announcements
+ Approvals
+ Campaigns
+ Cases
+ Coaching
+ Contacts
+
+
+ );
+ }
+}
+
+class DemoAppLauncher extends React.Component {
+ static displayName = 'DemoAppLauncher';
+
+ state = {
+ search: '',
+ appLauncherOpen: this.props.isOpen || false, // eslint-disable-line react/prop-types
+ allItemsSectionIsOpen: true,
+ };
+
+ onClear = () => {
+ this.setState({ search: '' });
+ };
+
+ onSearch = (event) => {
+ this.setState({ search: event.target.value });
+ };
+
+ toggleAppLauncher = () => {
+ this.setState({ appLauncherOpen: !this.state.appLauncherOpen });
+ };
+
+ toggleSection = () => {
+ this.setState({ allItemsSectionIsOpen: !this.state.allItemsSectionIsOpen });
+ };
+
+ render() {
+ const search = (
+ +
+
+ );
+ }
+}
+
+storiesOf(APP_LAUNCHER, module)
+ .addDecorator((getStory) => (
+
+ Accounts
+
+
+
+ Announcements
+
+
+
+
+ Approvals
+
+
+
+
+ Campaigns
+
+
+
+ Cases
+
+
+ Coaching
+
+
+ Contacts
+
+
+ {getStory()}
+
+ ))
+ .add('App Launcher', () =>
+
+ ))
+ .add('Tile with Icon node', () => (
+
+
+ ))
+ .add('Tile with Icon background color', () => (
+
+
+ ))
+ .add('Tile with search text', () => (
+
+
+ ))
+ .add('Tile with truncated text', () => (
+
+
+ ))
+ .add('Expandable Section', () => +
+
+`;
+
+exports[`DOM snapshots SLDSAvatar Entity Icon 1`] = `
+
+
++ Base Avatar +
+
+
+ 
+
+
+
+
+
+
+`;
+
+exports[`DOM snapshots SLDSAvatar Entity Initials 1`] = `
+
+
++ Entity Icon Avatar +
+
+
+
+
+
+ Avatar icon avatar
+
+
+
+
+
+
+`;
+
+exports[`DOM snapshots SLDSAvatar Inverse User Initials 1`] = `
+
+
++ Entity Initials Avatar +
+
+
+
+ AC
+
+
+
+
+
+`;
+
+exports[`DOM snapshots SLDSAvatar User Icon 1`] = `
+
+
++ Inversed User Initials Avatar +
+
+
+
+ AW
+
+
+
+
+
+`;
+
+exports[`DOM snapshots SLDSAvatar User Initials 1`] = `
+
+
++ User Icon Avatar +
+
+
+
+
+
+ User Icon Avatar
+
+
+
+
+
+
+`;
diff --git a/components/avatar/__docs__/site-stories.js b/components/avatar/__docs__/site-stories.js
new file mode 100644
index 0000000000..faf4d9f6c5
--- /dev/null
+++ b/components/avatar/__docs__/site-stories.js
@@ -0,0 +1,14 @@
+// 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`. 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 */
+
+const siteStories = [
+ require('raw-loader!@salesforce/design-system-react/components/avatar/__examples__/base.jsx'),
+ require('raw-loader!@salesforce/design-system-react/components/avatar/__examples__/user-initials.jsx'),
+ require('raw-loader!@salesforce/design-system-react/components/avatar/__examples__/user-icon.jsx'),
+ require('raw-loader!@salesforce/design-system-react/components/avatar/__examples__/entity-initials.jsx'),
+ require('raw-loader!@salesforce/design-system-react/components/avatar/__examples__/entity-icon.jsx'),
+];
+
+module.exports = siteStories;
diff --git a/components/avatar/__docs__/storybook-stories.jsx b/components/avatar/__docs__/storybook-stories.jsx
new file mode 100644
index 0000000000..4177cd4bf1
--- /dev/null
+++ b/components/avatar/__docs__/storybook-stories.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { AVATAR } from '../../../utilities/constants';
+import Base from '../__examples__/base';
+import InverseUserInitials from '../__examples__/inverse-user-initials.jsx';
+import UserIcon from '../__examples__/user-icon.jsx';
+import UserInitials from '../__examples__/user-initials.jsx';
+import EntityIcon from '../__examples__/entity-icon.jsx';
+import EntityInitials from '../__examples__/entity-initials.jsx';
+
+/* eslint-disable react/display-name */
+
+storiesOf(AVATAR, module)
+ .addDecorator((getStory) => (
+
+
++ User Initials Avatar +
+
+
+
+ AW
+
+
+
+ {getStory()}
+ ))
+ .add('Base', () => (
+
+
+ ))
+ .add('Entity Icon', () => (
+ Base Avatar
+
+
+ ))
+ .add('Entity Initials', () => (
+ Entity Icon Avatar
+
+
+ ))
+ .add('User Icon', () => (
+ Entity Initials Avatar
+
+
+ ))
+ .add('User Initials', () => (
+ User Icon Avatar
+
+
+ ))
+ .add('Inverse User Initials', () => (
+ User Initials Avatar
+
+
+ ));
diff --git a/components/avatar/__examples__/avatar.jpg b/components/avatar/__examples__/avatar.jpg
new file mode 100644
index 0000000000..be34303339
Binary files /dev/null and b/components/avatar/__examples__/avatar.jpg differ
diff --git a/components/avatar/__examples__/base.jsx b/components/avatar/__examples__/base.jsx
new file mode 100644
index 0000000000..5111eecf74
--- /dev/null
+++ b/components/avatar/__examples__/base.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import Avatar from '~/components/avatar'; // `~` is replaced with design-system-react at runtime
+import IconSettings from '~/components/icon-settings';
+
+class Example extends React.Component {
+ static displayName = 'AvatarExample';
+
+ render() {
+ return (
+ Inversed User Initials Avatar
+
+
+
+
+
+
+
+
+ 423 Credits Available
+
+
+
+
+
+
+
+
+ 423 Credits Available
+
+
+
+
+
+
+
+
+ 423 Credits Available
+
+
+
+
+
+
+
+
+ 423 Credits Available
+
+
+
+
+
+
+
+
+ 423 Credits Available
+
+
+
+
+
+
+
+
+ 423 Credits Available
+
+
+`;
+
+exports[`DOM snapshots SLDSBadge Default 1`] = `
+
+
+ 423 Credits Available
+
+
+`;
+
+exports[`DOM snapshots SLDSBadge w/ Icons 1`] = `
+
+
+
+
+
+
+
+
+ 423 Credits Available
+
+
+ 423 Credits Available
+
+
+
+
+
+
+
+
+`;
diff --git a/components/badge/__docs__/storybook-stories.jsx b/components/badge/__docs__/storybook-stories.jsx
new file mode 100644
index 0000000000..4e48f75897
--- /dev/null
+++ b/components/badge/__docs__/storybook-stories.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { BADGE } from '../../../utilities/constants';
+import Default from '../__examples__/default';
+import WithIcon from '../__examples__/with-icon';
+import ColorVariants from '../__examples__/color-variants';
+
+storiesOf(BADGE, module)
+ .addDecorator((getStory) => (
+
+ {getStory()}
+
+ ))
+ .add('Default', () =>
+
+`;
+
+exports[`DOM snapshots SLDSBrandBand Image with background size cover 1`] = `
+
+
+
+
+
+
+`;
+
+exports[`DOM snapshots SLDSBrandBand Large 1`] = `
+
+
+
+
+
+ Hello World!
+
+
+
+
+`;
+
+exports[`DOM snapshots SLDSBrandBand Lightning Blue Theme 1`] = `
+
+
+
+
+
+ Hello World!
+
+
+
+
+`;
+
+exports[`DOM snapshots SLDSBrandBand No Image 1`] = `
+
+
+
+
+
+
+
+ + My App +
+
+
+`;
+
+exports[`DOM snapshots SLDSBrandBand Small 1`] = `
+
+
+
+
+
+
+`;
diff --git a/components/brand-band/__docs__/storybook-stories.jsx b/components/brand-band/__docs__/storybook-stories.jsx
new file mode 100644
index 0000000000..bedd315e85
--- /dev/null
+++ b/components/brand-band/__docs__/storybook-stories.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+// import IconSettings from '../../icon-settings';
+
+import { BRAND_BAND } from '../../../utilities/constants';
+import Default from '../__examples__/default';
+import Large from '../__examples__/large';
+import LightningBlueTheme from '../__examples__/lightning-blue-theme';
+import NoImage from '../__examples__/no-image';
+import Small from '../__examples__/small';
+import BackgroundCover from '../__examples__/background-cover';
+
+storiesOf(BRAND_BAND, module)
+ .addDecorator((getStory) => (
+
+
+
+
+
+ {getStory()}
+
+ ))
+ .add('Default (medium)', () =>
+
+ My App
+
+
+
+`;
+
+exports[`DOM snapshots SLDSBreadcrumb 2 Items 1`] = `
+
+
+
+`;
+
+exports[`DOM snapshots SLDSBreadcrumb Base with overflow menu 1`] = `
+
+
+
+`;
diff --git a/components/breadcrumb/__docs__/storybook-stories.jsx b/components/breadcrumb/__docs__/storybook-stories.jsx
new file mode 100644
index 0000000000..abe1f5986d
--- /dev/null
+++ b/components/breadcrumb/__docs__/storybook-stories.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { BREADCRUMB } from '../../../utilities/constants';
+import Base from '../__examples__/base';
+import OneItem from '../__examples__/one-item';
+import OverflowMenu from '../__examples__/base-with-overflow-menu';
+
+storiesOf(BREADCRUMB, module)
+ .addDecorator((getStory) => (
+ {getStory()}
+ ))
+ .add('2 Items', () =>
+
+`;
+
+exports[`DOM snapshots SLDSBuilderHeader Base 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Builder
+
+
+
+
+ App Name
+
+
+
+
+ + + Page Type + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Saved 5 mins ago
+
+
+
+
+
+
+
+
+`;
+
+exports[`DOM snapshots SLDSBuilderHeader Base with Page Type Editable 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Builder
+
+
+
+
+ App Name
+
+
+
+
+ + + Page Type + +
+
+
+`;
+
+exports[`DOM snapshots SLDSBuilderHeader Base with Toolbar 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Builder
+
+
+
+
+ App Name
+
+
+
+
+
+
+
+ Page Type
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Page Type
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`DOM snapshots SLDSBuilderHeader Custom Icon 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Builder
+
+
+
+
+ App Name
+
+
+
+
+ + + Page Type + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`DOM snapshots SLDSBuilderHeader Failed Save 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Builder
+
+
+
+
+ App Name
+
+
+
+
+ + + Page Type + +
+
+
+`;
+
+exports[`DOM snapshots SLDSBuilderHeader Successful Save 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Builder
+
+
+
+
+ App Name
+
+
+
+
+ + + Page Type + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/components/builder-header/__docs__/storybook-stories.jsx b/components/builder-header/__docs__/storybook-stories.jsx
new file mode 100644
index 0000000000..70e86e8a03
--- /dev/null
+++ b/components/builder-header/__docs__/storybook-stories.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import BuilderHeaderBase from '../__examples__/base';
+import BuilderHeaderBaseWithToolbar from '../__examples__/base-with-toolbar';
+import BuilderHeaderCustomIcon from '../__examples__/custom-icon';
+import BuilderHeaderSuccessfulSave from '../__examples__/successful-save';
+import BuilderHeaderAfterSuccessfulSave from '../__examples__/after-successful-save';
+import BuilderHeaderFailedSave from '../__examples__/failed-save';
+import BuilderHeaderWithPageTypeEditable from '../__examples__/base-with-page-type-editable';
+
+import { BUILDER_HEADER } from '../../../utilities/constants';
+
+storiesOf(BUILDER_HEADER, module)
+ .addDecorator((getStory) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Builder
+
+
+
+
+ App Name
+
+
+
+
+ + + Page Type + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Saved
+
+
+
+
+
+ {getStory()}
+ ))
+ .add('Base', () =>
+
+
+ Saved 5 mins ago
+
+
+
+
+
+
+ )}
+ >
+
+
+
+ );
+ return (
+
+
+ {this.state.prevPageType}
+
+
+
+
+
+
+
+
+
+ {this.state.prevPageType}
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+ >
+
+
+
+
+
+
+ }
+ heading="Review warning"
+ id="popover-error"
+ variant="error"
+ >
+
+
+
+
+
+
+ )}
+ >
+ + Pellentesque magna tellus, dapibus vitae placerat nec, + viverra vel mi.{' '} + + Learn More + +
+
+
+ )}
+ >
+
+
+
+`;
+
+exports[`DOM snapshots SLDSButtonGroup Checkbox Error 1`] = `
+
+
+
+`;
+
+exports[`DOM snapshots SLDSButtonGroup Icon Group 1`] = `
+
+
+
+
+ +
+`;
+
+exports[`DOM snapshots SLDSButtonGroup List Variant 1`] = `
++
+ +
+
+
+
+ +
+`;
+
+exports[`DOM snapshots SLDSButtonGroup More Icon 1`] = `
++
+ +
+
+
+`;
diff --git a/components/button-group/__docs__/storybook-stories.jsx b/components/button-group/__docs__/storybook-stories.jsx
new file mode 100644
index 0000000000..4e4e0b720b
--- /dev/null
+++ b/components/button-group/__docs__/storybook-stories.jsx
@@ -0,0 +1,24 @@
+/* eslint-disable react/display-name */
+
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import IconSettings from '../../icon-settings';
+
+import { BUTTON_GROUP } from '../../../utilities/constants';
+import MoreIcon from '../__examples__/more-icon';
+import IconGroup from '../__examples__/icon-group';
+import Checkbox from '../__examples__/checkbox';
+import CheckboxError from '../__examples__/checkbox-error';
+import ListVariant from '../__examples__/list-variant';
+
+storiesOf(BUTTON_GROUP, module)
+ .addDecorator((getStory) => (
+
+ {getStory()}
+
+ ))
+ .add('More Icon', () => +
+
+
+
icon prop and use the label prop.
+ */
+ assistiveText?: Partial<{
+ icon?: string;
+ }>;
+ /**
+ * Disables the button and adds disabled styling.
+ */
+ disabled?: boolean;
+ /**
+ * Icon associated with the stateful button. Accepts an `Icon` component
+ */
+ icon?: React.ReactNode;
+ /**
+ * Triggered when focus is removed.
+ */
+ onBlur?: (v: any) => any;
+ /**
+ * Triggered when the button is clicked.
+ */
+ onClick?: (v: any) => any;
+ /**
+ * Triggered when component is focused.
+ */
+ onFocus?: (v: any) => any;
+ /**
+ * Triggered when a key is pressed down
+ */
+ onKeyDown?: (v: any) => any;
+ /**
+ * Triggered when a key is pressed and released
+ */
+ onKeyPress?: (v: any) => any;
+ /**
+ * Triggered when a key is released
+ */
+ onKeyUp?: (v: any) => any;
+ /**
+ * Triggered when a mouse button is pressed down
+ */
+ onMouseDown?: (v: any) => any;
+ /**
+ * Triggered when a mouse arrow hovers
+ */
+ onMouseEnter?: (v: any) => any;
+ /**
+ * If true, button scales to 100% width on small form factors.
+ */
+ responsive?: boolean;
+ /**
+ * Initial label and icon (optional) of button.
+ */
+ stateOne?: Recordvariant='icon'. For buttons with labels or buttons with labels and icons, pass data to the state props (ie. stateOne={{iconName: 'add', label: 'Join'}}).
+ * Although not listed in the prop table, all `aria-*` props will be added to the button element if passed in.
+ * If no `aria-*` props are passed in, aria-live='polite' is used for `icon` and `icon-filled` variants,
+ * and aria-live='assertive' is used for the remaining variants.
+ */
+ function Component(props: Props): React.ReactElement;
+ export default Component;
+}
diff --git a/components/button-stateful/__docs__/__snapshots__/storybook-stories.storyshot b/components/button-stateful/__docs__/__snapshots__/storybook-stories.storyshot
new file mode 100644
index 0000000000..806e324c02
--- /dev/null
+++ b/components/button-stateful/__docs__/__snapshots__/storybook-stories.storyshot
@@ -0,0 +1,263 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DOM snapshots SLDSButtonStateful Base 1`] = `
+
+
+
+`;
+
+exports[`DOM snapshots SLDSButtonStateful Disabled 1`] = `
+
+
+
+`;
+
+exports[`DOM snapshots SLDSButtonStateful Icon Button 1`] = `
+
+
+
+`;
+
+exports[`DOM snapshots SLDSButtonStateful Icon Text Button 1`] = `
+
+
+`;
diff --git a/components/button-stateful/__docs__/storybook-stories.jsx b/components/button-stateful/__docs__/storybook-stories.jsx
new file mode 100644
index 0000000000..3db1a4c543
--- /dev/null
+++ b/components/button-stateful/__docs__/storybook-stories.jsx
@@ -0,0 +1,27 @@
+/* eslint-disable react/display-name */
+
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import IconSettings from '../../icon-settings';
+
+import { BUTTON_STATEFUL } from '../../../utilities/constants';
+import ButtonStateful from '../../button-stateful';
+
+import IconTextButton from '../__examples__/icon-text';
+import IconButton from '../__examples__/icon';
+
+const getButtonStateful = (props) => (
+
+
+
+
+
+
+
+ {getStory()}
+
+ ))
+ .add('Base', () => getButtonStateful())
+ .add('Disabled', () => getButtonStateful({ disabled: true }))
+ .add('Icon Text Button', () =>
+
+
+
+ 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,
+
+ /**
+ * Icon associated with the stateful button. Accepts an `Icon` component
+ */
+ icon: _propTypes.default.node,
+
+ /**
+ * 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', 'icon-filled'])
+}; // 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'}}).
+ * Although not listed in the prop table, all `aria-*` props will be added to the button element if passed in.
+ * If no `aria-*` props are passed in, aria-live='polite' is used for `icon` and `icon-filled` variants,
+ * and aria-live='assertive' is used for the remaining variants.
+ */
+
+var ButtonStateful = /*#__PURE__*/function (_React$Component) {
+ _inherits(ButtonStateful, _React$Component);
+
+ var _super = _createSuper(ButtonStateful);
+
+ function ButtonStateful(props) {
+ var _this;
+
+ _classCallCheck(this, ButtonStateful);
+
+ _this = _super.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
+ };
+ (0, _checkProps.default)(_constants.BUTTON_STATEFUL, props, _component.default);
+ return _this;
+ }
+
+ _createClass(ButtonStateful, [{
+ key: "getClassName",
+ value: function getClassName(active) {
+ return (0, _classnames.default)(this.props.className, 'slds-button', {
+ 'slds-button_neutral': this.props.variant !== 'icon' && this.props.variant !== 'icon-filled',
+ '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',
+ 'slds-button_icon-border-filled': this.props.variant === 'icon-filled'
+ });
+ }
+ }, {
+ key: "render",
+ value: function render() {
+ var _this$props = this.props,
+ active = _this$props.active,
+ disabled = _this$props.disabled,
+ icon = _this$props.icon,
+ 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 defaultIconProps = {
+ disabled: disabled,
+ size: 'small',
+ className: 'slds-button__icon_stateful'
+ };
+ var iconAssistiveText = typeof this.props.assistiveText === 'string' ? this.props.assistiveText : _objectSpread(_objectSpread({}, defaultProps.assistiveText), this.props.assistiveText).icon;
+ var isActive = typeof active === 'boolean' ? active : this.state.active; // Accept aria-* props
+
+ var ariaProps = (0, _getAriaProps.default)(this.props);
+
+ if (variant === 'icon' || variant === 'icon-filled') {
+ // Default aria attribute for stateful button with icon, if none is specified
+ if (Object.keys(ariaProps).length === 0) {
+ ariaProps = {
+ 'aria-live': 'polite'
+ };
+ }
+
+ return /*#__PURE__*/_react.default.createElement("button", _extends({}, ariaProps, {
+ 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,
+ type: "button"
+ }), icon ? /*#__PURE__*/_react.default.cloneElement(icon, _objectSpread(_objectSpread({}, defaultIconProps), icon.props)) : /*#__PURE__*/_react.default.createElement(_buttonIcon.default, {
+ disabled: disabled,
+ name: iconName,
+ size: iconSize,
+ className: "slds-button__icon_stateful"
+ }), iconAssistiveText ? /*#__PURE__*/_react.default.createElement("span", {
+ className: "slds-assistive-text"
+ }, iconAssistiveText) : null);
+ }
+
+ defaultIconProps.position = 'left'; // Default aria attribute for stateful button, if none is specified
+
+ if (Object.keys(ariaProps).length === 0) {
+ ariaProps = {
+ 'aria-live': 'assertive'
+ };
+ }
+
+ return /*#__PURE__*/_react.default.createElement("button", _extends({}, ariaProps, {
+ 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,
+ type: "button"
+ }), /*#__PURE__*/_react.default.createElement("span", {
+ className: "slds-text-not-selected"
+ }, stateOne.icon ? /*#__PURE__*/_react.default.cloneElement(stateOne.icon, _objectSpread(_objectSpread(_objectSpread({}, defaultIconProps), stateOne.icon.props), {}, {
+ size: 'small'
+ })) : /*#__PURE__*/_react.default.createElement(_buttonIcon.default, {
+ disabled: disabled,
+ name: stateOne.iconName,
+ size: "small",
+ position: "left",
+ className: "slds-button__icon_stateful"
+ }), stateOne.label), /*#__PURE__*/_react.default.createElement("span", {
+ className: "slds-text-selected"
+ }, stateTwo.icon ? /*#__PURE__*/_react.default.cloneElement(stateTwo.icon, _objectSpread(_objectSpread(_objectSpread({}, defaultIconProps), stateTwo.icon.props), {}, {
+ size: 'small'
+ })) : /*#__PURE__*/_react.default.createElement(_buttonIcon.default, {
+ disabled: disabled,
+ name: stateTwo.iconName,
+ size: "small",
+ position: "left",
+ className: "slds-button__icon_stateful"
+ }), stateTwo.label), /*#__PURE__*/_react.default.createElement("span", {
+ className: "slds-text-selected-focus"
+ }, stateThree.icon ? /*#__PURE__*/_react.default.cloneElement(stateThree.icon, _objectSpread(_objectSpread(_objectSpread({}, defaultIconProps), stateThree.icon.props), {}, {
+ size: 'small'
+ })) : /*#__PURE__*/_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.d.ts b/components/button.d.ts
new file mode 100644
index 0000000000..1191560e26
--- /dev/null
+++ b/components/button.d.ts
@@ -0,0 +1,163 @@
+declare module '@salesforce/design-system-react/components/button' {
+ import React from 'react';
+ type Props = {
+ /**
+ * **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?: Partial<{
+ icon?: string;
+ }>;
+
+ /**
+ * Callback that passes in the DOM reference of the `