Merge branch 'master' into AdvancedSelect

Author: Michiel87

.gitignore

@@ -12,6 +12,7 @@
 /build
 
 # misc
+.idea*
 .DS_Store
 .env.local
 .env.development.local

.storybook/config.js

@@ -2,7 +2,10 @@ import  React from 'react'
 import { configure } from '@storybook/react'
 import { addDecorator } from '@storybook/react'
 import { withThemesProvider } from 'storybook-addon-styled-component-theme'
+import WebfontLoader from '@dr-kobros/react-webfont-loader'
+
 import theme from '../src/theme'
+import { fontConfig } from '../src/fontConfig'
 
 const styles = {
   display: 'flex',
@@ -12,14 +15,24 @@ const styles = {
   alignItems: 'center',
   flexDirection: 'column'
 }
+
 const CenterDecorator = (storyFn) => (
   <div style={styles}>
     { storyFn() }
   </div>
-);
+)
+
+const FontLoader = (storyFn) => (
+  <WebfontLoader config={fontConfig} onStatus={(fontStatus) => console.log('font status:', fontStatus)}>
+    { storyFn() }
+  </WebfontLoader>
+)
+
 const themes = [theme]
 addDecorator(withThemesProvider(themes))
+addDecorator(FontLoader)
 addDecorator(CenterDecorator)
+
 function loadStories() {
   require('../src/stories')
 }

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@dr-kobros/react-webfont-loader": "^8.0.0",
     "@storybook/cli": "^5.0.0-rc.3",
     "react": "^16.8.2",
     "react-dom": "^16.8.2",

src/assets/fonts/fira-mono-v5-latin-regular.ttf

@@ -0,0 +1,24 @@
+@font-face {
+    font-family: 'Fira Mono Latin Regular';
+    font-style: normal;
+    font-weight: normal;
+    src: url('../fonts/fira-mono-v5-latin-regular.ttf');
+}
+
+@font-face {
+    font-family: 'Pt Sans Latin Bold';
+    font-style: normal;
+    font-weight: 700;
+    src: url('../fonts/pt-sans-v8-latin-700.ttf');
+}
+
+@font-face {
+    font-family: 'Pt Sans Latin Regular';
+    font-style: normal;
+    font-weight: normal;
+    src: url('../fonts/pt-sans-v8-latin-regular.ttf');
+}
+
+body {
+    font-family: 'Fira Mono Latin Regular';
+}

src/assets/fonts/fira-mono-v5-latin-regular.woff

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import styled from 'styled-components';
+import styled from 'styled-components'
 
 interface IProps {
   value?: string
@@ -20,9 +20,8 @@ TextInput.defaultProps = {
   value: ''
 }
 
-
 export default styled(TextInput)`
-  font-family: inherit;
+  font-family: ${props => props.theme.primaryFont};
   color: #444444;
   height: 30px;
   width: 300px;

src/assets/fonts/fira-mono-v5-latin-regular.woff2

@@ -0,0 +1,29 @@
+import React from 'react'
+import { ThemeProvider } from 'styled-components'
+// @ts-ignore
+import WebfontLoader from '@dr-kobros/react-webfont-loader'
+
+import { fontConfig } from '../../../fontConfig'
+import mainTheme, { Theme } from '../../../theme'
+
+interface ThemeAndFontProviderProps {
+    fontsConfig?: object
+    theme?: Theme
+    onFontStatus?: (status: string) => void
+    children: any
+}
+
+export const ThemeAndFontProvider: React.FC<ThemeAndFontProviderProps> = ({
+    fontsConfig = fontConfig,
+    theme = mainTheme,
+    onFontStatus,
+    children
+}) => (
+    <ThemeProvider theme={theme}>
+        <WebfontLoader config={fontsConfig} onStatus={onFontStatus && onFontStatus}>
+            { children }
+        </WebfontLoader>
+    </ThemeProvider>
+)
+
+export default ThemeAndFontProvider

src/assets/fonts/pt-sans-v8-latin-700.ttf

@@ -0,0 +1,8 @@
+import './assets/styles/fonts.css'
+
+export const fontConfig = {
+    custom: {
+        families: ['Fira Mono Latin Regular', 'Pt Sans Latin Bold', 'Pt Sans Latin Regular'],
+        urls: ['./assets/styles/fonts.css']
+    }
+}

src/assets/fonts/pt-sans-v8-latin-700.woff

@@ -1,10 +1,11 @@
 const theme = {
-  global: {
-    margin: '20px !default'
-  }
+    primaryFont: 'Fira Mono Latin Regular',
+        global: {
+        margin: '20px !default'
+    }
 }
 
-type Required<T> = { [P in keyof T]-?: T[P] };
+type Required<T> = { readonly [P in keyof T]-?: T[P] };
 export type Theme = Required<typeof theme>
 
 export default theme as Theme

src/assets/fonts/pt-sans-v8-latin-700.woff2

@@ -842,6 +842,14 @@
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
   integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
 
+"@dr-kobros/react-webfont-loader@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@dr-kobros/react-webfont-loader/-/react-webfont-loader-8.0.0.tgz#1e000be944d846cc9101e656cdcf2521e859e066"
+  integrity sha512-7cC+Amhh3gbj/FenRym6N+a8JAm3SGUFSwK4jxOQJcy49qzBMt1Q3VbI8I1ZHuKSIThNzz8FlauDlOLsuFPE+g==
+  dependencies:
+    prop-types "^15.5.8"
+    webfontloader "^1.6.27"
+
 "@emotion/cache@^10.0.7":
   version "10.0.7"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.7.tgz#6221de2e939f62022c04b4df2c165ce577809f23"
@@ -10291,7 +10299,7 @@ prompts@^0.1.9:
     kleur "^2.0.1"
     sisteransi "^0.1.1"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.1:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -12892,6 +12900,11 @@ web-namespaces@^1.1.2:
   resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.2.tgz#c8dc267ab639505276bae19e129dbd6ae72b22b4"
   integrity sha512-II+n2ms4mPxK+RnIxRPOw3zwF2jRscdJIUE9BfkKHm4FYEg9+biIoTMnaZF5MpemE3T+VhMLrhbyD4ilkPCSbg==
 
+webfontloader@^1.6.27:
+  version "1.6.28"
+  resolved "https://registry.yarnpkg.com/webfontloader/-/webfontloader-1.6.28.tgz#db786129253cb6e8eae54c2fb05f870af6675bae"
+  integrity sha1-23hhKSU8tujq5UwvsF+HCvZnW64=
+
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"