Remove any use of javascript: URLs

.eslintrc.js

@@ -158,8 +158,6 @@ module.exports = {
 				},
 			},
 		],
-		// javascript:void(0) is present in SLDS markup
-		'no-script-url': 'off',
 		// _ is not really private.
 		'no-underscore-dangle': ['error', { allowAfterThis: true }],
 		//
@@ -245,7 +243,7 @@ module.exports = {
 		// Components that are top-level should be classes, so the DOM ref exists
 		'react/prefer-stateless-function': 'off',
 
-		// javascript:void(0) is present in SLDS markup
+		// <a href="#"> is present in SLDS markup
 		'jsx-a11y/anchor-is-valid': 'off',
 		'jsx-a11y/aria-activedescendant-has-tabindex': 2,
 		'jsx-a11y/interactive-supports-focus': 2,

components/alert/__examples__/close-alert.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
+
 import Alert from '~/components/alert'; // `~` is replaced with design-system-react at runtime
 import AlertContainer from '~/components/alert/container'; // `~` is replaced with design-system-react at runtime
 import Icon from '~/components/icon'; // `~` is replaced with design-system-react at runtime
@@ -33,10 +35,9 @@ class Example extends React.Component {
 									heading: 'Logged in as John Smith ([email protected]).',
 									headingLink: 'Log out',
 								}}
-								onClickHeadingLink={() => {
-									console.log('Link clicked.');
-								}}
+								onClickHeadingLink={action('onClickHeadingLink')}
 								onRequestClose={() => {
+									action('onRequestClose')();
 									this.setState({ isOpen: false });
 								}}
 							/>

components/alert/__examples__/custom-class-name.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
+
 import Alert from '~/components/alert'; // `~` is replaced with design-system-react at runtime
 import AlertContainer from '~/components/alert/container'; // `~` is replaced with design-system-react at runtime
 import Icon from '~/components/icon'; // `~` is replaced with design-system-react at runtime
@@ -16,9 +18,7 @@ class Example extends React.Component {
 							heading: 'Logged in as John Smith ([email protected]).',
 							headingLink: 'Log out',
 						}}
-						onClickHeadingLink={() => {
-							console.log('Link clicked.');
-						}}
+						onClickHeadingLink={action('onClickHeadingLink')}
 					/>
 				</AlertContainer>
 			</IconSettings>

components/alert/__examples__/custom-style.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
+
 import Alert from '~/components/alert'; // `~` is replaced with design-system-react at runtime
 import AlertContainer from '~/components/alert/container'; // `~` is replaced with design-system-react at runtime
 import Icon from '~/components/icon'; // `~` is replaced with design-system-react at runtime
@@ -16,9 +18,7 @@ class Example extends React.Component {
 							heading: 'Logged in as John Smith ([email protected]).',
 							headingLink: 'Log out',
 						}}
-						onClickHeadingLink={() => {
-							console.log('Link clicked.');
-						}}
+						onClickHeadingLink={action('onClickHeadingLink')}
 					/>
 				</AlertContainer>
 			</IconSettings>

components/alert/__examples__/dismissable.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
+
 import Alert from '~/components/alert'; // `~` is replaced with design-system-react at runtime
 import AlertContainer from '~/components/alert/container'; // `~` is replaced with design-system-react at runtime
 import Icon from '~/components/icon'; // `~` is replaced with design-system-react at runtime
@@ -25,10 +27,9 @@ class Example extends React.Component {
 								heading: 'Logged in as John Smith ([email protected]).',
 								headingLink: 'Log out',
 							}}
-							onClickHeadingLink={() => {
-								console.log('Link clicked.');
-							}}
+							onClickHeadingLink={action('onClickHeadingLink')}
 							onRequestClose={() => {
+								action('onRequestClose')();
 								this.setState({ isOpen: false });
 							}}
 						/>

components/alert/__examples__/error.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
+
 import Alert from '~/components/alert'; // `~` is replaced with design-system-react at runtime
 import AlertContainer from '~/components/alert/container'; // `~` is replaced with design-system-react at runtime
 import Icon from '~/components/icon'; // `~` is replaced with design-system-react at runtime
@@ -16,9 +18,7 @@ class Example extends React.Component {
 								'Your browser is currently not supported. Your Salesforce may be degraded.',
 							headingLink: 'More Information',
 						}}
-						onClickHeadingLink={() => {
-							console.log('Link clicked.');
-						}}
+						onClickHeadingLink={action('onClickHeadingLink')}
 						variant="error"
 					/>
 				</AlertContainer>

components/alert/__examples__/info.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
+
 import Alert from '~/components/alert'; // `~` is replaced with design-system-react at runtime
 import AlertContainer from '~/components/alert/container'; // `~` is replaced with design-system-react at runtime
 import Icon from '~/components/icon'; // `~` is replaced with design-system-react at runtime
