New Twiddle

components.x-step.js

import Ember from 'ember';
import { ChildMixin } from 'ember-composability-tools';

export default Ember.Component.extend(ChildMixin, {
  isComplete: false,
  actions: {
    complete() {
      this.set('isComplete', true);
      this.get('onStepCompleted')(this);
    }
  }
});

components.x-wizard.js

import Ember from 'ember';
import { ParentMixin } from 'ember-composability-tools';

const { Component, computed } = Ember;

export default Component.extend(ParentMixin, {
  stepComponent: 'x-step',

  isComplete: computed('childComponents.@each.isComplete', function() {
    let childComponents = this.get('childComponents');

    if (childComponents && childComponents.get('length')) {
      return childComponents.isEvery('isComplete', true);
    } else {
      return false;
    }
  }),

  actions: {
    reset() {
      this.get('childComponents').invoke('set', 'isComplete', false);
    },

    onStepCompleted() {
      if (this.get('isComplete')) {
        this.sendAction('onComplete');
      }
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  actions: {
    wizardAComplete() {
      alert('wizardAComplete');
    },
    wizardBComplete() {
      alert('wizardBComplete');
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
{{#x-wizard onComplete=(action 'wizardAComplete') as |w|}}
  {{#w.step as |step|}}
    Step 1
    {{#unless step.isComplete}}
      <button {{action step.complete}}>Complete step</button>
    {{/unless}}
  {{/w.step}}
  {{#w.step as |step|}}
    Step 2
    {{#unless step.isComplete}}
      <button {{action step.complete}}>Complete step</button>
    {{/unless}}
  {{/w.step}}
  <div>
    Wizard is complete: {{w.isComplete}}
    <button {{action w.reset}}>Reset</button>
  </div>
{{/x-wizard}}
<br>
<br>
Wizard which steps contains another wizard:

{{#x-wizard onComplete=(action 'wizardBComplete') as |w|}}
  {{#w.step as |step|}}
    Step 1 (isComplete: {{step.isComplete}})
  	{{#x-wizard onComplete=(action step.complete) as |w|}}
      {{#w.step as |s|}}
         SubWizard-Step a
         {{#unless s.isComplete}}
           <button {{action s.complete}}>Complete SubStep</button>
         {{/unless}}
      {{/w.step}}
      {{#w.step as |s|}}
         SubWizard-Step b
         {{#unless s.isComplete}}
           <button {{action s.complete}}>Complete SubStep</button>
         {{/unless}}
      {{/w.step}}
      Subwizard is complete: {{w.isComplete}}
    {{/x-wizard}}
  {{/w.step}}
  {{#w.step as |step|}}
    Step 2
    {{#unless step.isComplete}}
      <button {{action step.complete}}>Complete step</button>
    {{/unless}}
  {{/w.step}}
  <div>
    Wizard is complete: {{w.isComplete}}
  </div>
{{/x-wizard}}

templates.components.x-step.hbs

{{yield (hash
  isComplete=isComplete
  complete=(action 'complete') 
)}}

templates.components.x-wizard.hbs

{{yield (hash
  isComplete=isComplete
  step=(component stepComponent onStepCompleted=(action 'onStepCompleted'))
  reset=(action 'reset')
)}}

twiddle.json

{
  "version": "0.11.1",
  "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.11.0",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.11.0",
    "ember-testing": "2.11.0"
  },
  "addons": {
    "ember-composability-tools": "0.0.8"
  }
}