Files
vault/ui/lib/core/addon/components/text-file.hbs
claire bontempo 416d8bde5d UI: Create enable input component (#24427)
* enable input component

* add more stars

* update css comments

* Update ui/app/styles/helper-classes/flexbox-and-grid.scss

* make attrOptions optional

* add subtext to textfile

* add docLink arg to form field textfile

* update form field test

* add test

* add comment

* update jsdoc

* remove unused class

* Update ui/tests/integration/components/enable-input-test.js

Co-authored-by: Jordan Reimer <zofskeez@gmail.com>

---------

Co-authored-by: Jordan Reimer <zofskeez@gmail.com>
2023-12-07 15:25:55 -08:00

89 lines
2.6 KiB
Handlebars

{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
~}}
{{#unless @uploadOnly}}
<div class="level is-mobile">
<div class="level-left">
<label for="input-{{this.elementId}}" class="has-text-weight-semibold" data-test-text-file-label>
{{or @label "File"}}
{{#if @helpText}}
<InfoTooltip>
<span data-test-help-text>
{{@helpText}}
</span>
</InfoTooltip>
{{/if}}
</label>
</div>
<div class="level-right">
<Input
data-test-text-toggle
id="use-text-{{this.elementId}}"
class="toggle is-success is-small"
@type="checkbox"
@checked={{this.showTextArea}}
{{on "change" (fn (mut this.showTextArea) (not this.showTextArea))}}
/>
<label for="use-text-{{this.elementId}}" class="has-text-weight-bold is-size-8">
Enter as text
</label>
</div>
</div>
{{/unless}}
<div class="field text-file box is-fullwidth is-marginless is-shadowless is-paddingless" data-test-component="text-file">
{{#if this.showTextArea}}
<Hds::Form::MaskedInput::Field
id="input-{{this.elementId}}"
@value={{this.content}}
@isMultiline={{true}}
{{on "input" this.handleTextInput}}
data-test-text-file-textarea
as |F|
>
<F.HelperText>
Enter the value as text.
{{#if @subText}}
{{@subText}}
{{/if}}
{{#if @docLink}}
See our
<Hds::Link::Inline @href={{doc-link @docLink}} @icon="docs-link" @iconPosition="trailing">
documentation
</Hds::Link::Inline>
for help.
{{/if}}
</F.HelperText>
</Hds::Form::MaskedInput::Field>
{{else}}
<Hds::Form::FileInput::Field
id="file-input-{{this.elementId}}"
{{on "change" this.handleFileUpload}}
data-test-text-file-input
as |F|
>
<F.HelperText>
Select a file from your computer.
{{#if @subText}}
{{@subText}}
{{/if}}
{{#if @docLink}}
See our
<Hds::Link::Inline @href={{doc-link @docLink}} @icon="docs-link" @iconPosition="trailing">
documentation
</Hds::Link::Inline>
for help.
{{/if}}
</F.HelperText>
</Hds::Form::FileInput::Field>
{{#if (or @validationError this.uploadError)}}
<AlertInline
@type="danger"
@message={{or @validationError this.uploadError}}
class="has-top-padding-s"
data-test-field-validation="text-file"
/>
{{/if}}
{{/if}}
</div>