From bec848747f4bef51b2f033667cfc554afe56bb70 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Fri, 8 Dec 2023 12:46:42 +0000 Subject: [PATCH 1/5] =?UTF-8?q?Remove=20example=20from=20=E2=80=9CJavaScri?= =?UTF-8?q?pt=20API=20Reference=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../javascript-api-reference/index.html.md.erb | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/source/javascript-api-reference/index.html.md.erb b/source/javascript-api-reference/index.html.md.erb index 8102c8c5..307a741d 100644 --- a/source/javascript-api-reference/index.html.md.erb +++ b/source/javascript-api-reference/index.html.md.erb @@ -15,23 +15,6 @@ You can pass these options in an object either as: - a second argument of the component's constructor - the value for the key of the component name in an object passed to `initAll` -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 ### i18n From 6797ae6ed272ec22500b3e9bbbf8baae6189ac93 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Fri, 8 Dec 2023 12:47:16 +0000 Subject: [PATCH 2/5] =?UTF-8?q?Use=20configuration=20wording=20in=20?= =?UTF-8?q?=E2=80=9CJavaScript=20API=20Reference=E2=80=9D=20intro?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The two bullet points now share the wording used on “Configure components” --- source/javascript-api-reference/index.html.md.erb | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/source/javascript-api-reference/index.html.md.erb b/source/javascript-api-reference/index.html.md.erb index 307a741d..adc65da0 100644 --- a/source/javascript-api-reference/index.html.md.erb +++ b/source/javascript-api-reference/index.html.md.erb @@ -5,15 +5,10 @@ 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](../configure-components/#passing-javascript-configuration) objects as: -You can pass these options in an object either as: - -- a second argument of the component's constructor -- the value for the key of the component name in an object passed to `initAll` +- the second argument when configuring individual component instances +- the first argument when configuring all components using the `initAll` function ## Accordion From 8d5b5c4ba91aa9a625bfe8f8c831c1c3aebc998b Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Fri, 8 Dec 2023 12:47:45 +0000 Subject: [PATCH 3/5] =?UTF-8?q?Add=20links=20to=20components=20in=20?= =?UTF-8?q?=E2=80=9CJavaScript=20API=20Reference=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/javascript-api-reference/index.html.md.erb | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/source/javascript-api-reference/index.html.md.erb b/source/javascript-api-reference/index.html.md.erb index adc65da0..89ac3568 100644 --- a/source/javascript-api-reference/index.html.md.erb +++ b/source/javascript-api-reference/index.html.md.erb @@ -10,6 +10,15 @@ Some of our components can be [passed JavaScript configuration](../configure-com - the second argument when configuring individual component instances - the first argument when configuring all components using the `initAll` function +This page lists the options available for the following components: + +- [Accordion](#accordion) +- [Button](#button) +- [CharacterCount](#charactercount) +- [ErrorSummary](#errorsummary) +- [ExitThisPage](#exitthispage) +- [NotificationBanner](#notificationbanner) + ## Accordion ### i18n From 148adcbb05a490d8b2cc7d73b084e2bc31bb82ea Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Fri, 8 Dec 2023 12:57:24 +0000 Subject: [PATCH 4/5] Clarify that options make up a component configuration --- source/configure-components/index.html.md.erb | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/source/configure-components/index.html.md.erb b/source/configure-components/index.html.md.erb index 6b289d1f..dda9882a 100644 --- a/source/configure-components/index.html.md.erb +++ b/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 From 99ded26be6c7643ed73e581c0236d7ce1ff6484d Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Fri, 8 Dec 2023 13:45:09 +0000 Subject: [PATCH 5/5] Move links to bullet points Co-Authored-By: Romaric --- source/javascript-api-reference/index.html.md.erb | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/source/javascript-api-reference/index.html.md.erb b/source/javascript-api-reference/index.html.md.erb index 89ac3568..19e59ec5 100644 --- a/source/javascript-api-reference/index.html.md.erb +++ b/source/javascript-api-reference/index.html.md.erb @@ -5,10 +5,10 @@ weight: 80 # JavaScript API Reference -Some of our components can be [passed JavaScript configuration](../configure-components/#passing-javascript-configuration) objects as: +Some of our components can be passed JavaScript configuration objects. You can do it both: -- the second argument when configuring individual component instances -- the first argument when configuring all components using the `initAll` function +- [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) This page lists the options available for the following components: