Update JavaScript API Reference for v5

source/configure-components/index.html.md.erb

@@ -19,7 +19,7 @@ If you're using the Nunjucks macros, you can read about [configuring a component
 
 ## Passing JavaScript configuration
 
-Read the [JavaScript API Reference](../javascript-api-reference/) for the configuration accepted by each component.
+Read the [JavaScript API Reference](../javascript-api-reference/) for the list of options in each component configuration.
 
 The examples below follow our recommended [Import JavaScript using a bundler](../importing-css-assets-and-javascript/#import-javascript-using-a-bundler) approach and demonstrate how to:
 
@@ -34,7 +34,7 @@ Component constructors accept two arguments:
 1. The HTML element that represents the component.
 2. An optional configuration object.
 
-Although component configuration objects are optional, configuration can still be provided or overridden by [HTML data attributes](#adding-html-data-attributes).
+Although JavaScript configuration objects are optional, configuration can still be provided or overridden by [HTML data attributes](#adding-html-data-attributes).
 
 To learn more about how configuration is passed from Nunjucks macros to HTML data attributes, see advanced examples in [the localisation options](../localise-govuk-frontend/).
 
@@ -74,13 +74,13 @@ new CharacterCount($element, {
 })
 ```
 
-Read the [JavaScript API Reference](../javascript-api-reference/) for the configuration accepted by each component.
+Read the [JavaScript API Reference](../javascript-api-reference/) for the list of options in each component configuration.
 
 ### Configure all components using the initAll function
 
 You can pass configuration for components when initialising GOV.UK Frontend using the `initAll` function.
 
-You can do this by including key-value pairs of camel-cased component names with their configuration object values:
+You can do this by including key-value pairs of camel-cased component names with their configuration options:
 
 ```javascript
 import { initAll } from 'govuk-frontend'
@@ -109,7 +109,7 @@ if ($element) {
 }
 ```
 
-Read the [JavaScript API Reference](../javascript-api-reference/) for the configuration accepted by `initAll`.
+Read the [JavaScript API Reference](../javascript-api-reference/) for the list of components in the `initAll` configuration.
 
 ### JavaScript errors in the browser console
 

source/javascript-api-reference/index.html.md.erb

@@ -5,32 +5,19 @@ weight: 80
 
 # JavaScript API Reference
 
-Some of our components can receive configuration options when you create an
-instance in JavaScript. This page lists the available options for these
-components. You can find further information on how to [configure these options
-in our guidance](../configure-components/).
+Some of our components can be passed JavaScript configuration objects. You can do it both:
 
-You can pass these options in an object either as:
+- [when configuring individual component instances](../configure-components/#with-configuration-object)
+- [when configuring all components using the `initAll` function](../configure-components/#configure-all-components-using-the-initall-function)
 
-- a second argument of the component's constructor
-- the value for the key of the component name in an object passed to `initAll`
+This page lists the options available for the following components:
 
-For example, to set the `preventDoubleClick` option of a button:
-
-```javascript
-import { Button, initAll } from 'govuk-frontend'
-
-// Creating a single instance
-const $button = document.querySelector('[data-module="button"]')
-new Button($button, { preventDoubleClick: true })
-
-// Or when using initAll
-initAll({
-  button: {
-    preventDoubleClick: true
-  }
-})
-```
+- [Accordion](#accordion)
+- [Button](#button)
+- [CharacterCount](#charactercount)
+- [ErrorSummary](#errorsummary)
+- [ExitThisPage](#exitthispage)
+- [NotificationBanner](#notificationbanner)
 
 ## Accordion