diff --git a/tests/dummy/app/pods/basics/template.hbs b/tests/dummy/app/pods/basics/template.md
similarity index 81%
rename from tests/dummy/app/pods/basics/template.hbs
rename to tests/dummy/app/pods/basics/template.md
index 82d9eec..21767d4 100644
--- a/tests/dummy/app/pods/basics/template.hbs
+++ b/tests/dummy/app/pods/basics/template.md
@@ -14,9 +14,7 @@
about the peculiarities of positioning elements with CSS - It Just Works.
-{{#scroll-spier id="parameters" on-pass="addPassedAnchor" on-unpass="removePassedAnchor"}}
- Parameters
-{{/scroll-spier}}
+## Parameters
Every Liquid Tether requires the following attributes:
@@ -66,9 +64,7 @@
@@ -131,28 +127,24 @@
to apply (if any) to the background overlay.
-{{#scroll-spier id="dom-structure-and-styles" on-pass="addPassedAnchor" on-unpass="removePassedAnchor"}}
- DOM Structure and Styles
-{{/scroll-spier}}
+## DOM Structure and Styles
Liquid Tether creates the following DOM structure:
You can use the overlayClass and tetherClass
properties to apply a class directly to either the overlay or the tethered
- element. You can also apply a class directly to the liquid-target that
+ element. You can also apply a class directly to the liquid-destination that
contains your tethered element using the targetClass property.
-{{#scroll-spier id="ember-compatibility" on-pass="addPassedAnchor" on-unpass="removePassedAnchor"}}
- Ember Compatibility
-{{/scroll-spier}}
+## Ember Compatibility
Liquid Tether is tested on all versions of Ember >= 1.13. Long term support will
diff --git a/tests/dummy/app/pods/components/hello-component/component.js b/tests/dummy/app/pods/components/hello-component/component.js
new file mode 100644
index 0000000..240e533
--- /dev/null
+++ b/tests/dummy/app/pods/components/hello-component/component.js
@@ -0,0 +1,6 @@
+import Ember from 'ember';
+import layout from './template';
+
+export default Ember.Component.extend({
+ layout: layout
+});
diff --git a/tests/dummy/app/pods/components/hello-component/template.hbs b/tests/dummy/app/pods/components/hello-component/template.hbs
new file mode 100644
index 0000000..a4ab9d2
--- /dev/null
+++ b/tests/dummy/app/pods/components/hello-component/template.hbs
@@ -0,0 +1,6 @@
+
diff --git a/tests/dummy/app/pods/docs/components/controller.js b/tests/dummy/app/pods/docs/components/controller.js
new file mode 100644
index 0000000..81344ee
--- /dev/null
+++ b/tests/dummy/app/pods/docs/components/controller.js
@@ -0,0 +1,9 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+ actions: {
+ toggleHello() {
+ this.toggleProperty('showHello');
+ }
+ }
+});
diff --git a/tests/dummy/app/pods/docs/components/template.md b/tests/dummy/app/pods/docs/components/template.md
new file mode 100644
index 0000000..f93bdfa
--- /dev/null
+++ b/tests/dummy/app/pods/docs/components/template.md
@@ -0,0 +1,33 @@
+If you'd rather send a component than use a block template, you can set the
+`send` property to either a component name or helper:
+
+
+
+{{#liquid-tether
+ target=currentStep.target
+ attachment="top center"
+ offset="60 0"
+ class="tour"
+}}
+
+ ...
+
+
+ Back!
+
+
+ Next!
+
+{{/liquid-tether}}
+```
diff --git a/tests/dummy/app/pods/examples/controller.js b/tests/dummy/app/pods/docs/index/controller.js
similarity index 100%
rename from tests/dummy/app/pods/examples/controller.js
rename to tests/dummy/app/pods/docs/index/controller.js
diff --git a/tests/dummy/app/pods/docs/index/template.md b/tests/dummy/app/pods/docs/index/template.md
new file mode 100644
index 0000000..0cd0094
--- /dev/null
+++ b/tests/dummy/app/pods/docs/index/template.md
@@ -0,0 +1,57 @@
+Liquid Tether v2 allows you to animate your components using the standard
+Liquid Fire DSL. Just add a `liquid-tether` component to your app, give it a
+class, and add animations in your `transitions.js` file.
+
+By default, `liquid-tether` components will render near the root of the
+document, in a container that is positioned absolutely and that has the width
+and height of the window. This container is meant to be used for UI components
+such as popups, modals, tooltips - things that do not work in the normal
+document flow. When choosing and building your animations, it's helpful to
+think as though you are animating the entire window frame at once.
+
+If you want to warp elements somewhere else, consider
+{{#link-to "docs.destinations"}}creating a custom liquid-destination{{/link-to}}
+
+
+
+```hbs
+
+
+{{#if showHello}}
+ {{#liquid-tether
+ target="#hello-world-button"
+ attachment="middle left"
+
+ class="hello-world"
+ }}
+ ...
+ {{/liquid-tether}}
+{{/if}}
+```
+
+```js
+this.transition(
+ this.hasClass('hello-world'),
+ this.use('fade')
+);
+```
diff --git a/tests/dummy/app/pods/docs/parameters/template.md b/tests/dummy/app/pods/docs/parameters/template.md
new file mode 100644
index 0000000..c614851
--- /dev/null
+++ b/tests/dummy/app/pods/docs/parameters/template.md
@@ -0,0 +1,142 @@
+Below is a listing of all of the parameters that the liquid-tether components
+will accept as attributes.
+
+## `liquid-tether` Parameters
+
+
+
+
+
key
+
type
+
value
+
+
+
+
+
`target`
+
String
+
+ \*\*Required\*\*
+ The selector of the element that the tether will be positioned relative to.
+
+
+
+
`attachment`
+
String
+
+ \*\*Required\*\*
+ The attachment point on the tethered element
+
+
+
+
`targetAttachment`
+
String
+
+ The attachment point on the targeted element
+
+
+
+
`offset`
+
String
+
+ Offset relative to the attachment point on the tethered element.
+
+
+
+
`targetOffset`
+
String
+
+ Offset relative to the attachment point on the targeted element.
+
+
+
+
`targetModifier`
+
String
+
+ Modifies the attachment to the targeted element. See the
+ [Tether.js](http://tether.io/) documentation for more details.
+
+
+
+
`constraints`
+
Array
+
+ An array of constraints that control how the element responds to its
+ surroundings. See the [Tether.js](http://tether.io/) documentation for
+ more details.
+
+
+
+
`optimizations`
+
String
+
+ Enables or disables Tether.js optimizations. See the [Tether.js](http://tether.io/) documentation for
+ more details.
+
+
+
+
`classPrefix`
+
String
+
+ The prefix placed at the beginning of the default classes, defaults to 'tether'.
+
+
+
+
`stack`
+
String
+
+ The name of the stack that the tether will be a part of. Defaults to a
+ unique ID.
+
+
+
+
`value`
+
Any
+
+ The value that will be passed on to the Liquid Fire transition matchers. Defaults to `true`.
+
+
+
+
`send`
+
Component Name or Helper
+
+ A component that will be rendered and tethered.
+
+
+
+
`click`
+
Action Name or Helper
+
+ An action that will trigger when the tether is clicked.
+
+
+
+
`to`
+
String
+
+ The name of the `liquid-destination` that the component will be appended to.
+ Defaults to 'default'.
+
+
+
+
+
+## `liquid-destination` Parameters
+
+
+
+
key
+
type
+
value
+
+
+
+
+
`name`
+
String
+
+ The name of the destination. Defaults to 'default'.
+
{{/liquid-tether}}
diff --git a/tests/dummy/app/pods/examples/routed-tethers/step-one/template.hbs b/tests/dummy/app/pods/docs/routed-tethers/step-two/template.hbs
similarity index 61%
rename from tests/dummy/app/pods/examples/routed-tethers/step-one/template.hbs
rename to tests/dummy/app/pods/docs/routed-tethers/step-two/template.hbs
index 7a16713..71db53f 100644
--- a/tests/dummy/app/pods/examples/routed-tethers/step-one/template.hbs
+++ b/tests/dummy/app/pods/docs/routed-tethers/step-two/template.hbs
@@ -1,6 +1,7 @@
+{{liquid-wormhole stack="modal-backdrop" class="modal-backdrop"}}
{{#liquid-tether
- stack="modal"
- index=1
+ stack="modal-dialog"
+ value=2
target="document.body"
targetModifier="visible"
@@ -20,8 +21,8 @@
{{/liquid-tether}}
diff --git a/tests/dummy/app/pods/docs/routed-tethers/template.md b/tests/dummy/app/pods/docs/routed-tethers/template.md
new file mode 100644
index 0000000..01c9e2d
--- /dev/null
+++ b/tests/dummy/app/pods/docs/routed-tethers/template.md
@@ -0,0 +1,71 @@
+Oftentimes modals should appear in the context of a route. If that's the case
+in your application, it's as simple as creating a route and template with just
+a `liquid-tether`.
+
+
+ This modal came in from the right instead of fading. The next modal
+ will also slide in from the right, while the previous modal will slide
+ in from the left, maintaing spacial context.
+
diff --git a/tests/dummy/app/pods/examples/routed-tethers/template.md b/tests/dummy/app/pods/examples/routed-tethers/template.md
deleted file mode 100644
index e69de29..0000000
diff --git a/tests/dummy/app/pods/examples/stacks/template.md b/tests/dummy/app/pods/examples/stacks/template.md
deleted file mode 100644
index e69de29..0000000
diff --git a/tests/dummy/app/pods/examples/template.md b/tests/dummy/app/pods/examples/template.md
deleted file mode 100644
index fda4386..0000000
--- a/tests/dummy/app/pods/examples/template.md
+++ /dev/null
@@ -1,364 +0,0 @@
-# Examples
-
-## Hello World
-
-Below is the basic Hello World example seen on the front page. The template
-code is embedded directly in the context of this page, hidden by an
-if statement. Toggling that if inserts the element
-into the DOM, which triggers the animation.
-
-
-
-## Animation With Context
-
-This example shows different animations based on context. It uses the index
-constraint shorthands to differentiate between transitioning to the first
-modal, in between modals, and from the last modal. This way we can animate
-without losing spacial context from the perspective of the user (e.g. if a
-modal moves out toward the left side using to-left, the in
-reverse the modal with move in from the left side using to-right)
-
-
- This modal came in from the right instead of fading. The next modal
- will also slide in from the right, while the previous modal will slide
- in from the left, maintaing spacial context.
-
- This is the last modal! It'll fade out when you finish the dialog.
-
-
- {{/liquid-tether}}
- {{/if}}
-
-
-
-
-
-## Moving Modals
-
-All of the standard Liquid Fire animations work with Liquid Tether out of the
-box, meaning the `fly-to` animation can be used to animate tethers
-around the page!
-
-
-
-
diff --git a/tests/dummy/app/pods/index/template.md b/tests/dummy/app/pods/index/template.md
index e60a323..7bbefe6 100644
--- a/tests/dummy/app/pods/index/template.md
+++ b/tests/dummy/app/pods/index/template.md
@@ -1,40 +1,45 @@
-# Modals made easy
-
- ```
-
-
- {{#if showHello}}
- {{#liquid-tether
- target="#hello-world-button"
- attachment="middle left"
- class="hello-world"
- }}
- ...
- {{/liquid-tether}}
- {{/if}}
- ```
-
-