update es-note

Author: mansona

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/constants/mascots.js

@@ -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/addon.css

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

addon/styles/components/es-note.css

@@ -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">{{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>

addon/templates/components/es-note.hbs

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

app/templates/components/es-note.js

@@ -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>
+```