diff --git a/client/common/icons.jsx b/client/common/icons.jsx
new file mode 100644
index 00000000..66a72c94
--- /dev/null
+++ b/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 ();
+ }
+ return ();
+ };
+
+ 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);
diff --git a/client/common/icons.stories.jsx b/client/common/icons.stories.jsx
new file mode 100644
index 00000000..3c3307ab
--- /dev/null
+++ b/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 (
+
+ );
+};
diff --git a/package-lock.json b/package-lock.json
index 57ed68cb..a061d25f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12680,9 +12680,9 @@
}
},
"eslint-module-utils": {
- "version": "2.5.2",
- "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.5.2.tgz",
- "integrity": "sha512-LGScZ/JSlqGKiT8OC+cYRxseMjyqt6QO54nl281CK93unD89ijSeRV6An8Ci/2nvWVKe8K/Tqdm75RQoIOCr+Q==",
+ "version": "2.6.0",
+ "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.6.0.tgz",
+ "integrity": "sha512-6j9xxegbqe8/kZY8cYpcp0xhbK0EgJlg3g9mib3/miLaExuuwc3n5UEfSnU6hWMbT0FAYVvDbL9RrRgpUeQIvA==",
"dev": true,
"requires": {
"debug": "^2.6.9",
@@ -12759,9 +12759,9 @@
}
},
"eslint-plugin-import": {
- "version": "2.20.1",
- "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.20.1.tgz",
- "integrity": "sha512-qQHgFOTjguR+LnYRoToeZWT62XM55MBVXObHM6SKFd1VzDcX/vqT1kAz8ssqigh5eMj8qXcRoXXGZpPP6RfdCw==",
+ "version": "2.20.2",
+ "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.20.2.tgz",
+ "integrity": "sha512-FObidqpXrR8OnCh4iNsxy+WACztJLXAHBO5hK79T1Hc77PgQZkyDGA5Ag9xAvRpglvLNxhH/zSmZ70/pZ31dHg==",
"dev": true,
"requires": {
"array-includes": "^3.0.3",
diff --git a/package.json b/package.json
index 855b40e4..e318886d 100644
--- a/package.json
+++ b/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",