perf: reduce dependencies

package.json

@@ -62,13 +62,11 @@
     "lodash": "^4.17.11",
     "moment": "^2.24.0",
     "no-scroll": "^2.1.1",
-    "polished": "^3.1.0",
     "prop-types": "^15.7.2",
     "react-dates": "^21.2.0",
     "react-modal": "^3.8.1",
     "react-popper": "^1.3.3",
     "react-text-mask": "^5.4.3",
-    "recompose": "^0.30.0",
     "text-mask-addons": "^3.8.0",
     "tiny-warning": "^1.0.3",
     "yargs": "^14.0.0"
@@ -99,7 +97,7 @@
     "@storybook/preset-typescript": "^3.0.0",
     "@storybook/react": "^5.2.0",
     "@storybook/source-loader": "^5.2.4",
-    "@sumup/design-tokens": "^1.0.0-alpha.2",
+    "@sumup/design-tokens": "^1.0.0-alpha.3",
     "@sumup/foundry": "^2.1.0",
     "@sumup/icons": "^1.0.0",
     "@sumup/intl": "^1.0.0",
@@ -116,7 +114,6 @@
     "@types/lodash": "^4.14.149",
     "@types/react": "^16.9.32",
     "@types/react-dom": "^16.9.6",
-    "@types/recompose": "^0.30.7",
     "audit-ci": "^2.1.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^25.0.0",

src/components/Badge/Badge.js

@@ -17,7 +17,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
-import { size } from 'polished';
 
 import { subHeadingKilo, focusOutline } from '../../styles/style-helpers';
 import { colorNames } from '../../styles/constants';
@@ -80,7 +79,8 @@ const circleStyles = ({ circle }) =>
     display: flex;
     align-items: center;
     justify-content: center;
-    ${size(24)};
+    height: 24px;
+    width: 24px;
   `;
 
 const clickableStyles = ({ theme, onClick, color }) => {

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

@@ -15,7 +15,7 @@ exports[`Card should render with default styles 1`] = `
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
-  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);
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07);
   padding: 16px 24px;
 }
 
@@ -40,7 +40,7 @@ exports[`Card should render with shadow styles 1`] = `
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
-  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);
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07);
   padding: 16px 24px;
 }
 
@@ -65,7 +65,7 @@ exports[`Card should render with shadow styles 2`] = `
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
-  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06);
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07);
   padding: 16px 24px;
 }
 
@@ -90,7 +90,7 @@ exports[`Card should render with shadow styles 3`] = `
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
-  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 4px 4px 0 rgba(12,15,20,0.06), 0 8px 8px 0 rgba(12,15,20,0.06);
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 4px 4px 0 rgba(12,15,20,0.07),0 8px 8px 0 rgba(12,15,20,0.07);
   padding: 16px 24px;
 }
 
@@ -115,7 +115,7 @@ exports[`Card should render with spacing styles 1`] = `
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
-  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);
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07);
   padding: 16px 16px;
 }
 
@@ -140,7 +140,7 @@ exports[`Card should render with spacing styles 2`] = `
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
-  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);
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07);
   padding: 16px 24px;
 }
 

src/components/CardList/CardList.story.js

@@ -27,11 +27,7 @@ class CardListStory extends Component {
 
   render() {
     const { selected } = this.state;
-    const padding = knobs.select(
-      'padding',
-      [CardList.Item.KILO, CardList.Item.MEGA, CardList.Item.GIGA],
-      CardList.Item.GIGA
-    );
+    const padding = knobs.select('padding', ['kilo', 'mega', 'giga'], 'giga');
 
     return (
       <CardList>

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

@@ -15,7 +15,7 @@ exports[`CardList should render with default styles 1`] = `
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
-  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);
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07);
   padding: 16px 24px;
   padding: 0;
 }
@@ -144,6 +144,7 @@ exports[`CardList should render with default styles 1`] = `
   spacing="giga"
 >
   <div
+    aria-selected="false"
     class="circuit-0 circuit-1"
     tabindex="0"
   >
@@ -157,12 +158,14 @@ exports[`CardList should render with default styles 1`] = `
     List item 2
   </div>
   <div
