What
Create a public API so that custom components can easily observe a MediaQueryList matching one of GOV.UK Frontend's breakpoints.
Proposed shape is two functions, in something like a common/breakpoints module (name up for change):
- Make the current
getBreakpoints function public with a couple of tweaks:
a. move the error throwing currently do from the components into the function
b. this will allow to simplify the return value of the function to a string (never undefined as we'd throw if it is)
c. cache the reading of the custom property from document.documentElement so we don't call getComputedProperties each time we need
- Add a new
matchMedia(breakpointName, callback) function (or better suited name) to replace the setupResponsiveChecks from the Tabs and ServiceNavigation components.
a. the function is responsible for creating a MediaQueryList observing a min-width media query for a given breakpoint, like the setupResponsiveChecks currently do, allowing components to pass in a callback that will be run when the media query is created and when there's change of whether the media query matches
b. callback should receive either the whole MediaQueryList so it can react to whether the list matches or not
Once those are in, use the new matchMedia function in our components so they don't need to create and store a MediaQueryList themselves and update their checkSupported static method so it checks the presence of the breakpoints and prevent initialisation of components.
Why
It's a bit of logistics to read the breakpoint values from the DOM, throw errors and prevent component initialisation, and it's the same for both our responsive components and the mobile navigation on the Design System site.
Who needs to work on this
Developers
Who needs to review this
Developers
Done when
What
Create a public API so that custom components can easily observe a MediaQueryList matching one of GOV.UK Frontend's breakpoints.
Proposed shape is two functions, in something like a
common/breakpointsmodule (name up for change):getBreakpointsfunction public with a couple of tweaks:a. move the error throwing currently do from the components into the function
b. this will allow to simplify the return value of the function to a string (never undefined as we'd throw if it is)
c. cache the reading of the custom property from
document.documentElementso we don't callgetComputedPropertieseach time we needmatchMedia(breakpointName, callback)function (or better suited name) to replace thesetupResponsiveChecksfrom the Tabs and ServiceNavigation components.a. the function is responsible for creating a MediaQueryList observing a
min-widthmedia query for a given breakpoint, like thesetupResponsiveCheckscurrently do, allowing components to pass in a callback that will be run when the media query is created and when there's change of whether the media query matchesb. callback should receive either the whole MediaQueryList so it can react to whether the list matches or not
Once those are in, use the new
matchMediafunction in our components so they don't need to create and store a MediaQueryList themselves and update theircheckSupportedstatic method so it checks the presence of the breakpoints and prevent initialisation of components.Why
It's a bit of logistics to read the breakpoint values from the DOM, throw errors and prevent component initialisation, and it's the same for both our responsive components and the mobile navigation on the Design System site.
Who needs to work on this
Developers
Who needs to review this
Developers
Done when
checkSupportedmethod has been updatedsetupResponsiveChecksmethod has been replaced