update es-note

addon/components/es-note.js

@@ -1,40 +1,26 @@
-import Component from '@ember/component';
-import { get } from '@ember/object';
-import layout from '../templates/components/es-note';
-import {
-  DefaultMessage as defaultMessage,
-  Mascots as mascots,
- } from '../constants/mascots';
+import Component from '@glimmer/component';
 
-export default Component.extend({
-  layout,
+const Mascots = {
+  tomster: { image: '/images/mascots/tomster.png', name: 'Tomster' },
+  zoey: { image: '/images/mascots/zoey.png', name: 'Zoey' },
+}
 
-  classNames: ['cta'],
+function randomMascot() {
+  let mascotKeys = Object.keys(Mascots);
 
-  imageUrl: null,
-  mascots,
-  nameTitle: null,
-  defaultMessage,
+  let randomIndex = Math.floor(Math.random() * Math.floor(mascotKeys.length));
 
-  init() {
-    this._super(...arguments);
+  return Mascots[mascotKeys[randomIndex]];
+}
 
-    this._randomMascot();
-  },
+export default class EsNoteComponent extends Component {
+  constructor() {
+    super(...arguments);
 
-  _randomMascot() {
-    const random = Math.random();
-    const mascots = get(this, 'mascots');
-    let randomIndex, mascot = mascots[0];
-
-    if (mascots.length > 1) {
-      randomIndex = Math.floor(random * Math.floor(2));
-      mascot = mascots[randomIndex];
+    if (this.args.mascot) {
+      this.mascot = Mascots[this.args.mascot];
+    } else {
+      this.mascot = randomMascot();
     }
-
-    this.setProperties({
-      imageUrl: get(mascot, 'image'),
-      nameTitle: `${get(mascot, 'name')} says...`,
-    });
-  },
-});
+  }
+}

addon/styles/addon.css

@@ -22,3 +22,4 @@
 @import 'components/es-card.css';
 @import 'components/es-footer.css';
 @import 'components/es-header.css';
+@import 'components/es-note.css';

addon/styles/components/es-note.css

@@ -0,0 +1,16 @@
+.cta-note {
+  background-color: var(--color-gray-200);
+  border: 2px solid var(--color-gray-600);
+  border-radius: var(--radius-lg);
+  margin: auto;
+  max-width: 90%;
+}
+
+.cta-note .cta-note-content {
+  display: flex;
+  justify-content: space-between;
+}
+
+.cta-note .cta-mascot {
+  transform: rotate(15deg);
+}

addon/templates/components/es-note.hbs

@@ -1,13 +1,11 @@
-<div class="cta-note">
-  <div class="cta-note-body">
-    <div class="cta-note-heading hide-in-percy">{{this.nameTitle}}</div>
-    <div class="cta-note-message">
-      {{#if hasBlock}}
+<div class="cta-note" ...attributes>
+  <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>{{this.mascot.name}} says...</div>
+      <div class="cta-note-message">
         {{yield}}
-      {{else}}
-        {{this.defaultMessage}}
-      {{/if}}
+      </div>
     </div>
+    <img src={{this.mascot.image}} role="presentation" alt="" class="hide-in-percy cta-mascot m-2">
   </div>
-  <img src={{this.imageUrl}} role="presentation" alt="" class="hide-in-percy">
 </div>

app/templates/components/es-note.js

@@ -0,0 +1 @@
+export { default } from 'ember-styleguide/templates/components/es-note';

docs/components/note.md

@@ -0,0 +1,23 @@
+# Note
+
+Sometimes in our documentation we might want to bring someone's attention to something, either as a warning or a quick suggestion. We have a qwirky component that can be used for exactly this
+
+## Usage
+
+```handlebars
+<EsNote>You should try out this cool note component</EsNote>
+```
+
+If you don't pass in a specific mascot (either `tomster` or `zoey`) then it will randomly pick between them. Try refreshing the page now and see them change!
+
+You might notice on this page that they flicker a little bit and seem to swap between a Tomster and a Zoey sometimes just after rendering. This is related to how we are pre-rendering this page and then when the page is loaded Ember will re-run the code that picks the mascot that is displayed.
+
+In **all** cases where we are pre-rendering a page using fastboot or prember, we **must** pass in the `@mascot` argument to the component.
+
+```handlebars
+<EsNote @mascot="tomster">I am a Tomster, and I approve this message</EsNote>
+```
+
+```handlebars
+<EsNote @mascot="zoey">I am a Zoey, and I approve this message</EsNote>
+```

tests/integration/components/es-note-test.js

@@ -1,53 +1,33 @@
 import { find, render } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { setProperties } from '@ember/object';
 import hbs from 'htmlbars-inline-precompile';
 
 module('Integration | Component | es note', function(hooks){
   setupRenderingTest(hooks);
 
   test('it renders', async function(assert) {
-    const testHeading = 'Tomster says... Zoey says...';
+    await render(hbs`<EsNote @mascot="tomster" />`);
 
-    await render(hbs`<EsNote />`);
-
-    assert.ok(
-      testHeading.includes(find('.cta-note-heading').textContent.trim()),
-      'displays heading'
-    );
-    assert.dom('.cta-note-message').hasText('Hello!!! No message provided.');
+    assert.dom('[data-test-es-note-heading]').hasText('Tomster says...');
 
     await render(hbs`
       <EsNote>
         template block text
       </EsNote>
     `);
 
-    assert.ok(
-      testHeading.includes(find('.cta-note-heading').textContent.trim()),
-      'displays heading'
-    );
-
     assert.dom('.cta-note-message').hasText('template block text');
   });
 
-  test('out of 2 mascots randomly selects each at least 1 in 10 renders', async function(assert) {
-    const mascots = [
-      { image: 'image/tomster', name: 'Tomster' },
-      { image: 'image/zoey', name: 'Zoey' },
-    ];
+  test('out of 2 mascots randomly selects each at least 1 in 15 renders', async function(assert) {
     const renderedNames = [];
 
-    setProperties(this, {
-      mascots,
-    });
-
-    for (let i = 0; i < 10; i++) {
+    for (let i = 0; i < 15; i++) {
       let name;
 
-      await render(hbs`<EsNote @mascots={{mascots}} />`);
-      name = find('.cta-note-heading').textContent.trim().split(' ')[0];
+      await render(hbs`<EsNote />`);
+      name = find('[data-test-es-note-heading]').textContent.trim().split(' ')[0];
 
       renderedNames.push(name);
     }
@@ -61,6 +41,5 @@ module('Integration | Component | es note', function(hooks){
       renderedNames.includes('Zoey'),
       'Zoey rendered'
     );
-
   });
 });