Merge pull request salesforce#1445 from garygong/assistive-text2

Consolidate assistiveText props under one object [AppLauncherSection, Avatar, Breadcrumb, ButtonStateful, Button, GlobalHeader, GlobalNavigationBarDropdown]

Author: futuremint

components/accordion/__examples__/base.jsx

@@ -34,7 +34,7 @@ class Example extends React.Component {
 			<Dropdown
 				align="right"
 				id="ButtonGroupExampleDropdown"
-				assistiveText="More Options"
+				assistiveText={{ icon: 'More Options' }}
 				buttonVariant="icon"
 				buttonClassName="slds-shrink-none"
 				iconCategory="utility"

components/alert/index.jsx

@@ -192,7 +192,7 @@ class Alert extends React.Component {
 				</h2>
 				{this.props.dismissible ? (
 					<Button
-						assistiveText={assistiveText.closeButton}
+						assistiveText={{ icon: assistiveText.closeButton }}
 						buttonRef={this.saveButtonRef}
 						className="slds-notify__close"
 						iconCategory="utility"

components/app-launcher/__docs__/storybook-stories.jsx

@@ -199,6 +199,7 @@ const DemoAppLauncherSection = createReactClass({
 		return (
 			<div>
 				<AppLauncherSection
+					assistiveText={{ collapseSection: 'Collapse Section' }}
 					title="All Items"
 					toggleable
 					onToggleClick={action('Section `All Items` open -->')}

components/app-launcher/__tests__/section.browser-test.jsx

@@ -49,7 +49,7 @@ describe('SLDS APP LAUNCHER SECTION *******************************************'
 			onToggleClick = sinon.spy();
 
 			mountSection({
-				collapseSectionAssistiveText: 'Collapse Section',
+				assistiveText: { collapseSection: 'Collapse Section' },
 				onToggleClick,
 				title: 'ALL THE ITEMS!',
 				toggleable: true,

components/app-launcher/check-props.js

@@ -4,21 +4,31 @@
 
 import deprecatedProperty from '../../utilities/warning/deprecated-property';
 import oneOfComponent from '../../utilities/warning/one-of-component';
+import { APP_LAUNCHER, APP_LAUNCHER_SECTION } from '../../utilities/constants';
 
 let checkProps = function () {};
 
 if (process.env.NODE_ENV !== 'production') {
 	checkProps = function (COMPONENT, props) {
-		if (props.modalHeaderButton !== undefined) {
-			oneOfComponent(COMPONENT, props, 'modalHeaderButton', ['SLDSButton']);
-		}
+		if (COMPONENT === APP_LAUNCHER) {
+			if (props.modalHeaderButton !== undefined) {
+				oneOfComponent(COMPONENT, props, 'modalHeaderButton', ['SLDSButton']);
+			}
 
-		deprecatedProperty(
-			COMPONENT,
-			props.triggerAssistiveText,
-			'triggerAssistiveText',
-			"assistiveText['trigger']"
-		);
+			deprecatedProperty(
+				COMPONENT,
+				props.triggerAssistiveText,
+				'triggerAssistiveText',
+				"assistiveText['trigger']"
+			);
+		} else if (COMPONENT === APP_LAUNCHER_SECTION) {
+			deprecatedProperty(
+				COMPONENT,
+				props.collapseSectionAssistiveText,
+				'collapseSectionAssistiveText',
+				"assistiveText['collapseSection']"
+			);
+		}
 	};
 }
 

components/app-launcher/section.jsx

@@ -19,12 +19,21 @@ import isFunction from 'lodash.isfunction';
 // A simple javascript utility for conditionally joining classNames together.
 import classNames from 'classnames';
 
+// 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';
+
 // ## Children
 import Button from '../button';
 
 // ## Constants
 import { APP_LAUNCHER_SECTION } from '../../utilities/constants';
 
+const defaultProps = {
+	assistiveText: {
+		collapseSection: 'Toggle visibility of section',
+	},
+};
+
 /**
  * App Launcher Sections allow users to categorize App Tiles as well as toggle their display
  */
@@ -35,6 +44,14 @@ const AppLauncherSection = createReactClass({
 
 	// ### Prop Types
 	propTypes: {
+		/**
+		 * **Assistive text for accessibility.**
+		 * This object is merged with the default props object on every render.
+		 * * `collapseSection`: The assistive text for the section collapse icons.
+		 */
+		assistiveText: PropTypes.shape({
+			collapseSection: PropTypes.string,
+		}),
 		/**
 		 * The title for this section of apps
 		 */
@@ -43,10 +60,6 @@ const AppLauncherSection = createReactClass({
 		 * Allows the user to show/hide the section
 		 */
 		toggleable: PropTypes.bool,
-		/**
-		 * The assistive text for the section collapse icons
-		 */
-		collapseSectionAssistiveText: PropTypes.string,
 		/**
 		 * An array of applications to display
 		 */
@@ -62,9 +75,7 @@ const AppLauncherSection = createReactClass({
 	},
 
 	getDefaultProps () {
-		return {
-			collapseSectionAssistiveText: 'Toggle visibility of section',
-		};
+		return defaultProps;
 	},
 
 	getInitialState () {
@@ -73,6 +84,10 @@ const AppLauncherSection = createReactClass({
 		};
 	},
 
+	componentWillMount () {
+		checkProps(APP_LAUNCHER_SECTION, this.props);
+	},
+
 	toggleOpen (event) {
 		this.setState({ isOpen: !this.state.isOpen });
 
@@ -88,13 +103,21 @@ const AppLauncherSection = createReactClass({
 		const sectionIsOpenClass = isOpen
 			? 'slds-is-expanded'
 			: 'slds-is-collapsed';
+		const assistiveText = {
+			...defaultProps.assistiveText,
+			...this.props.assistiveText,
+		};
 
 		return (
 			<div className={classNames('slds-section', iconIsOpenClass)}>
 				<div className="slds-section__title">
 					{this.props.toggleable || this.props.onToggleClick ? (
 						<Button
-							assistiveText={this.props.collapseSectionAssistiveText}
+							assistiveText={{
+								icon:
+									this.props.collapseSectionAssistiveText ||
+									assistiveText.collapseSection,
+							}}
 							iconCategory="utility"
 							iconName="switch"
 							onClick={this.toggleOpen}

components/avatar/__examples__/base.jsx

@@ -10,7 +10,7 @@ const Example = createReactClass({
 		return (
 			<IconSettings iconPath="/assets/icons">
 				<Avatar
-					assistiveText="Avatar image"
+					assistiveText={{ icon: 'Avatar image' }}
 					imgSrc="https://lightningdesignsystem.com/assets/images/avatar2.jpg"
 					imgAlt="Person Name"
 				/>

components/avatar/__examples__/entity-icon.jsx

@@ -10,7 +10,7 @@ const Example = createReactClass({
 		return (
 			<IconSettings iconPath="/assets/icons">
 				<Avatar
-					assistiveText="Account icon avatar"
+					assistiveText={{ icon: 'Avatar icon avatar' }}
 					title="Avatar entity icon"
 					variant="entity"
 				/>

components/avatar/__examples__/user-icon.jsx

@@ -10,7 +10,7 @@ const Example = createReactClass({
 		return (
 			<IconSettings iconPath="/assets/icons">
 				<Avatar
-					assistiveText="User Icon Avatar"
+					assistiveText={{ icon: 'User Icon Avatar' }}
 					title="User Icon Avatar"
 					variant="user"
 				/>

components/avatar/__tests__/__snapshots__/avatar.snapshot-test.jsx.snap

@@ -34,7 +34,7 @@ exports[`Avatar Entity Icon Snapshot 1`] = `
       <span
         className="slds-assistive-text"
       >
-        Account icon avatar
+        Avatar icon avatar
       </span>
     </span>
   </span>

components/avatar/check-props.js

@@ -0,0 +1,22 @@
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
+/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+/* eslint-disable import/no-mutable-exports */
+
+import sunsetProperty from '../../utilities/warning/sunset-property';
+
+let checkProps = function () {};
+
+if (process.env.NODE_ENV !== 'production') {
+	checkProps = function (COMPONENT, props) {
+		if (typeof props.assistiveText === 'string') {
+			sunsetProperty(
+				COMPONENT,
+				props.assistiveText,
+				'assistiveText',
+				'`assistiveText` as a string has been deprecated and is now an object to allow for multiple uses in the component. Please use `assistiveText.icon` instead.'
+			);
+		}
+	};
+}
+
+export default checkProps;

components/avatar/index.jsx

@@ -8,6 +8,10 @@
 // ### React
 import React from 'react';
 import PropTypes from 'prop-types';
+
+// 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';
+
 // ### classNames
 // [github.com/JedWatson/classnames](https://github.com/JedWatson/classnames) A
 // simple javascript utility for conditionally joining classNames together.
@@ -22,9 +26,13 @@ const displayName = AVATAR;
 // ### Prop Types
 const propTypes = {
 	/**
-	 * Assistive text for accessibility that labels the icon.
+	 * **Assistive text for accessibility.**
+	 * This object is merged with the default props object on every render.
+	 * * `icon`: Assistive text for accessibility that labels the icon.
 	 */
-	assistiveText: PropTypes.string,
+	assistiveText: PropTypes.shape({
+		icon: PropTypes.string,
+	}),
 	/**
 	 * Class names to be applied to Avatar component.
 	 */
@@ -60,6 +68,9 @@ const propTypes = {
 };
 
 const defaultProps = {
+	assistiveText: {
+		icon: 'User or Account Icon',
+	},
 	imgAlt: '',
 	size: 'medium',
 	title: 'user avatar',
@@ -84,6 +95,10 @@ class Avatar extends React.Component {
 		};
 	}
 
+	componentWillMount () {
+		checkProps(AVATAR, this.props);
+	}
+
 	buildInitials () {
 		const { label } = this.props;
 		const name = label.trim();
@@ -114,10 +129,17 @@ class Avatar extends React.Component {
 	}
 
 	renderIconAvatar () {
-		const { assistiveText, variant } = this.props;
+		const { variant } = this.props;
+		const iconAssistiveText =
+			typeof this.props.assistiveText === 'string'
+				? this.props.assistiveText
+				: {
+					...defaultProps.assistiveText,
+					...this.props.assistiveText,
+				}.icon;
 		return (
 			<UtilityIcon
-				assistiveText={assistiveText || 'User or Account Icon'}
+				assistiveText={iconAssistiveText}
 				category="standard"
 				name={variant === 'entity' ? 'account' : 'user'}
 			/>

components/breadcrumb/__examples__/base.jsx

@@ -16,7 +16,10 @@ const Example = createReactClass({
 
 		return (
 			<IconSettings iconPath="/assets/icons">
-				<BreadCrumb trail={trail} />
+				<BreadCrumb
+					assistiveText={{ label: 'Two item breadcrumb' }}
+					trail={trail}
+				/>
 			</IconSettings>
 		);
 	},

components/breadcrumb/__tests__/__snapshots__/bread-crumb.snapshot-test.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Breadcrumb Base Snapshot 1`] = `
 <nav
-  aria-label="Breadcrumbs"
+  aria-label="Two item breadcrumb"
   role="navigation"
 >
   <ol

components/breadcrumb/check-props.js

@@ -0,0 +1,22 @@
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
+/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+/* eslint-disable import/no-mutable-exports */
+
+import sunsetProperty from '../../utilities/warning/sunset-property';
+
+let checkProps = function () {};
+
+if (process.env.NODE_ENV !== 'production') {
+	checkProps = function (COMPONENT, props) {
+		if (typeof props.assistiveText === 'string') {
+			sunsetProperty(
+				COMPONENT,
+				props.assistiveText,
+				'assistiveText',
+				'`assistiveText` as a string has been deprecated and is now an object to allow for multiple uses in the component. Please use `assistiveText.label` instead.'
+			);
+		}
+	};
+}
+
+export default checkProps;

components/breadcrumb/index.jsx

@@ -14,14 +14,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+// 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';
+
 // ## Constants
 import { BREADCRUMB } from '../../utilities/constants';
 
+const defaultProps = {
+	assistiveText: {
+		label: 'Breadcrumbs',
+	},
+};
+
 /**
  * Use breadcrumbs to note the path of a record and help the user to navigate back to the parent.Breadcrumb based on SLDS 2.1.0-dev
  */
 const Breadcrumb = (props) => {
-	const { assistiveText, trail } = props;
+	checkProps(BREADCRUMB, props);
+
+	const { trail } = props;
+	const assistiveText =
+		typeof props.assistiveText === 'string'
+			? props.assistiveText
+			: {
+				...defaultProps.assistiveText,
+				...props.assistiveText,
+			}.label;
 
 	return (
 		<nav role="navigation" aria-label={assistiveText}>
@@ -44,17 +62,19 @@ Breadcrumb.displayName = BREADCRUMB;
 
 Breadcrumb.propTypes = {
 	/**
-	 * The assistive text for the breadcrumb trail
+	 * **Assistive text for accessibility.**
+	 * This object is merged with the default props object on every render.
+	 * * `label`: The assistive text for the breadcrumb trail.
 	 */
-	assistiveText: PropTypes.string,
+	assistiveText: PropTypes.shape({
+		label: PropTypes.string,
+	}),
 	/**
 	 * An array of react elements presumably anchor elements.
 	 */
 	trail: PropTypes.array,
 };
 
-Breadcrumb.defaultProps = {
-	assistiveText: 'Breadcrumbs',
-};
+Breadcrumb.defaultProps = defaultProps;
 
 export default Breadcrumb;