From 415f701e309d8567c942b1a2aaa982346961f355 Mon Sep 17 00:00:00 2001
From: Duncan Graham Walker <walkerdu@bc.edu>
Date: Sat, 21 May 2016 19:25:33 -0400
Subject: [PATCH] Basic of new dummy app running

---
 README-pre-1-0.md                             | 398 ------------------
 addon/styles/addon.scss                       |   1 +
 ember-cli-build.js                            |  10 +-
 package.json                                  |   7 +-
 tests/dummy/app/components/some-component.js  |   5 +
 .../app/components/test-calling-component.js  |   9 -
 tests/dummy/app/components/test-component.js  |  12 -
 tests/dummy/app/controllers/index.js          |  13 +-
 tests/dummy/app/index.html                    |   1 +
 tests/dummy/app/router.js                     |   8 +-
 .../app/styles/{core => }/_variables.scss     |   0
 tests/dummy/app/styles/app.scss               |  93 ++--
 tests/dummy/app/styles/components/_code.scss  |   6 +
 tests/dummy/app/styles/core/_mixins.scss      |  42 --
 tests/dummy/app/templates/application.hbs     |  80 +---
 .../templates/components/test-component.hbs   |   5 -
 .../app/templates/destroy-on-transition.hbs   |  24 --
 tests/dummy/app/templates/index.hbs           |  86 +++-
 .../app/templates/tooltip-as-component.hbs    |  32 --
 .../app/templates/tooltip-auto-close.hbs      |  51 ---
 .../app/templates/tooltip-manual-trigger.hbs  |  37 --
 .../app/templates/tooltip-on-element.hbs      |  19 -
 .../dummy/app/templates/tooltip-on-helper.hbs |  51 ---
 .../app/templates/tooltip-with-safestring.hbs |   1 -
 24 files changed, 142 insertions(+), 849 deletions(-)
 delete mode 100644 README-pre-1-0.md
 create mode 100644 tests/dummy/app/components/some-component.js
 delete mode 100644 tests/dummy/app/components/test-calling-component.js
 delete mode 100644 tests/dummy/app/components/test-component.js
 rename tests/dummy/app/styles/{core => }/_variables.scss (100%)
 delete mode 100644 tests/dummy/app/styles/core/_mixins.scss
 delete mode 100644 tests/dummy/app/templates/components/test-component.hbs
 delete mode 100644 tests/dummy/app/templates/destroy-on-transition.hbs
 delete mode 100644 tests/dummy/app/templates/tooltip-as-component.hbs
 delete mode 100644 tests/dummy/app/templates/tooltip-auto-close.hbs
 delete mode 100644 tests/dummy/app/templates/tooltip-manual-trigger.hbs
 delete mode 100644 tests/dummy/app/templates/tooltip-on-element.hbs
 delete mode 100644 tests/dummy/app/templates/tooltip-on-helper.hbs
 delete mode 100644 tests/dummy/app/templates/tooltip-with-safestring.hbs

