Use Character count formGroup as module wrapper

This removes the wrapping data-module `<div>` and puts all attributes on the Textarea `formGroup` instead
alphagov · Dec 14, 2023 · fff0385 · fff0385
1 parent 4cf2d9e
commit fff0385
Showing 1 changed file with 32 additions and 32 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/character-count/template.njk b/packages/govuk-frontend/src/govuk/components/character-count/template.njk
@@ -16,7 +16,9 @@
   Unlike objects which cannot be modified, Nunjucks can both push to and loop
   arrays (as if they were objects) when in `Object.entries()` array format
 #}
-{%- set attributes = [] -%}
+{%- set attributes = [
+  ["data-module", "govuk-character-count"]
+] -%}
 
 {% for attribute, value in params.formGroup.attributes %}
   {% set attributes = (attributes.push([attribute, value]), attributes) %}
@@ -68,34 +70,32 @@
   {% endfor %}
 {% endif -%}
 
-<div class="govuk-character-count" data-module="govuk-character-count">
-  {{ govukTextarea({
-    id: params.id,
-    name: params.name,
-    describedBy: params.id + '-info',
-    rows: params.rows,
-    spellcheck: params.spellcheck,
-    value: params.value,
-    formGroup: {
-      classes: params.formGroup.classes,
-      attributes: attributes
-    },
-    classes: 'govuk-js-character-count' + (' ' + params.classes if params.classes),
-    label: {
-      html: params.label.html,
-      text: params.label.text,
-      classes: params.label.classes,
-      isPageHeading: params.label.isPageHeading,
-      attributes: params.label.attributes,
-      for: params.id
-    },
-    hint: params.hint,
-    info: {
-      text: textareaDescriptionTextNoLimit,
-      id: params.id + '-info',
-      classes: 'govuk-character-count__message' + (' ' + params.countMessage.classes if params.countMessage.classes)
-    },
-    errorMessage: params.errorMessage,
-    attributes: params.attributes
-  }) }}
-</div>
+{{ govukTextarea({
+  id: params.id,
+  name: params.name,
+  describedBy: params.id + '-info',
+  rows: params.rows,
+  spellcheck: params.spellcheck,
+  value: params.value,
+  formGroup: {
+    classes: 'govuk-character-count' + (' ' + params.formGroup.classes if params.formGroup.classes),
+    attributes: attributes
+  },
+  classes: 'govuk-js-character-count' + (' ' + params.classes if params.classes),
+  label: {
+    html: params.label.html,
+    text: params.label.text,
+    classes: params.label.classes,
+    isPageHeading: params.label.isPageHeading,
+    attributes: params.label.attributes,
+    for: params.id
+  },
+  hint: params.hint,
+  info: {
+    text: textareaDescriptionTextNoLimit,
+    id: params.id + '-info',
+    classes: 'govuk-character-count__message' + (' ' + params.countMessage.classes if params.countMessage.classes)
+  },
+  errorMessage: params.errorMessage,
+  attributes: params.attributes
+}) }}