Add getBreakpoint() to common utilities

Co-Authored-By: Romaric <romaric.pascal@digital.cabinet-office.gov.uk>
alphagov · Dec 15, 2023 · bf55711 · bf55711
1 parent 6b2da83
commit bf55711
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 15 deletions.
diff --git a/packages/govuk-frontend/src/govuk/common/index.mjs b/packages/govuk-frontend/src/govuk/common/index.mjs
@@ -133,6 +133,27 @@ export function getFragmentFromUrl(url) {
   return url.split('#').pop()
 }
 
+/**
+ * Get GOV.UK Frontend breakpoint value from CSS custom property
+ *
+ * @private
+ * @param {string} name - Breakpoint name
+ * @returns {{ property: string, value?: string }} Breakpoint object
+ */
+export function getBreakpoint(name) {
+  const property = `--govuk-frontend-breakpoint-${name}`
+
+  // Get value from `<html>` with breakpoints on CSS :root
+  const value = window
+    .getComputedStyle(document.documentElement)
+    .getPropertyValue(property)
+
+  return {
+    property,
+    value: value || undefined
+  }
+}
+
 /**
  * Checks if GOV.UK Frontend is supported on this page
  *

diff --git a/packages/govuk-frontend/src/govuk/components/header/header.mjs b/packages/govuk-frontend/src/govuk/components/header/header.mjs
@@ -1,3 +1,4 @@
+import { getBreakpoint } from '../../common/index.mjs'
 import { ElementError } from '../../errors/index.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 
@@ -96,20 +97,17 @@ export class Header extends GOVUKFrontendComponent {
    * @private
    */
   setupResponsiveChecks() {
-    const breakpointProperty = '--govuk-frontend-breakpoint-desktop'
-    const breakpointValue = window
-      .getComputedStyle(document.documentElement)
-      .getPropertyValue(breakpointProperty)
+    const breakpoint = getBreakpoint('desktop')
 
-    if (!breakpointValue) {
+    if (!breakpoint.value) {
       throw new ElementError({
         componentName: 'Header',
-        identifier: `CSS custom property (\`${breakpointProperty}\`)`
+        identifier: `CSS custom property (\`${breakpoint.property}\`)`
       })
     }
 
     // Media query list for GOV.UK Frontend desktop breakpoint
-    this.mql = window.matchMedia(`(min-width: ${breakpointValue})`)
+    this.mql = window.matchMedia(`(min-width: ${breakpoint.value})`)
 
     // 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
@@ -1,4 +1,4 @@
-import { getFragmentFromUrl } from '../../common/index.mjs'
+import { getBreakpoint, getFragmentFromUrl } from '../../common/index.mjs'
 import { ElementError } from '../../errors/index.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 
@@ -105,20 +105,17 @@ export class Tabs extends GOVUKFrontendComponent {
    * @private
    */
   setupResponsiveChecks() {
-    const breakpointProperty = '--govuk-frontend-breakpoint-tablet'
-    const breakpointValue = window
-      .getComputedStyle(document.documentElement)
-      .getPropertyValue(breakpointProperty)
+    const breakpoint = getBreakpoint('tablet')
 
-    if (!breakpointValue) {
+    if (!breakpoint.value) {
       throw new ElementError({
         componentName: 'Tabs',
-        identifier: `CSS custom property (\`${breakpointProperty}\`)`
+        identifier: `CSS custom property (\`${breakpoint.property}\`)`
       })
     }
 
     // Media query list for GOV.UK Frontend tablet breakpoint
-    this.mql = window.matchMedia(`(min-width: ${breakpointValue})`)
+    this.mql = window.matchMedia(`(min-width: ${breakpoint.value})`)
 
     // MediaQueryList.addEventListener isn't supported by Safari < 14 so we need
     // to be able to fall back to the deprecated MediaQueryList.addListener