feat(styles): load custom fonts (#603)

* feat(components): migrate BaseStyles to TypeScript and add font-faces

* docs(docs): remove fonts from documentation

.storybook/manager-head.html

@@ -1,25 +1,2 @@
 <meta name="description" content="SumUp's React UI component library" />
 <link rel="icon" type="image/png" href="/images/logo-icon.png" />
-<style>
-  @font-face {
-    font-family: 'aktiv-grotesk';
-    font-weight: 400;
-    src: url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff2')
-        format('woff2'),
-      url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff')
-        format('woff'),
-      url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.eot')
-        format('embedded-opentype');
-  }
-
-  @font-face {
-    font-family: 'aktiv-grotesk';
-    font-weight: 700;
-    src: url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff2')
-        format('woff2'),
-      url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff')
-        format('woff'),
-      url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.eot')
-        format('embedded-opentype');
-  }
-</style>

.storybook/preview.js

@@ -20,14 +20,7 @@ const SORT_ORDER = {
     'Contributing',
     'Code of Conduct'
   ],
-  Advanced: [
-    'Static CSS',
-    'Base Components',
-    'Theme',
-    'Grid',
-    'Icons',
-    'Fonts'
-  ],
+  Advanced: ['Static CSS', 'Base Components', 'Theme', 'Grid', 'Icons'],
   Typography: ['Heading', 'SubHeading', 'Text'],
   Layout: [],
   Forms: [],

src/components/BaseStyles/BaseStyles.spec.js → src/components/BaseStyles/BaseStyles.spec.tsx

@@ -15,8 +15,9 @@
 
 import React from 'react';
 
-import BaseStyles from './BaseStyles';
+import { render } from '../../util/test-utils';
 
+import { BaseStyles } from './BaseStyles';
 import { createBaseStyles } from './BaseStylesService';
 
 jest.mock('./BaseStylesService', () => ({

src/components/BaseStyles/BaseStyles.js → src/components/BaseStyles/BaseStyles.tsx

@@ -18,6 +18,6 @@ import { Global } from '@emotion/core';
 
 import { createBaseStyles } from './BaseStylesService';
 
-const BaseStyles = () => <Global styles={theme => createBaseStyles(theme)} />;
-
-export default BaseStyles;
+export const BaseStyles = () => (
+  <Global styles={theme => createBaseStyles({ theme })} />
+);

src/components/BaseStyles/BaseStylesService.spec.js → src/components/BaseStyles/BaseStylesService.spec.ts

@@ -19,7 +19,7 @@ import { createBaseStyles } from './BaseStylesService';
 
 describe('BaseStylesService', () => {
   it('should return the global base styles', () => {
-    const actual = createBaseStyles(light);
+    const actual = createBaseStyles({ theme: light });
     expect(actual.styles).toMatchSnapshot();
   });
 });

src/components/BaseStyles/BaseStylesService.js → src/components/BaseStyles/BaseStylesService.ts

@@ -15,16 +15,38 @@
 
 import { css } from '@emotion/core';
 
+import { StyleProps } from '../../styles/styled';
 import { textMega } from '../../styles/style-helpers';
 
-export const createBaseStyles = theme => css`
+const FONTS_BASE_URL = 'https://static.sumup.com/fonts/latin-greek-cyrillic';
+
+export const createBaseStyles = ({ theme }: StyleProps) => css`
+  /**
+   * Start downloading custom fonts as soon as possible.
+   */
+  @font-face {
+    font-family: 'aktiv-grotesk';
+    font-weight: 400;
+    font-display: swap;
+    src: url('${FONTS_BASE_URL}/aktiv-grotest-400.woff2') format('woff2'),
+      url('${FONTS_BASE_URL}/aktiv-grotest-400.woff') format('woff'),
+      url('${FONTS_BASE_URL}/aktiv-grotest-400.eot') format('embedded-opentype');
+  }
+  @font-face {
+    font-family: 'aktiv-grotesk';
+    font-weight: 700;
+    font-display: swap;
+    src: url('${FONTS_BASE_URL}/aktiv-grotest-700.woff2') format('woff2'), 
+      url('${FONTS_BASE_URL}/aktiv-grotest-700.woff') format('woff'),
+      url('${FONTS_BASE_URL}/aktiv-grotest-700.eot') format('embedded-opentype');
+  }
+
   /**
    * reset.css
    * http://meyerweb.com/eric/tools/css/reset/
    * v2.0 | 20110126
    * License: none (public domain)
    */
-
   html,
   body,
   div,
@@ -134,10 +156,10 @@ export const createBaseStyles = theme => css`
   q {
     quotes: none;
   }
-  blockquote:before,
-  blockquote:after,
-  q:before,
-  q:after {
+  blockquote::before,
+  blockquote::after,
+  q::before,
+  q::after {
     content: '';
     content: none;
   }