Use CSS custom properties in component matchMedia()

This change ensures services that override `$govuk-breakpoints` see Tabs and Header media query breakpoints align with the overridden Sass breakpoint values
alphagov · Dec 14, 2023 · b64490f · b64490f
1 parent 0a242c0
commit b64490f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/header/header.mjs b/packages/govuk-frontend/src/govuk/components/header/header.mjs
@@ -96,8 +96,12 @@ export class Header extends GOVUKFrontendComponent {
    * @private
    */
   setupResponsiveChecks() {
-    // Set the matchMedia to the govuk-frontend desktop breakpoint
-    this.mql = window.matchMedia('(min-width: 48.0625em)')
+    const breakpointValue = getComputedStyle(document.body).getPropertyValue(
+      '--govuk-frontend-breakpoint-desktop'
+    )
+
+    // Media query list for GOV.UK Frontend desktop breakpoint
+    this.mql = window.matchMedia(`(min-width: ${breakpointValue})`)
 
     // MediaQueryList.addEventListener isn't supported by Safari < 14 so we need
     // to be able to fall back to the deprecated MediaQueryList.addListener

diff --git a/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs b/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs
@@ -105,7 +105,12 @@ export class Tabs extends GOVUKFrontendComponent {
    * @private
    */
   setupResponsiveChecks() {
-    this.mql = window.matchMedia('(min-width: 40.0625em)')
+    const breakpointValue = getComputedStyle(document.body).getPropertyValue(
+      '--govuk-frontend-breakpoint-tablet'
+    )
+
+    // Media query list for GOV.UK Frontend tablet breakpoint
+    this.mql = window.matchMedia(`(min-width: ${breakpointValue})`)
 
     // MediaQueryList.addEventListener isn't supported by Safari < 14 so we need
     // to be able to fall back to the deprecated MediaQueryList.addListener