feat: Add hover state and change selected styles for Selector component (#421)

* Change Selector selector state and add hover state

* Remove colors from selected state

* Increase border width on hover states

Author: afonsodelgado

src/components/Selector/Selector.js

@@ -17,23 +17,36 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import withAriaSelected from '../../util/withAriaSelected';
+import { shadowSingle } from '../../styles/style-helpers';
 
 const baseStyles = ({ theme }) => css`
   label: selector;
   cursor: pointer;
-  padding: ${theme.spacings.mega};
-  border-radius: ${theme.borderRadius.mega};
-  border: 1px solid ${theme.colors.n300};
-  background-color: 1px solid ${theme.colors.n100};
+  padding: ${theme.spacings.giga};
+  border-radius: ${theme.borderRadius.giga};
+  border: ${theme.borderWidth.kilo} solid ${theme.colors.n300};
+  background-color: ${theme.colors.white};
   margin-bottom: ${theme.spacings.mega};
+  fill: ${theme.colors.n400};
 `;
 
+const hoverStyles = ({ selected, theme }) =>
+  !selected &&
+  css`
+    label: selector--hover;
+    &:hover {
+      border: ${theme.borderWidth.mega} solid ${theme.colors.n300};
+      background-color: ${theme.colors.n100};
+    }
+  `;
+
 const selectedStyles = ({ selected, theme }) =>
   selected &&
   css`
     label: selector--selected;
     border: ${theme.borderWidth.mega} solid ${theme.colors.p500};
-    background-color: ${theme.colors.white};
+    background-color: ${theme.colors.b100};
+    ${shadowSingle({ theme })};
   `;
 
 const disabledStyles = ({ disabled, theme }) =>
@@ -48,7 +61,12 @@ const disabledStyles = ({ disabled, theme }) =>
  * A selector allows users to choose between several mutually-exlusive choices,
  * accompanied by descriptions, possibly with tabular data.
  */
-const Selector = styled('div')(baseStyles, selectedStyles, disabledStyles);
+const Selector = styled.div(
+  baseStyles,
+  hoverStyles,
+  selectedStyles,
+  disabledStyles
+);
 
 Selector.propTypes = {
   /**

src/components/Selector/Selector.spec.js

@@ -19,15 +19,15 @@ import Selector from '.';
 
 describe('Selector', () => {
   it('should render a default selector appropriately', () => {
-    const component = <Selector />;
-    expect(component).toMatchSnapshot();
+    const actual = mount(<Selector />);
+    expect(actual).toMatchSnapshot();
   });
   it('should render a disabled selector appropriately', () => {
-    const component = <Selector disabled />;
-    expect(component).toMatchSnapshot();
+    const actual = mount(<Selector disabled />);
+    expect(actual).toMatchSnapshot();
   });
   it('should render a selected selector appropriately', () => {
-    const component = <Selector selected />;
-    expect(component).toMatchSnapshot();
+    const actual = mount(<Selector selected />);
+    expect(actual).toMatchSnapshot();
   });
 });

src/components/Selector/__snapshots__/Selector.spec.js.snap

@@ -1,15 +1,94 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Selector should render a default selector appropriately 1`] = `<withProps(Styled(div)) />`;
+exports[`Selector should render a default selector appropriately 1`] = `
+.circuit-0 {
+  cursor: pointer;
+  padding: 24px;
+  border-radius: 5px;
+  border: 1px solid #D8DDE1;
+  background-color: #FFFFFF;
+  margin-bottom: 16px;
+}
+
+.circuit-0:hover {
+  border: 2px solid #D8DDE1;
+  background-color: #FAFBFC;
+}
+
+<withProps(Styled(div))>
+  <Styled(div)
+    disabled={false}
+    selected={false}
+  >
+    <div
+      className="circuit-0 circuit-1"
+      disabled={false}
+      selected={false}
+    />
+  </Styled(div)>
+</withProps(Styled(div))>
+`;
 
 exports[`Selector should render a disabled selector appropriately 1`] = `
+.circuit-0 {
+  cursor: pointer;
+  padding: 24px;
+  border-radius: 5px;
+  border: 1px solid #D8DDE1;
+  background-color: #FFFFFF;
+  margin-bottom: 16px;
+  color: #9DA7B1;
+  cursor: default;
+}
+
+.circuit-0:hover {
+  border: 2px solid #D8DDE1;
+  background-color: #FAFBFC;
+}
+
 <withProps(Styled(div))
   disabled={true}
-/>
+>
+  <Styled(div)
+    disabled={true}
+    selected={false}
+  >
+    <div
+      className="circuit-0 circuit-1"
+      disabled={true}
+      selected={false}
+    />
+  </Styled(div)>
+</withProps(Styled(div))>
 `;
 
 exports[`Selector should render a selected selector appropriately 1`] = `
+.circuit-0 {
+  cursor: pointer;
+  padding: 24px;
+  border-radius: 5px;
+  border: 1px solid #D8DDE1;
+  background-color: #FFFFFF;
+  margin-bottom: 16px;
+  border: 2px solid #3388FF;
+  background-color: #EDF4FC;
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
+}
+
 <withProps(Styled(div))
   selected={true}
-/>
+>
+  <Styled(div)
+    aria-selected={true}
+    disabled={false}
+    selected={true}
+  >
+    <div
+      aria-selected={true}
+      className="circuit-0 circuit-1"
+      disabled={false}
+      selected={true}
+    />
+  </Styled(div)>
+</withProps(Styled(div))>
 `;