feat(utils): migrate style helpers to TypeScript (#576)

* fix(docs): use external theme in icon docs feature/button-enums * feat(utils): remove unit style helpers These helpers might hurt performance and can be easily replaced by the CSS native `calc`. feature/typescript-utils * refactor(utils): move calculatePadding helper to Button component This helper is only used in the Button component, there's no reason for it to be a global helper feature/typescript-utils * refactor(utils): use consistent API for style helpers Style helpers are always a function that returns a style object created by Emotion's `css` function. feature/typescript-utils feature/typescript-utils feature/typescript-utils * feat(utils): migrate style helpers to TypeScript BREAKING CHANGE: The `shadowGround` and `textTera` style helpers have been removed. BREAKING CHANGE: The unit style helpers have been removed. Use the CSS [`calc`](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) function instead.
sumup-oss · Apr 30, 2020 · 477568d · 477568d
1 parent 984fbb4
commit 477568d
Show file tree

Hide file tree

Showing 17 changed files with 350 additions and 253 deletions.
diff --git a/.storybook/components/Icons.js b/.storybook/components/Icons.js
@@ -19,11 +19,11 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { ThemeProvider } from 'emotion-theming';
 import { keys, entries, includes, isEmpty, groupBy, sortBy } from 'lodash/fp';
+import { light } from '@sumup/design-tokens';
 import * as iconComponents from '@sumup/icons';
 import { icons } from '@sumup/icons/manifest.json';
 
 import {
-  theme as themes,
   Heading,
   Text,
   InlineElements,
@@ -122,7 +122,7 @@ const Icons = () => {
   );
 
   return (
-    <ThemeProvider theme={themes.circuit}>
+    <ThemeProvider theme={light}>
       <Filters>
         <Label htmlFor="search-icon">
           Filter icons by name

diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
@@ -9357,7 +9357,7 @@ exports[`Storyshots Components/Notification/NotificationList Base 1`] = `
   flex-direction: column;
   width: 400px;
   max-width: 90vw;
-  max-width: calc(100vw - 48px);
+  max-width: calc(100vw - (24px * 2));
 }
 
 .circuit-9 > * {
@@ -9612,7 +9612,7 @@ HTMLCollection [
 .circuit-4:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-4:hover {
@@ -9695,7 +9695,7 @@ HTMLCollection [
 .circuit-7:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-7:hover {
@@ -9953,7 +9953,7 @@ exports[`Storyshots Components/ProgressBar Base 1`] = `
   background-color: #3388FF;
   border: 1px solid #1760CE;
   box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: 3px 0 0 3px;
+  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
   -webkit-transition: width 0.05s ease-out;
   transition: width 0.05s ease-out;
 }
@@ -10027,7 +10027,7 @@ HTMLCollection [
   background-color: #3388FF;
   border: 1px solid #1760CE;
   box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: 3px 0 0 3px;
+  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
   -webkit-transition: width 0.05s ease-out;
   transition: width 0.05s ease-out;
 }
@@ -10093,7 +10093,7 @@ HTMLCollection [
   background-color: #3388FF;
   border: 1px solid #1760CE;
   box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: 3px 0 0 3px;
+  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
   -webkit-transition: width 0.05s ease-out;
   transition: width 0.05s ease-out;
 }
@@ -10159,7 +10159,7 @@ HTMLCollection [
   background-color: #3388FF;
   border: 1px solid #1760CE;
   box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: 3px 0 0 3px;
+  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
   -webkit-transition: width 0.05s ease-out;
   transition: width 0.05s ease-out;
 }
@@ -10229,7 +10229,7 @@ exports[`Storyshots Components/ProgressBar With Fraction 1`] = `
   background-color: #3388FF;
   border: 1px solid #1760CE;
   box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: 3px 0 0 3px;
+  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
   -webkit-transition: width 0.05s ease-out;
   transition: width 0.05s ease-out;
 }
@@ -10298,7 +10298,7 @@ exports[`Storyshots Components/ProgressBar With Percentage 1`] = `
   background-color: #3388FF;
   border: 1px solid #1760CE;
   box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: 3px 0 0 3px;
+  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
   -webkit-transition: width 0.05s ease-out;
   transition: width 0.05s ease-out;
 }
@@ -11157,7 +11157,7 @@ label + .circuit-14 {
   background-color: #3388FF;
   border: 1px solid #1760CE;
   box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: 3px 0 0 3px;
+  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
   -webkit-transition: width 0.05s ease-out;
   transition: width 0.05s ease-out;
 }

diff --git a/src/components/BaseStyles/__snapshots__/BaseStylesService.spec.js.snap b/src/components/BaseStyles/__snapshots__/BaseStylesService.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`BaseStylesService should return the global base styles 1`] = `
 "html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}*,*::before,*::after{box-sizing:inherit;}html{box-sizing:border-box;[type='button']{appearance:none;}}body{background-color:#FAFBFC;color:#0F131A;
-    font-size: 16px;
-    line-height: 24px;
-  ;}html,body,input,select,optgroup,textarea,button{font-weight:400;font-family:aktiv-grotesk, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\";font-feature-settings:'kern';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;text-rendering:optimizeLegibility;}pre,code{font-family:Consolas, monaco, monospace;}"
+      font-size: 16px;
+      line-height: 24px;
+    ;;}html,body,input,select,optgroup,textarea,button{font-weight:400;font-family:aktiv-grotesk, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\";font-feature-settings:'kern';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;text-rendering:optimizeLegibility;}pre,code{font-family:Consolas, monaco, monospace;}"
 `;
