From e979e45fdb5c4cf2d6843d90c648e4e94e330cf4 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Tue, 24 Aug 2021 10:50:19 +0100
Subject: [PATCH] Linked up divider toggle button in email-cta card toolbar

refs https://github.com/TryGhost/Team/issues/1007

- replaced `hasTopDivider` and `hasBottomDivider` and associated payload properties for a single `showDividers` payload property
- removed divider toggles from non-edit mode card toolbar
- linked edit-mode toolbar divider to a toggle dividers action
---
 .../components/koenig-card-email-cta.hbs      | 12 ++++----
 .../addon/components/koenig-card-email-cta.js | 30 ++-----------------
 2 files changed, 9 insertions(+), 33 deletions(-)

diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.hbs
index 5b160c8239..22dec78359 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.hbs
@@ -44,7 +44,7 @@
             </p>
         </div>
 
-        {{#if this.hasTopDivider}}<hr class="border-top edit-mode">{{/if}}
+        {{#if @payload.showDividers}}<hr class="border-top edit-mode">{{/if}}
 
         <div class="{{if (eq @payload.buttonAlignment "center") "tc"}}">
             <KoenigTextReplacementHtmlInput
@@ -69,11 +69,11 @@
             {{/if}}
         </div>
 
-        {{#if this.hasBottomDivider}}<hr class="border-bottom">{{/if}}
+        {{#if @payload.showDividers}}<hr class="border-bottom">{{/if}}
 
         <form class="email-cta-toolbar">
             <div class="borders">
-                <button type="button" title="Add dividers" class="gh-btn gh-btn-white gh-btn-icon email-cta-toolbar-item"><span>{{svg-jar "dividers"}}</span></button>
+                <button type="button" title="Add dividers" class="gh-btn gh-btn-white gh-btn-icon email-cta-toolbar-item {{if @payload.showDividers "fill-green-l2"}}" {{on "click" this.toggleDividers}}><span>{{svg-jar "dividers"}}</span></button>
             </div>
 
             <div class="gh-btn-group icons email-cta-align">
@@ -123,9 +123,9 @@
             <p>{{capitalize this.selectedSegment.name}}</p>
         </div>
 
-        {{#if this.hasTopDivider}}<hr class="border-top">{{/if}}
+        {{#if @payload.showDividers}}<hr class="border-top">{{/if}}
 
-        <div class="{{if (not this.hasBottomDivider) "pb2"}} {{if (eq @payload.buttonAlignment "center") "tc"}}">
+        <div class="{{if (not @payload.showDividers) "pb2"}} {{if (eq @payload.buttonAlignment "center") "tc"}}">
             {{#if @payload.html}}
                 <div class="relative">
                     <p>{{{this.formattedHtml}}}</p>
@@ -138,7 +138,7 @@
             {{/if}}
         </div>
 
-        {{#if this.hasBottomDivider}}<hr class="border-bottom">{{/if}}
+        {{#if @payload.showDividers}}<hr class="border-bottom">{{/if}}
 
     {{/if}}
 
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.js
index 3054ec7464..26bfe0fd5d 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.js
@@ -34,14 +34,6 @@ export default class KoenigCardEmailCtaComponent extends Component {
         return this.segments.find(segment => segment.filter === this.args.payload.segment);
     }
 
-    get hasTopDivider() {
-        return !!this.args.payload?.dividerTop;
-    }
-
-    get hasBottomDivider() {
-        return !!this.args.payload?.dividerBottom;
-    }
-
     get toolbar() {
         if (this.args.isEditing) {
             return false;
@@ -49,18 +41,6 @@ export default class KoenigCardEmailCtaComponent extends Component {
 
         return {
             items: [{
-                title: 'Top divider',
-                icon: 'koenig/kg-cta-border',
-                iconClass: this.hasTopDivider ? 'fill-green-l2' : 'fill-white',
-                action: run.bind(this, this.toggleDivider, 'top')
-            }, {
-                title: 'Bottom divider',
-                icon: 'koenig/kg-cta-border',
-                iconClass: this.hasBottomDivider ? 'fill-green-l2' : 'fill-white',
-                action: run.bind(this, this.toggleDivider, 'bottom')
-            }, {
-                divider: true
-            }, {
                 buttonClass: 'fw4 flex items-center white',
                 icon: 'koenig/kg-edit',
                 iconClass: 'fill-white',
@@ -109,6 +89,7 @@ export default class KoenigCardEmailCtaComponent extends Component {
 
         const payloadDefaults = {
             showButton: false,
+            showDividers: true,
             segment: 'status:free',
             buttonAlignment: 'left'
         };
@@ -159,13 +140,8 @@ export default class KoenigCardEmailCtaComponent extends Component {
     }
 
     @action
-    toggleDivider(border) {
-        if (border === 'top') {
-            this._updatePayloadAttr('dividerTop', !this.hasTopDivider);
-        }
-        if (border === 'bottom') {
-            this._updatePayloadAttr('dividerBottom', !this.hasBottomDivider);
-        }
+    toggleDividers() {
+        this._updatePayloadAttr('showDividers', !this.args.payload.showDividers);
     }
 
     @action