@@ -15,9 +17,7 @@ class Example extends React.Component {
 							heading: 'Logged in as John Smith ([email protected]).',
 							headingLink: 'Log out',
 						}}
-						onClickHeadingLink={() => {
-							console.log('Link clicked.');
-						}}
+						onClickHeadingLink={action('onClickHeadingLink')}
 					/>
 				</AlertContainer>
 			</IconSettings>

components/alert/__examples__/offline.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
+
 import Alert from '~/components/alert'; // `~` is replaced with design-system-react at runtime
 import AlertContainer from '~/components/alert/container'; // `~` is replaced with design-system-react at runtime
 
@@ -14,9 +16,7 @@ class Example extends React.Component {
 							heading: 'You are in offline mode.',
 							headingLink: 'More information',
 						}}
-						onClickHeadingLink={() => {
-							console.log('Link clicked.');
-						}}
+						onClickHeadingLink={action('onClickHeadingLink')}
 						variant="offline"
 					/>
 				</AlertContainer>

components/alert/__examples__/warning.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
+
 import Alert from '~/components/alert'; // `~` is replaced with design-system-react at runtime
 import AlertContainer from '~/components/alert/container'; // `~` is replaced
 import IconSettings from '~/components/icon-settings';
@@ -14,9 +16,7 @@ class Example extends React.Component {
 								'Your browser is outdated. Your Salesforce experience may be degraded.',
 							headingLink: 'More Information',
 						}}
-						onClickHeadingLink={() => {
-							console.log('Link clicked.');
-						}}
+						onClickHeadingLink={action('onClickHeadingLink')}
 						variant="warning"
 					/>
 				</AlertContainer>

components/alert/index.jsx

@@ -15,6 +15,7 @@ import checkProps from './check-props';
 import componentDoc from './component.json';
 import { ALERT } from '../../utilities/constants';
 import DOMElementFocus from '../../utilities/dom-element-focus';
