diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml index 82c461c7..93c4b27b 100644 --- a/.github/FUNDING.yml +++ b/.github/FUNDING.yml @@ -1 +1,2 @@ -custom: https://processingfoundation.org/support +github: processing +custom: https://processingfoundation.org/ diff --git a/Dockerfile b/Dockerfile index d2364735..743d7d90 100644 --- a/Dockerfile +++ b/Dockerfile @@ -14,6 +14,7 @@ COPY .babelrc index.js nodemon.json ./ COPY ./webpack ./webpack COPY client ./client COPY server ./server +COPY translations/locales ./translations/locales CMD ["npm", "start"] FROM development as build diff --git a/client/common/Icons.jsx b/client/common/Icons.jsx deleted file mode 100644 index 66a72c94..00000000 --- a/client/common/Icons.jsx +++ /dev/null @@ -1,51 +0,0 @@ -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 deleted file mode 100644 index 3c3307ab..00000000 --- a/client/common/Icons.stories.jsx +++ /dev/null @@ -1,18 +0,0 @@ -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/client/common/icons.jsx b/client/common/icons.jsx index 66a72c94..bbc2a662 100644 --- a/client/common/icons.jsx +++ b/client/common/icons.jsx @@ -1,12 +1,17 @@ import React from 'react'; import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import { prop } from '../theme'; 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 Exit from '../images/exit.svg'; import DropdownArrow from '../images/down-filled-triangle.svg'; +import Preferences from '../images/preferences.svg'; +import Play from '../images/triangle-arrow-right.svg'; // HOC that adds the right web accessibility props // https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html @@ -15,16 +20,33 @@ import DropdownArrow from '../images/down-filled-triangle.svg'; // Need to add size to these - like small icon, medium icon, large icon. etc. function withLabel(SvgComponent) { const Icon = (props) => { + const StyledIcon = styled(SvgComponent)` + &&& { + color: ${prop('Icon.default')}; + & g, & path, & polygon { + opacity: 1; + fill: ${prop('Icon.default')}; + } + &:hover { + color: ${prop('Icon.hover')}; + & g, & path, & polygon { + opacity: 1; + fill: ${prop('Icon.hover')}; + } + } + } + `; + const { 'aria-label': ariaLabel } = props; if (ariaLabel) { - return (); } - return (