Merge branch 'develop' into title-indexing

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 />
+  );
+};