Added rough version of publish type dropdown

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

- wired up a basic dropdown with radio buttons for publish type ready for initial behaviour and styling assessment

ghost/admin/app/components/editor-labs/publish-management.js

@@ -28,13 +28,16 @@ export class PublishOptions {
     get publishTypeOptions() {
         return [{
             value: 'publish+send',
+            label: 'Publish and email',
             display: 'published and sent',
             disabled: this.emailDisabled
         }, {
             value: 'publish',
+            label: 'Publish only',
             display: 'published'
         }, {
             value: 'send',
+            label: 'Email only',
             display: 'sent',
             disabled: this.emailDisabled
         }];
@@ -63,6 +66,12 @@ export class PublishOptions {
         return !mailgunConfigured;
     }
 
+    @action
+    setPublishType(publishType) {
+        // TODO: validate publish type is allowed
+        this.publishType = publishType;
+    }
+
     // publish date ------------------------------------------------------------
 
     @tracked publishDate = 'now';
@@ -104,7 +113,7 @@ export class PublishOptions {
 
         // TODO: set up initial state / defaults
 
-        if (this.emailUnavailable) {
+        if (this.emailUnavailable || this.emailDisabled) {
             this.publishType = 'publish';
         }
     }

ghost/admin/app/components/modals/editor-labs/publish-flow.hbs

@@ -15,7 +15,36 @@
                 {{#if @data.publishOptions.emailUnavailable}}
                     published
                 {{else}}
-                    <span class="gh-publish-setting">{{@data.publishOptions.selectedPublishTypeOption.display}}</span>
+                <GhBasicDropdown
+                    class="gh-publish-setting"
+                    @verticalPosition="below"
+                    @horizintalPosition="right"
+                    @renderInPlace={{true}}
+                    as |dd|
+                >
+                    <dd.Trigger>
+                        <span>{{@data.publishOptions.selectedPublishTypeOption.display}}</span>
+                    </dd.Trigger>
+                    <dd.Content>
+                        <fieldset>
+                            {{#each @data.publishOptions.publishTypeOptions as |option|}}
+                                <div class="radio-button">
+                                    <input
+                                        type="radio"
+                                        name="publish-type"
+                                        id="publish-type-{{option.value}}"
+                                        value={{option.value}}
+                                        checked={{eq option.value @data.publishOptions.publishType}}
+                                        disabled={{option.disabled}}
+                                        {{on "change" this.publishTypeChanged}}
+                                    >
+                                    <label for="publish-type-{{option.value}}">{{option.label}}</label>
+                                </div>
+                            {{/each}}
+                        </fieldset>
+                    </dd.Content>
+                </GhBasicDropdown>
+
                 {{/if}}
 
                 {{#if (eq @data.publishOptions.publishType "publish")}}

ghost/admin/app/components/modals/editor-labs/publish-flow.js

@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import {action} from '@ember/object';
 
 export default class PublishModalComponent extends Component {
     static modalOptions = {
@@ -6,4 +7,11 @@ export default class PublishModalComponent extends Component {
         omitBackdrop: true,
         ignoreBackdropClick: true
     };
+
+    @action
+    publishTypeChanged(event) {
+        event.preventDefault();
+
+        this.args.data.publishOptions.setPublishType(event.target.value);
+    }
 }

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

@@ -455,6 +455,7 @@
 }
 
 .gh-publish-setting {
+    display: inline-block;
     padding: 4px 8px;
     font-weight: 600;
     white-space: nowrap;
@@ -462,6 +463,10 @@
     border-radius: var(--border-radius);
 }
 
+.gh-publish-setting input[type="radio"]:disabled + label {
+    color: var(--midlightgrey);
+}
+
 .gh-publish-cta {
     display: flex;
     width: 100%;
@@ -469,4 +474,4 @@
 
 .gh-publish-cta .gh-btn-black {
     margin-right: 1.2rem;
-}
+}