Fix the HTML API for ESNote so that it is backwards compatible

[Chris Manson]

We want to fix the HTML API of the EsNote so that we don't need change 378 instances of it in both the guides and the cli-guides 🙈

What do we mean by "HTML API". Because our Guides use Markdown that doesn't actually execute Ember Components (yet 😏 ) we can't just use <EsNote /> directly in the contents of a guide. Instead we have been copying and pasting the HTML that the component would generate into the Markdown because HTML is valid in Markdown files.

The syntax of the old component looks like this:

<div class="cta">
  <div class="cta-note">
    <div class="cta-note-body">
      <div class="cta-note-heading">Zoey says...</div>
      <div class="cta-note-message">
        If you are having trouble getting this running, other Ember developers would be happy to help!
        Visit <a href="https://emberjs.com/community/"> The Ember Community Page</a> to join chat groups or forums.
      </div>
    </div>
    <img src="/images/mascots/zoey.png" role="presentation" alt="">
  </div>
</div>

Which is rendered like this:

The syntax of the new component looks like this:

<div class="cta-note">
  <div class="cta-note-content">
    <div class="cta-note-body p-2">
      <div class="text-lg mb-1 hide-in-percy" data-test-es-note-heading="">Zoey says...</div>
      <div class="cta-note-message">
        You should try out this cool note component
      </div>
    </div>
    <img src="/images/mascots/zoey.png" role="presentation" alt="" class="hide-in-percy cta-mascot m-2">
  </div>
</div>

Which renders like this:

We need to make the new styles compatible with the new syntax so that we don't need to update any of the "callouts" in any of the markdown files. The simplest way to do this would be to make the HTML of the new component 100% match the old HTML and make it still look the same 👍