diff --git a/src/components/Button/components/RegularButton/RegularButton.js b/src/components/Button/components/RegularButton/RegularButton.js
@@ -18,7 +18,26 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import isPropValid from '@emotion/is-prop-valid';
 
-import { textMega, calculatePadding } from '../../../../styles/style-helpers';
+import { textMega } from '../../../../styles/style-helpers';
+import { sizes } from '../../../../styles/constants';
+
+const { KILO, MEGA, GIGA } = sizes;
+
+const calculatePadding = ({ theme, size: buttonSize }) => (diff = '0px') => {
+  const sizeMap = {
+    /* eslint-disable max-len */
+    [KILO]: `calc(${theme.spacings.bit} - ${diff}) calc(${theme.spacings.mega} - ${diff})`,
+    [MEGA]: `calc(${theme.spacings.byte} - ${diff}) calc(${theme.spacings.giga} - ${diff})`,
+    [GIGA]: `calc(${theme.spacings.kilo} - ${diff}) calc(${theme.spacings.tera} - ${diff})`
+    /* eslint-enable max-len */
+  };
+
+  if (!sizeMap[buttonSize] && buttonSize) {
+    return null;
+  }
+
+  return sizeMap[buttonSize] || sizeMap.mega;
+};
 
 const baseStyles = ({ theme, ...props }) => css`
   label: button;

diff --git a/src/components/InlineElements/InlineElements.js b/src/components/InlineElements/InlineElements.js
@@ -41,7 +41,7 @@ const fallbackBaseStyles = ({ children, theme }) => {
         );
       }
 
-      ${clearfix};
+      ${clearfix()};
     }
   `;
 };
@@ -111,7 +111,7 @@ const fallbackInlineMobileStyles = ({ theme, inlineMobile, children }) => {
         );
       }
 
-      ${clearfix};
+      ${clearfix()};
     }
   `;
 };

diff --git a/src/components/NotificationList/NotificationList.js b/src/components/NotificationList/NotificationList.js
@@ -18,7 +18,6 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 
 import { childrenPropType } from '../../util/shared-prop-types';
-import { multiplyUnit } from '../../styles/style-helpers';
 import Card from '../Card';
 
 // The first max-width rule is a fallback for old versions of Android
@@ -29,7 +28,7 @@ const baseStyles = ({ theme }) => css`
   flex-direction: column;
   width: 400px;
   max-width: 90vw;
