nb-journey

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

postcode.route.js

import Ember from 'ember';

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

postcode.template.hbs

{{#questions-header
	title="What is your postcode?"
  back="welcome"
}}

   	<p class="p-feature">
    	This allows us to provide you with available installation dates in your area.
    </p>

{{/questions-header}}

  <ns-panel>
  	<div class="splash">
    	<h2 class="h4">Please note:</h2>
      <p class="p-normal">
      	You will need a tape to measure the spae around your current boiler.
      </p>
      <p class="p-normal">
				You may need to step outside to locate your flue pipe.
			</p>
      <p class="p-normal">
      	If you're looking for something other than combination boiler, you should <a href="#">book an appointment</a> to speak to one of our heating experts.
      </p>
    </div>
  </ns-panel>


{{questions-continue
	cta="Continue"
}}

questions-continue.component.js

import Ember from 'ember';

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

questions-continue.template.hbs

<ns-panel>
  	<div class="splash">
    	{{#link-to route}}
    		<ns-cta>{{cta}}</ns-cta>
      {{/link-to}}
    </div>
</ns-panel>

{{yield}}

<ns-panel>
  	<div class="splash">
    	<ns-accordion>
      	<h2>Need help?</h2>
        <ns-expander>
        	<h3 slot="heading">Want to talk to someone?</h3>
          <p class="p-feature">
          	We are here to help you every step of the way, just call 0800028282828
          </p>
        </ns-expander>
      </ns-accordion>
    </div>
	</ns-panel>

questions-header.component.js

import Ember from 'ember';

export default Ember.Component.extend({
	tagName: 'ns-panel',
  attributeBindings: ['decoration'],
  decoration: 'invert-ramp-grey-light'
 });

questions-header.template.hbs

	{{#if back}}
  <div class="splash">
  	{{#link-to back}}
      <ns-cta type="text" icon="arrow-left">Go back</ns-cta>
    {{/link-to}}
   </div>
   {{/if}}

	<div class="splash">
  	<h1 class="h2">
     {{title}}
    </h1>
		{{yield}}
  </div>

router.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

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

Router.map(function() {
  this.route('welcome', {path: '/'});
  this.route('postcode');
});

export default Router;

templates.application.hbs

<main class="ndsn">
  {{outlet}}
</main>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
  	"nucleus": "https://www.britishgas.co.uk/nucleus/nucleus.min.js",
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}

welcome.route.js

import Ember from 'ember';

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

welcome.template.hbs

{{#questions-header
	title="Getting to know you 👋🏼"
}}

   	<p class="p-feature">
    	In order to make sure that we find the right boiler for you, we need to as you a few questions:
    </p>
    <div class="p-feature">
    	<ul class="ul-ticked">
      	<li>Your home</li>
      	<li>Your current combi boiler</li>
      	<li>Your flue (your boiler's exhaust pipe)</li>
    	</ul>
  	</div>

{{/questions-header}}

  <ns-panel>
  	<div class="splash">
    	<h2 class="h4">Please note:</h2>
      <p class="p-normal">
      	You will need a tape to measure the spae around your current boiler.
      </p>
      <p class="p-normal">
				You may need to step outside to locate your flue pipe.
			</p>
      <p class="p-normal">
      	If you're looking for something other than combination boiler, you should <a href="#">book an appointment</a> to speak to one of our heating experts.
      </p>
    </div>
  </ns-panel>


{{questions-continue
	cta="Get started"
  route="postcode"
}}