+    aria-selected="false"
     class="circuit-0 circuit-1"
     tabindex="0"
   >
     List item 3
   </div>
   <div
+    aria-selected="false"
     class="circuit-0 circuit-1"
     tabindex="0"
   >

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

@@ -13,14 +13,12 @@
  * limitations under the License.
  */
 
+import React from 'react';
 import PropTypes from 'prop-types';
-import { flow } from 'lodash/fp';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
-import { setStatic } from 'recompose';
 
-import withKeyboardEvents from '../../../../util/withKeyboardEvents';
-import withAriaSelected from '../../../../util/withAriaSelected';
+import { isEnter, isSpacebar } from '../../../../util/key-codes';
 import { sizes } from '../../../../styles/constants';
 
 const { KILO, MEGA, GIGA } = sizes;
@@ -93,13 +91,35 @@ const hoverStyles = ({ theme }) => css`
   }
 `;
 
-const Item = styled('div')(
+const BaseItem = styled('div')(
   baseStyles,
   paddingStyles,
   selectedStyles,
   hoverStyles
 );
 
+const createOnKeyDown = onClick => {
+  if (!onClick) {
+    return null;
+  }
+
+  return event => {
+    // Most clickable HTML elements can also be triggered by pressing the
+    // spacebar or enter key.
+    if (isEnter(event) || isSpacebar(event)) {
+      onClick(event);
+    }
+  };
+};
+
+const Item = props => (
+  <BaseItem
+    aria-selected={props.selected}
+    onKeyDown={createOnKeyDown(props.onClick)}
+    {...props}
+  />
+);
+
 Item.propTypes = {
   /**
    * When true, shows the item with selected styles.
@@ -124,10 +144,4 @@ Item.defaultProps = {
 /**
  * @component
  */
-export default flow(
-  withKeyboardEvents,
-  withAriaSelected,
-  setStatic('KILO', KILO),
-  setStatic('MEGA', MEGA),
-  setStatic('GIGA', GIGA)
-)(Item);
+export default Item;

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

@@ -27,7 +27,7 @@ describe('Item', () => {
   });
 
   it('should render with all paddings', () => {
-    [Item.KILO, Item.MEGA, Item.GIGA].forEach(padding => {
+    ['kilo', 'mega', 'giga'].forEach(padding => {
       expect(
         create(<Item padding={padding}>List item</Item>)
       ).toMatchSnapshot();

src/components/CardList/components/Item/__snapshots__/Item.spec.js.snap

@@ -55,6 +55,7 @@ exports[`Item should render with all paddings 1`] = `
 }
 
 <div
+  aria-selected="false"
   class="circuit-0 circuit-1"
   tabindex="0"
 >
@@ -117,6 +118,7 @@ exports[`Item should render with all paddings 2`] = `
 }
 
 <div
+  aria-selected="false"
   class="circuit-0 circuit-1"
   tabindex="0"
 >
@@ -179,6 +181,7 @@ exports[`Item should render with all paddings 3`] = `
 }
 
 <div
+  aria-selected="false"
   class="circuit-0 circuit-1"
   tabindex="0"
 >
@@ -241,6 +244,7 @@ exports[`Item should render with default styles 1`] = `
 }
 
 <div
+  aria-selected="false"
   class="circuit-0 circuit-1"
   tabindex="0"
 >
@@ -303,6 +307,7 @@ exports[`Item should render with selected styles 1`] = `
 }
 
 <div
+  aria-selected="false"
   class="circuit-0 circuit-1"
   tabindex="0"
 >

src/components/Checkbox/Checkbox.js

@@ -17,10 +17,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
-import { hideVisually, size } from 'polished';
 import { Check } from '@sumup/icons';
 
-import { disableVisually, focusOutline } from '../../styles/style-helpers';
+import {
+  disableVisually,
+  hideVisually,
+  focusOutline
+} from '../../styles/style-helpers';
 import { childrenPropType } from '../../util/shared-prop-types';
 import { uniqueId } from '../../util/id';
 import Tooltip from '../Tooltip';
@@ -34,7 +37,8 @@ const labelBaseStyles = ({ theme }) => css`
   cursor: pointer;
 
   &::before {
-    ${size(theme.spacings.mega)};
+    height: ${theme.spacings.mega};
+    width: ${theme.spacings.mega};
     box-sizing: border-box;
     box-shadow: inset 0 1px 2px 0 rgba(102, 113, 123, 0.12);
     background-color: ${theme.colors.white};
@@ -50,7 +54,8 @@ const labelBaseStyles = ({ theme }) => css`
   }
 
   svg {
-    ${size(theme.spacings.mega)};
+    height: ${theme.spacings.mega};
+    width: ${theme.spacings.mega};
     padding: 2px;
     box-sizing: border-box;
     color: ${theme.colors.p500};

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

@@ -105,7 +105,7 @@ exports[`Checkbox should render with a tooltip when passed a validation hint 1`]
   transition: opacity 0.3s;
   font-size: 13px;
   line-height: 20px;
-  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);
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07);
   left: 50%;
   left: calc(50% - (16px + 4px));
   bottom: 100%;

src/components/ComponentsContext/withComponents.js

@@ -14,29 +14,20 @@
  */
 
 import React from 'react';
-import { wrapDisplayName } from 'recompose';
 
-import ComponentsContext from './ComponentsContext';
-import * as defaultComponents from './components';
+import { getDisplayName } from '../../util/get-display-name';
+import useComponents from './useComponents';
 
 /**
  * Subscribe to the components context with a HOC.
  */
 const withComponents = Component => {
   function WrappedComponent(props) {
-    return (
-      <ComponentsContext.Consumer>
-        {(components = {}) => (
-          <Component
-            {...props}
-            components={{ ...defaultComponents, ...components }}
-          />
-        )}
-      </ComponentsContext.Consumer>
-    );
+    const components = useComponents();
+    return <Component {...props} components={components} />;
   }
 
-  WrappedComponent.displayName = wrapDisplayName(Component, 'withComponents');
+  WrappedComponent.displayName = `withComponents(${getDisplayName(Component)})`;
 
   return WrappedComponent;
 };

src/components/IconButton/IconButton.tsx

@@ -15,9 +15,9 @@
 
 import React, { Children, cloneElement, FC, ReactElement } from 'react';
 import { css } from '@emotion/core';
-import { hideVisually } from 'polished';
 import { Theme } from '@sumup/design-tokens';
 
+import { hideVisually } from '../../styles/style-helpers';
 import styled from '../../styles/styled';
 import { Button, ButtonProps } from '../Button/Button';
 

src/components/Input/Input.js

@@ -18,10 +18,14 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { find, identity } from 'lodash/fp';
-import { size, hideVisually } from 'polished';
+
 import { CircleCheckmark, CircleWarning, CircleCross } from '@sumup/icons';
 
-import { textMega, disableVisually } from '../../styles/style-helpers';
+import {
+  textMega,
+  disableVisually,
+  hideVisually
+} from '../../styles/style-helpers';
 import { directions } from '../../styles/constants';
 import { childrenPropType } from '../../util/shared-prop-types';
 
@@ -164,7 +168,8 @@ const prefixStyles = theme => css`
   pointer-events: none;
   color: ${theme.colors.n700};
   padding: ${theme.spacings.kilo};
-  ${size(theme.spacings.peta)};
+  height: ${theme.spacings.peta};
+  width: ${theme.spacings.peta};
 `;
 
 /**
@@ -179,7 +184,8 @@ const suffixStyles = theme => css`
   pointer-events: none;
   color: ${theme.colors.n700};
   padding: ${theme.spacings.kilo};
-  ${size(theme.spacings.peta)};
+  height: ${theme.spacings.peta};
+  width: ${theme.spacings.peta};
 `;
 
 const tooltipBaseStyles = css`

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

@@ -521,7 +521,7 @@ label + .circuit-6 {
   transition: opacity 0.3s;
   font-size: 13px;
   line-height: 20px;
-  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);
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07);
   right: 50%;
   right: calc(50% - (16px + 4px));
   bottom: 100%;