Ghost/ghost/admin/app/components/gh-benefit-item.hbs

46 lines
1.8 KiB
Handlebars
Raw Normal View History

<div
class="gh-blognav-item {{unless @benefitItem.isNew "gh-blognav-item--sortable"}}"
{{validation-status errorClass="gh-blognav-item--error" errors=@benefitItem.errors}}
...attributes
>
{{#unless @benefitItem.isNew}}
<span class="gh-blognav-grab">
{{svg-jar "grab"}}
<span class="sr-only">Reorder</span>
</span>
{{/unless}}
<div class="gh-blognav-line {{unless @benefitItem.name "placeholder"}}">
{{svg-jar "check-2"}}
<span
class="gh-blognav-label"
{{validation-status errors=@benefitItem.errors property="name" hasValidated=@benefitItem.hasValidated}}
>
<GhTrimFocusInput
@shouldFocus={{@benefitItem.last}}
@placeholder={{if this.isFreeTier "Access to all public posts" "Expert analysis"}}
@value={{readonly @benefitItem.name}}
@input={{this.handleLabelInput}}
@keyPress={{this.clearLabelErrors}}
@stopEnterKeyDownPropagation={{true}}
@focus-out={{fn this.updateLabel @benefitItem.name}}
data-test-input="benefit-label" />
<GhErrorMessage
@errors={{@benefitItem.errors}}
@property="name"
data-test-error="benefit-label" />
</span>
</div>
{{#if @benefitItem.isNew}}
<button type="button" class="gh-blognav-add" {{on "click" (fn @addItem @benefitItem)}} data-test-button="add-benefit">
{{svg-jar "plus"}}<span class="sr-only">Add</span>
</button>
{{else}}
<button type="button" class="gh-blognav-delete" {{on "click" (fn @deleteItem @benefitItem)}} data-test-button="delete-benefit">
{{svg-jar "trash"}}<span class="sr-only">Delete</span>
</button>
{{/if}}
</div>