From 191d5a06b2c2f28a3e7eb704f7458e74d0f4c054 Mon Sep 17 00:00:00 2001
From: Romaric <romaric.pascal@digital.cabinet-office.gov.uk>
Date: Tue, 18 Oct 2022 15:06:31 +0100
Subject: [PATCH 1/2] Add changelog entry for component's configuration

Entry covers multiple PRs and was missed when implementing the feature

Closes  #2885
---
 CHANGELOG.md | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fc01b8313c..1e7ba45c97 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -70,6 +70,43 @@ $govuk-suppressed-warnings: (
 
 This was added in [#2911 Add warning suppression functionality](https://github.com/alphagov/govuk-frontend/pull/2911)
 
+#### Configure components in JavaScript
+
+JavaScript components can get the same configuration options in 2 ways - through data attributes, as before, and now when creating an instance. These components are:
+
+- the `Button` component, for its `preventDoubleClick` option (matching `data-prevent-double-click`)
+- the `CharacterCount` component, for its `maxlength`,`maxwords` and `threshold` options (matching `data-maxlength`, `data-maxwords` and `data-threshold`, respectively)
+- the `ErrorSummary` component, for its `disableAutoFocus` option (matching `data-disable-auto-focus`)
+- the `NotificationBanner` component, for its `disableAutoFocus` option (matching `data-disable-auto-focus`)
+
+You can omit these configuration options when calling the Nunjucks macro and provide them:
+
+- at component instantiation, in a configuration object as second argument
+- when initialising components in bulk using `initAll`
+
+For example:
+
+```js
+// Creating a single instance
+var button = document.querySelector('[data-module="button"]')
+new GOVUKFrontend.Button(button, {preventDoubleClick: true})
+
+// Or initialising components in bulk
+GOVUKFrontend.initAll({
+  button: {
+    preventDoubleClick: true
+  }
+  // Or, for the other components,
+  // characterCount: {/* options */},
+  // errorSummary: {/* options */},
+  // notificationBanner: {/* options */}
+})
+```
+
+You can find more information about component configuration in [GOV.UK Frontend documentation](https://design-system.service.gov.uk/get-started/configuration/).
+
+This was added in pull requests specific for each components: [NotificationBanner – #2843](https://github.com/alphagov/govuk-frontend/pull/2843), [ErrorSumarry – #2854](https://github.com/alphagov/govuk-frontend/pull/2854), [Button – #2867](https://github.com/alphagov/govuk-frontend/pull/2867), and [CharacterCount – #2883](https://github.com/alphagov/govuk-frontend/pull/2883)
+
 ### Recommended changes
 
 #### Remove `aria-labelledby`, remove `id="error-summary-title"` from title and move `role="alert"` to child container on the error summary component

From 81d9ef08726b43104bc6e2012da75e3d54976dd3 Mon Sep 17 00:00:00 2001
From: Romaric Pascal <hello@romaricpascal.is>
Date: Mon, 24 Oct 2022 09:54:30 +0100
Subject: [PATCH 2/2] Apply suggestions from code review

Co-authored-by: CAAshworth <claire.ashworth@digital.cabinet-office.gov.uk>
---
 CHANGELOG.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1e7ba45c97..1812945c91 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -79,10 +79,10 @@ JavaScript components can get the same configuration options in 2 ways - through
 - the `ErrorSummary` component, for its `disableAutoFocus` option (matching `data-disable-auto-focus`)
 - the `NotificationBanner` component, for its `disableAutoFocus` option (matching `data-disable-auto-focus`)
 
-You can omit these configuration options when calling the Nunjucks macro and provide them:
+You can leave out these configuration options when using the Nunjucks macro and provide configuration when:
 
-- at component instantiation, in a configuration object as second argument
-- when initialising components in bulk using `initAll`
+- creating a component, in a configuration object as second argument
+- initialising components in bulk using `initAll`
 
 For example: