Add more details to the section Contextual Components section

[mansona]

The current Contextual Components section in the guides is a little bit lacking and doesn't explain how contextual components are being used in the wider Ember community.

We have discussed this in the Learning team meeting and we have some suggestions on ways forward:

• add a description under the contextual components header linking to the component help api docs that has some content about nested usage
• the current Contextual Components section is a h2 so we could add 2 sub headers, one being the single-yield example that we currently have and adding a section header talking about a multi-yield example (using hash to return multiple components that can be used)

Here is a potential example that was provided by @nickschot that we could potentially use:

---

// parent-component.hbs
<main ...attributes>
    {{yield
    CustomizedChildComponent=(component 'child-component' title="My Title")
  }}
</main>

// child-component.hbs
<section ...attributes>
  <h1>{{@title}}</h1>
  <p>{{@body}}</p>
</section>

When using it as follows:

// application.hbs
<ParentComponent as |CustomizedChildComponent|>
  <CustomizedChildComponent @body="My Body Text"/>
</ParentComponent>

// rendered output, even though we did not pass @title explicitly
<main>
  <section ...attributes>
    <h1>My Title</h1>
    <p>My Body Text</p>
  </section>
</main>

When passing/overriding @title:

// application.hbs
<ParentComponent as |CustomizedChildComponent|>
  <CustomizedChildComponent @title="Custom Title" @body="My Body Text"/>
</ParentComponent>

// rendered output, even though we did not pass @title explicitly
<main>
  <section ...attributes>
    <h1>Custom Title</h1>
    <p>My Body Text</p>
  </section>
</main>