feat(components): add focus styles to all relevant components

src/components/Badge/Badge.docs.mdx

@@ -39,3 +39,9 @@ The badges come in a number of colors based on their semantic meaning.
 Badges that receive the `circle` prop can be used to indicate notifications.
 
 <Story id="components-badge--circular" />
+
+### Clickable badges
+
+Badges that receive the `onClick` prop can be interacted with.
+
+<Story id="components-badge--clickable" />

src/components/Badge/Badge.js

@@ -19,7 +19,7 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { size } from 'polished';
 
-import { subHeadingKilo } from '../../styles/style-helpers';
+import { subHeadingKilo, focusOutline } from '../../styles/style-helpers';
 import { colorNames } from '../../styles/constants';
 
 const COLOR_MAP = {
@@ -49,35 +49,10 @@ const COLOR_MAP = {
     active: 'n900'
   }
 };
-
-const colorStyles = ({ theme, color, onClick }) => {
-  const currentColor = COLOR_MAP[color];
-
-  if (!currentColor) {
-    return null;
-  }
-
-  return css`
-    label: ${`badge--${color}`};
-    background-color: ${theme.colors[currentColor.default]};
-    ${onClick &&
-      `
-      &:hover {
-        background-color: ${theme.colors[currentColor.hover]};
-      }
-
-      &:active {
-        background-color: ${theme.colors[currentColor.active]};
-      }
-    `};
-  `;
-};
-
-const baseStyles = ({ theme, onClick }) => css`
+const baseStyles = ({ theme }) => css`
   label: badge;
-  border-radius: 100px;
+  border-radius: ${theme.borderRadius.pill};
   color: ${theme.colors.white};
-  cursor: ${onClick ? 'pointer' : 'default'};
   display: inline-block;
   padding: 0 ${theme.spacings.byte};
   ${subHeadingKilo({ theme })};
@@ -87,6 +62,17 @@ const baseStyles = ({ theme, onClick }) => css`
   text-align: center;
 `;
 
+const colorStyles = ({ theme, color }) => {
+  const currentColor = COLOR_MAP[color];
+  if (!currentColor) {
+    return null;
+  }
+  return css`
+    label: ${`badge--${color}`};
+    background-color: ${theme.colors[currentColor.default]};
+  `;
+};
+
 const circleStyles = ({ circle }) =>
   circle &&
   css`
@@ -97,11 +83,37 @@ const circleStyles = ({ circle }) =>
     ${size(24)};
   `;
 