diff --git a/README-pre-1-0.md b/README-pre-1-0.md
deleted file mode 100644
index da1e5b76..00000000
--- a/README-pre-1-0.md
+++ /dev/null
@@ -1,398 +0,0 @@
-Ember-tooltips [![Build Status](https://travis-ci.org/sir-dunxalot/ember-tooltips.svg)](https://travis-ci.org/sir-dunxalot/ember-tooltips) [![npm](https://img.shields.io/npm/v/ember-tooltips.svg)](https://www.npmjs.com/package/ember-tooltips)
-======
-
-Render simple tooltips on components, views, HTML elements, and more using simple strings, HTMLBars, bound properties, and more.
-
-Powered by <a href="http://darsa.in/tooltip/" target="_blank">darsain/tooltip</a>. You can see [a demo here](http://sir-dunxalot.github.io/ember-tooltips/).
-
-## Installation
-
-```
-ember install ember-tooltips
-```
-
-## Documentation
-
-Documentation for usage is below:
-
-- [Usage](#usage)
-  - [On helpers](#using-on-helpers)
-  - [As a component](#using-as-a-component)
-  - [On HTML elements](#using-on-html-elements)
-- [Supported properties](#supported-properties)
-- [The Tooltip Object](#the-tooltip-object)
-- [Hiding and Showing Tooltips](#hiding-and-showing-tooltips)
-- [Accessibility](#accessibility)
-- [The Tooltip Mixin (and changing default values)](#the-tooltip-mixin)
-- [The Tooltip Utility](#the-tooltip-utility)
-
-## Usage
-
-### Using on Helpers
-
-The most common way to use a tooltip is on a helper like `{{#link-to}}` or `{{some-component}}`.
-
-All [supported properties](#supported-properties) should be camelCased and prefixed by `tooltip`.
-
-To add a tooltip to any component:
-
-```hbs
-{{#some-component tooltipContent='This is the tooltip'}}
-  Hover over me!
-{{/some-component}}
-```
-
-You can use multiple options:
-
-```hbs
-{{#some-component
-  tooltipContent='This is the tooltip'
-  tooltipPlace='Right'
-  tooltipSpacing=50
-}}
-  Hover over me!
-{{/some-component}}
-```
-
-### Using as a Component
-
-If you want to use HTMLBars in your tooltip, then the `{{tooltip-on-parent}}` component is your friend.
-
-The tooltip is automatically attached to the parent view's element and the template block of the `{{tooltip-on-parent}}` component will be rendered inside the tooltip.
-
-```hbs
-{{#some-component}}
-  {{#tooltip-on-parent}}
-    Stop hovering over me, {{name}}!
-  {{/tooltip-on-parent}}
-
-  Don't hover over me!
-{{/some-component}}
-```
-
-camelCased Options can still be passed to the component but they are not prefixed:
-
-```hbs
-{{#some-component}}
-  {{#tooltip-on-parent place='right' effectClass='grow'}}
-    <strong>Stop hovering over me, {{name}}!</strong>
-  {{/tooltip-on-parent}}
-
-  Dont' hover over me!
-{{/some-component}}
-```
-
-### Using on HTML elements
-
-If you want to render a tooltip on an HTML element that isn't rendered by an Ember Component, you can use `data` attributes.
-
-1. Add the `has-tooltip` class
-2. Add `data-<x>` attributes to set tooltip properties
-3. Call `this.renderChildTooltips()` in a parent view that has the tooltips mixin included (usually this mixin is automatically added to all components. See [the tooltips mixin](#the-tooltip-mixin))
-
-For example, to render two tooltips:
-
-```hbs
-{{#some-component}}
-  <ul class="list">
-    <li class="has-tooltip" data-tooltip-content="Dave is great">Dave</li>
-    <li class="has-tooltip" data-tooltip-content="Mike is not great">Mike</li>
-  </ul>
-{{/some-component}}
-```
-
-```js
-// app/components/some-component.js
-
-import Ember from 'ember';
-import TooltipsMixin from 'ember-tooltips/mixins/components/tooltips';
-
-export default Ember.Component.extend(
-  TooltipsMixin, {
-
-  didInsertElement: function() {
-    this._super(...arguments);
-    this.renderChildTooltips(); // Voila!
-  },
-
-});
-```
-
-Options can be set on the element(s) as <strong>prefixed and dasherized</strong> attributes. For example:
-
-```hbs
-{{#some-component}}
-  <div class="notification">
-    <span
-      class="has-tooltip"
-      data-tooltip-content="This is bad!"
-      data-tooltip-effect-class="grow"
-      data-tooltip-type-class="error">
-
-      Hover for more info
-
-    </span>
-  </div>
-{{/some-component}}
-```
-
-```js
-// app/components/some-component.js
-
-import Ember from 'ember';
-
-export default Ember.Component.extend({
-
-  didInsertElement: function() {
-    this._super(...arguments);
-    this.renderChildTooltips(); // Voila!
-  },
-
-});
-```
-
-**Warning:** Using HTML `data-x` attributes has limitations. Durations and manual triggers are not supported.
-
-### Supported Properties
-
-This addon aims to maintain parity with all the [Tooltip library](https://github.com/darsain/tooltip/wiki) features.
-
-Current tooltip properties this addon supports are:
-
-- `auto` (`true` or `false`. Defaults to `true`)
-- `duration` (time in milliseconds. No default)
-- `effectClass` (`'none'`, `'fade'`, `'slide'`, or `'grow'`. Defaults to `'slide'`)
-- `event` (see [events](#events))
-- `hideOn` (see [events](#events))
-- `place` (defaults to `'top'`)
-- `showOn` (see [events](#events))
-- `spacing` (defaults to `10`)
-- `typeClass` (can be any string. No default)
-- `visibility` (`true` or `false`, when `event: 'manual'`. No default)
-
-**Please note**, depending on your use case, you may have to prefix or modify the property name. For example, `effectClass`, `tooltipEffectClass` or `data-tooltip-effect-class`.
-
-Default values can be set [on the `ember-tooltips` mixin](#customizing-the-mixin).
-
-```hbs
-{{input type='text'
-  tooltipEvent='focus'
-  tooltipContent='Helpful form tip'
-  tooltipDuration='1000'
-  tooltipPlace='right'
-}}
-```
-
-### The Tooltip Object
-
-Any time a tooltip is created for a component, the tooltip is set as the `tooltip` property of the component.
-
-Thus, you can programatically control the tooltip of any Ember component using `this.get('tooltip')`. This will return the `Tooltip` instance, which is created using [`darsain/tooltip`](https://github.com/darsain/tooltip/wiki/Tooltip).
-
-The documentation for the tooltip is contained in [the `Tooltip` API wiki](https://github.com/darsain/tooltip/wiki/Tooltip).
-
-For example:
-
-```js
-/* Change the tooltip content */
-this.get('tooltip').content('This is the new content');
-
-/* Show the tooltip  */
-this.get('tooltip').show();
-
-/* Get the tooltip's DOM element  */
-this.get('tooltip').element;
-
-/* Update the size after the tooltip content changes */
-this.get('tooltip').updateSize();
-
-/* See if the tooltip is already hidden */
-this.get('tooltip').hidden; // 1 or 0
-```
-
-### Hiding and Showing Tooltips
-
-There are three ways to hide and show tooltips:
-
-- [Events](#events)
-- [Methods](#methods)
-- [Timers](#timers)
-
-#### Events
-
-You can control the hiding and showing of tooltips on set jQuery events using three properties: `event`, `showOn`, and `hideOn`.
-
-Version `0.5.5` and lower does *not* support `hideOn` and `showOn`.
-
-`event` is the easiest way to set the hide and show event - it sets the `hideOn` and `showOn` properties.
-
-`event` should be a string equal to `'hover'`, `'click'`, `'focus'`, `'ready'` (show on load of DOM), or `'none'`. The default value is `'hover'`.
-
-```hbs
-{{some-component
-  tooltipContent='This will show on hover'
-  tooltipEvent='hover'
-}}
-```
-
-If you want to set the show or hide events individually, you can overwrite `event` using `showOn` and `hideOn`. Both properties accept any [jQuery event](https://api.jquery.com/category/events/) or `'none'`.
-
-For example:
-
-```hbs
-{{some-component
-  tooltipHideOn='none'
-  tooltipShowOn='click'
-  tooltipContent='hover'
-}}
-```
-
-Default values for `event`, `hideOn`, and `showOn` can be set [on the `ember-tooltips` mixin](#customizing-the-mixin).
-
-Version `0.5.5` and lower of this addon use 'manual' instead of 'none'.
-
-#### Methods
-
-As described in [The Tooltip Object](#the-tooltip-object) documentation, you can access the `tooltip` property on any component.
-
-Thus, you can programatically hide and show the tooltip of any component as follows:
-
-```js
-this.get('tooltip').hide();
-this.get('tooltip').show();
-```
-
-If you want to check whether a tooltip is currently hidden, access the `hidden` property:
-
-```
-this.get('tooltip').hidden; // 1 or 0
-```
-
-#### Timers
-
-You can set a timer on a tooltip to close it after an amount of time using the `duration` property. Duration should be any number of milliseconds.
-
-```hbs
-{{input type='text'
-  tooltipEvent='focus'
-  tooltipContent='Helpful form tip'
-  tooltipDuration='1000'
-}}
-```
-
-In the above example, the tooltip shows on focus and then closes after 1000ms.
-
-### Accessibility
-
-This addon aims to meet 508 compliance.
-
-Components with tooltips are given a `tabindex` attribute and when the component receives focus, the tooltip with show.
-
-Additionally, the `aria-describedby`, `title`, `id`, and `role` attributes are managed by this addon.
-
-There is always room for improvement and PRs to improve accessibility are welcome.
-
-### The Tooltip Mixin
-
-By default the `ember-tooltips` mixin is added to all components. This mixin contains the helper methods to render tooltips.
-
-You can customize where the mixin is automatically added by overriding the `addTo` option in your `config/environment.js` file:
-
-```js
-module.exports = function(environment) {
-  var ENV = {
-
-    /* ... */
-
-    tooltips: {
-      addTo: ['Component'], // Ember.Component
-    }
-  }
-};
-```
-
-Each option corresponds to a class on the Ember namespace. For example, `addTo: ['Input']` corresponds to `Ember.Input`.
-
-You can disable all reopening of classes by seting `addTo` to a falsy value or empty array:
-
-```js
-module.exports = function(environment) {
-  var ENV = {
-
-    /* ... */
-
-    tooltips: {
-      addTo: [], // The mixin is not added to anything
-    }
-  }
-};
-```
-
-You can add the tooltip functionality to individual classes by importing the mixin to your class:
-
-```js
-// app/components/big-button.js
-
-import Ember from 'ember';
-import TooltipsComponent from 'ember-tooltips/mixins/components/tooltips';
-
-export default Ember.Component.extend(
-  TooltipsComponent, {
-
-});
-```
-
-To set default values for [supported properties](#supported-properties) across your application, set the values in the mixin in your app tree:
-
-```js
-// app/mixins/components/tooltips.js
-
-import Ember from 'ember';
-import EmberTooltipsMixin from 'ember-tooltips/mixins/components/tooltips';
-
-export default Ember.Mixin.create(
-  EmberTooltipsMixin, {
-
-  tooltipPlace: 'right',
-  tooltipSpacing: 20,
-});
-```
-
-You can see the [tooltips mixin here](https://github.com/sir-dunxalot/ember-tooltips/blob/master/addon/mixins/components/tooltips.js).
-
-### The Tooltip Utility
-
-All tooltips rendered by this addon use the [`renderTooltip()` utility](https://github.com/sir-dunxalot/ember-tooltips/blob/master/addon/utils/render-tooltip.js).
-
-You can use this utility in your application if none of the given use cases work:
-
-```js
-import Ember from 'ember';
-import renderTooltip from 'ember-tooltips/utils/render-tooltip';
-
-export default Ember.Component.extend({
-
-  AddTheTooltip() {
-    const element = this.$().find('#some-element')[0];
-
-    renderTooltip(element, {
-      content: 'Some extra info',
-      event: 'click',
-      place: 'right',
-    });
-  },
-
-});
-```
-
-## Development
-
-All PRs and issues are welcome.
-
-- `git clone https://github.com/sir-dunxalot/ember-tooltips.git`
-- `cd ember-tooltips`
-- `npm install && bower install`
-- `ember s`
-- `ember test`, `ember try:testall`, or the `/tests` route
-
-You do not need to bump the version when you have a PR.
diff --git a/addon/styles/addon.scss b/addon/styles/addon.scss
index 19a21317..7fedf226 100644
--- a/addon/styles/addon.scss
+++ b/addon/styles/addon.scss
@@ -10,6 +10,7 @@
   font-size: 14px;
   padding: 6px 10px;
   border-radius: 3px;
+  font-family: sans-serif;
 
   &:after {
     content: '';
diff --git a/ember-cli-build.js b/ember-cli-build.js
index 4ac39137..878284e6 100644
--- a/ember-cli-build.js
+++ b/ember-cli-build.js
@@ -4,7 +4,15 @@ var EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
 module.exports = function(defaults) {
   var app = new EmberAddon(defaults, {
-    // Add options here
+    snippetSearchPaths: ['app', 'tests'],
+
+    sassOptions: {
+      extension: 'scss',
+      includePaths: [
+        'node_modules/compass-boilerplate/lib',
+      ],
+    },
+
   });
 
   /*
diff --git a/package.json b/package.json
index 457a42cf..358ac609 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,8 @@
   "license": "MIT",
   "devDependencies": {
     "broccoli-asset-rev": "^2.4.2",
+    "compass-boilerplate": "^0.1.2",
+    "compass-mixins": "^0.12.10",
     "ember-ajax": "0.7.1",
     "ember-cli": "2.5.0",
     "ember-cli-app-version": "^1.0.0",
@@ -37,11 +39,10 @@
     "ember-disable-prototype-extensions": "^1.1.0",
     "ember-export-application-global": "^1.0.5",
     "ember-load-initializers": "^0.5.1",
-    "ember-paper": "0.2.14",
     "ember-resolver": "^2.0.3",
+    "ember-tether": "0.3.1",
     "ember-try": "^0.2.2",
-    "loader.js": "^4.0.1",
-    "ember-tether": "0.3.1"
+    "loader.js": "^4.0.1"
   },
   "keywords": [
     "ember-addon",
diff --git a/tests/dummy/app/components/some-component.js b/tests/dummy/app/components/some-component.js
new file mode 100644
index 00000000..87ab9be0
--- /dev/null
+++ b/tests/dummy/app/components/some-component.js
@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  class: ['some-component'],
+});
diff --git a/tests/dummy/app/components/test-calling-component.js b/tests/dummy/app/components/test-calling-component.js
deleted file mode 100644
index a41846dc..00000000
--- a/tests/dummy/app/components/test-calling-component.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Component.extend({
-
-  testRenderingInTemplate: Ember.on('didInsertElement', function() {
-    this.renderChildTooltips();
-  }),
-
-});
diff --git a/tests/dummy/app/components/test-component.js b/tests/dummy/app/components/test-component.js
deleted file mode 100644
index 7ae68c42..00000000
--- a/tests/dummy/app/components/test-component.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Component.extend({
-  classNames: ['inline-block'],
-
-  click() {
-    if (this.get('action')) {
-      this.sendAction('action');
-    }
-  },
-
-});
diff --git a/tests/dummy/app/controllers/index.js b/tests/dummy/app/controllers/index.js
index a89c3c61..36914dce 100644
--- a/tests/dummy/app/controllers/index.js
+++ b/tests/dummy/app/controllers/index.js
@@ -1,5 +1,16 @@
 import Ember from 'ember';
 
+const { run } = Ember;
+
 export default Ember.Controller.extend({
-  name: 'Dave',
+  showTooltips: false,
+
+  init() {
+    run.scheduleOnce('afterRender', () => {
+      run.later(() => {
+        this.set('showTooltips', true);
+      }, 1000);
+    });
+  }
+
 });
diff --git a/tests/dummy/app/index.html b/tests/dummy/app/index.html
index 4ab5ce5b..2ae41492 100644
--- a/tests/dummy/app/index.html
+++ b/tests/dummy/app/index.html
@@ -11,6 +11,7 @@
 
     <link rel="stylesheet" href="assets/vendor.css">
     <link rel="stylesheet" href="assets/dummy.css">
+    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
 
     {{content-for "head-footer"}}
   </head>
diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js
index f631ee26..22046702 100644
--- a/tests/dummy/app/router.js
+++ b/tests/dummy/app/router.js
@@ -6,13 +6,7 @@ const Router = Ember.Router.extend({
 });
 
 Router.map(function() {
-  this.route('destroy-on-transition');
-  this.route('tooltip-as-component');
-  this.route('tooltip-on-element');
-  this.route('tooltip-on-helper');
-  this.route('tooltip-manual-trigger');
-  this.route('tooltip-auto-close');
-  this.route('tooltip-with-safestring');
+
 });
 
 export default Router;
diff --git a/tests/dummy/app/styles/core/_variables.scss b/tests/dummy/app/styles/_variables.scss
similarity index 100%
rename from tests/dummy/app/styles/core/_variables.scss
rename to tests/dummy/app/styles/_variables.scss
diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss
index 9e90f523..4e61cff0 100644
--- a/tests/dummy/app/styles/app.scss
+++ b/tests/dummy/app/styles/app.scss
@@ -1,8 +1,8 @@
-@import 'ember-paper';
-
-@import 'core/variables';
-@import 'core/mixins';
+@import 'compass-boilerplate-vendor/normalize';
+@import 'compass-boilerplate-vendor/html5bp';
+@import 'compass-boilerplate';
 
+@import 'variables';
 @import 'components/code';
 
 html {
@@ -18,69 +18,54 @@ body {
   -webkit-font-smoothing: antialiased;
   font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-family: 'Open Sans', sans-serif;
 }
 
-
-.logo, .logo-wrapper .text {
-  display: inline-block;
-}
-
-.logo {
-  @include rem(margin-top, -0.7);
-  @include rem(margin-left, 1);
-}
-
-.page-content {
-  @include rem(padding, 4);
-}
-
-.inline-block {
-  display: inline-block;
-  vertical-align: middle;
-  padding: 10px;
-  border: 1px solid #bbb;
-  border-radius: 3px;
-  cursor: pointer;
-
-  &:focus {
-    border-color: $info;
-  }
-}
-
-.inline-block:hover {
-  border-color: #999;
+#ember-testing-container {
+  /* Set position static to short-circuit Hubspot Tether's positioning */
+  /* https://github.com/HubSpot/tether/pull/98/ */
+  position: static !important;
 }
 
-.examples {
-  list-style: none;
-  padding: 0;
-  margin: 30px;
+h1,
+h2 {
+  font-weight: 200;
 }
 
-.examples li {
-  padding: 0;
-  margin: 30px 0;
+.hero {
+  height: 100vh;
+  width: 100vw;
+  background-color: #3023AE;
+  background-image: linear-gradient(-134deg, #3023AE 0%, #A56DD7 100%);
+  -webkit-display: flex;
+  display: flex;
+  @include justify-content(center);
+  @include align-items(center);
+  @include flex-direction(column);
 }
 
-.tooltip-error {
-  background-color: #e37f7f;
+#ember-logo {
+  width: 200px;
+  height: auto;
+  @include rem(margin-right, 10);
+  @include inline-block;
 }
 
-a {
-  color: #7aafd1;
-  text-shadow: none !important;
-}
+.badges {
+  @include rem(margin-top, 4);
 
-md-toolbar.md-default-theme {
-  background-color: #D39120;
+  a + a {
+    @include rem(margin-left, 1);
+  }
 }
 
-.tooltip {
-  z-index: 61; // Over md-sidenav
+.logo-tooltip {
+  @include rem(font-size, 2);
+  top: 16px !important;
 }
 
-#ember-testing-container {
-  /* Set position static to short-circuit Hubspot Tether's positioning */
-  /* https://github.com/HubSpot/tether/pull/98/ */
-  position: static !important;
+.page-content {
+  @include rem(padding, 8, 0);
+  @include rem(max-width, 80);
+  margin: 0 auto;
 }
diff --git a/tests/dummy/app/styles/components/_code.scss b/tests/dummy/app/styles/components/_code.scss
index 72701b71..e93074ed 100644
--- a/tests/dummy/app/styles/components/_code.scss
+++ b/tests/dummy/app/styles/components/_code.scss
@@ -270,3 +270,9 @@ Based off Monokai Sublime style. Derived from Monokai by noformnocontent http://
 .php .xml {
   // @include opacity(0.8);
 }
+
+.handlebars {
+  .hljs-expression {
+    color: $blue;
+  }
+}
diff --git a/tests/dummy/app/styles/core/_mixins.scss b/tests/dummy/app/styles/core/_mixins.scss
deleted file mode 100644
index 06640fc7..00000000
--- a/tests/dummy/app/styles/core/_mixins.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
-Remove the units from a number (CSS Tricks)
-
-http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/
-*/
-
-@function strip-unit($num) {
-  @return $num / ($num * 0 + 1);
-}
-
-/*
-Set sizes in REM with PX as a fallback for older browsers (CSS Tricks)
-
-http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/
-*/
-
-@mixin rem($property, $values...) {
-  $max: length($values);
-  $pxValues: '';
-  $remValues: '';
-
-  @for $i from 1 through $max {
-    $value: strip-unit(nth($values, $i)) * 10;
-    $pxValues: #{$pxValues + $value}px;
-
-    @if $i < $max {
-      $pxValues: #{$pxValues + " "};
-    }
-  }
-
-  @for $i from 1 through $max {
-    $value: strip-unit(nth($values, $i));
-    $remValues: #{$remValues + $value}rem;
-
-    @if $i < $max {
-      $remValues: #{$remValues + " "};
-    }
-  }
-
-  #{$property}: $pxValues;
-  #{$property}: $remValues;
-}
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
index 5834973f..c24cd689 100644
--- a/tests/dummy/app/templates/application.hbs
+++ b/tests/dummy/app/templates/application.hbs
@@ -1,79 +1 @@
-{{#paper-nav-container}}
-
-  {{#paper-sidenav class='md-sidenav-left md-whiteframe-z2' locked-open='gt-sm'}}
-
-    {{#paper-toolbar}}
-      <div class="md-toolbar-tools">
-
-        <div class="logo-wrapper">
-          <h2 id="title">
-            {{#link-to 'index'}}
-              {{paper-icon icon='chat'}}
-              <img src="https://s3.amazonaws.com/dgw-public/ember-logo-white.png" class="logo" height="30"/>
-              <span class="text">&nbsp;Tooltips</span>
-            {{/link-to}}
-          </h2>
-        </div>
-      </div>
-    {{/paper-toolbar}}
-
-    {{#paper-content}}
-      {{#paper-list}}
-
-        {{#paper-item action='transitionTo' param='tooltip-on-helper'}}
-          Tooltips on helpers
-        {{/paper-item}}
-
-        {{#paper-item action='transitionTo' param='tooltip-as-component'}}
-          Tooltips as components
-        {{/paper-item}}
-
-        {{#paper-item action='transitionTo' param='tooltip-on-element'}}
-          Tooltips on element
-        {{/paper-item}}
-
-        {{#paper-item action='transitionTo' param='tooltip-manual-trigger'}}
-          Manual tooltip visibility
-        {{/paper-item}}
-
-        {{#paper-item action='transitionTo' param='tooltip-auto-close'}}
-          Automatic close durations
-        {{/paper-item}}
-
-        {{paper-divider}}
-
-        {{#paper-item action='linkTo' param='https://github.com/sir-dunxalot/ember-tooltips'}}
-          {{paper-icon icon='code'}}
-          View Source on Github
-        {{/paper-item}}
-
-        {{#paper-item action='linkTo' param='http://darsa.in/tooltip/'}}
-          {{paper-icon icon='library-books'}}
-          Darsain Tooltip Docs
-        {{/paper-item}}
-
-      {{/paper-list}}
-    {{/paper-content}}
-
-  {{/paper-sidenav}}
-
-  <div layout="column" tabindex="-1" role="main" flex>
-    {{#paper-toolbar}}
-      <div class="md-toolbar-tools">
-        {{#paper-sidenav-toggle as |toggle|}}
-          {{#paper-button target=toggle action='toggleMenu' icon-button=true}}
-            {{paper-icon icon='menu'}}
-          {{/paper-button}}
-        {{/paper-sidenav-toggle}}
-        <span class="md-breadcrumb-page">{{pageTitle}}</span>
-      </div>
-    {{/paper-toolbar}}
-
-    {{#paper-content class='md-padding page-content'}}
-      {{outlet}}
-    {{/paper-content}}
-  </div>
-
-{{/paper-nav-container}}
-
-<div id="paper-wormhole"></div>
+{{outlet}}
diff --git a/tests/dummy/app/templates/components/test-component.hbs b/tests/dummy/app/templates/components/test-component.hbs
deleted file mode 100644
index 5143f368..00000000
--- a/tests/dummy/app/templates/components/test-component.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-{{#if hasBlock}}
-  {{yield}}
-{{else}}
-  Hover over me
-{{/if}}
diff --git a/tests/dummy/app/templates/destroy-on-transition.hbs b/tests/dummy/app/templates/destroy-on-transition.hbs
deleted file mode 100644
index fa3b1d46..00000000
--- a/tests/dummy/app/templates/destroy-on-transition.hbs
+++ /dev/null
@@ -1,24 +0,0 @@
-<ul class="examples">
-
-  <li>
-    {{#test-component
-      tooltipContent='Should be removed on transition'
-      tooltipEvent='click'
-      data-test='show-on-click'
-    }}
-      Click me
-    {{/test-component}}
-  </li>
-
-  <li>
-    {{#test-component}}
-      {{#link-to 'application'
-        tooltipContent='Tooltip on link should be removed on transition'
-        data-test='link-with-tooltip'
-      }}
-        Hover me
-      {{/link-to}}
-    {{/test-component}}
-  </li>
-
-</ul>
diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs
index c6e274ad..1721b798 100644
--- a/tests/dummy/app/templates/index.hbs
+++ b/tests/dummy/app/templates/index.hbs
@@ -1,32 +1,72 @@
-{{#test-component}}
-  Sup
-  {{#tooltip-on-component side='left' event='click'}}
-    Hey sdg sdg
-  {{/tooltip-on-component}}
-{{/test-component}}
+<div class="hero">
+  <h1 class="visuallyhidden">Ember Tooltips</h1>
 
-<hr>
+  <div id="headline">
+    <img src="http://miguelcobain.github.io/ember-paper/ember-logo-white-955db9d87b940bf54a17bd1fa78d0713.png" id="ember-logo">
+    {{!-- <span class="hero-text">Tooltips</span> --}}
+  </div>
 
-{{#tooltip-on-element side='left' target='#test-1' event='focus' duration=1000}}
-  Hey sdg sdg
+  <div class="badges">
+    <a href="https://www.npmjs.com/package/ember-tooltips"><img src="https://camo.githubusercontent.com/20b25311bfe9f6a298f2a1c7dc4908101c8b8b30/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f656d6265722d746f6f6c746970732e737667" alt="npm" data-canonical-src="https://img.shields.io/npm/v/ember-tooltips.svg" style="max-width:100%;"></a>
+
+    <a href="https://travis-ci.org/sir-dunxalot/ember-tooltips"><img src="https://camo.githubusercontent.com/0928f8bea4cb764feceb44750753eec0dda770b0/68747470733a2f2f7472617669732d63692e6f72672f7369722d64756e78616c6f742f656d6265722d746f6f6c746970732e737667" alt="Build Status" data-canonical-src="https://travis-ci.org/sir-dunxalot/ember-tooltips.svg" style="max-width:100%;"></a>
+  </div>
+
+</div>
+
+{{#tooltip-on-element
+  class='logo-tooltip'
+  event='none'
+  target='#ember-logo'
+  tooltipIsVisible=showTooltips
+  side='right'
+  spacing=15
+}}
+  Tooltips
+{{/tooltip-on-element}}
+
+{{!-- {{#tooltip-on-element
+  delay=1000
+  event='none'
+  target='#headline'
+  tooltipIsVisible=showTooltips
+  side='right'
+}}
+  Built in HTML bars
 {{/tooltip-on-element}}
 
-{{input id='test-1'}}
+{{#tooltip-on-element
+  delay=2000
+  event='none'
+  target='#headline'
+  tooltipIsVisible=showTooltips
+  side='bottom'
+}}
+  Extendible
+{{/tooltip-on-element}}
 
-<hr>
+{{#tooltip-on-element
+  delay=3000
+  event='none'
+  target='#headline'
+  tooltipIsVisible=showTooltips
+  side='left'
+}}
+  Something else
+{{/tooltip-on-element}} --}}
 
-<div>
-  Yo
-  {{#tooltip-on-element}}
-    Hey man!
-  {{/tooltip-on-element}}
-</div>
+<div class="page-content">
+
+  {{!-- BEGIN-SNIPPET basic-usage --}}
+  {{#some-component}}
+    Hover for more info
+
+    {{#tooltip-on-component}}
+      Here is the info!
+    {{/tooltip-on-component}}
+  {{/some-component}}
+  {{!-- END-SNIPPET --}}
 
-<hr>
+  {{code-snippet name='basic-usage.hbs'}}
 
-<div>
-  Yo
-  {{#tooltip-on-element delay='1000'}}
-    Hey man!
-  {{/tooltip-on-element}}
 </div>
diff --git a/tests/dummy/app/templates/tooltip-as-component.hbs b/tests/dummy/app/templates/tooltip-as-component.hbs
deleted file mode 100644
index 93991cc1..00000000
--- a/tests/dummy/app/templates/tooltip-as-component.hbs
+++ /dev/null
@@ -1,32 +0,0 @@
-<ul class="examples">
-
-  <li>
-    {{#test-component data-test='in-component-and-block'}}
-      {{#tooltip-on-parent}}
-        Using a component in the template
-      {{/tooltip-on-parent}}
-      Hover over me
-    {{/test-component}}
-  </li>
-
-  <li>
-    {{#test-component data-test='in-component-and-block-htmlbars'}}
-      {{#tooltip-on-parent}}
-        {{#link-to 'index'}}Using HTMLBars{{/link-to}} in content
-      {{/tooltip-on-parent}}
-      Hover over me
-    {{/test-component}}
-  </li>
-
-  <li>
-    {{#test-component data-test='in-component-and-inline'}}
-      {{tooltip-on-parent
-        content='Using a component in the template'
-      }}
-      Hover over me
-    {{/test-component}}
-  </li>
-
-</ul>
-
-{{code-snippet name='tooltip-as-component.hbs'}}
diff --git a/tests/dummy/app/templates/tooltip-auto-close.hbs b/tests/dummy/app/templates/tooltip-auto-close.hbs
deleted file mode 100644
index 603a673d..00000000
--- a/tests/dummy/app/templates/tooltip-auto-close.hbs
+++ /dev/null
@@ -1,51 +0,0 @@
-<ul class="examples">
-
-  <li>
-    {{#test-component
-      tooltipContent='This shows on a click event, then hides'
-      tooltipEvent='click'
-      data-test='auto-close-basic'
-      tooltipDuration=2000
-    }}
-      Click me
-    {{/test-component}}
-  </li>
-
-  <li>
-    {{#test-component data-test='auto-close-component'}}
-      {{#tooltip-on-parent duration='1000' event='mouseenter'}}
-        Using a component with duration set
-      {{/tooltip-on-parent}}
-      Hover over me
-    {{/test-component}}
-  </li>
-
-  <li>
-    {{#test-calling-component}}
-      <div
-        class="has-tooltip inline-block"
-        data-test="auto-close-data"
-        data-tooltip-content="This is set on a data attribute"
-        data-tooltip-event="click"
-        data-tooltip-duration="1000"
-      >
-        Click me
-      </div>
-    {{/test-calling-component}}
-  </li>
-
-  <li>
-    {{input
-      type='text'
-      data-test='auto-close-input'
-      tooltipEvent='focus'
-      tooltipContent='Auto-closing tooltip on {{input}}'
-      tooltipDuration='1000'
-      placeholder='Focus field'
-    }}
-  </li>
-
-</ul>
-
-{{code-snippet name='tooltip-auto-close-1.hbs'}}
-{{code-snippet name='tooltip-auto-close-2.hbs'}}
diff --git a/tests/dummy/app/templates/tooltip-manual-trigger.hbs b/tests/dummy/app/templates/tooltip-manual-trigger.hbs
deleted file mode 100644
index be103eba..00000000
--- a/tests/dummy/app/templates/tooltip-manual-trigger.hbs
+++ /dev/null
@@ -1,37 +0,0 @@
-<p>Please note: you must set <code>tooltipEvent='manual'</code> on the component to set visbility manually.</p>
-
-<ul class="examples">
-
-  <li>
-    {{#test-component
-      tooltipContent='This is a manually triggered tooltip'
-      tooltipEvent='manual'
-      tooltipVisibility=showTooltip
-      data-test='manually-trigger'
-    }}
-      Manual tooltip
-    {{/test-component}}
-
-    {{input type="checkbox" checked=showTooltip}} Show
-  </li>
-
-  <li>
-    {{#test-component data-test='manually-trigger-component'}}
-      {{#tooltip-on-parent
-        event='manual'
-        visibility=showComponentTooltip
-      }}
-        Manually triggering a component tooltip
-      {{/tooltip-on-parent}}
-      Manual tooltip as component
-    {{/test-component}}
-
-    {{showComponentTooltip}}
-
-    {{input type="checkbox" checked=showComponentTooltip}} Show
-  </li>
-
-</ul>
-
-{{code-snippet name='tooltip-manual-trigger-1.hbs'}}
-{{code-snippet name='tooltip-manual-trigger-2.hbs'}}
diff --git a/tests/dummy/app/templates/tooltip-on-element.hbs b/tests/dummy/app/templates/tooltip-on-element.hbs
deleted file mode 100644
index b4ecd77e..00000000
--- a/tests/dummy/app/templates/tooltip-on-element.hbs
+++ /dev/null
@@ -1,19 +0,0 @@
-<p>Please note: you must call <code>this.renderChildTooltips()</code> on the parent view or component to render the tooltip.</p>
-
-<ul class="examples">
-
-  <li>
-    {{#test-calling-component}}
-      <div
-        class="has-tooltip inline-block"
-        data-test="on-element"
-        data-tooltip-content="This is set on a data attribute"
-      >
-        Hover over me
-      </div>
-    {{/test-calling-component}}
-  </li>
-
-</ul>
-
-{{code-snippet name='tooltip-on-element.hbs'}}
diff --git a/tests/dummy/app/templates/tooltip-on-helper.hbs b/tests/dummy/app/templates/tooltip-on-helper.hbs
deleted file mode 100644
index 78299126..00000000
--- a/tests/dummy/app/templates/tooltip-on-helper.hbs
+++ /dev/null
@@ -1,51 +0,0 @@
-<ul class="examples">
-
-  <li>
-    {{test-component
-      tooltipContent='This is a tooltip on an inline component'
-      data-test='on-inline-component'
-    }}
-  </li>
-
-  <li>
-    {{#test-component
-      tooltipContent='Debugging'
-      action='debugging'
-    }}
-      Should disappear on route transition
-    {{/test-component}}
-  </li>
-
-  <li>
-    {{#test-component
-      tooltipContent='This shows on a click event'
-      tooltipEvent='click'
-      data-test='showing-on-click'
-    }}
-      Click me
-    {{/test-component}}
-  </li>
-
-  <li>
-    {{#test-component
-      tooltipContent='This is a tooltip on a block component'
-      data-test='on-block-component'
-    }}
-      Custom 'tooltip-error' class
-    {{/test-component}}
-  </li>
-
-  <li>
-    {{#link-to 'index'
-      tooltipContent='This is a tooltip on a link-to helper'
-      class='inline-block'
-      data-test='on-link-to'
-    }}
-      On link to
-    {{/link-to}}
-  </li>
-
-</ul>
-
-{{code-snippet name='tooltip-on-helper-1.hbs'}}
-{{code-snippet name='tooltip-on-helper-2.hbs'}}
diff --git a/tests/dummy/app/templates/tooltip-with-safestring.hbs b/tests/dummy/app/templates/tooltip-with-safestring.hbs
deleted file mode 100644
index 0558df07..00000000
--- a/tests/dummy/app/templates/tooltip-with-safestring.hbs
+++ /dev/null
@@ -1 +0,0 @@
-{{test-component tooltipContent=safeString data-test='on-inline-component'}}