Presentation Components within a Presentationless Component

components.api-component.js

import Component from '@ember/component';
import { computed, get } from '@ember/object';
import { htmlSafe } from '@ember/string';

export default Component.extend({
  centerName: 'Orange Theory',
  centerProfile: 'https://fakeimg.pl/120x120/',
  centerAddress: '32435 Temecula Pkwy',
  centerCity: 'Temecula',
  centerState: 'CA',
  centerZip: '92592',
  monthlyRate: '89.00',
  
  formattedCenterAddress: computed('centerAddress1', 'centerAddress2', function () {
    const centerAddress = get(this, 'centerAddress');
  	const centerCity = get(this, 'centerCity');
  	const centerState = get(this, 'centerState');
  	const centerZip = get(this, 'centerZip');
    
    return htmlSafe(`<span>${centerAddress}</span>
			<span>${centerCity}, ${centerState} ${centerZip}</span>`
    );
  })
});

components.provider-details.card-center-details.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'section',
  classNames: ['centerDetailCard']
});

components.provider-details.text-center-and-rate.js

import Component from '@ember/component';
import { computed, get } from '@ember/object';

export default Component.extend({
  tagName: 'span',
  classNames: ['providerCenterAndRate']								
});

components.provider-details.text-monthly-rate.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'span',
  classNames: ['providerMonthlyRate']
});

controllers.application.js

import Ember from 'ember';

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

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

h1 {
  color: purple;
}

.centerDetailCard {
  padding: 1rem;
  border: 1px solid #cccccc;
  display: flex;
}
.centerDetailCard div {
  margin-left: 1rem;
}
.centerDetailCard p:first-of-type {
  margin-top: 0;
}
.cardAddress span {
  display: block;
}

templates.application.hbs

{{#api-component as |api|}}

	<h1>{{api.centerAndRate}}</h1>
  
  <p>Your initial payment includes your {{api.monthlyRate}} monthly fee for the current month*, and {{api.monthlyRate}} monthly fee for the next month. Once enrolled, you can immediately access your selected fitness center. You can also change your fitness center which will take effect the following month.</p>
  
  <p>*Fees for the current month are {{api.monthlyRate}}, regardless of the date you sign up within that month.</p>
  
  {{api.centerDetailsCard}}

{{/api-component}}

templates.components.api-component.hbs

{{yield 
  (hash 
    centerDetailsCard=(component 'provider-details/card-center-details'
    	centerName=centerName
      centerImage=centerProfile
      centerAddress=formattedCenterAddress
      monthlyRate=monthlyRate
    )
    centerAndRate=(component 'provider-details/text-center-and-rate'
    	centerName=centerName
      monthlyRate=monthlyRate
    )
    monthlyRate=(component 'provider-details/text-monthly-rate'
    	monthlyRate=monthlyRate
    )
  )
}}

templates.components.provider-details.card-center-details.hbs

<img src={{centerImage}}>
<div>
  <p><strong>{{centerName}}</strong></p>
  <p class='cardAddress'>{{centerAddress}}</p>
  <p>${{monthlyRate}}/month</p>
</div>

templates.components.provider-details.text-center-and-rate.hbs

{{centerName}} — ${{monthlyRate}}/month

templates.components.provider-details.text-monthly-rate.hbs

${{monthlyRate}}

twiddle.json

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