-  max-width: calc(100vw - ${multiplyUnit(theme.spacings.giga, 2)});
+  max-width: calc(100vw - (${theme.spacings.giga} * 2));
 
   > * {
     margin-top: ${theme.spacings.mega};

diff --git a/src/components/NotificationList/__snapshots__/NotificationList.spec.js.snap b/src/components/NotificationList/__snapshots__/NotificationList.spec.js.snap
@@ -11,7 +11,7 @@ exports[`NotificationList should render with default styles 1`] = `
   flex-direction: column;
   width: 400px;
   max-width: 90vw;
-  max-width: calc(100vw - 48px);
+  max-width: calc(100vw - (24px * 2));
 }
 
 .circuit-2 > * {

diff --git a/src/components/Pagination/PageButton/PageButton.js b/src/components/Pagination/PageButton/PageButton.js
@@ -17,7 +17,6 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 
 import Button from '../../Button';
-import { calculatePadding } from '../../../styles/style-helpers'; // eslint-disable-line max-len
 
 const baseStyles = ({ theme }) => css`
   label: pagination__button;
@@ -29,7 +28,7 @@ const baseStyles = ({ theme }) => css`
   &:focus {
     border-color: ${theme.colors.n300};
     border-width: ${theme.borderWidth.kilo};
-    padding: ${calculatePadding({ theme, size: 'kilo' })()};
+    padding: ${theme.spacings.bit} ${theme.spacings.mega};
   }
 
   &:hover {

diff --git a/src/components/Pagination/PageButton/__snapshots__/PageButton.spec.js.snap b/src/components/Pagination/PageButton/__snapshots__/PageButton.spec.js.snap
@@ -67,7 +67,7 @@ exports[`PageButton styles should render with default styles 1`] = `
 .circuit-1:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-1:hover {

diff --git a/src/components/Pagination/PaginationButton/__snapshots__/PaginationButton.spec.js.snap b/src/components/Pagination/PaginationButton/__snapshots__/PaginationButton.spec.js.snap
@@ -67,7 +67,7 @@ exports[`PaginationButton styles should render with default styles 1`] = `
 .circuit-1:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-1:hover {
@@ -127,7 +127,7 @@ exports[`PaginationButton styles should render with plain styles 1`] = `
 .circuit-1:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-1:hover {

diff --git a/src/components/Pagination/__snapshots__/Pagination.spec.js.snap b/src/components/Pagination/__snapshots__/Pagination.spec.js.snap
@@ -170,7 +170,7 @@ exports[`Pagination styles With 5 or less pages should render only the number of
 .circuit-4:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-4:hover {
@@ -253,7 +253,7 @@ exports[`Pagination styles With 5 or less pages should render only the number of
 .circuit-7:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-7:hover {
@@ -550,7 +550,7 @@ exports[`Pagination styles With more than 5 pages when user is last but one page
 .circuit-16:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-16:hover {
@@ -633,7 +633,7 @@ exports[`Pagination styles With more than 5 pages when user is last but one page
 .circuit-4:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-4:hover {
@@ -773,7 +773,7 @@ exports[`Pagination styles With more than 5 pages when user is last but one page
 .circuit-7:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-7:hover {
@@ -1018,7 +1018,7 @@ exports[`Pagination styles With more than 5 pages when user is on last page shou
 .circuit-19:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-19:hover {
@@ -1101,7 +1101,7 @@ exports[`Pagination styles With more than 5 pages when user is on last page shou
 .circuit-4:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-4:hover {
@@ -1241,7 +1241,7 @@ exports[`Pagination styles With more than 5 pages when user is on last page shou
 .circuit-7:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-7:hover {
@@ -1487,7 +1487,7 @@ exports[`Pagination styles With more than 5 pages when user is on page 2 should
 .circuit-7:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-7:hover {
@@ -1570,7 +1570,7 @@ exports[`Pagination styles With more than 5 pages when user is on page 2 should
 .circuit-4:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-4:hover {
@@ -1710,7 +1710,7 @@ exports[`Pagination styles With more than 5 pages when user is on page 2 should
 .circuit-16:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-16:hover {
@@ -1955,7 +1955,7 @@ exports[`Pagination styles With more than 5 pages when user is on page in the mi
 .circuit-13:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-13:hover {
@@ -2038,7 +2038,7 @@ exports[`Pagination styles With more than 5 pages when user is on page in the mi
 .circuit-4:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-4:hover {
@@ -2178,7 +2178,7 @@ exports[`Pagination styles With more than 5 pages when user is on page in the mi
 .circuit-7:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-7:hover {
@@ -2429,7 +2429,7 @@ exports[`Pagination styles With more than 5 pages when user is on page one shoul
 .circuit-4:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-4:hover {
@@ -2512,7 +2512,7 @@ exports[`Pagination styles With more than 5 pages when user is on page one shoul
 .circuit-7:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-7:hover {
@@ -2652,7 +2652,7 @@ exports[`Pagination styles With more than 5 pages when user is on page one shoul
 .circuit-16:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-16:hover {