feat(secondary-icon-button): refactor hover and add theming (#770)

* feat(secondary-icon-button): refactor hover and add theming

Author: montezume

src/components/buttons/secondary-icon-button/secondary-icon-button.js

@@ -1,52 +1,69 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
-import withMouseOverState from '../../../hocs/with-mouse-over-state';
+import styled from '@emotion/styled';
 import filterAriaAttributes from '../../../utils/filter-aria-attributes';
 import filterDataAttributes from '../../../utils/filter-data-attributes';
+import vars from '../../../../materials/custom-properties';
 import AccessibleButton from '../accessible-button';
 
+const hoverStyle = props => {
+  const overwrittenVars = {
+    ...vars,
+    ...props.theme,
+  };
+
+  return css`
+    &:hover {
+      svg * {
+        fill: ${overwrittenVars.colorPrimary};
+      }
+    }
+  `;
+};
+
+const fillStyle = props => {
+  const overwrittenVars = {
+    ...vars,
+    ...props.theme,
+  };
+  return css`
+    svg * {
+      fill: ${props.isDisabled
+        ? overwrittenVars.colorNeutral60
+        : overwrittenVars.colorSolid};
+    }
+  `;
+};
+
+const IconContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${fillStyle}
+
+  ${props => !props.isDisabled && hoverStyle}
+`;
+
 export const SecondaryIconButton = props => {
   const buttonAttributes = {
     'data-track-component': 'SecondaryIconButton',
     ...filterAriaAttributes(props),
     ...filterDataAttributes(props),
   };
-  let iconTheme = 'black';
-  if (props.isDisabled) iconTheme = 'grey';
-  else if (props.isMouseOver) iconTheme = 'green';
   return (
-    <div
-      onMouseOver={props.handleMouseOver}
-      onMouseOut={props.handleMouseOut}
-      css={css`
-        display: inline-flex;
-        align-items: center;
-        border: none;
-        background: none;
-        padding: 0;
-        min-height: initial;
-        cursor: pointer;
-      `}
+    <AccessibleButton
+      type={props.type}
+      buttonAttributes={buttonAttributes}
+      label={props.label}
+      onClick={props.onClick}
+      isDisabled={props.isDisabled}
     >
-      <AccessibleButton
-        type={props.type}
-        buttonAttributes={buttonAttributes}
-        label={props.label}
-        onClick={props.onClick}
-        isDisabled={props.isDisabled}
-      >
-        <div
-          css={css`
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          `}
-        >
-          {React.cloneElement(props.icon, { theme: iconTheme })}
-        </div>
-      </AccessibleButton>
-    </div>
+      <IconContainer isDisabled={props.isDisabled}>
+        {React.cloneElement(props.icon)}
+      </IconContainer>
+    </AccessibleButton>
   );
 };
 
@@ -57,15 +74,11 @@ SecondaryIconButton.propTypes = {
   icon: PropTypes.element.isRequired,
   isDisabled: PropTypes.bool,
   onClick: PropTypes.func.isRequired,
-
-  // HoC
-  isMouseOver: PropTypes.bool.isRequired,
-  handleMouseOver: PropTypes.func.isRequired,
-  handleMouseOut: PropTypes.func.isRequired,
 };
+
 SecondaryIconButton.defaultProps = {
   type: 'button',
   isDisabled: false,
 };
 
-export default withMouseOverState(SecondaryIconButton);
+export default SecondaryIconButton;

src/components/buttons/secondary-icon-button/secondary-icon-button.visualroute.js

@@ -1,10 +1,11 @@
 import React from 'react';
+import { ThemeProvider } from 'emotion-theming';
 import { InformationIcon, SecondaryIconButton } from 'ui-kit';
 import { Suite, Spec } from '../../../../test/percy';
 
 export const routePath = '/secondary-icon-button';
 
-export const component = () => (
+export const component = ({ themes }) => (
   <Suite>
     <Spec label="regular">
       <SecondaryIconButton
@@ -21,5 +22,14 @@ export const component = () => (
         isDisabled={true}
       />
     </Spec>
+    <ThemeProvider theme={themes.darkTheme}>
+      <Spec label="with custom (dark) theme">
+        <SecondaryIconButton
+          icon={<InformationIcon />}
+          label="A label text"
+          onClick={() => {}}
+        />
+      </Spec>
+    </ThemeProvider>
   </Suite>
 );