fix: eslint issues with util test

datchley · Mar 14, 2017 · fa2c982 · fa2c982
1 parent 436d8d1
commit fa2c982
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 16 deletions.
diff --git a/examples/simple/index.html b/examples/simple/index.html
@@ -1,6 +1,44 @@
 <html>
   <head>
-    <title>library-boilerplate-example-title</title>
+    <title>ScaleText Examples</title>
+    <style type="text/css">
+      *, *:before, *:after {
+        box-sizing: border-box;
+      }
+
+      html,body {
+        margin: 15px;
+      }
+
+      body {
+        font-family: 'Source Sans Pro', 'Lucida Grande', sans-serif;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 25px;
+        letter-spacing: inherit;
+      }
+
+      .box {
+        position: relative;
+        display: inline-block;
+        width: 20vw;
+        height: 20vw;
+        overflow: hidden;
+        resize: both;
+        padding: 5px;
+        text-align: center;
+        border: 1px solid #ccc;
+        margin: 5px;
+      }
+
+      .box-text {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+    </style>
   </head>
   <body>
     <div id="root">

diff --git a/examples/simple/index.js b/examples/simple/index.js
@@ -1,8 +1,37 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import Counter from 'library-boilerplate';
+import ScaleText from '../../src/index';
+
+const App = () => (
+  <div>
+    <div className="box-descriptions">
+      <ul>
+        <li> <b>Box 1</b> - <code>&lt;ScaleText /&gt;</code></li>
+        <li> <b>Box 2</b> - <code>&lt;ScaleText minFontSize={12} /&gt;</code></li>
+        <li> <b>Box 3</b> - <code>&lt;ScaleText maxFontSize={35} /&gt;</code></li>
+      </ul>
+    </div>
+    <div className="box-container">
+      <div className="box">
+        <ScaleText>
+          <span className="box-text">Box 1</span>
+        </ScaleText>
+      </div>
+      <div className="box">
+        <ScaleText minFontSize={12}>
+          <span className="box-text">Box 2</span>
+        </ScaleText>
+      </div>
+      <div className="box">
+        <ScaleText maxFontSize={35}>
+          <span className="box-text">Box 3</span>
+        </ScaleText>
+      </div>
+    </div>
+  </div>
+);
 
 ReactDom.render(
-  <Counter />,
+  <App />,
   document.getElementById('root')
 );
diff --git a/examples/simple/package.json b/examples/simple/package.json
@@ -1,23 +1,23 @@
 {
-  "name": "library-boilerplate-example",
+  "name": "react-scale-text-example",
   "version": "1.0.0",
-  "description": "library-boilerplate-example-description",
+  "description": "Example usage for ScaleText Component",
   "main": "server.js",
   "scripts": {
     "start": "node server.js"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/library-boilerplate-author/library-boilerplate.git"
+    "url": "https://github.com/datchley/react-scale-text.git"
   },
   "keywords": [
-    "library-boilerplate-keywords"
+    "keywords"
   ],
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/library-boilerplate-author/library-boilerplate/issues"
+    "url": "https://github.com/datchley/react-scale-text/issues"
   },
-  "homepage": "https://github.com/library-boilerplate-author/library-boilerplate",
+  "homepage": "https://github.com/datchley/react-scale-text",
   "dependencies": {
     "react": "^0.14.6",
     "react-dom": "^0.14.6"

diff --git a/examples/simple/webpack.config.js b/examples/simple/webpack.config.js
@@ -18,9 +18,6 @@ module.exports = {
     new webpack.NoErrorsPlugin()
   ],
   resolve: {
-    alias: {
-      'library-boilerplate': path.join(__dirname, '..', '..', 'src')
-    },
     extensions: ['', '.js']
   },
   module: {

diff --git a/src/__tests__/utils.tests.js b/src/__tests__/utils.tests.js
@@ -1,10 +1,10 @@
 import { camelize, getStyle, getOverflow, hasOverflow } from '../utils';
 
-function createMockDiv (width, height, styles = {}) {
-  const div = document.createElement("div");
+function createMockDiv(width, height, styles = {}) {
+  const div = document.createElement('div');
   Object.assign(div.style, {
-    width: width+"px",
-    height: height+"px",
+    width: `${width}px`,
+    height: `${height}px`,
   }, styles);
 
   // we have to mock this for jsdom.