+import EventUtil from '../../utilities/event';
 
 const propTypes = {
 	/**
@@ -163,7 +164,6 @@ class Alert extends React.Component {
 			size: 'x-small',
 		});
 
-		/* eslint-disable no-script-url */
 		return (
 			<div
 				className={classNames(
@@ -187,8 +187,8 @@ class Alert extends React.Component {
 					{heading}{' '}
 					{labels.headingLink ? (
 						<a
-							onClick={this.props.onClickHeadingLink}
-							href="javascript:void(0);"
+							onClick={EventUtil.trappedHandler(this.props.onClickHeadingLink)}
+							href="#"
 						>
 							{labels.headingLink}
 						</a>

components/app-launcher/link.jsx

@@ -62,7 +62,7 @@ class AppLauncherLink extends React.Component {
 
 	// ### Default Props
 	static defaultProps = {
-		href: 'javascript:void(0);', // eslint-disable-line no-script-url
+		href: '#',
 	};
 
 	render() {
@@ -74,9 +74,12 @@ class AppLauncherLink extends React.Component {
 
 		return (
 			<a
-				href={this.props.href} // eslint-disable-line no-script-url
+				href={this.props.href}
 				className={classNames('slds-truncate', this.props.className)}
 				onClick={(event) => {
+					if (this.props.href === '#') {
+						event.preventDefault();
+					}
 					if (this.props.onClick) {
 						event.preventDefault();
 						this.props.onClick(event, { href: this.props.href });

components/app-launcher/tile.jsx

@@ -91,7 +91,7 @@ const defaultProps = {
 	assistiveText: {
 		dragIconText: 'Reorder',
 	},
-	href: 'javascript:void(0);', // eslint-disable-line no-script-url
+	href: '#',
 	moreLabel: ' More',
 };
 
@@ -158,7 +158,10 @@ class AppLauncherTile extends React.Component {
 				</div>
 				<div className="slds-app-launcher__tile-body">
 					<a
-						href={this.props.href} // eslint-disable-line no-script-url
+						href={this.props.href}
+						onClick={(event) =>
+							this.props.href === '#' && event.preventDefault()
+						}
 					>
 						<Highlighter search={this.props.search}>
 							{this.props.title}

components/breadcrumb/__examples__/base-with-overflow-menu.jsx

@@ -9,8 +9,8 @@ class Example extends React.Component {
 
 	render() {
 		const trail = [
-			<a href="javascript:void(0);">Parent Entity</a>,
-			<a href="javascript:void(0);">Parent Record Name</a>,
+			<a href="#entity">Parent Entity</a>,
+			<a href="#record">Parent Record Name</a>,
 		];
 
 		return (

components/breadcrumb/__examples__/base.jsx

@@ -8,10 +8,10 @@ class Example extends React.Component {
 
 	render() {
 		const trail = [
-			<a id="parent-entity" href="javascript:void(0);">
+			<a id="parent-entity" href="#entity">
 				Parent Entity
 			</a>,
-			<a href="javascript:void(0);">Parent Record Name</a>,
+			<a href="#record">Parent Record Name</a>,
 		];
 
 		return (

components/breadcrumb/__examples__/one-item.jsx

@@ -7,7 +7,7 @@ class Example extends React.Component {
 	static displayName = 'BreadCrumbExample';
 
 	render() {
-		const trail = [<a href="javascript:void(0);">Parent Entity</a>];
+		const trail = [<a href="#entity">Parent Entity</a>];
 
 		return (
 			<IconSettings iconPath="/assets/icons">

components/builder-header/__examples__/base-with-page-type-editable.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { actions } from '@storybook/addon-actions';
 
 import IconSettings from '~/components/icon-settings';
 import EditDialog from '~/components/popover/edit-dialog'; // `~` is replaced with design-system-react at runtime
@@ -111,6 +112,7 @@ class Example extends React.Component {
 						backIcon: 'Back',
 						helpIcon: 'Help',
 					}}
+					events={actions('onClickBack', 'onClickHelp')}
 					labels={{
 						back: 'Back',
 						help: 'Help',

components/builder-header/__examples__/base-with-toolbar.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { actions } from '@storybook/addon-actions';
+
 import IconSettings from '../../icon-settings';
 import Button from '../../button';
 import ButtonGroup from '../../button-group';
@@ -16,6 +18,7 @@ const Example = (props) => (
 				helpIcon: 'Help',
 				icon: 'Builder',
 			}}
+			events={actions('onClickBack', 'onClickHelp')}
 			labels={{
 				back: 'Back',
 				help: 'Help',

components/builder-header/__examples__/base.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { actions, action } from '@storybook/addon-actions';
+
 import IconSettings from '../../icon-settings';
 import BuilderHeader from '../../builder-header';
 import BuilderHeaderNav from '../../builder-header/nav';
@@ -13,6 +15,7 @@ const Example = (props) => (
 				backIcon: 'Back',
 				helpIcon: 'Help',
 			}}
+			events={actions('onClickBack', 'onClickHelp')}
 			labels={{
 				back: 'Back',
 				help: 'Help',
@@ -27,6 +30,7 @@ const Example = (props) => (
 					iconCategory="utility"
 					iconName="settings"
 					label="Link"
+					onClick={action('link/onClick')}
 				/>
 				<BuilderHeaderNavDropdown
 					assistiveText={{ icon: 'Dropdown' }}
@@ -38,6 +42,7 @@ const Example = (props) => (
 						{ label: 'Menu Item One', value: 'A0' },
 						{ label: 'Menu Item Two', value: 'B0' },
 					]}
+					onSelect={action('dropdown/onSelect')}
 				/>
 			</BuilderHeaderNav>
 		</BuilderHeader>

components/builder-header/__examples__/failed-save.jsx

@@ -70,7 +70,7 @@ const Example = (props) => (
 									<p className="slds-p-bottom_x-small">
 										Pellentesque magna tellus, dapibus vitae placerat nec,
 										viverra vel mi.{' '}
-										<a href="javascript:void(0);" title="Learn More">
+										<a href="#" title="Learn More">
 											Learn More
 										</a>
 									</p>

components/builder-header/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import EventUtil from '../../utilities/event';
 
 import Icon from '../icon';
 
@@ -164,9 +165,9 @@ const BuilderHeader = (props) => {
 					<div className="slds-builder-header__item slds-builder-header__utilities">
 						<div className="slds-builder-header__utilities-item">
 							<a
-								href="javascript:void(0);"
+								href="#"
 								className="slds-builder-header__item-action slds-media slds-media_center"
-								onClick={events.onClickBack}
+								onClick={EventUtil.trappedHandler(events.onClickBack)}
 							>
 								<div className="slds-media__figure">
 									<Icon
@@ -182,9 +183,9 @@ const BuilderHeader = (props) => {
 						</div>
 						<div className="slds-builder-header__utilities-item">
 							<a
-								href="javascript:void(0);"
+								href="#"
 								className="slds-builder-header__item-action slds-media slds-media_center"
-								onClick={events.onClickHelp}
+								onClick={EventUtil.trappedHandler(events.onClickHelp)}
 							>
 								<div className="slds-media__figure">
 									<Icon

components/builder-header/nav-link.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import EventUtil from '../../utilities/event';
 
 import Icon from '../icon';
 
@@ -58,12 +59,13 @@ const BuilderHeaderNavLink = (props) => {
 		...defaultProps.assistiveText,
 		...props.assistiveText,
 	};
+
 	return (
 		<li className="slds-builder-header__nav-item">
 			<a
 				className="slds-builder-header__item-action slds-media slds-media_center"
-				href="javascript:void(0)"
-				onClick={props.onClick}
+				href="#"
+				onClick={EventUtil.trappedHandler(props.onClick)}
 			>
 				<span className="slds-media__figure">
 					<Icon