selection-wizard component

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  selections: [],

  actions: {
	  'log-transition'(name, value) {
      this.get('selections').pushObject(value);
    }
  }
});

selection-step.component.js

import Ember from 'ember';

const { Component, computed, get, set } = Ember;

export default Component.extend({
  /**
   * Step should only be visible when the `currentStep` matches the assigned index
   * for this step
   *
   * @property {boolean} isVisible
   * @public
   */
  isVisible: computed('currentStep', 'name', function() {
    return get(this, 'currentStep') === get(this, 'name');
  }),

  didInsertElement() {
    const name = get(this, 'name');
    this.attrs['register-step'](name);
  },

  actions: {
    'choose-option'() {
      this.attrs['selection-action'](...arguments);
    }
  }
});

selection-step.template.hbs

{{yield}}

selection-wizard.component.js

import Ember from 'ember';

const { A, Component, computed, isEmpty, get, set } = Ember;

export default Component.extend({
  
  /**
   * @property {string} the step to start on
   * @public
   */
  initialStep: null,

  /**
   * @property {string} currentStep the current active step
   * @private
   */
  currentStep: computed.oneWay('initialStep'),

  actions: {
    /**
     * Register a step with the wizard
     *
     * Called by a step component to get it's index number assignment
     *
     * @method registerStep
     * @param {string} name the name of the step being registered
     * @returns number
     * @private
     */
    'register-step-component'(name) {
      const currentStep = get(this, 'currentStep');
      if (isEmpty(currentStep)) {
	      set(this, 'currentStep', name);
      }
    },

    'transition-to'(name, option) {
      if (isEmpty(name)) {
	      throw new Error('You must provide a step to transition to');
      }
      set(this, 'currentStep', name);
      if (this.attrs['on-transition']) {
        this.attrs['on-transition'](...arguments);
      }
    }
  }
});

selection-wizard.template.hbs

{{yield (hash
  step=(component 'selection-step'
    currentStep=currentStep
    register-step=(action 'register-step-component'))
	transition-to=(action 'transition-to')
)}}

templates.application.hbs

<ul>
  {{#each selections as |item|}}
    <li>{{item}}</li>
  {{/each}}
</ul>

{{#selection-wizard initialStep='b' on-transition=(action 'log-transition') as |wizard|}}
	{{#wizard.step name='a'}}
	  <h1>Step A</h1>
    
    <button {{action wizard.transition-to 'c' 'Back'}}>Transition to C</button>
    <button {{action wizard.transition-to 'b' 'Forward'}}>Transition to B</button>
	{{/wizard.step}}
  
  {{#wizard.step name='b'}}
    <h1>Step B</h1>
    
    <button {{action wizard.transition-to 'a' 'Back'}}>
      Transition to A
    </button>
    <button {{action wizard.transition-to 'c' 'Forward'}}>
      Transition to C
    </button>
  {{/wizard.step}}

  {{#wizard.step name='c'}}
    <h1>Step C</h1>
    
    <button {{action wizard.transition-to 'b' 'Back'}}>
      Transition to B
    </button>
    <button {{action wizard.transition-to 'a' 'Forward'}}>
      Transition to A
    </button>
  {{/wizard.step}}
{{/selection-wizard}}

twiddle.json

{
  "version": "0.10.5",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.8.0",
    "ember-data": "2.8.0",
    "ember-template-compiler": "2.8.0",
    "ember-testing": "2.8.0"
  },
  "addons": {}
}