feat: dummy app and split into components, block form

Allows using the `{{x-toggle}}` in block form.

addon/components/x-toggle-label/component.js

@@ -0,0 +1,16 @@
+import Ember from 'ember';
+import layout from './template';
+
+const { computed } = Ember;
+
+export default Ember.Component.extend({
+  layout,
+  tagName: '',
+
+  type: computed('value', {
+    get() {
+      let value = this.get('value');
+      return value ? 'on' : 'off';
+    }
+  })
+});

addon/components/x-toggle-label/template.hbs

@@ -0,0 +1,6 @@
+{{#if show}}
+  <label id='{{type}}-label-{{switchId}}' for={{switchId}} class="toggle-text toggle-prefix {{type}}-label"
+    onclick={{action onClick value}}>
+    {{label}}
+  </label>
+{{/if}}

addon/components/x-toggle-switch/component.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+import layout from './template';
+
+export default Ember.Component.extend({
+  layout,
+  tagName: ''
+});

addon/components/x-toggle-switch/template.hbs

@@ -0,0 +1,19 @@
+<span class="x-toggle-container {{size}}{{if value ' x-toggle-container-checked'}}{{if disabled ' x-toggle-container-disabled'}}">
+  <input id="{{forId}}"
+    name={{name}}
+    type='checkbox'
+    checked={{toggled}}
+    changed={{action onChangeValue value='target.checked'}}
+    class='x-toggle'
+    disabled={{disabled}}>
+
+  <div id="x-toggle-visual-{{forId}}"
+    class="x-toggle-btn {{themeClass}} {{size}}{{if disabled ' x-toggle-disabled'}}"
+    onclick={{action onClick}}
+    data-tg-on={{onLabel}}
+    data-tg-off={{offLabel}}
+    for={{forId}}
+    aria-role="checkbox"
+    aria-owns={{forId}}>
+  </div>
+</span>

addon/components/x-toggle/template.hbs

@@ -1,31 +1,49 @@
-{{#if showLabels}}
-  <label id='off-label-{{elementId}}' for={{forId}} class="toggle-text toggle-prefix off-label"
-    onclick={{action 'setToValue' false}}>
-    {{offLabel}}
-  </label>
-{{/if}}
-
-<span class="x-toggle-container {{size}}{{if value ' x-toggle-container-checked'}}{{if disabled ' x-toggle-container-disabled'}}">
-  <input id="input-{{elementId}}"
-    name={{name}}
-    type='checkbox'
-    checked={{toggled}}
-    changed={{action 'setToValue' value='target.checked'}}
-    class='x-toggle'
-    disabled={{disabled}}>
+{{#if hasBlock}}
+  {{yield (hash
+    switch=(component 'x-toggle-switch' onClick=(action 'onClick')
+      onChangeValue=(action 'setToValue')
+      value=value
+      themeClass=themeClass
+      size=size
+      disabled=disabled
+      toggled=toggled
+      name=name
+      offLabel=offLabel
+      onLabel=onLabel
+      forId=forId)
+    offLabel=(component 'x-toggle-label' onClick=(action 'setToValue')
+      label=offLabel
+      value=false
+      show=showLabels
+      switchId=forId)
+    onLabel=(component 'x-toggle-label' onClick=(action 'setToValue')
+      label=onLabel
+      value=true
+      show=showLabels
+      switchId=forId)
+  )}}
+{{else}}
+  {{x-toggle-label onClick=(action 'setToValue')
+    label=offLabel
+    value=false
+    show=showLabels
+    switchId=forId}}
 
-  <div id="visual-{{elementId}}"
-    class="x-toggle-btn {{themeClass}} {{size}}{{if disabled ' x-toggle-disabled'}}"
-    onclick={{action 'onClick'}}
-    for="input-{{elementId}}"
-    aria-role="checkbox"
-    aria-owns="input-{{elementId}}">
-  </div>
-</span>
+  {{x-toggle-switch onClick=(action 'onClick')
+    onChangeValue=(action 'setToValue')
+    value=value
+    themeClass=themeClass
+    size=size
+    disabled=disabled
+    toggled=toggled
+    name=name
+    offLabel=offLabel
+    onLabel=onLabel
+    forId=forId}}
 
-{{#if showLabels}}
-  <label id='on-label-{{elementId}}' for="input-{{elementId}}" class="toggle-text toggle-postfix {{size}} on-label"
-    onclick={{action 'setToValue' true}}>
-    {{onLabel}}
-  </label>
+  {{x-toggle-label onClick=(action 'setToValue')
+    label=onLabel
+    value=true
+    show=showLabels
+    switchId=forId}}
 {{/if}}

app/components/x-toggle-label/component.js

@@ -0,0 +1 @@
+export { default } from 'ember-toggle/components/x-toggle-label/component';

app/components/x-toggle-switch/component.js

@@ -0,0 +1 @@
+export { default } from 'ember-toggle/components/x-toggle-switch/component';

tests/dummy/app/controllers/application.js

@@ -3,23 +3,24 @@ import Ember from 'ember';
 export default Ember.Controller.extend({
 	boundToggle: false,
 	bV2: 'ho',
-  v1: 'Off',
-
 
 	actions: {
 		checkboxToggled(toggled, toggledBy) {
 			this.setProperties({
-        toggled, toggledBy
+        toggled,
+        toggledBy
       });
 		},
+
     clicked(target, hash) {
-      if(hash.code === 'toggled') {
+      if (hash.code === 'toggled') {
         console.log('toggled: ', hash);
       } else {
         console.log('suggestion: ', hash);
       }
       this.set(target, hash.newValue);
     },
+
     rejected() {
       return false;
     }