-const StyledBadge = styled('div')`
-  ${baseStyles};
-  ${colorStyles};
-  ${circleStyles};
-`;
+const clickableStyles = ({ theme, onClick, color }) => {
+  const currentColor = COLOR_MAP[color];
+  if (!onClick || !currentColor) {
+    return null;
+  }
+  return css`
+    label: badge--clickable;
+    border: 0;
+    outline: 0;
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${theme.colors[currentColor.hover]};
+    }
+
+    &:active {
+      background-color: ${theme.colors[currentColor.active]};
+    }
+
+    &:focus {
+      ${focusOutline({ theme })};
+    }
+  `;
+};
+
+const StyledBadge = styled('div')(
+  baseStyles,
+  colorStyles,
+  circleStyles,
+  clickableStyles
+);
 
 /**
  * A badge for displaying update notifications etc.

src/components/Badge/Badge.spec.js

@@ -49,7 +49,7 @@ describe('Badge', () => {
   });
 
   it('should have hover/active styles only when the onClick handler is provided', () => {
-    const actual = create(<Badge onClick={() => {}} />);
+    const actual = create(<Badge onClick={jest.fn()} />);
     expect(actual).toMatchSnapshot();
   });
 

src/components/Badge/Badge.story.js

@@ -15,6 +15,7 @@
 
 import React, { Fragment } from 'react';
 import { select, boolean } from '@storybook/addon-knobs/react';
+import { action } from '@storybook/addon-actions';
 import { values } from 'lodash/fp';
 
 import { colorNames } from '../../styles/constants';
@@ -50,3 +51,9 @@ export const circular = () => (
     42
   </Badge>
 );
+
+export const clickable = () => (
+  <Badge color={Badge.PRIMARY} onClick={action('onClick')} as="button">
+    Click me
+  </Badge>
+);

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

@@ -2,9 +2,8 @@
 
 exports[`Badge rendering color variations should render with danger colors 1`] = `
 .circuit-0 {
-  border-radius: 100px;
+  border-radius: 999999px;
   color: #FFFFFF;
-  cursor: default;
   display: inline-block;
   padding: 0 8px;
   font-size: 12px;
@@ -27,9 +26,8 @@ exports[`Badge rendering color variations should render with danger colors 1`] =
 
 exports[`Badge rendering color variations should render with primary colors 1`] = `
 .circuit-0 {
-  border-radius: 100px;
+  border-radius: 999999px;
   color: #FFFFFF;
-  cursor: default;
   display: inline-block;
   padding: 0 8px;
   font-size: 12px;
@@ -52,9 +50,8 @@ exports[`Badge rendering color variations should render with primary colors 1`]
 
 exports[`Badge rendering color variations should render with success colors 1`] = `
 .circuit-0 {
-  border-radius: 100px;
+  border-radius: 999999px;
   color: #FFFFFF;
-  cursor: default;
   display: inline-block;
   padding: 0 8px;
   font-size: 12px;
@@ -77,9 +74,8 @@ exports[`Badge rendering color variations should render with success colors 1`]
 
 exports[`Badge rendering color variations should render with warning colors 1`] = `
 .circuit-0 {
-  border-radius: 100px;
+  border-radius: 999999px;
   color: #FFFFFF;
-  cursor: default;
   display: inline-block;
   padding: 0 8px;
   font-size: 12px;
@@ -102,9 +98,8 @@ exports[`Badge rendering color variations should render with warning colors 1`]
 
 exports[`Badge should have hover/active styles only when the onClick handler is provided 1`] = `
 .circuit-0 {
-  border-radius: 100px;
+  border-radius: 999999px;
   color: #FFFFFF;
-  cursor: pointer;
   display: inline-block;
   padding: 0 8px;
   font-size: 12px;
@@ -117,6 +112,9 @@ exports[`Badge should have hover/active styles only when the onClick handler is
   user-select: none;
   text-align: center;
   background-color: #9DA7B1;
+  border: 0;
+  outline: 0;
+  cursor: pointer;
 }
 
 .circuit-0:hover {
@@ -127,6 +125,15 @@ exports[`Badge should have hover/active styles only when the onClick handler is
   background-color: #212933;
 }
 
+.circuit-0:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus::-moz-focus-inner {
+  border: 0;
+}
+
 <div
   class="circuit-0 circuit-1"
   color="neutral"
@@ -135,9 +142,8 @@ exports[`Badge should have hover/active styles only when the onClick handler is
 
 exports[`Badge should have the correct circle styles 1`] = `
 .circuit-0 {
-  border-radius: 100px;
+  border-radius: 999999px;
   color: #FFFFFF;
-  cursor: default;
   display: inline-block;
   padding: 0 8px;
   font-size: 12px;
@@ -174,9 +180,8 @@ exports[`Badge should have the correct circle styles 1`] = `
 
 exports[`Badge should render with default styles 1`] = `
 .circuit-0 {
-  border-radius: 100px;
+  border-radius: 999999px;
   color: #FFFFFF;
-  cursor: default;
   display: inline-block;
   padding: 0 8px;
   font-size: 12px;

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

@@ -13,15 +13,26 @@ exports[`CalendarTag should render with default styles 1`] = `
   border-radius: 4px;
   font-size: 16px;
   line-height: 24px;
-  box-shadow: 0px 0px 0px 1px #D8DDE1;
+  border: 1px solid #D8DDE1;
   padding: 4px 12px;
   cursor: default;
   cursor: pointer;
+  outline: 0;
+  background: transparent;
 }
 
 .circuit-0:hover {
   background-color: #D8DDE1;
-  box-shadow: 0px 0px 0px 1px #D8DDE1;
+  border: 1px solid #9DA7B1;
+}
+
+.circuit-0:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus::-moz-focus-inner {
+  border: 0;
 }
 
 <div>

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

@@ -13,15 +13,26 @@ exports[`CalendarTagTwoStep should render with default styles 1`] = `
   border-radius: 4px;
   font-size: 16px;
   line-height: 24px;
-  box-shadow: 0px 0px 0px 1px #D8DDE1;
+  border: 1px solid #D8DDE1;
   padding: 4px 12px;
   cursor: default;
   cursor: pointer;
+  outline: 0;
+  background: transparent;
 }
 
 .circuit-0:hover {
   background-color: #D8DDE1;
-  box-shadow: 0px 0px 0px 1px #D8DDE1;
+  border: 1px solid #9DA7B1;
+}
+
+.circuit-0:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus::-moz-focus-inner {
+  border: 0;
 }
 
 <div>

src/components/CardList/components/Item/Item.js

@@ -22,7 +22,6 @@ import { setStatic } from 'recompose';
 import withKeyboardEvents from '../../../../util/withKeyboardEvents';
 import withAriaSelected from '../../../../util/withAriaSelected';
 import { sizes } from '../../../../styles/constants';
-import { shadowBorder } from '../../../../styles/style-helpers';
 
 const { KILO, MEGA, GIGA } = sizes;
 
@@ -61,7 +60,7 @@ const getBorderStyles = theme => css`
     height: 100%;
     left: 0;
     top: 0;
-    ${shadowBorder(theme.colors.b500, theme.borderWidth.mega)};
+    box-shadow: 0px 0px 0px ${theme.borderWidth.mega} ${theme.colors.b500};
     border-radius: ${theme.borderRadius.mega};
   }
 `;

src/components/Checkbox/Checkbox.js

@@ -20,7 +20,7 @@ import styled from '@emotion/styled';
 import { hideVisually, size } from 'polished';
 import { Check } from '@sumup/icons';
 
-import { disableVisually } from '../../styles/style-helpers';
+import { disableVisually, focusOutline } from '../../styles/style-helpers';
 import { childrenPropType } from '../../util/shared-prop-types';
 import { uniqueId } from '../../util/id';
 import Tooltip from '../Tooltip';
@@ -31,6 +31,7 @@ const labelBaseStyles = ({ theme }) => css`
   display: inline-block;
   padding-left: ${theme.spacings.giga};
   position: relative;
+  cursor: pointer;
 
   &::before {
     ${size(theme.spacings.mega)};
@@ -100,8 +101,7 @@ const inputStyles = ({ theme }) => css`
   ${hideVisually()};
 
   &:focus + label::before {
-    border-width: 2px;
-    border-color: ${theme.colors.p500};
+    ${focusOutline({ theme })};
   }
 
   &:checked + label > svg {