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",