diff --git a/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs b/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs index 8460784d11..839eaae053 100644 --- a/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs +++ b/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs @@ -15,107 +15,125 @@ import { I18n } from '../../i18n.mjs' * attribute, which also provides accessibility. */ export class Accordion { + /** @private */ + $module + /** - * @param {Element} $module - HTML element to use for accordion - * @param {AccordionConfig} [config] - Accordion config + * @private + * @type {AccordionConfig} */ - constructor ($module, config) { - if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) { - return this - } + config - /** @private */ - this.$module = $module + /** @private */ + i18n - /** - * @private - * @type {AccordionConfig} - */ - this.config = mergeConfigs( - Accordion.defaults, - config || {}, - normaliseDataset($module.dataset) - ) + /** @private */ + controlsClass = 'govuk-accordion__controls' - /** @private */ - this.i18n = new I18n(extractConfigByNamespace(this.config, 'i18n')) + /** @private */ + showAllClass = 'govuk-accordion__show-all' - /** @private */ - this.controlsClass = 'govuk-accordion__controls' + /** @private */ + showAllTextClass = 'govuk-accordion__show-all-text' - /** @private */ - this.showAllClass = 'govuk-accordion__show-all' + /** @private */ + sectionClass = 'govuk-accordion__section' - /** @private */ - this.showAllTextClass = 'govuk-accordion__show-all-text' + /** @private */ + sectionExpandedClass = 'govuk-accordion__section--expanded' - /** @private */ - this.sectionClass = 'govuk-accordion__section' + /** @private */ + sectionButtonClass = 'govuk-accordion__section-button' - /** @private */ - this.sectionExpandedClass = 'govuk-accordion__section--expanded' + /** @private */ + sectionHeaderClass = 'govuk-accordion__section-header' - /** @private */ - this.sectionButtonClass = 'govuk-accordion__section-button' + /** @private */ + sectionHeadingClass = 'govuk-accordion__section-heading' - /** @private */ - this.sectionHeaderClass = 'govuk-accordion__section-header' + /** @private */ + sectionHeadingDividerClass = 'govuk-accordion__section-heading-divider' - /** @private */ - this.sectionHeadingClass = 'govuk-accordion__section-heading' + /** @private */ + sectionHeadingTextClass = 'govuk-accordion__section-heading-text' - /** @private */ - this.sectionHeadingDividerClass = 'govuk-accordion__section-heading-divider' + /** @private */ + sectionHeadingTextFocusClass = 'govuk-accordion__section-heading-text-focus' - /** @private */ - this.sectionHeadingTextClass = 'govuk-accordion__section-heading-text' + /** @private */ + sectionShowHideToggleClass = 'govuk-accordion__section-toggle' - /** @private */ - this.sectionHeadingTextFocusClass = 'govuk-accordion__section-heading-text-focus' + /** @private */ + sectionShowHideToggleFocusClass = 'govuk-accordion__section-toggle-focus' - /** @private */ - this.sectionShowHideToggleClass = 'govuk-accordion__section-toggle' + /** @private */ + sectionShowHideTextClass = 'govuk-accordion__section-toggle-text' - /** @private */ - this.sectionShowHideToggleFocusClass = 'govuk-accordion__section-toggle-focus' + /** @private */ + upChevronIconClass = 'govuk-accordion-nav__chevron' - /** @private */ - this.sectionShowHideTextClass = 'govuk-accordion__section-toggle-text' + /** @private */ + downChevronIconClass = 'govuk-accordion-nav__chevron--down' - /** @private */ - this.upChevronIconClass = 'govuk-accordion-nav__chevron' + /** @private */ + sectionSummaryClass = 'govuk-accordion__section-summary' - /** @private */ - this.downChevronIconClass = 'govuk-accordion-nav__chevron--down' + /** @private */ + sectionSummaryFocusClass = 'govuk-accordion__section-summary-focus' - /** @private */ - this.sectionSummaryClass = 'govuk-accordion__section-summary' + /** @private */ + sectionContentClass = 'govuk-accordion__section-content' - /** @private */ - this.sectionSummaryFocusClass = 'govuk-accordion__section-summary-focus' + /** @private */ + $sections - /** @private */ - this.sectionContentClass = 'govuk-accordion__section-content' + /** @private */ + browserSupportsSessionStorage = false - const $sections = this.$module.querySelectorAll(`.${this.sectionClass}`) - if (!$sections.length) { + /** + * @private + * @type {HTMLButtonElement | null} + */ + $showAllButton = null + + /** + * @private + * @type {HTMLSpanElement | null} + */ + $showAllIcon = null + + /** + * @private + * @type {HTMLSpanElement | null} + */ + $showAllText = null + + /** + * @param {Element} $module - HTML element to use for accordion + * @param {AccordionConfig} [config] - Accordion config + */ + constructor ($module, config) { + if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) { return this } - /** @private */ - this.$sections = $sections + this.$module = $module - /** @private */ - this.browserSupportsSessionStorage = helper.checkForSessionStorage() + this.config = mergeConfigs( + Accordion.defaults, + config || {}, + normaliseDataset($module.dataset) + ) - /** @private */ - this.$showAllButton = null + this.i18n = new I18n(extractConfigByNamespace(this.config, 'i18n')) - /** @private */ - this.$showAllIcon = null + const $sections = this.$module.querySelectorAll(`.${this.sectionClass}`) + if (!$sections.length) { + return this + } - /** @private */ - this.$showAllText = null + this.$sections = $sections + this.browserSupportsSessionStorage = helper.checkForSessionStorage() } /** diff --git a/packages/govuk-frontend/src/govuk/components/button/button.mjs b/packages/govuk-frontend/src/govuk/components/button/button.mjs index daba236832..99af1fbef9 100644 --- a/packages/govuk-frontend/src/govuk/components/button/button.mjs +++ b/packages/govuk-frontend/src/govuk/components/button/button.mjs @@ -8,6 +8,21 @@ const DEBOUNCE_TIMEOUT_IN_SECONDS = 1 * JavaScript enhancements for the Button component */ export class Button { + /** @private */ + $module + + /** + * @private + * @type {ButtonConfig} + */ + config + + /** + * @private + * @type {number | null} + */ + debounceFormSubmitTimer = null + /** * * @param {Element} $module - HTML element to use for button @@ -18,16 +33,8 @@ export class Button { return this } - /** @private */ this.$module = $module - /** @private */ - this.debounceFormSubmitTimer = null - - /** - * @private - * @type {ButtonConfig} - */ this.config = mergeConfigs( Button.defaults, config || {}, diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs b/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs index a8b01bdf03..203a201c06 100644 --- a/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs +++ b/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs @@ -14,6 +14,51 @@ import { I18n } from '../../i18n.mjs' * of the available characters/words has been entered. */ export class CharacterCount { + /** @private */ + $module + + /** @private */ + $textarea + + /** + * @private + * @type {HTMLDivElement | null} + */ + $visibleCountMessage = null + + /** + * @private + * @type {HTMLDivElement | null} + */ + $screenReaderCountMessage = null + + /** + * @private + * @type {number | null} + */ + lastInputTimestamp = null + + /** @private */ + lastInputValue = '' + + /** + * @private + * @type {number | null} + */ + valueChecker = null + + /** + * @private + * @type {CharacterCountConfig} + */ + config + + /** @private */ + i18n + + /** @private */ + maxLength = Infinity + /** * @param {Element} $module - HTML element to use for character count * @param {CharacterCountConfig} [config] - Character count config @@ -51,10 +96,6 @@ export class CharacterCount { } } - /** - * @private - * @type {CharacterCountConfig} - */ this.config = mergeConfigs( CharacterCount.defaults, config || {}, @@ -62,14 +103,11 @@ export class CharacterCount { datasetConfig ) - /** @private */ this.i18n = new I18n(extractConfigByNamespace(this.config, 'i18n'), { // Read the fallback if necessary rather than have it set in the defaults locale: closestAttributeValue($module, 'lang') }) - /** @private */ - this.maxLength = Infinity // Determine the limit attribute (characters or words) if ('maxwords' in this.config && this.config.maxwords) { this.maxLength = this.config.maxwords @@ -79,26 +117,8 @@ export class CharacterCount { return this } - /** @private */ this.$module = $module - - /** @private */ this.$textarea = $textarea - - /** @private */ - this.$visibleCountMessage = null - - /** @private */ - this.$screenReaderCountMessage = null - - /** @private */ - this.lastInputTimestamp = null - - /** @private */ - this.lastInputValue = '' - - /** @private */ - this.valueChecker = null } /** diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs index 8b4a6b1767..48298a6985 100644 --- a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs +++ b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs @@ -2,6 +2,12 @@ * Checkboxes component */ export class Checkboxes { + /** @private */ + $module + + /** @private */ + $inputs + /** * @param {Element} $module - HTML element to use for checkboxes */ @@ -16,10 +22,7 @@ export class Checkboxes { return this } - /** @private */ this.$module = $module - - /** @private */ this.$inputs = $inputs } diff --git a/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs b/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs index 6359ad20d6..56459579d3 100644 --- a/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs +++ b/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs @@ -7,6 +7,15 @@ import { normaliseDataset } from '../../common/normalise-dataset.mjs' * Takes focus on initialisation for accessible announcement, unless disabled in configuration. */ export class ErrorSummary { + /** @private */ + $module + + /** + * @private + * @type {ErrorSummaryConfig} + */ + config + /** * * @param {Element} $module - HTML element to use for error summary @@ -24,13 +33,8 @@ export class ErrorSummary { return this } - /** @private */ this.$module = $module - /** - * @private - * @type {ErrorSummaryConfig} - */ this.config = mergeConfigs( ErrorSummary.defaults, config || {}, diff --git a/packages/govuk-frontend/src/govuk/components/header/header.mjs b/packages/govuk-frontend/src/govuk/components/header/header.mjs index a25e598f67..803b028c74 100644 --- a/packages/govuk-frontend/src/govuk/components/header/header.mjs +++ b/packages/govuk-frontend/src/govuk/components/header/header.mjs @@ -2,6 +2,35 @@ * Header component */ export class Header { + /** @private */ + $module + + /** @private */ + $menuButton + + /** @private */ + $menu + + /** + * Save the opened/closed state for the nav in memory so that we can + * accurately maintain state when the screen is changed from small to + * big and back to small + * + * @private + */ + menuIsOpen = false + + /** + * A global const for storing a matchMedia instance which we'll use to + * detect when a screen size change happens. We set this later during the + * init function and rely on it being null if the feature isn't available + * to initially apply hidden attributes + * + * @private + * @type {MediaQueryList | null} + */ + mql = null + /** * @param {Element} $module - HTML element to use for header */ @@ -10,35 +39,11 @@ export class Header { return this } - /** @private */ this.$module = $module - - /** @private */ this.$menuButton = $module.querySelector('.govuk-js-header-toggle') - - /** @private */ this.$menu = this.$menuButton && $module.querySelector( `#${this.$menuButton.getAttribute('aria-controls')}` ) - - /** - * Save the opened/closed state for the nav in memory so that we can - * accurately maintain state when the screen is changed from small to - * big and back to small - * - * @private - */ - this.menuIsOpen = false - - /** - * A global const for storing a matchMedia instance which we'll use to - * detect when a screen size change happens. We set this later during the - * init function and rely on it being null if the feature isn't available - * to initially apply hidden attributes - * - * @private - */ - this.mql = null } /** diff --git a/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs b/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs index 81a946ea87..7fdee3ac74 100644 --- a/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs +++ b/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs @@ -5,6 +5,15 @@ import { normaliseDataset } from '../../common/normalise-dataset.mjs' * Notification Banner component */ export class NotificationBanner { + /** @private */ + $module + + /** + * @private + * @type {NotificationBannerConfig} + */ + config + /** * @param {Element} $module - HTML element to use for notification banner * @param {NotificationBannerConfig} [config] - Notification banner config @@ -14,13 +23,8 @@ export class NotificationBanner { return this } - /** @private */ this.$module = $module - /** - * @private - * @type {NotificationBannerConfig} - */ this.config = mergeConfigs( NotificationBanner.defaults, config || {}, diff --git a/packages/govuk-frontend/src/govuk/components/radios/radios.mjs b/packages/govuk-frontend/src/govuk/components/radios/radios.mjs index e95ad436ba..52576d0364 100644 --- a/packages/govuk-frontend/src/govuk/components/radios/radios.mjs +++ b/packages/govuk-frontend/src/govuk/components/radios/radios.mjs @@ -2,6 +2,12 @@ * Radios component */ export class Radios { + /** @private */ + $module + + /** @private */ + $inputs + /** * @param {Element} $module - HTML element to use for radios */ @@ -16,10 +22,7 @@ export class Radios { return this } - /** @private */ this.$module = $module - - /** @private */ this.$inputs = $inputs } diff --git a/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.mjs b/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.mjs index ec06ddd48e..392ee15472 100644 --- a/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.mjs +++ b/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.mjs @@ -2,6 +2,18 @@ * Skip link component */ export class SkipLink { + /** @private */ + $module + + /** + * @private + * @type {HTMLElement | null} + */ + $linkedElement = null + + /** @private */ + linkedElementListener = false + /** * * @param {Element} $module - HTML element to use for skip link @@ -11,13 +23,7 @@ export class SkipLink { return this } - /** @private */ this.$module = $module - - /** @private */ - this.$linkedElement = null - - /** @private */ this.linkedElementListener = false } diff --git a/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs b/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs index 5ff7fc800e..b59348144b 100644 --- a/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs +++ b/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs @@ -2,6 +2,30 @@ * Tabs component */ export class Tabs { + /** @private */ + $module + + /** @private */ + $tabs + + /** @private */ + keys = { left: 37, right: 39, up: 38, down: 40 } + + /** @private */ + jsHiddenClass = 'govuk-tabs__panel--hidden' + + /** @private */ + changingHash = false + + /** @private */ + boundTabClick + + /** @private */ + boundTabKeydown + + /** @private */ + boundOnHashChange + /** * @param {Element} $module - HTML element to use for tabs */ @@ -16,31 +40,13 @@ export class Tabs { return this } - /** @private */ this.$module = $module - - /** @private */ this.$tabs = $tabs - /** @private */ - this.keys = { left: 37, right: 39, up: 38, down: 40 } - - /** @private */ - this.jsHiddenClass = 'govuk-tabs__panel--hidden' - // Save bounded functions to use when removing event listeners during teardown - - /** @private */ this.boundTabClick = this.onTabClick.bind(this) - - /** @private */ this.boundTabKeydown = this.onTabKeydown.bind(this) - - /** @private */ this.boundOnHashChange = this.onHashChange.bind(this) - - /** @private */ - this.changingHash = false } /** diff --git a/packages/govuk-frontend/src/govuk/i18n.mjs b/packages/govuk-frontend/src/govuk/i18n.mjs index 792ec08e17..eb922ee142 100644 --- a/packages/govuk-frontend/src/govuk/i18n.mjs +++ b/packages/govuk-frontend/src/govuk/i18n.mjs @@ -5,6 +5,9 @@ * @private */ export class I18n { + translations + locale + /** * @param {{ [key: string]: unknown }} translations - Key-value pairs of the translation strings to use. * @param {object} [config] - Configuration options for the function.