New Twiddle

components.form-input.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.payment-layout.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['payment-layout'],
  // tagName: ''
});

components.pm-form.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'form',
  classNames: 'pm-form'
});

components.pm-selector-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'li',
  className: 'pm-selector-item'
});

components.pm-selector.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['pm-selector'],
  tagName: 'dl'
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  items: [{
    id: 1,
    title: 'item 1',
    description: 'description 1'
  }, {
    id: 2,
    title: 'item 2',
    description: 'description 2'
  }, {
    id: 3,
    title: 'item 3',
    description: 'description 3'
  }]
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('payment-method');
});

export default Router;

routes.payment-method.js

import Ember from 'ember';

export default Ember.Route.extend({
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>


{{#payment-layout 
	model=this 
  inverse=1
  as |section cmp|
}}
    {{#if (eq "pm-selector" section)}}
      {{#component cmp as |section|}}

        {{#if (eq "header" section)}}
          {{#pm-selector-item}}
            {{#link-to "payment-method"}}Go to payment-method{{/link-to}}
          {{/pm-selector-item}}
        {{/if}}

      {{/component}}
    {{else}}
			{{outlet}}
    {{/if}}
{{/payment-layout}}

templates.components.form-input.hbs

{{yield}}

<input type="text" 
  placeholder="{{placeholder}}"
  type={{type}} 
  value={{mut value}}
  oninput={{action (mut value) value="target.value"}}
  />

templates.components.layouts.pm-form.hbs

{{#pm-form as |f|}}
	<fieldset>
    <legend>Step 1</legend>
    {{f.account-field}}
  </fieldset>
  
  <fieldset>
    <legend>Step 2</legend>
  	{{f.amount-field}}
  </fieldset>
{{/pm-form}}

templates.components.payment-layout.hbs

{{#if inverse}}
  <div class="layout-main-wrap">
    <div class="layout-main">
        {{yield}}
    </div>
  </div>
{{/if}}

{{#if hasBlock}}
  {{yield "pm-selector" (component 'pm-selector'
      tagName='ul'
      items=model.items
  )}}
{{else}}
  {{pm-selector
    tagName='ul'
    items=model.items    
  }}
{{/if}}

{{#unless inverse}}
  <div class="layout-main-wrap">
    <div class="layout-main">
        {{yield}}
    </div>
  </div>
{{/unless}}  

templates.components.pm-form.hbs

{{yield (hash
  account-field=(component "form-input"
    placeholder="please enter account"
    value=model.account
  )
  amount-field=(component "form-input" 
    value=model.amount
    placeholder="please enter amount"
  )
)}}

templates.components.pm-selector-item.hbs

{{#if hasBlock}}
  {{yield}}
{{else}}
  <h5>{{item.title}}</h5>
  <p>{{item.description}}</p>
{{/if}}

templates.components.pm-selector.hbs

{{yield "header"}}

{{#each items as |item|}}
  	{{pm-selector-item item=item}}
{{/each}}

{{yield "footer"}}

templates.payment-method.hbs

{{layouts.pm-form}}

twiddle.json

{
  "version": "0.10.6",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.9.0",
    "ember-data": "2.9.0",
    "ember-template-compiler": "2.9.0",
    "ember-testing": "2.9.0"
  },
  "addons": {
    "ember-truth-helpers": "latest"
  }
}