{{#extend "layout-docs"}}

  {{#replace "pageTitle"}}Text Input Animated{{/replace}}

  {{#replace "main"}}
    <section id="blocks-form-fields" class="row">
      <div class="col">
        <h2>Text Input Animated</h2>
        <div class="row">
          {{#each text-input-animated}}
            <div class="col col--1/2-medium">
              {{> text-input-animated}}
              <pre class="code--debug"><code class="language-html">{{> text-input-animated-src}}</code></pre>
            </div>
          {{/each}}
        </div>
      </div>
    </section>

    <section id="blocks-form-fields-documentation" class="row-spacer">
      <h3>Introduction</h3>
      <p>
        The UIF inputs expect short labels that don't wrap onto the next line. This shows the preferred styling and usage of the inputs when used in a form.
      </p>
      <h3>Usage</h3>
      <table class="table--debug">
        <tr>
          <th>Class name</th>
          <th>Effect</th>
          <th>Remarks</th>
        </tr>

        <tr>
          <td><code>.form-field</code></td>
          <td>Wraps around the <code>input</code> tag to add space around groups of inputs</td>
          <td>Required.</td>
        </tr>

        <tr>
          <td><code>.form-field__label</code></td>
          <td>
            Added to <code>label</code> tag for label-specific styling. The label animation design is applied to this element if the relevant JS hook (see below) is added to the <code>.form-field</code> and JS runs successfully.
          </td>
          <td>Required.</td>
        </tr>

        <tr>
          <td><code>.form-field__msg</code></td>
          <td>
            Used to add text below an <code>input</code> <br>
            Used with a <code>.has-error</code> class on its parent to show error messages.
          </td>
          <td>Optional.</td>
        </tr>

        <tr>
          <td><code>.form-field--space-y</code></td>
          <td>Adds vertical space to the <code>.form-field</code></td>
          <td>Optional.</td>
        </tr>

        <tr>
          <th>JavaScript hook</th>
          <th></th>
          <th></th>
        </tr>

        <tr>
          <td><code>[data-js="form-field"]</code></td>
          <td>
            Use this JavaScript hook on the <code>.form-field</code> if you wish the field to use the animated label design. <br>
            Detects if an input is filled, and applies the relevant style.
          </td>
          <td>Required.</td>
        </tr>
      </table>
    </section>
  {{/replace}}

{{/extend}}