From 8d7961711c1b13d8915c4505f4631664fb191561 Mon Sep 17 00:00:00 2001
From: Elliott Thompson <ellth92@gmail.com>
Date: Mon, 4 Jan 2021 15:18:58 +0000
Subject: [PATCH] Remove the montserrat font from PCUI (#68)

* remove the montserrat font from pcui
* introduce a way to include fonts to built versions of pcui
---
 README.md                            | 10 ++++
 package.json                         |  2 +-
 src/class.js                         |  6 +-
 src/components/Element/index.js      |  3 +
 src/components/Panel/index.js        |  4 +-
 src/components/TreeView/style.scss   |  2 +-
 src/components/TreeViewItem/index.js |  4 +-
 src/pcui/element/element-tooltip.js  |  3 +-
 src/scss/fonts-storybook.scss        | 89 ++++++++++++++++++++++++++++
 src/scss/fonts.scss                  | 40 -------------
 src/scss/pcui-storybook.scss         |  2 +-
 11 files changed, 117 insertions(+), 48 deletions(-)
 create mode 100644 src/scss/fonts-storybook.scss

diff --git a/README.md b/README.md
index 3f9c71d3..0b81b3f5 100644
--- a/README.md
+++ b/README.md
@@ -47,6 +47,16 @@ import { Label } from 'dist/pcui-react.js';
 const helloWorldLabel = () => <Label text="Hello World" />;
 ```
 
+## Including your own font
+
+PCUI uses four css classes to add styled fonts to the various components. These are `.font-regular`, `.font-bold`, `.font-thin` and `.font-light`. You can use your own font with PCUI by adding `font-family` css rules to these classes on your webpage. For example: 
+```css
+.font-regular, .font-bold, .font-thin, .font-light {
+    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+}
+
+```
+
 ## Data Binding
 
 The pcui library offers a data binding layer that can be used to synchonise data across multiple components. It offers two way binding to a given observer object, so updates made in a component are reflected in the observers data and distributed out to all other subscribed components. A simple use case is shown below:
diff --git a/package.json b/package.json
index 49a5e51c..f2757eb6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@playcanvas/pcui",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "author": "PlayCanvas <support@playcanvas.com>",
   "homepage": "https://playcanvas.github.io/pcui",
   "description": "This library enables the creation of reliable and visually pleasing user interfaces by providing fully styled components that you can use directly on your site. The components are useful in a wide range of use cases, from creating simple forms to building graphical user interfaces for complex web tools.",
diff --git a/src/class.js b/src/class.js
index ad372263..1ac07c93 100644
--- a/src/class.js
+++ b/src/class.js
@@ -13,6 +13,8 @@ var ERROR = 'pcui-error';
 var FLASH = 'flash';
 var NOT_FLEXIBLE = 'pcui-not-flexible';
 var DEFAULT_MOUSEDOWN = 'pcui-default-mousedown';
+var FONT_REGULAR = 'font-regular';
+var FONT_BOLD = 'font-bold';
 
 export {
     FLEX,
@@ -29,5 +31,7 @@ export {
     ERROR,
     FLASH,
     NOT_FLEXIBLE,
-    DEFAULT_MOUSEDOWN
+    DEFAULT_MOUSEDOWN,
+    FONT_REGULAR,
+    FONT_BOLD
 };
diff --git a/src/components/Element/index.js b/src/components/Element/index.js
index 129be98b..7f10dd3f 100644
--- a/src/components/Element/index.js
+++ b/src/components/Element/index.js
@@ -170,6 +170,9 @@ class Element extends Events {
         // add element class
         this._dom.classList.add(CLASS_ELEMENT);
 
+        // add font regular class
+        this._dom.classList.add(pcuiClass.FONT_REGULAR);
+
         // add user classes
         if (args.class) {
             if (Array.isArray(args.class)) {
diff --git a/src/components/Panel/index.js b/src/components/Panel/index.js
index 9cfb1b8b..4a8638cf 100644
--- a/src/components/Panel/index.js
+++ b/src/components/Panel/index.js
@@ -118,13 +118,13 @@ class Panel extends Container {
         this._containerHeader = new Container({
             flex: true,
             flexDirection: 'row',
-            class: [CLASS_PANEL_HEADER, 'font-bold']
+            class: [CLASS_PANEL_HEADER, pcuiClass.FONT_BOLD]
         });
 
         // header title
         this._labelTitle = new Label({
             text: args.headerText,
-            class: [CLASS_PANEL_HEADER_TITLE, 'font-bold']
+            class: [CLASS_PANEL_HEADER_TITLE, pcuiClass.FONT_BOLD]
         });
         this._containerHeader.append(this._labelTitle);
 
diff --git a/src/components/TreeView/style.scss b/src/components/TreeView/style.scss
index d95eb902..cf2ca3ad 100644
--- a/src/components/TreeView/style.scss
+++ b/src/components/TreeView/style.scss
@@ -227,7 +227,7 @@
             background-color: transparent;
 
             > input {
-                @extend .font-regular;
+                font-family: inherit;
                 font-size: 14px;
                 padding: 0;
             }
diff --git a/src/components/TreeViewItem/index.js b/src/components/TreeViewItem/index.js
index ba4a7e51..46e12bae 100644
--- a/src/components/TreeViewItem/index.js
+++ b/src/components/TreeViewItem/index.js
@@ -1,6 +1,7 @@
 import Label from '../Label';
 import Container from '../Container';
 import TextInput from '../TextInput';
+import * as pcuiClass from '../../class';
 
 /* global TreeView */
 
@@ -264,7 +265,8 @@ class TreeViewItem extends Container {
         // show text input to enter new text
         const textInput = new TextInput({
             renderChanges: false,
-            value: this.text
+            value: this.text,
+            class: pcuiClass.FONT_REGULAR
         });
 
         textInput.on('blur', () => {
diff --git a/src/pcui/element/element-tooltip.js b/src/pcui/element/element-tooltip.js
index 64c8b7c8..3fa151e8 100644
--- a/src/pcui/element/element-tooltip.js
+++ b/src/pcui/element/element-tooltip.js
@@ -1,5 +1,6 @@
 import Container from '../../components/Container';
 import Label from '../../components/Label';
+import * as pcuiClass from '../../class';
 
 const CLASS_ROOT = 'pcui-tooltip';
 const CLASS_TITLE = CLASS_ROOT + '-title';
@@ -48,7 +49,7 @@ class Tooltip extends Container {
         this._toggleTimeout = null;
 
         this._labelTitle = new Label({
-            class: [CLASS_TITLE, 'font-bold']
+            class: [CLASS_TITLE, pcuiClass.FONT_BOLD]
         });
         this.append(this._labelTitle);
 
diff --git a/src/scss/fonts-storybook.scss b/src/scss/fonts-storybook.scss
new file mode 100644
index 00000000..f24b15cd
--- /dev/null
+++ b/src/scss/fonts-storybook.scss
@@ -0,0 +1,89 @@
+@font-face {
+    font-family: 'pc-icon';
+    src: url('https://s3-eu-west-1.amazonaws.com/static.playcanvas.com/fonts/PlayIcons-Regular.eot');
+    src: url('https://s3-eu-west-1.amazonaws.com/static.playcanvas.com/fonts/PlayIcons-Regular.eot?#iefix') format('embedded-opentype'),
+         url('https://s3-eu-west-1.amazonaws.com/static.playcanvas.com/fonts/PlayIcons-Regular.woff2') format('woff2'),
+         url('https://s3-eu-west-1.amazonaws.com/static.playcanvas.com/fonts/PlayIcons-Regular.woff') format('woff'),
+         url('https://s3-eu-west-1.amazonaws.com/static.playcanvas.com/fonts/PlayIcons-Regular.ttf') format('truetype'),
+         url('https://s3-eu-west-1.amazonaws.com/static.playcanvas.com/fonts/PlayIcons-Regular.svg') format('svg');
+
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Montserrat Thin';
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+    src: local('Montserrat Thin'), local('Montserrat-Thin'), url(https://fonts.gstatic.com/s/montserrat/v15/JTUQjIg1_i6t8kCHKm45_QpRyS7m0dR9pA.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+
+@font-face {
+    font-family: 'Montserrat Light';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: local('Montserrat Light'), local('Montserrat-Light'), url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_cJD3gnD_vx3rCs.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+
+@font-face {
+    font-family: 'Montserrat Regular';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+
+@font-face {
+    font-family: 'Montserrat Bold';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_dJE3gnD_vx3rCs.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+
+.font-smooth {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-smoothing: antialiased;
+}
+
+.font-thin {
+    font-family: 'Montserrat Thin', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-weight: 100;
+    font-style: normal;
+}
+
+.font-light {
+    font-family: 'Montserrat Light', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-weight: 200;
+    font-style: normal;
+}
+
+.font-regular {
+    font-family: 'Montserrat Regular', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-weight: normal;
+    font-style: normal;
+}
+
+.font-bold {
+    font-family: 'Montserrat Bold', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-weight: bold;
+    font-style: normal;
+}
+
+.font-icon {
+    font-family: 'pc-icon';
+    @extend .font-smooth;
+}
+
+.fixedFont {
+    font-family: inconsolatamedium, Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace;
+    font-weight: normal;
+    font-size: 12px;
+}
\ No newline at end of file
diff --git a/src/scss/fonts.scss b/src/scss/fonts.scss
index f24b15cd..ecef6497 100644
--- a/src/scss/fonts.scss
+++ b/src/scss/fonts.scss
@@ -11,42 +11,6 @@
     font-style: normal;
 }
 
-@font-face {
-    font-family: 'Montserrat Thin';
-    font-style: normal;
-    font-weight: 100;
-    font-display: swap;
-    src: local('Montserrat Thin'), local('Montserrat-Thin'), url(https://fonts.gstatic.com/s/montserrat/v15/JTUQjIg1_i6t8kCHKm45_QpRyS7m0dR9pA.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-  }
-
-@font-face {
-    font-family: 'Montserrat Light';
-    font-style: normal;
-    font-weight: 300;
-    font-display: swap;
-    src: local('Montserrat Light'), local('Montserrat-Light'), url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_cJD3gnD_vx3rCs.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-  }
-
-@font-face {
-    font-family: 'Montserrat Regular';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-  }
-
-@font-face {
-    font-family: 'Montserrat Bold';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_dJE3gnD_vx3rCs.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-  }
-
 .font-smooth {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -54,25 +18,21 @@
 }
 
 .font-thin {
-    font-family: 'Montserrat Thin', 'Helvetica Neue', Arial, Helvetica, sans-serif;
     font-weight: 100;
     font-style: normal;
 }
 
 .font-light {
-    font-family: 'Montserrat Light', 'Helvetica Neue', Arial, Helvetica, sans-serif;
     font-weight: 200;
     font-style: normal;
 }
 
 .font-regular {
-    font-family: 'Montserrat Regular', 'Helvetica Neue', Arial, Helvetica, sans-serif;
     font-weight: normal;
     font-style: normal;
 }
 
 .font-bold {
-    font-family: 'Montserrat Bold', 'Helvetica Neue', Arial, Helvetica, sans-serif;
     font-weight: bold;
     font-style: normal;
 }
diff --git a/src/scss/pcui-storybook.scss b/src/scss/pcui-storybook.scss
index 916097e9..f20c9f9c 100644
--- a/src/scss/pcui-storybook.scss
+++ b/src/scss/pcui-storybook.scss
@@ -1,5 +1,5 @@
 @import './variables.scss';
-@import './fonts.scss';
+@import './fonts-storybook.scss';
 @import 'pcui-common.scss';
 @import 'pcui-hidden.scss'; // this should be last