diff --git a/.eslintrc.js b/.eslintrc.js index a60b8c791e..160752d3e8 100644 --- a/.eslintrc.js +++ b/.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 + // is present in SLDS markup 'jsx-a11y/anchor-is-valid': 'off', 'jsx-a11y/aria-activedescendant-has-tabindex': 2, 'jsx-a11y/interactive-supports-focus': 2, diff --git a/components/alert/__examples__/close-alert.jsx b/components/alert/__examples__/close-alert.jsx index 47f7dc1241..c7034fa282 100644 --- a/components/alert/__examples__/close-alert.jsx +++ b/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 (johnsmith@acme.com).', headingLink: 'Log out', }} - onClickHeadingLink={() => { - console.log('Link clicked.'); - }} + onClickHeadingLink={action('onClickHeadingLink')} onRequestClose={() => { + action('onRequestClose')(); this.setState({ isOpen: false }); }} /> diff --git a/components/alert/__examples__/custom-class-name.jsx b/components/alert/__examples__/custom-class-name.jsx index 998f92a8bd..56b8a4f70e 100644 --- a/components/alert/__examples__/custom-class-name.jsx +++ b/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 (johnsmith@acme.com).', headingLink: 'Log out', }} - onClickHeadingLink={() => { - console.log('Link clicked.'); - }} + onClickHeadingLink={action('onClickHeadingLink')} /> diff --git a/components/alert/__examples__/custom-style.jsx b/components/alert/__examples__/custom-style.jsx index eeb9f9db87..db9976bb3a 100644 --- a/components/alert/__examples__/custom-style.jsx +++ b/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 (johnsmith@acme.com).', headingLink: 'Log out', }} - onClickHeadingLink={() => { - console.log('Link clicked.'); - }} + onClickHeadingLink={action('onClickHeadingLink')} /> diff --git a/components/alert/__examples__/dismissable.jsx b/components/alert/__examples__/dismissable.jsx index 28006439ee..c448f0a28f 100644 --- a/components/alert/__examples__/dismissable.jsx +++ b/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 (johnsmith@acme.com).', headingLink: 'Log out', }} - onClickHeadingLink={() => { - console.log('Link clicked.'); - }} + onClickHeadingLink={action('onClickHeadingLink')} onRequestClose={() => { + action('onRequestClose')(); this.setState({ isOpen: false }); }} /> diff --git a/components/alert/__examples__/error.jsx b/components/alert/__examples__/error.jsx index fcb98cce6c..e75c13f388 100644 --- a/components/alert/__examples__/error.jsx +++ b/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" /> diff --git a/components/alert/__examples__/info.jsx b/components/alert/__examples__/info.jsx index 7f345b4e98..de3e59ad05 100644 --- a/components/alert/__examples__/info.jsx +++ b/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 (johnsmith@acme.com).', headingLink: 'Log out', }} - onClickHeadingLink={() => { - console.log('Link clicked.'); - }} + onClickHeadingLink={action('onClickHeadingLink')} /> diff --git a/components/alert/__examples__/offline.jsx b/components/alert/__examples__/offline.jsx index 280bd6b38b..37d93d1dc6 100644 --- a/components/alert/__examples__/offline.jsx +++ b/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" /> diff --git a/components/alert/__examples__/warning.jsx b/components/alert/__examples__/warning.jsx index 839986bb4b..daa0d978b0 100644 --- a/components/alert/__examples__/warning.jsx +++ b/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" /> diff --git a/components/alert/index.jsx b/components/alert/index.jsx index b67fb9140e..e31c10deac 100644 --- a/components/alert/index.jsx +++ b/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 (
{labels.headingLink} diff --git a/components/app-launcher/link.jsx b/components/app-launcher/link.jsx index 4a29f46d1b..7267df95bf 100644 --- a/components/app-launcher/link.jsx +++ b/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 ( { + if (this.props.href === '#') { + event.preventDefault(); + } if (this.props.onClick) { event.preventDefault(); this.props.onClick(event, { href: this.props.href }); diff --git a/components/app-launcher/tile.jsx b/components/app-launcher/tile.jsx index 8108f35779..153043f0ac 100644 --- a/components/app-launcher/tile.jsx +++ b/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 {
+ this.props.href === '#' && event.preventDefault() + } > {this.props.title} diff --git a/components/breadcrumb/__examples__/base-with-overflow-menu.jsx b/components/breadcrumb/__examples__/base-with-overflow-menu.jsx index b9484cb9c6..3b3c204194 100644 --- a/components/breadcrumb/__examples__/base-with-overflow-menu.jsx +++ b/components/breadcrumb/__examples__/base-with-overflow-menu.jsx @@ -9,8 +9,8 @@ class Example extends React.Component { render() { const trail = [ - Parent Entity, - Parent Record Name, + Parent Entity, + Parent Record Name, ]; return ( diff --git a/components/breadcrumb/__examples__/base.jsx b/components/breadcrumb/__examples__/base.jsx index 77bcf63da8..c127f16b37 100644 --- a/components/breadcrumb/__examples__/base.jsx +++ b/components/breadcrumb/__examples__/base.jsx @@ -8,10 +8,10 @@ class Example extends React.Component { render() { const trail = [ - + Parent Entity , - Parent Record Name, + Parent Record Name, ]; return ( diff --git a/components/breadcrumb/__examples__/one-item.jsx b/components/breadcrumb/__examples__/one-item.jsx index 8d3f21330d..0801b5a6d6 100644 --- a/components/breadcrumb/__examples__/one-item.jsx +++ b/components/breadcrumb/__examples__/one-item.jsx @@ -7,7 +7,7 @@ class Example extends React.Component { static displayName = 'BreadCrumbExample'; render() { - const trail = [Parent Entity]; + const trail = [Parent Entity]; return ( diff --git a/components/builder-header/__examples__/base-with-page-type-editable.jsx b/components/builder-header/__examples__/base-with-page-type-editable.jsx index 868a9b3c29..f42f276c90 100644 --- a/components/builder-header/__examples__/base-with-page-type-editable.jsx +++ b/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', diff --git a/components/builder-header/__examples__/base-with-toolbar.jsx b/components/builder-header/__examples__/base-with-toolbar.jsx index 59463714e8..3a6209d01b 100644 --- a/components/builder-header/__examples__/base-with-toolbar.jsx +++ b/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', diff --git a/components/builder-header/__examples__/base.jsx b/components/builder-header/__examples__/base.jsx index 1fad90003f..7defc54300 100644 --- a/components/builder-header/__examples__/base.jsx +++ b/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')} /> ( { label: 'Menu Item One', value: 'A0' }, { label: 'Menu Item Two', value: 'B0' }, ]} + onSelect={action('dropdown/onSelect')} /> diff --git a/components/builder-header/__examples__/failed-save.jsx b/components/builder-header/__examples__/failed-save.jsx index 82fa2b3387..d8253f869c 100644 --- a/components/builder-header/__examples__/failed-save.jsx +++ b/components/builder-header/__examples__/failed-save.jsx @@ -70,7 +70,7 @@ const Example = (props) => (

Pellentesque magna tellus, dapibus vitae placerat nec, viverra vel mi.{' '} - + Learn More

diff --git a/components/builder-header/index.jsx b/components/builder-header/index.jsx index 73099bf5de..f12146a650 100644 --- a/components/builder-header/index.jsx +++ b/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) => {
{
{ ...defaultProps.assistiveText, ...props.assistiveText, }; + return (
  • ( Footer text} // eslint-disable-line no-script-url + footer={ + event.preventDefault()}> + Footer text + + } heading="Card with set height" icon={} style={{ height: '300px' }} @@ -159,7 +163,11 @@ const DemoCardWithoutHeader = () => ( Footer text} // eslint-disable-line no-script-url + footer={ + event.preventDefault()}> + Footer text + + } hasNoHeader icon={} style={{ height: '300px' }} diff --git a/components/carousel/index.jsx b/components/carousel/index.jsx index 8e1cd44aa4..3c39d03d79 100644 --- a/components/carousel/index.jsx +++ b/components/carousel/index.jsx @@ -105,7 +105,7 @@ class Carousel extends React.Component { * * `description`: Secondary string that is used to describe the item * * `buttonLabel`: If assigned a call to button action will be rendered with this text, if unassigned no button is rendered * * `imageAssistiveText`: Image alt text, if not present heading will be used instead - * * `href`: Used for item link, if not provided 'javascript:void(0);' is used instead + * * `href`: Used for item link, if not provided '#' is used instead * * `src`: Item image src value */ items: PropTypes.array.isRequired, diff --git a/components/carousel/private/carousel-item.jsx b/components/carousel/private/carousel-item.jsx index 252bab3192..2e0a617ea0 100644 --- a/components/carousel/private/carousel-item.jsx +++ b/components/carousel/private/carousel-item.jsx @@ -15,59 +15,71 @@ import { CAROUSEL_ITEM } from '../../../utilities/constants'; /** * A carousel allows multiple pieces of featured content to occupy an allocated amount of space. */ -const CarouselItem = (props) => ( - + ); +}; CarouselItem.displayName = CAROUSEL_ITEM; @@ -132,7 +144,7 @@ CarouselItem.propTypes = { }; CarouselItem.defaultProps = { - href: 'javascript:void(0);', + href: '#', }; export default CarouselItem; diff --git a/components/component-docs.json b/components/component-docs.json index c26781b406..a6ab66c3ee 100644 --- a/components/component-docs.json +++ b/components/component-docs.json @@ -685,7 +685,7 @@ "required": false, "description": "The `href` attribute of the link. If the `onClick` callback is specified this URL will be prevented from changing the browser's location.", "defaultValue": { - "value": "'javascript:void(0);'", + "value": "'#'", "computed": false } }, @@ -789,7 +789,7 @@ "required": false, "description": "The `href` attribute of the tile. Please pass in bookmarkable URLs from your routing library. If the `onClick` callback is specified this URL will be prevented from changing the browser's location.", "defaultValue": { - "value": "'javascript:void(0);'", + "value": "'#'", "computed": false } }, @@ -2930,7 +2930,7 @@ "name": "array" }, "required": true, - "description": "* **Array of item objects used by the default carousel item renderer.**\nEach object can contain:\n* `id`: The id of the carousel item. [REQUIRED]\n* `heading`: Primary string that will be used as the heading\n* `description`: Secondary string that is used to describe the item\n* `buttonLabel`: If assigned a call to button action will be rendered with this text, if unassigned no button is rendered\n* `imageAssistiveText`: Image alt text, if not present heading will be used instead\n* `href`: Used for item link, if not provided 'javascript:void(0);' is used instead\n* `src`: Item image src value" + "description": "* **Array of item objects used by the default carousel item renderer.**\nEach object can contain:\n* `id`: The id of the carousel item. [REQUIRED]\n* `heading`: Primary string that will be used as the heading\n* `description`: Secondary string that is used to describe the item\n* `buttonLabel`: If assigned a call to button action will be rendered with this text, if unassigned no button is rendered\n* `imageAssistiveText`: Image alt text, if not present heading will be used instead\n* `href`: Used for item link, if not provided '#' is used instead\n* `src`: Item image src value" }, "itemsPerPanel": { "type": { @@ -5228,7 +5228,7 @@ "name": "node" }, "required": false, - "description": "Provide children of the type `` to define the structure of the data being represented and children of the type `` to define a menu which will be rendered for each item in the grid. Use a _higher-order component_ to customize a data table cell that will override the default cell rendering. `CustomDataTableCell` must have the same `displayName` as `DataTableCell` or it will be ignored. If you want complete control of the HTML, including the wrapping `td`, you don't have to use `DataTableCell`.\n```\nimport DataTableCell from 'design-system-react/data-table/cell';\nconst CustomDataTableCell = ({ children, ...props }) => (\n \n {children}\n \n);\nCustomDataTableCell.displayName = DataTableCell.displayName;\n\n\n \n \n \n \n \n\n```" + "description": "Provide children of the type `` to define the structure of the data being represented and children of the type `` to define a menu which will be rendered for each item in the grid. Use a _higher-order component_ to customize a data table cell that will override the default cell rendering. `CustomDataTableCell` must have the same `displayName` as `DataTableCell` or it will be ignored. If you want complete control of the HTML, including the wrapping `td`, you don't have to use `DataTableCell`.\n```\nimport DataTableCell from 'design-system-react/data-table/cell';\nconst CustomDataTableCell = ({ children, ...props }) => (\n \n {children}\n \n);\nCustomDataTableCell.displayName = DataTableCell.displayName;\n\n\n \n \n \n \n \n\n```" }, "className": { "type": { @@ -5516,7 +5516,7 @@ "name": "element" }, "required": false, - "description": "Use a _higher-order component_ to customize a data table cell that will override the default cell rendering. `CustomDataTableCell` must have the same `displayName` as `DataTableCell` or it will be ignored. If you want complete control of the HTML, including the wrapping `td`, you don't have to use `DataTableCell`.\n```\nimport DataTableCell from 'design-system-react/data-table/cell';\nconst CustomDataTableCell = ({ children, ...props }) => (\n \n {children}\n \n);\nCustomDataTableCell.displayName = DataTableCell.displayName;\n\n\n \n \n \n \n \n\n```" + "description": "Use a _higher-order component_ to customize a data table cell that will override the default cell rendering. `CustomDataTableCell` must have the same `displayName` as `DataTableCell` or it will be ignored. If you want complete control of the HTML, including the wrapping `td`, you don't have to use `DataTableCell`.\n```\nimport DataTableCell from 'design-system-react/data-table/cell';\nconst CustomDataTableCell = ({ children, ...props }) => (\n \n {children}\n \n);\nCustomDataTableCell.displayName = DataTableCell.displayName;\n\n\n \n \n \n \n \n\n```" }, "isDefaultSortDescending": { "type": { @@ -7391,6 +7391,18 @@ "params": [], "returns": null, "description": "Get the File's HTML id. Generate a new one if no ID present." + }, + { + "name": "handleOnClickImage", + "docblock": null, + "modifiers": [], + "params": [ + { + "name": "event", + "type": null + } + ], + "returns": null } ], "props": { @@ -7537,7 +7549,7 @@ "required": false, "description": "Href attribute for image", "defaultValue": { - "value": "'javascript:void(0);'", + "value": "'#'", "computed": false } }, @@ -7679,7 +7691,7 @@ "required": false, "description": "Href attribute for image", "defaultValue": { - "value": "'javascript:void(0);'", + "value": "'#'", "computed": false } } @@ -8732,7 +8744,7 @@ "required": false, "description": "The `href` attribute of the link. Please pass in bookmarkable URLs from your routing library. Use `GlobalNavigationBarButton` if a \"real URL\" is not desired. If the `onClick` callback is specified this URL will still be prevented from changing the browser's location.", "defaultValue": { - "value": "'javascript:void(0);'", + "value": "'#'", "computed": false } }, @@ -12615,6 +12627,18 @@ ], "returns": null }, + { + "name": "handleOnClick", + "docblock": null, + "modifiers": [], + "params": [ + { + "name": "event", + "type": null + } + ], + "returns": null + }, { "name": "restProps", "docblock": "Extracts a set of custom properties. A custom property is a property, which is not described in propTypes of a component.", diff --git a/components/data-table/__examples__/advanced-single-select-fixed-header.jsx b/components/data-table/__examples__/advanced-single-select-fixed-header.jsx index 81e1345c47..ca0c1a65d3 100644 --- a/components/data-table/__examples__/advanced-single-select-fixed-header.jsx +++ b/components/data-table/__examples__/advanced-single-select-fixed-header.jsx @@ -10,7 +10,7 @@ import IconSettings from '~/components/icon-settings'; const CustomDataTableCell = ({ children, ...props }) => ( { event.preventDefault(); }} diff --git a/components/data-table/__examples__/advanced-single-select.jsx b/components/data-table/__examples__/advanced-single-select.jsx index 81e1345c47..ca0c1a65d3 100644 --- a/components/data-table/__examples__/advanced-single-select.jsx +++ b/components/data-table/__examples__/advanced-single-select.jsx @@ -10,7 +10,7 @@ import IconSettings from '~/components/icon-settings'; const CustomDataTableCell = ({ children, ...props }) => ( { event.preventDefault(); }} diff --git a/components/data-table/__examples__/advanced.jsx b/components/data-table/__examples__/advanced.jsx index 19f97196fc..653eaa3bf8 100644 --- a/components/data-table/__examples__/advanced.jsx +++ b/components/data-table/__examples__/advanced.jsx @@ -10,7 +10,7 @@ import IconSettings from '~/components/icon-settings'; const CustomDataTableCell = ({ children, ...props }) => ( { event.preventDefault(); }} diff --git a/components/data-table/__examples__/basic-fluid-column-bordered.jsx b/components/data-table/__examples__/basic-fluid-column-bordered.jsx index 8974561786..8985e5d229 100644 --- a/components/data-table/__examples__/basic-fluid-column-bordered.jsx +++ b/components/data-table/__examples__/basic-fluid-column-bordered.jsx @@ -8,7 +8,7 @@ import IconSettings from '~/components/icon-settings'; const CustomDataTableCell = ({ children, ...props }) => ( { event.preventDefault(); }} diff --git a/components/data-table/__examples__/basic-fluid-no-row-hover.jsx b/components/data-table/__examples__/basic-fluid-no-row-hover.jsx index 257a94f9df..947f0f626f 100644 --- a/components/data-table/__examples__/basic-fluid-no-row-hover.jsx +++ b/components/data-table/__examples__/basic-fluid-no-row-hover.jsx @@ -8,7 +8,7 @@ import IconSettings from '~/components/icon-settings'; const CustomDataTableCell = ({ children, ...props }) => ( { event.preventDefault(); }} diff --git a/components/data-table/__examples__/basic-fluid-striped.jsx b/components/data-table/__examples__/basic-fluid-striped.jsx index 3cc3ff7377..cd296c7402 100644 --- a/components/data-table/__examples__/basic-fluid-striped.jsx +++ b/components/data-table/__examples__/basic-fluid-striped.jsx @@ -8,7 +8,7 @@ import IconSettings from '~/components/icon-settings'; const CustomDataTableCell = ({ children, ...props }) => ( { event.preventDefault(); }} diff --git a/components/data-table/__examples__/basic-fluid.jsx b/components/data-table/__examples__/basic-fluid.jsx index dec5a95547..fcde3dff1d 100644 --- a/components/data-table/__examples__/basic-fluid.jsx +++ b/components/data-table/__examples__/basic-fluid.jsx @@ -8,7 +8,7 @@ import IconSettings from '~/components/icon-settings'; const CustomDataTableCell = ({ children, ...props }) => ( { event.preventDefault(); }} diff --git a/components/data-table/__examples__/fixed-header-horizontal-scrolling.jsx b/components/data-table/__examples__/fixed-header-horizontal-scrolling.jsx index 04df8d98df..543c51cd3e 100644 --- a/components/data-table/__examples__/fixed-header-horizontal-scrolling.jsx +++ b/components/data-table/__examples__/fixed-header-horizontal-scrolling.jsx @@ -10,7 +10,7 @@ import IconSettings from '~/components/icon-settings'; const CustomDataTableCell = ({ children, ...props }) => ( { event.preventDefault(); }} diff --git a/components/data-table/__examples__/fixed-header.jsx b/components/data-table/__examples__/fixed-header.jsx index 02996646be..506a5f5133 100644 --- a/components/data-table/__examples__/fixed-header.jsx +++ b/components/data-table/__examples__/fixed-header.jsx @@ -10,7 +10,7 @@ import IconSettings from '~/components/icon-settings'; const CustomDataTableCell = ({ children, ...props }) => ( { event.preventDefault(); }} diff --git a/components/data-table/__examples__/joined-with-page-header.jsx b/components/data-table/__examples__/joined-with-page-header.jsx index 650e59d8a3..d571822bee 100644 --- a/components/data-table/__examples__/joined-with-page-header.jsx +++ b/components/data-table/__examples__/joined-with-page-header.jsx @@ -16,7 +16,7 @@ import PageHeaderControl from '~/components/page-header/control'; const CustomDataTableCell = ({ children, ...props }) => ( { event.preventDefault(); }} diff --git a/components/data-table/column.jsx b/components/data-table/column.jsx index 80c5eccd3d..5fe0e18e37 100644 --- a/components/data-table/column.jsx +++ b/components/data-table/column.jsx @@ -30,7 +30,7 @@ DataTableColumn.propTypes = { * import DataTableCell from 'design-system-react/data-table/cell'; * const CustomDataTableCell = ({ children, ...props }) => ( * - * {children} + * {children} * * ); * CustomDataTableCell.displayName = DataTableCell.displayName; diff --git a/components/data-table/index.jsx b/components/data-table/index.jsx index 157bb90aec..41c93f92c0 100644 --- a/components/data-table/index.jsx +++ b/components/data-table/index.jsx @@ -97,7 +97,7 @@ class DataTable extends React.Component { * import DataTableCell from 'design-system-react/data-table/cell'; * const CustomDataTableCell = ({ children, ...props }) => ( * - * {children} + * {children} * * ); * CustomDataTableCell.displayName = DataTableCell.displayName; diff --git a/components/data-table/private/header-cell.jsx b/components/data-table/private/header-cell.jsx index 8438a26915..e66010e821 100644 --- a/components/data-table/private/header-cell.jsx +++ b/components/data-table/private/header-cell.jsx @@ -96,6 +96,8 @@ class DataTableHeaderCell extends React.Component { } handleSort = (e) => { + e.preventDefault(); + const oldSortDirection = this.props.sortDirection || this.state.sortDirection; // UX pattern: If sortable, and the DataTable's parent has not defined the sort order, then ascending (that is A->Z) is the default sort order on first click. Some columns, such as "last viewed" or "recently updated," should sort descending first, since that is what the user probably wants. Who wants to see the oldest files first? @@ -145,7 +147,7 @@ class DataTableHeaderCell extends React.Component { const fixedLayoutSubRenders = { sortable: ( { + event.preventDefault(); this.handleSelectDate(event, { date: new Date() }); }} onKeyDown={this.props.onLastFocusableNodeKeyDown} diff --git a/components/files/__examples__/actions.jsx b/components/files/__examples__/actions.jsx index eb537eb4e2..90fb2757a0 100644 --- a/components/files/__examples__/actions.jsx +++ b/components/files/__examples__/actions.jsx @@ -44,7 +44,7 @@ class Example extends React.Component { /> } image="/assets/images/placeholder-img@16x9.jpg" - href="javascript:void(0);" + href="https://example.com" crop="4-by-3" /> diff --git a/components/files/file.jsx b/components/files/file.jsx index f17dcf637a..c2c97d8418 100644 --- a/components/files/file.jsx +++ b/components/files/file.jsx @@ -103,7 +103,7 @@ const defaultProps = { moreActions: 'more actions', }, crop: '16-by-9', - href: 'javascript:void(0);', + href: '#', isLoading: false, hasNoVisibleTitle: false, }; @@ -135,6 +135,16 @@ class File extends React.Component { return this.props.id || this.generatedId; } + handleOnClickImage = (event) => { + if (this.props.href === '#') { + event.preventDefault(); + } + + if (this.props.onClickImage) { + this.props.onClickImage(event); + } + }; + render() { const assistiveText = { ...defaultProps.assistiveText, @@ -158,7 +168,7 @@ class File extends React.Component { 'slds-file__crop', this.props.crop ? `slds-file__crop_${this.props.crop}` : null )} - onClick={this.props.onClickImage} + onClick={this.handleOnClickImage} > + this.props.href === '#' && event.preventDefault() + } >
    {assistiveText.link} diff --git a/components/filter/index.jsx b/components/filter/index.jsx index af3d9aaab3..b357d1b67c 100644 --- a/components/filter/index.jsx +++ b/components/filter/index.jsx @@ -1,8 +1,6 @@ /* 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 no-script-url */ - // # Filter // Implements part of the [Panel design pattern](https://www.lightningdesignsystem.com/components/panels) in React. diff --git a/components/global-header/__docs__/storybook-stories.jsx b/components/global-header/__docs__/storybook-stories.jsx index 1e78fdacdb..7eb1d8e238 100644 --- a/components/global-header/__docs__/storybook-stories.jsx +++ b/components/global-header/__docs__/storybook-stories.jsx @@ -17,11 +17,11 @@ import IconSettings from '../../icon-settings'; import Popover from '../../popover'; import { GLOBAL_HEADER } from '../../../utilities/constants'; +import EventUtil from '../../../utilities/event'; import Default from '../__examples__/default'; /* eslint-disable max-len */ -/* eslint-disable no-script-url */ /* eslint-disable react/prop-types */ const ipsum = @@ -50,8 +50,9 @@ const HeaderNotificationsCustomContent = (props) => (
    event.preventDefault()} >

    (

    Settings - + Log Out

    diff --git a/components/global-header/__examples__/default.jsx b/components/global-header/__examples__/default.jsx index be07226d71..3a259436f8 100644 --- a/components/global-header/__examples__/default.jsx +++ b/components/global-header/__examples__/default.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import EventUtil from '~/utilities/event'; import Combobox from '~/components/combobox'; import Dropdown from '~/components/menu-dropdown'; @@ -14,7 +15,6 @@ import IconSettings from '~/components/icon-settings'; import Popover from '~/components/popover'; /* eslint-disable max-len */ -/* eslint-disable no-script-url */ /* eslint-disable react/prop-types */ const ipsum = @@ -43,8 +43,9 @@ const HeaderNotificationsCustomContent = (props) => (
    event.preventDefault()} >

    (

    Settings - + Log Out

    diff --git a/components/global-header/index.jsx b/components/global-header/index.jsx index aad174acac..0ec837204f 100644 --- a/components/global-header/index.jsx +++ b/components/global-header/index.jsx @@ -145,12 +145,12 @@ class GlobalHeader extends React.Component { actions[GLOBAL_HEADER_PROFILE] ); - /* eslint-disable max-len, no-script-url */ + /* eslint-disable max-len */ return (
    {this.props.onSkipToNav ? ( @@ -159,7 +159,7 @@ class GlobalHeader extends React.Component { ) : null} {this.props.onSkipToContent ? ( @@ -191,7 +191,7 @@ class GlobalHeader extends React.Component { {this.props.navigation}
    ); - /* eslint-enable max-len, no-script-url */ + /* eslint-enable max-len */ } } diff --git a/components/global-navigation-bar/link.jsx b/components/global-navigation-bar/link.jsx index 6fb81817c1..634855be90 100644 --- a/components/global-navigation-bar/link.jsx +++ b/components/global-navigation-bar/link.jsx @@ -18,12 +18,6 @@ import isFunction from 'lodash.isfunction'; // ## Constants import { GLOBAL_NAVIGATION_BAR_LINK } from '../../utilities/constants'; -function handleClick(event, href, onClick) { - event.preventDefault(); - - onClick(event, { href }); -} - /** * Wraps a link in the proper markup to support use in the GlobalNavigationBar. */ @@ -56,6 +50,16 @@ const GlobalNavigationBarLink = (props) => { } : null; + function handleOnClick(event) { + if (isFunction(onClick) || href === '#') { + event.preventDefault(); + } + + if (isFunction(onClick)) { + onClick(event, { href }); + } + } + return (
  • { href={href} className={classNames('slds-context-bar__label-action', className)} onBlur={onBlur} - onClick={ - isFunction(onClick) - ? (event) => handleClick(event, href, onClick) - : null - } + onClick={handleOnClick} onFocus={onFocus} onKeyDown={onKeyDown} onKeyPress={onKeyPress} @@ -181,7 +181,7 @@ GlobalNavigationBarLink.defaultProps = { assistiveText: { activeDescriptor: 'Current page:', }, - href: 'javascript:void(0);', // eslint-disable-line no-script-url + href: '#', }; export default GlobalNavigationBarLink; diff --git a/components/lookup/footer.jsx b/components/lookup/footer.jsx index 29e46fcdfb..9b2324e1bd 100644 --- a/components/lookup/footer.jsx +++ b/components/lookup/footer.jsx @@ -41,9 +41,12 @@ class DefaultFooter extends React.Component { onMouseDown={EventUtil.trapImmediate} > {/* eslint-enable jsx-a11y/no-static-element-interactions */} - {/* eslint-disable no-script-url */} - - {/* eslint-enable no-script-url */} + event.preventDefault()} + className={className} + > {/* eslint-enable jsx-a11y/no-static-element-interactions */} - {/* eslint-disable no-script-url */} - - {/* eslint-enable no-script-url */} + event.preventDefault()} + className={className} + > - {/* eslint-disable no-script-url */} { this.pills[this.state.selectedIndex] = pill; }} + onClick={(event) => event.preventDefault()} onKeyDown={this.handlePillKeyDown} > - {/* eslint-enable no-script-url */} {renderIcon} {selectedItem}