Merge pull request #413 from NullVoxPopuli/eliminate-utilities-from-es-note

Use CSS instead of utility classes from ESNote - to allow HTML to be backwards compatible

Author: mansona

addon/components/es-note.hbs

@@ -1,11 +1,9 @@
-<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}}
-      </div>
+<div class="cta" ...attributes>
+  <div class="cta-note">
+    <div class="cta-note-body">
+      <div class="cta-note-heading" data-test-es-note-heading>{{this.mascot.name}} says...</div>
+      <div class="cta-note-message">{{yield}}</div>
     </div>
-    <img src={{this.mascot.image}} role="presentation" alt="" class="hide-in-percy cta-mascot m-2">
+    <img src={{this.mascot.image}} role="presentation" alt="">
   </div>
 </div>

addon/styles/components/es-note.css

@@ -1,16 +1,36 @@
-.cta-note {
+.cta {
   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 {
+.cta .cta-note {
   display: flex;
   justify-content: space-between;
 }
 
-.cta-note .cta-mascot {
+.cta-note .cta-note-body {
+  padding: var(--spacing-2);
+}
+
+.cta-note .cta-note-heading {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-3);
+  line-height: var(--line-height-lg);
+  margin-bottom: var(--spacing-1);
+}
+
+.cta-note img {
+  margin: var(--spacing-2);
   transform: rotate(15deg);
 }
+
+@media only percy {
+  .cta-note .cta-note-heading,
+  .cta-note img {
+    visibility: hidden;
+  }
+}
+