[WIP] Move component attributes into govukAttributes()

packages/govuk-frontend/src/govuk/components/button/template.njk

@@ -31,28 +31,77 @@
   </svg>
 {%- endmacro -%}
 
-{#- Define common attributes that we can use across all element types #}
+{#- Define attributes for links only #}
 
-{%- set commonAttributes %} class="{{ classNames }}" data-module="govuk-button" {{- govukAttributes(params.attributes) -}} {% if params.id %} id="{{ params.id }}"{% endif %}{% endset %}
+{%- set attributesLinkHtml %}
+  {{- govukAttributes({
+    href: params.href
+      if params.href
+      else "#",
+    role: "button",
+    draggable: "false"
+  }) -}}
+{% endset %}
 
-{#- Define common attributes we can use for both button and input types #}
+{#- Define attributes for buttons and inputs only #}
 
-{%- set buttonAttributes %}{% if params.name %} name="{{ params.name }}"{% endif %}{% if params.disabled %} disabled aria-disabled="true"{% endif %}{% if params.preventDoubleClick !== undefined %} data-prevent-double-click="{{ params.preventDoubleClick }}"{% endif %}{% endset %}
+{%- set attributesButtonHtml %}
+  {{- govukAttributes({
+    value: {
+      value: params.text
+        if element == "input"
+        else params.value,
+      optional: true
+    },
+    type: params.type
+      if params.type
+      else "submit",
+    name: {
+      value: params.name,
+      optional: true
+    },
+    disabled: {
+      value: params.disabled,
+      optional: true
+    },
+    "aria-disabled": {
+      value: params.disabled | string
+        if params.disabled !== undefined
+        else undefined,
+      optional: true
+    },
+    "data-prevent-double-click": {
+      value: params.preventDoubleClick | string
+        if params.preventDoubleClick !== undefined
+        else undefined,
+      optional: true
+    }
+  }) -}}
+{% endset %}
 
-{#- Actually create a button... or a link! #}
+{#- Define attributes for component #}
 
-{%- if element == 'a' %}
-<a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {{- commonAttributes | safe }}>
-  {{ params.html | safe | trim | indent(2) if params.html else params.text }}
-  {{- _startIcon() | safe if params.isStartButton }}
-</a>
+{%- set attributesHtml %}
+  {{- (attributesButtonHtml if ["button", "input"].includes(element) else attributesLinkHtml) | safe -}}
+
+  {{- govukAttributes({
+    class: classNames,
+    "data-module": "govuk-button",
+    id: {
+      value: params.id,
+      optional: true
+    }
+  }) -}}
+{% endset %}
+
+{#- Actually create a button... or a link! #}
 
-{%- elseif element == 'button' %}
-<button {%- if params.value %} value="{{ params.value }}"{% endif %} type="{{ params.type if params.type else 'submit' }}" {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
+{%- if ["button", "a"].includes(element) %}
+<{{ element }} {{- attributesHtml | safe }} {{- govukAttributes(params.attributes) }}>
   {{ params.html | safe | trim | indent(2) if params.html else params.text }}
   {{- _startIcon() | safe if params.isStartButton }}
-</button>
+</{{ element }}>
 
-{%- elseif element == 'input' %}
-<input value="{{ params.text }}" type="{{ params.type if params.type else 'submit' }}" {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
+{%- elif element == 'input' %}
+<input {{- attributesHtml | safe }} {{- govukAttributes(params.attributes) }}>
 {%- endif %}

packages/govuk-frontend/src/govuk/components/input/template.njk

@@ -3,24 +3,65 @@
 {% from "../hint/macro.njk" import govukHint %}
 {% from "../label/macro.njk" import govukLabel %}
 
+{#- Set classes for this component #}
+{%- set classNames = "govuk-input" -%}
+
+{%- if params.classes %}
+  {% set classNames = classNames + " " + params.classes %}
+{% endif %}
+
+{%- if params.errorMessage %}
+  {% set classNames = classNames + " govuk-input--error" %}
+{% endif %}
+
 {#- a record of other elements that we need to associate with the input using
   aria-describedby – for example hints or error messages -#}
-{% set describedBy = params.describedBy if params.describedBy else "" -%}
+{% set describedBy = params.describedBy if params.describedBy else undefined -%}
 
 {%- set hasPrefix = true if params.prefix and (params.prefix.text or params.prefix.html) else false %}
 {%- set hasSuffix = true if params.suffix and (params.suffix.text or params.suffix.html) else false %}
 {%- set hasBeforeInput = true if params.formGroup.beforeInput and (params.formGroup.beforeInput.text or params.formGroup.beforeInput.html) else false %}
 {%- set hasAfterInput = true if params.formGroup.afterInput and (params.formGroup.afterInput.text or params.formGroup.afterInput.html) else false %}
 
 {%- macro _inputElement(params) -%}
-  <input class="govuk-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default("text", true) }}"
-    {%- if (params.spellcheck === false) or (params.spellcheck === true) %} spellcheck="{{ params.spellcheck }}"{% endif %}
-    {%- if params.value %} value="{{ params.value }}"{% endif %}
-    {%- if params.disabled %} disabled{% endif %}
-    {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
-    {%- if params.autocomplete %} autocomplete="{{ params.autocomplete }}"{% endif %}
-    {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
-    {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
+  <input
+    {{- govukAttributes({
+      class: classNames,
+      id: params.id,
+      name: params.name,
+      type: params.type | default("text", true),
+      spellcheck: {
+        value: params.spellcheck | string
+          if [true, false].includes(params.spellcheck)
+          else false,
+        optional: true
+      },
+      value: {
+        value: params.value,
+        optional: true
+      },
+      disabled: {
+        value: params.disabled,
+        optional: true
+      },
+      "aria-describedby": {
+        value: describedBy,
+        optional: true
+      },
+      autocomplete: {
+        value: params.autocomplete,
+        optional: true
+      },
+      pattern: {
+        value: params.pattern,
+        optional: true
+      },
+      inputmode: {
+        value: params.inputmode,
+        optional: true
+      }
+    }) -}}
+
     {{- govukAttributes(params.attributes) }}>
 {%- endmacro -%}