Completed paywall card implementation

refs https://github.com/TryGhost/Team/issues/466
refs a657e4f092

- added paywall card component
- swapped hr for paywall for the paywall card shown in card menus

ghost/admin/app/styles/spirit/_koenig.css

@@ -1039,6 +1039,29 @@
     margin-top: 0;
 }
 
+.kg-paywall-separator {
+    display: flex;
+    align-items: center;
+    height: 1em;
+    text-align: center;
+    color: var(--midlightgrey);
+}
+
+.kg-paywall-separator::before,
+.kg-paywall-separator::after {
+    content: '';
+    flex: 1;
+    border-top: 1px solid #dfe1e3;
+}
+
+.kg-paywall-separator:not(:empty)::before {
+    margin-right: .5em;
+}
+
+.kg-paywall-separator:not(:empty)::after {
+    margin-left: .5em;
+}
+
 
 /* Codemirror overrides
 /* --------------------------------------------------------------- */

ghost/admin/lib/koenig-editor/addon/components/koenig-card-paywall.hbs

@@ -0,0 +1,12 @@
+<KoenigCard
+    @class="kg-card-hover"
+    @isSelected={{this.isSelected}}
+    @isEditing={{this.isEditing}}
+    @selectCard={{action this.selectCard}}
+    @deselectCard={{action this.deselectCard}}
+    @editCard={{action this.editCard}}
+    @hasEditMode={{false}}
+    @editor={{this.editor}}
+>
+    <div class="kg-paywall-separator">End of free preview</div>
+</KoenigCard>

ghost/admin/lib/koenig-editor/addon/components/koenig-card-paywall.js

@@ -0,0 +1,10 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+    tagName: '',
+
+    init() {
+        this._super(...arguments);
+        this.registerComponent(this);
+    }
+});

ghost/admin/lib/koenig-editor/addon/options/cards.js

@@ -26,7 +26,8 @@ export const CARD_ICON_MAP = {
     embed: 'koenig/kg-card-type-gen-embed',
     bookmark: 'koenig/kg-card-type-bookmark',
     gallery: 'koenig/kg-card-type-gallery',
-    email: 'koenig/kg-card-type-gen-embed'
+    email: 'koenig/kg-card-type-gen-embed',
+    paywall: 'koenig/kg-card-type-divider'
 };
 
 // TODO: move koenigOptions directly into cards now that card components register
@@ -43,7 +44,8 @@ export default [
     }}),
     createComponentCard('markdown', {deleteIfEmpty: 'payload.markdown'}),
     createComponentCard('gallery', {hasEditMode: false}),
-    createComponentCard('email', {deleteIfEmpty: 'payload.html'})
+    createComponentCard('email', {deleteIfEmpty: 'payload.html'}),
+    createComponentCard('paywall', {hasEditMode: false, selectAfterInsert: false})
 ];
 
 export const CARD_MENU = [
@@ -122,7 +124,7 @@ export const CARD_MENU = [
             desc: 'Mark end of free preview',
             matches: ['paywall'],
             type: 'card',
-            replaceArg: 'hr'
+            replaceArg: 'paywall'
         }]
     },
     {

ghost/admin/lib/koenig-editor/app/components/koenig-card-paywall.js

@@ -0,0 +1 @@
+export {default} from 'koenig-editor/components/koenig-card-paywall';