Omit empty labels

[36degrees]

Fixes #714

This ensures that the label element is not outputted if no text or HTML are provided. This allows for other form control components to be used with a separate label, e.g. if a user wants to have an input and a button on one line with a separate label above.

An example of where this is problematic is on the form-alignment page, where an empty label is included above each input:

Before

<fieldset class="govuk-fieldset">
    <label class="govuk-label" for="govuk-input-a">
        National Insurance number
    </label>

    <div class="app-u-w-half">
        <div class="govuk-form-group">
            <label class="govuk-label" for="govuk-input-a">

            </label>
            <input class="govuk-input" id="govuk-input-a" name="national-insurance-number" type="text">
        </div>

    </div>
    <div class="app-u-w-half">
        <button type="submit" class="govuk-button">
            Save and continue
        </button>
    </div>
</fieldset>

After

<fieldset class="govuk-fieldset">
    <label class="govuk-label" for="govuk-input-a">
        National Insurance number
    </label>

    <div class="app-u-w-half">
        <div class="govuk-form-group">
            <input class="govuk-input" id="govuk-input-a" name="national-insurance-number" type="text">
        </div>

    </div>
    <div class="app-u-w-half">
        <button type="submit" class="govuk-button">
            Save and continue
        </button>
    </div>
</fieldset>

[NickColley]

I think it'd be nice to have our components in a place where people can't turn off labels, or have to explicitly explain where their replacement label is.

I don't think this is trivial right now so, 👍

[36degrees]

Alternative approach would be update every component that uses the label (input, radios, checkboxes, textarea, file-upload, and select) to only call the label component if params.label.html or params.label.text is provided.

This would be consistent with how we do error messages and hints, but in retrospect it feels like the less components 'know about' the internals of other components (e.g. the fact they accept html and text) the better… thoughts? Another question is then whether we should make the error message and hint components work in a similar way.

[36degrees]

Aah, of course we still need to know whether the error message and hint are going to be displayed within each form component so that we know whether to include their IDs in aria-describedby, which is not the case for labels. So perhaps this does make some sense.