From a99d2b8c8b29ff0f06730c77692299adb4b0dc72 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Thu, 18 Jun 2020 15:34:28 -0400 Subject: [PATCH 1/3] Add theming to common/icons --- client/common/Icons.jsx | 25 ++++++++++++++++++++-- client/common/icons.jsx | 25 ++++++++++++++++++++-- client/modules/IDE/pages/IDEViewMobile.jsx | 4 ++-- client/theme.js | 12 +++++++++++ 4 files changed, 60 insertions(+), 6 deletions(-) diff --git a/client/common/Icons.jsx b/client/common/Icons.jsx index 66a72c94..06f18895 100644 --- a/client/common/Icons.jsx +++ b/client/common/Icons.jsx @@ -1,11 +1,14 @@ import React from 'react'; import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import { remSize, 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'; // HOC that adds the right web accessibility props @@ -15,16 +18,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 ( { + 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 ( {
- +

{project.name}

diff --git a/client/theme.js b/client/theme.js index 5215dd99..561fd835 100644 --- a/client/theme.js +++ b/client/theme.js @@ -85,6 +85,10 @@ export default { border: grays.middleLight, }, }, + Icon: { + default: grays.middleGray, + hover: grays.darker + } }, [Theme.dark]: { colors, @@ -113,6 +117,10 @@ export default { border: grays.middleDark, }, }, + Icon: { + default: grays.middleLight, + hover: grays.lightest + } }, [Theme.contrast]: { colors, @@ -141,5 +149,9 @@ export default { border: grays.middleDark, }, }, + Icon: { + default: grays.mediumLight, + hover: colors.yellow + } }, }; From 49526e080b6738c43933cddb0ec28c0f05828bab Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Thu, 18 Jun 2020 15:43:00 -0400 Subject: [PATCH 2/3] Delete Icons.stories.jsx --- client/common/Icons.stories.jsx | 18 ------------------ 1 file changed, 18 deletions(-) delete mode 100644 client/common/Icons.stories.jsx 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 ( - - ); -}; From e5554cbc60070e8b256975282ec2ab970846e445 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Thu, 18 Jun 2020 15:43:12 -0400 Subject: [PATCH 3/3] Delete Icons.jsx --- client/common/Icons.jsx | 72 ----------------------------------------- 1 file changed, 72 deletions(-) delete mode 100644 client/common/Icons.jsx diff --git a/client/common/Icons.jsx b/client/common/Icons.jsx deleted file mode 100644 index 06f18895..00000000 --- a/client/common/Icons.jsx +++ /dev/null @@ -1,72 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import styled from 'styled-components'; -import { remSize, 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'; - -// 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 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 (); - }; - - 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 ExitIcon = withLabel(Exit); -export const DropdownArrowIcon = withLabel(DropdownArrow);