{{#extend "layout-docs"}}

  {{#replace "pageTitle"}}Checkbox{{/replace}}

  {{#replace "main"}}
    <section id="blocks-input-checkbox" class="grid--fluid row-spacer">
        <div class="row-spacer">
          <h2>Checkbox</h2>
          <h3>Introduction</h3>
          <p>
            The custom checkbox we use must be wrapped in a <code>input-checkbox</code> element.
          </p>
          <p class="notice notice--error">
            The <code>data-js=input-checkbox</code> has been deprecated and will be removed in <code>v2.0</code>, in favour of the pure CSS implementation.
          </p>
          <p class="notice notice--success">
            Note: there is now a CSS-only, Non-JS implementation of this component. Please refer to the <a href="/{UIF_VERSION}-sb/">UIF Storybook documentation</a> for more information.
          </p>
        </div>
        <div class="row">
        {{#each checkbox-input}}
            <div class="col col--1/2">
            <h3>{{description}}</h3>
            {{> input-checkbox}}
            <pre class="code--debug"><code class="language-html">{{> input-checkbox-src}}</code></pre>
            </div>
        {{/each}}
        </div>
    </section>

    <section id="elements-input-checkbox-documentation" class="grid--fluid row-spacer">
        <h3>Usage</h3>
        <div class="table-scroll">
        <table class="table--debug">
            <tr>
            <th>Class name</th>
            <th>Effect</th>
            <th>Remarks</th>
            </tr>

            <tr>
            <td><code>.input-checkbox</code></td>
            <td>Placed on a wrapper around the checkbox <code>input</code> and <code>label</code>. Adds custom styling to the checkbox and label as per the UIF</td>
            <td>Required.</td>
            </tr>

            <tr>
            <td><code>[data-js="input-checkbox"]</code></td>
            <td>Placed on the <code>input-checkbox</code> element. In the event that the <code>input</code> and <code>label</code> aren't direct siblings, this JS hook will handle whether a checkbox is checked or not.</td>
            <td>Required if <code>input</code> and <code>label</code> are not direct siblings.<br>
              <strong class="text-bold">Deprecated &mdash; will be removed in v2.0</strong>
            </td>
            </tr>

            <tr>
            <td><code>.input-checkbox--hiddenlabel</code></td>
            <td>Placed on the <code>input-checkbox</code> element. Will visually hide the text of the label. The text will still be readable by screenreaders.</td>
            <td>Optional</td>
            </tr>
        </table>
        </div>
    </section>
  {{/replace}}

{{/extend}}