Shared content components

components.api-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  steps: 5678,
});

components.example-card.card-body.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName:'p',
  classNames:['card-text']
});

components.example-card.card-title.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName:'h5',
  classNames:['card-title']
});

components.example-card.js

import Ember from 'ember';

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

components.hybrid-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  steps: 2345,
  bodyContent: 'This is default content from the producer. What would this be and in what case is it useful?',
  body: Ember.computed('bodyContent', function() {
    return 'This line is owned by the producer. ' + this.bodyContent
  }),
});

components.sovereign-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  steps: 2345,
});

controllers.application.js

import Ember from 'ember';

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

templates.application.hbs

<h1>Component patterns for shared widgets</h1>

<h2>API Component</h2>
<p>This pattern is about delivering a component that has <strong>no presentation at all</strong>. If you just put an API component on a page, you will not see any HTML result from it. It only yields out a hash with variable data.</p>
<p>The consumer uses the yielded data to produce their own presentation. It is still expected that the consumer will use some kind of presentation component so that we maintain a consistent UI that adheres to CRAFT guidelines. An example presentation wrapper would be <code>ash-widget-containers</code> or <code>ember-paper</code>.</p>
<p>API components are best used when the content will vary greatly from site-to-site, or the producer does not want to own any of the content.</p>

{{#api-component as |data|}}
	{{example-card
  	title="Consumer title"
    body="This is content using only values from the API component, everything else is owned by the consumer. All content changes go through the consumer. This markup should actually be a presentation component in practice, such as a card component from <code>ember-paper</code>."
    item1="Steps"
    value1=data.steps
  }}
<br>
	{{#example-card}}
    {{example-card/card-body
    	text="This version allows you to use block or not. {{#example-card/card-title}}...{{/example-card/card-title}} shows how you can use pre-defined components in the widget and still pass in your own strings/content. {{example-card/card-body text='foo'}} shows how the pre-defined widget can still be use but doesn't allow you to pass html. Using this form also allows you to change the order of components (e.g., switch title and body) or inject other HTML in the middle"
    }}
    <span>I'm a random span</span>
  	{{#example-card/card-title}}Consumer Title. Steps: {{data.steps}}{{/example-card/card-title}}
	{{/example-card}}
  
{{/api-component}}

<hr/>

<h2>Sovereign Component</h2>

<p>A sovereign component owns all of its own content. The consumer can still configure the display but they do this by setting features, not by directly passing content strings. The producer is responsible for the content in all cases.</p>
<p>This is a good pattern when the component content is not expected to change much between sites.</p>

{{sovereign-component showSteps=true}}

{{sovereign-component showSteps=false}}
<hr/>

<h2>Hybrid Component</h2>
<p><strong>The team ruled out this approach.</strong></p>
<p>This pattern is like a sovereign component but consumers can pass in blocks of content to override the blocks owned by the component.</p>

{{hybrid-component bodyContent="This content is passed verbatim from the consumer. It could be anything."}}

{{hybrid-component}}

templates.components.api-component.hbs

{{yield (hash 
	steps=this.steps
  activity=this.activity
)}}

templates.components.example-card.card-body.hbs

{{{text}}}

templates.components.example-card.card-title.hbs

{{yield}}

templates.components.example-card.hbs

{{#if hasBlock}}
<div class="card" style="width: 24rem">
  	<div class="card-body">
			{{yield}}
  	</div>
  </div>
{{else}}
<div class="card" style="width: 24rem">
  	<div class="card-body">
  		{{#example-card/card-title}}
      	{{title}}
      {{/example-card/card-title}}
  		{{example-card/card-body text=body}}
  		<dl>
  			<dt>{{item1}}</dt>
    		<dd>{{value1}}</dd>
  		</dl>
  	</div>
  </div>
{{/if}}

templates.components.hybrid-component.hbs

	{{example-card
  	title="Producer title"
    body=body
    item1="Steps"
    value1=steps
  }}

templates.components.sovereign-component.hbs

{{#if showSteps}}
	{{example-card
  	title="Producer title"
    body="This is producer content using its own values. All content changes go through the producer. This markup also should be generated by a presentation component."
    item1="Steps"
    value1=steps
  }}
{{else}}
	{{example-card
  	title="Producer title"
    body="This is producer content using its own values. All content changes go through the producer. This markup also should be generated by a presentation component. The consumer requested steps not be shown using a feature flag."
    item1=""
    value1=""
  }}
{{/if}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "bootstrap": "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2" 
  }
}