Switched signup and default post access settings to dropdowns

no issue

- provides clearer indication of current setting without having to expand anything
- has more minimal UI which helps when settings screen has multiple areas

ghost/admin/app/components/settings/members-default-post-access.hbs

@@ -1,47 +1,23 @@
-<div class="gh-expandable-block">
-    <h4 class="gh-expandable-header">
+<div class="mb4">
+    <div class="gh-expandable-header">
         <div>
             <h4 class="gh-expandable-title">Default post access</h4>
             <p class="gh-expandable-description">When a new post is created, who should have access to it?</p>
         </div>
-        <button type="button" class="gh-btn" {{on "click" this.togglePostAccess}} data-test-toggle="post-access"><span>{{if this.postAccessOpen "Close" "Expand"}}</span></button>
-    </h4>
-    <div class="gh-expandable-content">
-        {{#liquid-if this.postAccessOpen}}
-        <div class="flex flex-column w-50">
-            <div
-                class="gh-radio {{if (eq this.settings.defaultContentVisibility "public") "active"}}"
-                {{on "click" (fn this.setDefaultContentVisibility "public")}}
-            >
-                <div class="gh-radio-button"></div>
-                <div class="gh-radio-content">
-                    <div class="gh-radio-label">Public<br>
-                    <div class="gh-radio-desc">All site visitors to your site, no login required</div></div>
-                </div>
-            </div>
-            <div class="{{if (eq this.settings.membersSignupAccess "none") "disabled-overlay"}}">
-                <div
-                    class="gh-radio {{if (eq this.settings.defaultContentVisibility "members") "active"}}"
-                    {{on "click" (fn this.setDefaultContentVisibility "members")}}
-                >
-                    <div class="gh-radio-button"></div>
-                    <div class="gh-radio-content">
-                        <div class="gh-radio-label">Members only<br>
-                        <div class="gh-radio-desc">All logged-in members</div></div>
-                    </div>
-                </div>
-                <div
-                    class="gh-radio {{if (eq this.settings.defaultContentVisibility "paid") "active"}}"
-                    {{on "click" (fn this.setDefaultContentVisibility "paid")}}
-                >
-                    <div class="gh-radio-button"></div>
-                    <div class="gh-radio-content">
-                        <div class="gh-radio-label">Paid-members only<br>
-                        <div class="gh-radio-desc">Only logged-in members with an active Stripe subscription</div></div>
-                    </div>
-                </div>
+    </div>
+
+    <PowerSelect
+        @options={{this.options}}
+        @selected={{this.selectedOption}}
+        @onChange={{this.setDefaultContentVisibility}}
+        @disabled={{eq this.settings.membersSignupAccess "none"}}
+        as |option|
+    >
+        <div class="flex ma2">
+            <div class="gh-radio-label">
+                {{option.name}}<br>
+                <div class="gh-radio-desc">{{option.description}}</div>
             </div>
         </div>
-        {{/liquid-if}}
-    </div>
+    </PowerSelect>
 </div>

ghost/admin/app/components/settings/members-default-post-access.js

@@ -1,22 +1,38 @@
 import Component from '@glimmer/component';
 import {action} from '@ember/object';
 import {inject as service} from '@ember/service';
-import {tracked} from '@glimmer/tracking';
 
 export default class SettingsMembersDefaultPostAccess extends Component {
     @service settings;
 
-    @tracked postAccessOpen = false;
+    get options() {
+        return [{
+            name: 'Public',
+            description: 'All site visitors to your site, no login required',
+            value: 'public'
+        }, {
+            name: 'Members only',
+            description: 'All logged-in members',
+            value: 'members'
+        }, {
+            name: 'Paid-members only',
+            description: 'Only logged-in mmembers with an active Stripe subscription',
+            value: 'paid'
+        }];
+    }
 
-    @action
-    togglePostAccess() {
-        this.postAccessOpen = !this.postAccessOpen;
+    get selectedOption() {
+        if (this.settings.get('membersSignupAccess') === 'none') {
+            return this.options.find(o => o.value === 'public');
+        }
+
+        return this.options.find(o => o.value === this.settings.get('defaultContentVisibility'));
     }
 
     @action
-    setDefaultContentVisibility(value) {
+    setDefaultContentVisibility(option) {
         if (this.settings.get('membersSignupAccess') !== 'none') {
-            this.settings.set('defaultContentVisibility', value);
+            this.settings.set('defaultContentVisibility', option.value);
         }
     }
 }

ghost/admin/app/components/settings/members-subscription-access.hbs

@@ -1,47 +1,22 @@
-<div class="gh-expandable-block">
+<div class="mb4">
     <div class="gh-expandable-header">
         <div>
             <h4 class="gh-expandable-title">Subscription access</h4>
             <p class="gh-expandable-description">Who should be able to subscribe to your site?</p>
         </div>
-        <button type="button" class="gh-btn" {{on "click" this.toggleSignupAccess}} data-test-toggle="subscription-access"><span>{{if this.signupAccessOpen "Close" "Expand"}}</span></button>
     </div>
-    <div class="gh-expandable-content">
-        {{#liquid-if this.signupAccessOpen}}
-            <div class="flex flex-column w-50">
-                <div
-                    class="gh-radio {{if (eq this.settings.membersSignupAccess "all") "active"}}"
-                    {{on "click" (fn this.setSignupAccess "all")}}
-                >
-                    <div class="gh-radio-button"></div>
-                    <div class="gh-radio-content">
-                        <div class="gh-radio-label">Anyone can sign up</div>
-                        <div class="gh-radio-desc">All visitors will be able to subscribe and sign in</div>
-                    </div>
-                </div>
 
-                <div
-                    class="gh-radio {{if (eq this.settings.membersSignupAccess "invite") "active"}}"
-                    {{on "click" (fn this.setSignupAccess "invite")}}
-                >
-                    <div class="gh-radio-button"></div>
-                    <div class="gh-radio-content">
-                        <div class="gh-radio-label">Only people I invite</div>
-                        <div class="gh-radio-desc">People can sign in from your site but won't be able to sign up</div>
-                    </div>
-                </div>
-
-                <div
-                    class="gh-radio {{if (eq this.settings.membersSignupAccess "none") "active"}}"
-                    {{on "click" (fn this.setSignupAccess "none")}}
-                >
-                    <div class="gh-radio-button"></div>
-                    <div class="gh-radio-content">
-                        <div class="gh-radio-label">Nobody</div>
-                        <div class="gh-radio-desc">No one will be able to subscribe or sign in</div>
-                    </div>
-                </div>
+    <PowerSelect
+        @options={{this.options}}
+        @selected={{this.selectedOption}}
+        @onChange={{this.setSignupAccess}}
+        as |option|
+    >
+        <div class="flex ma2">
+            <div class="gh-radio-label">
+                {{option.name}}<br>
+                <div class="gh-radio-desc">{{option.description}}</div>
             </div>
-        {{/liquid-if}}
-    </div>
+        </div>
+    </PowerSelect>
 </div>

ghost/admin/app/components/settings/members-subscription-access.js

@@ -1,21 +1,36 @@
 import Component from '@glimmer/component';
 import {action} from '@ember/object';
 import {inject as service} from '@ember/service';
-import {tracked} from '@glimmer/tracking';
 
 export default class SettingsMembersSubscriptionAccess extends Component {
     @service settings;
 
-    @tracked signupAccessOpen = false;
+    get options() {
+        return [{
+            name: 'Anyone can sign up',
+            description: 'All visitors will be able to subscribe and sign in',
+            value: 'all'
+        }, {
+            name: 'Only people I invite',
+            description: 'People can sign in from your site but won\'t be able to sign up',
+            value: 'invite'
+        }, {
+            name: 'Nobody',
+            description: 'No one will be able to subscribe or sign in',
+            value: 'none'
+        }];
+    }
 
-    @action
-    toggleSignupAccess() {
-        this.signupAccessOpen = !this.signupAccessOpen;
+    get selectedOption() {
+        return this.options.find(o => o.value === this.settings.get('membersSignupAccess'));
     }
 
     @action
-    setSignupAccess(value) {
-        this.settings.set('membersSignupAccess', value);
-        this.settings.set('defaultContentVisibility', 'public');
+    setSignupAccess(option) {
+        this.settings.set('membersSignupAccess', option.value);
+
+        if (option.value === 'none') {
+            this.settings.set('defaultContentVisibility', 'public');
+        }
     }
 }

ghost/admin/app/templates/settings/membership.hbs

@@ -21,10 +21,8 @@
         <div class="gh-main-section">
             <h4 class="gh-main-section-header small">Access and payments</h4>
         </div>
-        <section class="gh-expandable">
-            <Settings::MembersSubscriptionAccess />
-            <Settings::MembersDefaultPostAccess />
-        </section>
+        <Settings::MembersSubscriptionAccess />
+        <Settings::MembersDefaultPostAccess />
     </section>
 
     {{#if this.showLeaveSettingsModal}}