✨ Add classes to card. (#591)

closes: https://github.com/TryGhost/Ghost/issues/8179
- previously all cards just had a `__mobiledoc-card` class on them, this update replaces them with a class `kg-card` and adds an additional class of `kg-{{card_name}}`

ghost/admin/app/styles/addons/gh-koenig/gh-koenig.css

@@ -42,17 +42,17 @@
 
 }
 
-.__mobiledoc-card {
+.kg-card {
     position: relative;
     display: block; /* required for cursor movement around card */
     width: 100%;
 }
 
-.__mobiledoc-card:hover {
+.kg-card:hover {
     box-shadow: var(--blue) 0 0 0 1px;
 }
 
-.__mobiledoc-card .card-handle {
+.kg-card .card-handle {
     position: absolute;
     right: 0px;
     top: 0px;
@@ -61,23 +61,23 @@
     display: none;
 }
 
-.__mobiledoc-card:hover .card-handle {
+.kg-card:hover .card-handle {
     display: block;
 }
 
-.__mobiledoc-card .card-handle label {
+.kg-card .card-handle label {
     font-size: 10px;
 }
 
 
-.__mobiledoc-card .card-handle button {
+.kg-card .card-handle button {
     background-color: var(--lightgrey);
     border: 1px solid var(--midgrey);
     font-size: 10px;
     min-width: 80px;
 }
 
-.__mobiledoc-card textarea {
+.kg-card textarea {
     min-height: 333px;
     max-width: 900px;
     outline: none;
@@ -155,7 +155,7 @@ textarea.ed_code {
 }
 
 
-.__mobiledoc-card .gh-image-uploader .upload-form {
+.kg-card .gh-image-uploader .upload-form {
     width: 100%;
     height: 350px;
     background: color(var(--lightgrey) l(+4%));

ghost/admin/lib/gh-koenig/addon/components/koenig-card.js

@@ -1,15 +1,27 @@
 import Component from 'ember-component';
 import layout from '../templates/components/koenig-card';
+import run from 'ember-runloop';
 
 export default Component.extend({
     layout,
-    classNames: ['koenig-card'],
-
     init() {
         this._super(...arguments);
         this.set('isEditing', false);
     },
+    didRender() {
+        // add the classname to the wrapping card as generated by mobiledoc.
+        // for some reason `this` on did render actually refers to the editor object and not the card object, after render it seems okay.
+        run.schedule('afterRender', this,
+            () => {
+                let {env: {name}} = this.get('card');
+                let mobiledocCard = this.$().parents('.__mobiledoc-card');
 
+                mobiledocCard.removeClass('__mobiledoc-card');
+                mobiledocCard.addClass('kg-card');
+                mobiledocCard.addClass(name ? `kg-${name}` : '');
+            }
+        );
+    },
     actions: {
         save() {
             this.set('doSave', Date.now());