Ghost/ghost/admin/app/components/announcement-settings/visibility.hbs
Elena Baidakova 4207c9d0d1
Added browser tests for announcement bar (#16742)
refs TryGhost/Team#3122

<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 87727d9</samp>

Added `data-testid` attributes to various elements in the announcement
bar settings feature to enable Playwright testing. Fixed a potential bug
with the `visibilitySettings` getter in the `visibility.js` component.
Added Playwright tests for the announcement bar settings feature in
`announcement-bar-settings.spec.js`.
2023-05-05 14:11:26 +04:00

72 lines
2.9 KiB
Handlebars

<div class="gh-stack-item gh-setting-last">
<div class="flex-grow-1">
<label class="gh-setting-title gh-theme-setting-title" for="logged-out">
Visibility
</label>
<div class="form-group mt3 mb0 for-checkbox">
<label class="checkbox" for="logged-out">
<input
type="checkbox"
id="logged-out"
name="logged-out"
class="gh-input"
value={{this.visibilityOptions.visitors}}
checked={{this.isVisitorsChecked}}
{{on "click" this.updateVisibility}}
>
<span class="input-toggle-component"></span>
{{#if this.isMembersEnabled}}
<span>Logged out visitors</span>
{{else}}
<span>Show the announcement</span>
{{/if}}
</label>
{{#if this.isMembersEnabled}}
{{#if this.isPaidAvailable}}
<label class="checkbox" for="free" data-testid="announcement-bar-free-member-label">
<input
type="checkbox"
id="free"
name="free"
class="gh-input"
value={{this.visibilityOptions.freeMembers}}
checked={{this.isFreeMembersChecked}}
data-testid="announcement-bar-free-member-input"
{{on "click" this.updateVisibility}}
>
<span class="input-toggle-component"></span>
<span>Free members</span>
</label>
<label class="checkbox" for="paid">
<input
type="checkbox"
id="paid"
name="paid"
class="gh-input"
value={{this.visibilityOptions.paidMembers}}
checked={{this.isPaidMembersChecked}}
{{on "click" this.updateVisibility}}
>
<span class="input-toggle-component"></span>
<span>Paid members</span>
</label>
{{else}}
<label class="checkbox">
<input
type="checkbox"
name="members"
class="gh-input"
value={{this.visibilityOptions.freeMembers}}
checked={{this.isFreeMembersChecked}}
{{on "click" this.updateVisibility}}
>
<span class="input-toggle-component"></span>
<span>Members</span>
</label>
{{/if}}
{{/if}}
</div>
</div>
</div>