Updated the header card based

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

- follows the latest design

ghost/admin/app/styles/components/koenig.css

@@ -1985,21 +1985,41 @@ button.emoji-picker__category-button.active {
 /* --------------------------------------------------------------- */
 
 .kg-header-card {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    padding-left: 2em;
+    padding-right: 2em;
 }
-
-.kg-header-card-alignment-center {
-    text-align: center;
-    grid-column: 1 / 3;
+.kg-header-card-size-small {
+    padding-top: 1em;
+    padding-bottom: 1em;
+}
+.kg-header-card-size-medium {
+    padding-top: 3em;
+    padding-bottom: 3em;
+}
+.kg-header-card-size-large {
+    padding-top: 7em;
+    padding-bottom: 7em;
 }
 .kg-header-card-alignment-left {
     text-align: left;
-    grid-column: 1 / 3;
 }
-.kg-header-card-alignment-left-50-percent {
-    text-align: left;
-    grid-column: 2 / 3;
+.kg-header-card-alignment-center {
+    text-align: center;
+}
+.kg-header-card-style-clear {
+    /* nothing here */
+}
+.kg-header-card-style-invert {
+    background-color: black;
+    color: white;
+}
+.kg-header-card-style-accent {
+    color: white;
+    background-color: var(--accent-color);
+}
+.kg-header-card-style-image {
+    background-size: cover;
+    background-position: center center;
 }
 
 /* Upload cards: audio and file

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

@@ -1,6 +1,6 @@
 <KoenigCard
     @env={{@env}}
-    @class={{concat (kg-style "breakout" size=@payload.cardWidth) " flex flex-column mih10 miw-100 relative"}}
+    @class={{"koenig-breakout-full flex flex-column mih10 miw-100 relative"}}
     @headerOffset={{@headerOffset}}
     @toolbar={{this.toolbar}}
     @payload={{@payload}}
@@ -21,63 +21,107 @@
     as |card|
 >
     {{#if @isEditing}}
-        <div class="kg-header-card">
-            <div class="kg-header-card-container kg-header-card-alignment-{{@payload.alignment}}">
-                <KoenigBasicHtmlInput
-                    @html={{@payload.header}}
-                    @placeholder="Header"
-                    @class="w-100 fw4 bn bg-transparent kg-header-card-header"
-                    @name="header"
-                    @defaultTag="h2"
-                    @onChange={{action "setHeader"}}
-                    @didCreateEditor={{action "registerHeaderEditor"}}
-                />
-                <KoenigBasicHtmlInput
-                    @html={{@payload.subheader}}
-                    @placeholder="Subheader"
-                    @class="w-100 fw4 bg-transparent kg-header-card-subheader"
-                    @name="subheader"
-                    @defaultTag="h3"
-                    @onChange={{action "setSubheader"}}
-                    @didCreateEditor={{action "registerSubheaderEditor"}}
-                    @allowBr={{true}}
-                />
-                {{#if @payload.buttonEnabled}}
-                    <a href="javascript:void(0)" class="gh-btn gh-btn-accent kg-header-card-button" disabled={{not @payload.buttonText}}>
-                        <span>
-                            {{or @payload.buttonText "Add button text"}}
-                        </span>
-                    </a>
-                {{/if}}
-            </div>
+        <div class="kg-header-card kg-header-card-size-{{@payload.size}} kg-header-card-alignment-{{@payload.alignment}} kg-header-card-style-{{@payload.style}}" style="{{if (eq @payload.style "image") this.backgroundImageStyle}}">
+            <KoenigBasicHtmlInput
+                @html={{@payload.header}}
+                @placeholder="Header"
+                @class="w-100 fw4 bn bg-transparent kg-header-card-header"
+                @name="header"
+                @defaultTag="h2"
+                @onChange={{action "setHeader"}}
+                @didCreateEditor={{action "registerHeaderEditor"}}
+            />
+            <KoenigBasicHtmlInput
+                @html={{@payload.subheader}}
+                @placeholder="Subheader"
+                @class="w-100 fw4 bg-transparent kg-header-card-subheader"
+                @name="subheader"
+                @defaultTag="h3"
+                @onChange={{action "setSubheader"}}
+                @didCreateEditor={{action "registerSubheaderEditor"}}
+                @allowBr={{true}}
+            />
+            {{#if @payload.buttonEnabled}}
+                <a href="javascript:void(0)" class="gh-btn gh-btn-accent kg-header-card-button" disabled={{not @payload.buttonText}}>
+                    <span>
+                        {{or @payload.buttonText "Add button text"}}
+                    </span>
+                </a>
+            {{/if}}
         </div>
 
         <KoenigSettingsPanel>
             <div class="kg-settings-panel-control kg-settings-panel-control-horizontal">
-                <div class="kg-settings-panel-control-label">Width</div>
+                <div class="kg-settings-panel-control-label">Size</div>
                 <div class="kg-settings-panel-control-input">
                     <div class="gh-btn-group icons">
-                        <button type="button" title="Wide" class="gh-btn gh-btn-icon {{if (eq @payload.cardWidth "wide") "gh-btn-group-selected"}}" onclick={{action "setLayoutWide"}}><span>{{svg-jar "koenig/kg-img-wide" class="fill-darkgrey"}}</span></button>
-                        <button type="button" title="Full" class="gh-btn gh-btn-icon {{if (eq @payload.cardWidth "full") "gh-btn-group-selected"}}" onclick={{action "setLayoutFull"}}><span>{{svg-jar "koenig/kg-img-full" class="fill-darkgrey"}}</span></button>
+                        <button type="button" title="Small" class="gh-btn gh-btn-icon {{if (eq @payload.size "small") "gh-btn-group-selected"}}" {{on "click" (fn this.setSize "small")}}><span>S</span></button>
+                        <button type="button" title="Medium" class="gh-btn gh-btn-icon {{if (eq @payload.size "medium") "gh-btn-group-selected"}}" {{on "click" (fn this.setSize "medium")}}><span>M</span></button>
+                        <button type="button" title="Large" class="gh-btn gh-btn-icon {{if (eq @payload.size "large") "gh-btn-group-selected"}}" {{on "click" (fn this.setSize "large")}}><span>L</span></button>
                     </div>
                 </div>
             </div>
             <div class="kg-settings-panel-control kg-settings-panel-control-horizontal">
                 <div class="kg-settings-panel-control-label">Alignment</div>
                 <div class="kg-settings-panel-control-input">
-                    <button type="button" class="gh-btn gh-btn-icon" {{on "click" (fn this.setAlignment "center")}}><span>Center</span></button>
-                    <button type="button" class="gh-btn gh-btn-icon" {{on "click" (fn this.setAlignment "left")}}><span>Left</span></button>
-                    <button type="button" class="gh-btn gh-btn-icon" {{on "click" (fn this.setAlignment "left-50-percent")}}><span>Left at 50% starting point</span></button>
+                    <div class="gh-btn-group icons">
+                        <button type="button" class="gh-btn gh-btn-icon {{if (eq @payload.alignment "left") "gh-btn-group-selected"}}" {{on "click" (fn this.setAlignment "left")}}><span>{{svg-jar "align-left"}}</span></button>
+                        <button type="button" class="gh-btn gh-btn-icon {{if (eq @payload.alignment "center") "gh-btn-group-selected"}}" {{on "click" (fn this.setAlignment "center")}}><span>{{svg-jar "align-center"}}</span></button>
+                    </div>
                 </div>
             </div>
             <hr class="kg-settings-panel-divider">
             <div class="kg-settings-panel-control kg-settings-panel-control-horizontal">
                 <div class="kg-settings-panel-control-label">Style</div>
                 <div class="kg-settings-panel-control-input">
-                    <button type="button" class="gh-btn gh-btn-icon" {{on "click" (fn this.setStyle "invert")}}><span>Invert</span></button>
-                    <button type="button" class="gh-btn gh-btn-icon" {{on "click" (fn this.setStyle "clear")}}><span>Clear</span></button>
-                    <button type="button" class="gh-btn gh-btn-icon" {{on "click" (fn this.setStyle "accent")}}><span>Accent</span></button>
-                    <button type="button" class="gh-btn gh-btn-icon" {{on "click" (fn this.setStyle "image")}}><span>Image</span></button>
+                    <div class="gh-btn-group icons">
+                        <button type="button" class="gh-btn gh-btn-icon {{if (eq @payload.style "invert") "gh-btn-group-selected"}}" {{on "click" (fn this.setStyle "invert")}}><span>Invert</span></button>
+                        <button type="button" class="gh-btn gh-btn-icon {{if (eq @payload.style "clear") "gh-btn-group-selected"}}" {{on "click" (fn this.setStyle "clear")}}><span>Clear</span></button>
+                        <button type="button" class="gh-btn gh-btn-icon {{if (eq @payload.style "accent") "gh-btn-group-selected"}}" {{on "click" (fn this.setStyle "accent")}}><span>Accent</span></button>
+                        <button type="button" class="gh-btn gh-btn-icon {{if (eq @payload.style "image") "gh-btn-group-selected"}}" {{on "click" (fn this.setStyle "image")}}><span>Image</span></button>
+                    </div>
+
+                    <GhUploader
+                            @uploadUrl="/images/upload/"
+                            @accept={{this.imageMimeTypes}}
+                            @extensions={{this.imageExtensions}}
+                            {{!-- @onStart={{this.customThumbnailUploadStarted}} --}}
+                            @onComplete={{this.backgroundImageUploadCompleted}}
+                            as |uploader|
+                        >
+                    {{#if (eq @payload.style "image")}}
+                        <div class="relative w-100">
+                            {{#if uploader.isUploading}}
+                                <div class="kg-upload-thumbnail-xl">
+                                    {{uploader.progressBar}}
+                                </div>
+                            {{else if @payload.backgroundImageSrc}}
+                                <div class="kg-thumbnail-xl-container">
+                                    <img class="kg-thumbnail-xl" src={{@payload.backgroundImageSrc}} {{on "click" uploader.triggerFileDialog}}>
+                                    <div class="image-overlay">
+                                        <div class="flex flex-row-reverse">
+                                            <button class="bg-white-90 br3 pe-auto" {{on "click" this.deleteBackgroundImage}}>
+                                                {{svg-jar "koenig/kg-trash" class="kg-replace-icon fill-darkgrey"}}
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            {{else}}
+                                <button type="button" class="gh-btn kg-upload-thumbnail-xl" {{on "click" uploader.triggerFileDialog}}>
+                                    {{svg-jar "upload-fill"}}
+                                </button>
+                            {{/if}}
+                        </div>
+                        <div style="display:none">
+                            <GhFileInput
+                                @multiple={{false}}
+                                @action={{uploader.setFiles}}
+                                @accept={{this.imageMimeTypes}}
+                                @onInsert={{uploader.registerFileInput}}
+                            />
+                        </div>
+                    {{/if}}
+                    </GhUploader>
                 </div>
             </div>
             <hr class="kg-settings-panel-divider">
@@ -133,20 +177,18 @@
 
     {{else}}
 
-        <div class="kg-header-card">
-            <div class="kg-header-card-container kg-header-card-alignment-{{@payload.alignment}}">
-                <h2 class="kg-header-card-header">{{{@payload.header}}}</h2>
-                {{#if this.hasSubheader}}
-                    <h3 class="kg-header-card-subheader">{{{@payload.subheader}}}</h3>
-                {{/if}}
-                {{#if @payload.buttonEnabled}}
-                    <a href="javascript:void(0)" class="gh-btn gh-btn-accent kg-header-card-button {{if this.isButtonIncomplete "o-50"}}" disabled={{not @payload.buttonText}}>
-                        <span>
-                            {{or @payload.buttonText "Add button text"}}
-                        </span>
-                    </a>
-                {{/if}}
-            </div>
+        <div class="kg-header-card kg-header-card-size-{{@payload.size}} kg-header-card-alignment-{{@payload.alignment}} kg-header-card-style-{{@payload.style}}" style="{{if (eq @payload.style "image") this.backgroundImageStyle}}">
+            <h2 class="kg-header-card-header">{{{@payload.header}}}</h2>
+            {{#if this.hasSubheader}}
+                <h3 class="kg-header-card-subheader">{{{@payload.subheader}}}</h3>
+            {{/if}}
+            {{#if @payload.buttonEnabled}}
+                <a href="javascript:void(0)" class="gh-btn gh-btn-accent kg-header-card-button {{if this.isButtonIncomplete "o-50"}}" disabled={{not @payload.buttonText}}>
+                    <span>
+                        {{or @payload.buttonText "Add button text"}}
+                    </span>
+                </a>
+            {{/if}}
         </div>
     {{/if}}
 </KoenigCard>

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

@@ -1,5 +1,6 @@
 import Browser from 'mobiledoc-kit/utils/browser';
 import Component from '@glimmer/component';
+import {IMAGE_EXTENSIONS, IMAGE_MIME_TYPES} from 'ghost-admin/components/gh-image-uploader';
 import {action} from '@ember/object';
 import {isBlank} from '@ember/utils';
 import {run} from '@ember/runloop';
@@ -13,6 +14,9 @@ export default class KoenigCardHeaderComponent extends Component {
     @service membersUtils;
     @service ui;
 
+    imageExtensions = IMAGE_EXTENSIONS;
+    imageMimeTypes = IMAGE_MIME_TYPES;
+
     get isButtonIncomplete() {
         const {buttonUrl, buttonText} = this.args.payload;
         return !buttonUrl || !buttonText;
@@ -51,15 +55,22 @@ export default class KoenigCardHeaderComponent extends Component {
         return Boolean(this.args.payload.subheader.replace(/(<br *\/?>)+$/ig, '').trim());
     }
 
+    get backgroundImageStyle() {
+        if (this.args.payload.backgroundImageSrc) {
+            return ` background-image: url(${this.args.payload.backgroundImageSrc});`;
+        }
+        return '';
+    }
+
     constructor() {
         super(...arguments);
         this.args.registerComponent(this);
 
         const payloadDefaults = {
-            buttonEnabled: false,
-            cardWidth: 'wide',
+            size: 'small',
             alignment: 'center',
-            style: 'invert'
+            style: 'invert',
+            buttonEnabled: false
         };
 
         Object.entries(payloadDefaults).forEach(([key, value]) => {
@@ -216,18 +227,15 @@ export default class KoenigCardHeaderComponent extends Component {
     }
 
     @action
-    setLayoutWide() {
-        this.args.payload.cardWidth = 'wide';
-    }
-
-    @action
-    setLayoutFull() {
-        this.args.payload.cardWidth = 'full';
+    setSize(size) {
+        if (['small', 'medium', 'large'].includes(size)) {
+            this._updatePayloadAttr('size', size);
+        }
     }
 
     @action
     setAlignment(alignment) {
-        if (['center', 'left', 'left-50-percent'].includes(alignment)) {
+        if (['center', 'left'].includes(alignment)) {
             this._updatePayloadAttr('alignment', alignment);
         }
     }
@@ -238,4 +246,28 @@ export default class KoenigCardHeaderComponent extends Component {
             this._updatePayloadAttr('style', style);
         }
     }
+
+    @action
+    triggerFileDialog(event) {
+        const target = event?.target || this.element;
+
+        const cardElem = target.closest('.__mobiledoc-card');
+        const fileInput = cardElem?.querySelector('input[type="file"]');
+
+        if (fileInput) {
+            fileInput.click();
+        }
+    }
+
+    @action
+    backgroundImageUploadCompleted([image]) {
+        this.args.editor.run(() => {
+            this._updatePayloadAttr('backgroundImageSrc', image.url);
+        });
+    }
+
+    @action
+    deleteBackgroundImage() {
+        this._updatePayloadAttr('backgroundImageSrc', null);
+    }
 }