IW-1632 | linting + notifications for mobile

source/.eslintrc

@@ -57,11 +57,13 @@
     "no-restricted-imports": 0,
     "class-methods-use-this": 0,
     "no-use-before-define": 0,
+    "object-curly-newline": 0,
     "react/destructuring-assignment": 0,
     "react/no-access-state-in-setstate": "error",
     "react/jsx-filename-extension": 0,
     "react/jsx-indent": 0,
     "react/jsx-indent-props": 0,
+    "react/forbid-prop-types": 0,
     "react/sort-prop-types": "error",
     "jsx-a11y/alt-text": [2, {
       "elements": ["img", "object", "area", "input[type=\"image\"]"],
@@ -79,6 +81,9 @@
     "jest/valid-expect": "error",
     "react/button-has-type": 0,
     "jsx-a11y/label-has-for": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
+    "jsx-a11y/no-static-element-interactions": 0,
+    "jsx-a11y/no-noninteractive-element-interactions": 0
   },
   "plugins": [
     "react",

source/components/Dropdown/components/DropdownContent/index.js

@@ -36,7 +36,10 @@ DropdownContent.propTypes = {
      * React Component to display as content
      */
     children: PropTypes.node,
-    /** Additional class name */
+
+    /**
+     * Additional class name
+     */
     className: PropTypes.string,
     /**
      * Should content be left-aligned with the dropdown toggle
@@ -62,6 +65,7 @@ DropdownContent.propTypes = {
 
 DropdownContent.defaultProps = {
     children: null,
+    className: '',
     dropdownLeftAligned: false,
     dropdownRightAligned: false,
     scrollable: true,

source/components/Dropdown/components/DropdownToggle/index.js

@@ -50,8 +50,6 @@ class DropdownToggle extends React.Component {
         const Component = attrs.href ? 'a' : 'div';
 
         return (
-            // TODO: Fix a11y
-            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
             <Component onClick={onClick} className={fullClassName} {...attrs} role="button">
                 {toggleContentComponent}
             </Component>

source/components/Dropdown/index.js

@@ -164,7 +164,6 @@ class Dropdown extends React.Component {
         const Component = isLevel2 ? 'li' : 'div';
 
         return (
-            // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
             <Component
                 className={allClassNames}
                 onClick={this.onClick}
@@ -183,14 +182,16 @@ Dropdown.propTypes = {
      */
     canFlip: PropTypes.bool,
 
-    /** Additional class name */
-    className: PropTypes.string,
-
     /**
      * React Component to display as the Dropdown Content
      */
     children: PropTypes.node,
 
+    /**
+     * Additional class name
+     */
+    className: PropTypes.string,
+
     /**
      * HTML classes to add to content element
      */
@@ -231,6 +232,11 @@ Dropdown.propTypes = {
      */
     isLevel2: PropTypes.bool,
 
+    /**
+     * If dropdown should not be hoverable
+     */
+    isNotHoverable: PropTypes.bool,
+
     /**
      * if the top of nested dropdown content should be positioned at the same height as toggle
      */
@@ -276,19 +282,22 @@ Dropdown.propTypes = {
 Dropdown.defaultProps = {
     canFlip: false,
     children: null,
-    hasShadow: false,
-    noChevron: false,
-    hasDarkShadow: false,
+    className: '',
+    contentClassName: '',
+    contentScrollable: false,
     dropdownLeftAligned: false,
     dropdownRightAligned: false,
-    contentScrollable: false,
+    hasDarkShadow: false,
+    hasShadow: false,
     isLevel2: false,
     isActive: false,
-    toggleClassName: '',
-    toggleAttrs: {},
+    isNotHoverable: false,
     isStickedToParent: false,
+    noChevron: false,
     onClose: null,
     onMouseEnter: null,
+    toggleClassName: '',
+    toggleAttrs: {},
 };
 
 export default Dropdown;

source/components/GlobalNavigation/components/GlobalNavigationLink/GlobalNavigationLinkButton.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
 import Button from '../../../Button';
@@ -18,4 +19,8 @@ const GlobalNavigationLinkButton = ({ link }) => {
     );
 };
 
+GlobalNavigationLinkButton.propTypes = {
+    link: PropTypes.object.isRequired,
+};
+
 export default GlobalNavigationLinkButton;

source/components/GlobalNavigation/components/GlobalNavigationLink/GlobalNavigationLinkGroup.js

@@ -1,11 +1,14 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
 
 import List from '../../../List';
+import Dropdown from '../../../Dropdown';
+
 import GlobalNavigationLinkText from './GlobalNavigationLinkText';
 import GlobalNavigationLinkButton from './GlobalNavigationLinkButton';
-import Dropdown from '../../../Dropdown';
 
+/* eslint-disable react/no-array-index-key */
 const GlobalNavigationLinkGroup = ({ link }) => {
     const [t] = useTranslation();
 
@@ -19,17 +22,17 @@ const GlobalNavigationLinkGroup = ({ link }) => {
         >
             <List isLinked>
                 {link.items.map((item, index) => {
-                    let link;
+                    let linkEl;
+
                     if (item.type === 'link-text') {
-                        link = <GlobalNavigationLinkText link={item} key={index}/>;
+                        linkEl = <GlobalNavigationLinkText link={item} />;
                     } else {
-                        link = (
-                            <GlobalNavigationLinkButton link={item} key={index}/>
-                        );
+                        linkEl = <GlobalNavigationLinkButton link={item} />;
                     }
+
                     return (
                         <li key={index}>
-                            {link}
+                            {linkEl}
                         </li>
                     );
                 })}
@@ -38,4 +41,8 @@ const GlobalNavigationLinkGroup = ({ link }) => {
     );
 };
 
+GlobalNavigationLinkGroup.propTypes = {
+    link: PropTypes.object.isRequired,
+};
+
 export default GlobalNavigationLinkGroup;

source/components/GlobalNavigation/components/GlobalNavigationLink/GlobalNavigationLinkLogOut.js

@@ -1,31 +1,38 @@
 import React from 'react';
 import { withTranslation } from 'react-i18next';
-import withRedirectUrl from "../../hocs/withRedirectUrl";
+import PropTypes from 'prop-types';
 
-class GlobalNavigationLinkLogOut extends React.Component {
-    render() {
-        const { link, t, redirectUrl, className } = this.props;
+import withRedirectUrl from '../../hocs/withRedirectUrl';
 
-        return (
-            <div id={link.title.key} className={className || ''}>
-                <form method="POST" action={link.href}>
-                    <input
-                        type="hidden"
-                        name={link['param-name']}
-                        value={redirectUrl}
-                    />
-                    {/* wds-sign-out__button will make this look like a link */}
-                    <button
-                        type="submit"
-                        className="wds-sign-out__button"
-                        data-tracking-label={link['tracking-label']}
-                    >
-                        {t(link.title.key)}
-                    </button>
-                </form>
-            </div>
-        );
-    }
-}
+const GlobalNavigationLinkLogOut = ({ link, t, redirectUrl, className }) => (
+    <div id={link.title.key} className={className || ''}>
+        <form method="POST" action={link.href}>
+            <input
+                type="hidden"
+                name={link['param-name']}
+                value={redirectUrl}
+            />
+            {/* wds-sign-out__button will make this look like a link */}
+            <button
+                type="submit"
+                className="wds-sign-out__button"
+                data-tracking-label={link['tracking-label']}
+            >
+                {t(link.title.key)}
+            </button>
+        </form>
+    </div>
+);
+
+GlobalNavigationLinkLogOut.propTypes = {
+    className: PropTypes.string,
+    link: PropTypes.object.isRequired,
+    redirectUrl: PropTypes.string.isRequired,
+    t: PropTypes.func.isRequired,
+};
+
+GlobalNavigationLinkLogOut.defaultProps = {
+    className: '',
+};
 
 export default withTranslation()(withRedirectUrl(GlobalNavigationLinkLogOut));

source/components/GlobalNavigation/components/GlobalNavigationLink/GlobalNavigationLinkText.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
 
 const GlobalNavigationLinkText = ({ link, isStandaloneLink }) => {
     const [t] = useTranslation();
@@ -16,4 +17,9 @@ const GlobalNavigationLinkText = ({ link, isStandaloneLink }) => {
     );
 };
 
+GlobalNavigationLinkText.propTypes = {
+    isStandaloneLink: PropTypes.bool.isRequired,
+    link: PropTypes.object.isRequired,
+};
+
 export default GlobalNavigationLinkText;

source/components/GlobalNavigation/components/GlobalNavigationNotifications/Card.js

@@ -48,7 +48,7 @@ const Card = ({ model, track }) => {
                     }
                     <ul className="wds-notification-card__context-list">
                         <li className="wds-notification-card__context-item">
-                            <Timeago datetime={timestamp * 1000} />
+                            <Timeago datetime={`${timestamp * 1000}`} />
                         </li>
                         <li>
                             <span className="wds-notification-card__context-separator">·</span>
@@ -64,7 +64,6 @@ const Card = ({ model, track }) => {
 };
 
 Card.propTypes = {
-    // eslint-disable-next-line react/forbid-prop-types
     model: PropTypes.object.isRequired,
     track: PropTypes.func.isRequired,
 };

source/components/GlobalNavigation/components/GlobalNavigationNotifications/CardLink.js

@@ -39,7 +39,6 @@ const CardLink = ({ track, model, children }) => {
 
 CardLink.propTypes = {
     children: PropTypes.node.isRequired,
-    // eslint-disable-next-line react/forbid-prop-types
     model: PropTypes.object.isRequired,
     track: PropTypes.func.isRequired,
 };

source/components/GlobalNavigation/components/GlobalNavigationNotifications/CardText.js

@@ -138,7 +138,6 @@ const CardText = ({ model }) => {
 };
 
 CardText.propTypes = {
-    // eslint-disable-next-line react/forbid-prop-types
     model: PropTypes.object.isRequired,
 };
 

source/components/GlobalNavigation/components/GlobalNavigationNotifications/List.js

@@ -9,6 +9,7 @@ import useLazyLoad from '../../hooks/useLazyLoad';
 
 import Card from './Card';
 
+/* eslint-disable react/no-array-index-key */
 const List = ({ track }) => {
     const { loadNextPage, notifications, isLoading, markAsRead, goToDestination } = useContext(NotificationsContext);
     const listEl = useRef(null);

source/components/GlobalNavigation/components/GlobalNavigationNotifications/ListContainer.js

@@ -1,4 +1,4 @@
-import React, { useContext }  from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
 import NotificationsContext from '../../utils/NotificationContext';

source/components/GlobalNavigation/components/GlobalNavigationNotifications/MarkAllButton.js

@@ -20,9 +20,9 @@ const MarkAllButton = ({ track, header }) => {
             {
                 header && <p className="wds-notifications__header">{header}</p>
             }
-            <a onClick={onClick} className="wds-notifications__mark-all-as-read">
+            <button onClick={onClick} className="wds-notifications__mark-all-as-read">
                 Mark all as read
-            </a>
+            </button>
         </div>
     );
 };

source/components/GlobalNavigation/components/GlobalNavigationNotifications/MarkAsReadIcon.js

@@ -37,14 +37,13 @@ const MarkAsReadIcon = ({ track, model }) => {
     }, [markAsRead, track, model]);
 
     return (
-        <div className="wds-notification-card__icon-wrapper" onClick={onClick}>
+        <div className="wds-notification-card__icon-wrapper" onClick={onClick} role="presentation">
             <Icon name={getIconName(type)} />
         </div>
     );
 };
 
 MarkAsReadIcon.propTypes = {
-    // eslint-disable-next-line react/forbid-prop-types
     model: PropTypes.object.isRequired,
     track: PropTypes.func.isRequired,
 };

source/components/GlobalNavigation/components/GlobalNavigationNotifications/NotificationsDataProvider.js

@@ -98,11 +98,12 @@ class NotificationsDataProvider extends React.Component {
             .loadUnreadNotificationCount()
             .then((result) => {
                 this.setState({ unreadCount: result.unreadCount });
-            }).catch((error) => {
-            this.setState({ unreadCount: 0 });
+            })
+            .catch((error) => {
+                this.setState({ unreadCount: 0 });
 
-            console.error('Setting notifications unread count to 0 because of the API fetch error', error);
-        });
+                console.error('Setting notifications unread count to 0 because of the API fetch error', error);
+            });
     }
 
     markAsRead(uri, willUnloadPage) {