diff --git a/client/common/Button.jsx b/client/common/Button.jsx index ae736abc..58353693 100644 --- a/client/common/Button.jsx +++ b/client/common/Button.jsx @@ -153,11 +153,11 @@ const StyledIconButton = styled.button` const Button = ({ children, href, iconAfterName, iconBeforeName, kind, label, to, type, ...props }) => { - const iconAfter = iconAfterName && ; - const iconBefore = iconBeforeName && ; + const IconAfter = Icon[iconAfterName]; + const IconBefore = Icon[iconBeforeName]; const hasChildren = React.Children.count(children) > 0; - const content = <>{iconBefore}{hasChildren && {children}}{iconAfter}>; + const content = <>{IconBefore}{hasChildren && {children}}{IconAfter}>; let StyledComponent = StyledButton; @@ -190,7 +190,7 @@ Button.defaultProps = { type: 'button', }; -Button.iconNames = Icon.names; +Button.iconNames = Object.keys(Icon); Button.kinds = kinds; Button.propTypes = { diff --git a/client/common/Button.stories.jsx b/client/common/Button.stories.jsx index 2f14f9fc..4ce30d4c 100644 --- a/client/common/Button.stories.jsx +++ b/client/common/Button.stories.jsx @@ -36,17 +36,17 @@ export const ReactRouterLink = () => ( ); export const ButtonWithIconBefore = () => ( - Create + Create ); export const ButtonWithIconAfter = () => ( - Create + Create ); export const InlineButtonWithIconAfter = () => ( - File name + File name ); export const InlineIconOnlyButton = () => ( - + ); diff --git a/client/common/Icon.jsx b/client/common/Icon.jsx index 05a695da..f049ac07 100644 --- a/client/common/Icon.jsx +++ b/client/common/Icon.jsx @@ -1,48 +1,25 @@ -/* eslint-disable global-require */ -import InlineSVG from 'react-inlinesvg'; import PropTypes from 'prop-types'; -import React from 'react'; -import lodash from 'lodash'; -import styled from 'styled-components'; -const icons = { - sortArrowUp: require('../images/sort-arrow-up.svg'), - sortArrowDown: require('../images/sort-arrow-down.svg'), - github: require('../images/github.svg'), - google: require('../images/google.svg'), - plus: require('../images/plus-icon.svg'), - close: require('../images/close.svg'), +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'; + +// https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html +// could do something like, if there's an aria-label prop, give it role="img" focusable="false" +// otherwise, give it aria-hidden="true" focusable="false" + +const Icons = { + SortArrowUp, + SortArrowDown, + Github, + Google, + Plus, + Close }; -/* - names will be an mirror-object of icon names: - { - github: 'github', - ... - } -*/ -const names = lodash.mapValues(icons, (value, key) => key); +export default Icons; -export const ValidIconNameType = PropTypes.oneOf(Object.keys(names)); - -const StyledInlineSVG = styled(InlineSVG)` - > svg { - width: 100%; - height: 100%; - } -`; - -function Icon({ name, ...props }) { - return ( - - ); -} - - -Icon.names = names; - -Icon.propTypes = { - name: ValidIconNameType.isRequired -}; - -export default Icon; +export const ValidIconNameType = PropTypes.oneOf(Object.keys(Icons)); diff --git a/client/common/Icon.stories.jsx b/client/common/Icon.stories.jsx index 83d4b286..43be1580 100644 --- a/client/common/Icon.stories.jsx +++ b/client/common/Icon.stories.jsx @@ -9,9 +9,10 @@ export default { }; export const AllIcons = () => { - const firstIconName = Object.keys(Icon.names)[0]; + const names = Object.keys(Icon); + const SelectedIcon = Icon[select('name', names, names[0])]; return ( - + ); }; diff --git a/client/modules/User/components/APIKeyForm.jsx b/client/modules/User/components/APIKeyForm.jsx index 41d946c0..405adc81 100644 --- a/client/modules/User/components/APIKeyForm.jsx +++ b/client/modules/User/components/APIKeyForm.jsx @@ -80,7 +80,7 @@ class APIKeyForm extends React.Component { value={this.state.keyLabel} /> { return ( setShowURL(!showURL)} >Share diff --git a/client/modules/User/components/SocialAuthButton.jsx b/client/modules/User/components/SocialAuthButton.jsx index c0539eb6..c70490ae 100644 --- a/client/modules/User/components/SocialAuthButton.jsx +++ b/client/modules/User/components/SocialAuthButton.jsx @@ -7,18 +7,18 @@ import { remSize } from '../../../theme'; import Button from '../../../common/Button'; const authUrls = { - github: '/auth-github', - google: '/auth/google/' + Github: '/auth-github', + Google: '/auth/google/' }; const labels = { - github: 'Login with GitHub', - google: 'Login with Google' + Github: 'Login with GitHub', + Google: 'Login with Google' }; const services = { - github: 'github', - google: 'google' + Github: 'github', + Google: 'google' }; const StyledButton = styled(Button)` @@ -39,7 +39,7 @@ function SocialAuthButton({ service }) { SocialAuthButton.services = services; SocialAuthButton.propTypes = { - service: PropTypes.oneOf(['github', 'google']).isRequired + service: PropTypes.oneOf(['Github', 'Google']).isRequired }; export default SocialAuthButton; diff --git a/package-lock.json b/package-lock.json index 261fa1f9..57ed68cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26924,11 +26924,6 @@ "use-sidecar": "^1.0.1" } }, - "react-from-dom": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.3.1.tgz", - "integrity": "sha512-PeNBa8iuzoD7qHA9O7YpGnXFvC+XFFwStmFh2/r2zJAvEIaRg6EwOj+EPcDIFwyYBhqPIItxIx/dGdeWiFivjQ==" - }, "react-helmet": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-5.2.1.tgz", @@ -27015,15 +27010,6 @@ "prop-types": "^15.6.1" } }, - "react-inlinesvg": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/react-inlinesvg/-/react-inlinesvg-1.2.0.tgz", - "integrity": "sha512-IsznU+UzpUwDGzBWbf0bfSRA5Jbqz87xeoqLM/nSIDPkoHksInF1wCGybTSn4sIui+30TqboRQP1wAelNTkdog==", - "requires": { - "exenv": "^1.2.2", - "react-from-dom": "^0.3.0" - } - }, "react-input-autosize": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.2.2.tgz", diff --git a/package.json b/package.json index b7141d16..855b40e4 100644 --- a/package.json +++ b/package.json @@ -178,7 +178,6 @@ "react-dom": "^16.12.0", "react-helmet": "^5.1.3", "react-hot-loader": "^4.12.19", - "react-inlinesvg": "^1.2.0", "react-redux": "^5.1.2", "react-router": "^3.2.5", "react-split-pane": "^0.1.89",