Merge branch 'develop' into slug-api-endpoint

client/common/icons.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SortArrowUp from '../images/sort-arrow-up.svg';
+import SortArrowDown from '../images/sort-arrow-down.svg';
+import Github from '../images/github.svg';
+import Google from '../images/google.svg';
+import Plus from '../images/plus-icon.svg';
+import Close from '../images/close.svg';
+import DropdownArrow from '../images/down-filled-triangle.svg';
+
+// HOC that adds the right web accessibility props
+// https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
+
+// could also give these a default size, color, etc. based on the theme
+// Need to add size to these - like small icon, medium icon, large icon. etc.
+function withLabel(SvgComponent) {
+  const Icon = (props) => {
+    const { 'aria-label': ariaLabel } = props;
+    if (ariaLabel) {
+      return (<SvgComponent
+        {...props}
+        aria-label={ariaLabel}
+        role="img"
+        focusable="false"
+      />);
+    }
+    return (<SvgComponent
+      {...props}
+      aria-hidden
+      focusable="false"
+    />);
+  };
+
+  Icon.propTypes = {
+    'aria-label': PropTypes.string
+  };
+
+  Icon.defaultProps = {
+    'aria-label': null
+  };
+
+  return Icon;
+}
+
+export const SortArrowUpIcon = withLabel(SortArrowUp);
+export const SortArrowDownIcon = withLabel(SortArrowDown);
+export const GithubIcon = withLabel(Github);
+export const GoogleIcon = withLabel(Google);
+export const PlusIcon = withLabel(Plus);
+export const CloseIcon = withLabel(Close);
+export const DropdownArrowIcon = withLabel(DropdownArrow);

client/common/icons.stories.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { select } from '@storybook/addon-knobs';
+
+import * as icons from './icons';
+
+export default {
+  title: 'Common/Icons',
+  component: icons
+};
+
+export const AllIcons = () => {
+  const names = Object.keys(icons);
+
+  const SelectedIcon = icons[select('name', names, names[0])];
+  return (
+    <SelectedIcon />
+  );
+};

package-lock.json

@@ -12680,9 +12680,9 @@
       }
     },
     "eslint-module-utils": {
-      "version": "2.5.2",
+      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.6.0.tgz",
-      "integrity": "sha512-LGScZ/JSlqGKiT8OC+cYRxseMjyqt6QO54nl281CK93unD89ijSeRV6An8Ci/2nvWVKe8K/Tqdm75RQoIOCr+Q==",
+      "integrity": "sha512-6j9xxegbqe8/kZY8cYpcp0xhbK0EgJlg3g9mib3/miLaExuuwc3n5UEfSnU6hWMbT0FAYVvDbL9RrRgpUeQIvA==",
       "dev": true,
       "requires": {
         "debug": "^2.6.9",
@@ -12759,9 +12759,9 @@
       }
     },
     "eslint-plugin-import": {
-      "version": "2.20.1",
+      "version": "2.20.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.20.1.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.20.2.tgz",
-      "integrity": "sha512-qQHgFOTjguR+LnYRoToeZWT62XM55MBVXObHM6SKFd1VzDcX/vqT1kAz8ssqigh5eMj8qXcRoXXGZpPP6RfdCw==",
+      "integrity": "sha512-FObidqpXrR8OnCh4iNsxy+WACztJLXAHBO5hK79T1Hc77PgQZkyDGA5Ag9xAvRpglvLNxhH/zSmZ70/pZ31dHg==",
       "dev": true,
       "requires": {
         "array-includes": "^3.0.3",

package.json

@@ -89,7 +89,7 @@
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.18.3",
     "file-loader": "^2.0.0",