From 106be1f734252724fcd9b5cdea6f02710dd999f9 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 5 Jun 2018 15:24:12 +0100 Subject: [PATCH 1/3] Wrap sass-mq MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ‘Abstract away’ sass-mq so that we don’t expose it as part of our public API, which means we’d be able to remove it in the future if we wanted to roll our own or move to a different vendored solution. --- src/components/button/_button.scss | 2 +- .../error-summary/_error-summary.scss | 2 +- src/components/header/_header.scss | 2 +- src/components/panel/_panel.scss | 2 +- src/core/_lists.scss | 2 +- src/core/_typography.scss | 6 +- src/helpers/_grid.scss | 2 +- src/helpers/_links.scss | 2 +- src/helpers/_media-queries.scss | 72 ++++- src/helpers/_spacing.scss | 2 +- src/helpers/_typography.scss | 8 +- src/helpers/media-queries.test.js | 195 +++++++++++ src/objects/_width-container.scss | 4 +- src/overrides/_width.scss | 10 +- src/vendor/sass-mq.test.js | 303 ------------------ 15 files changed, 286 insertions(+), 328 deletions(-) create mode 100644 src/helpers/media-queries.test.js delete mode 100644 src/vendor/sass-mq.test.js diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index 689016f7ce..8c28cf4d31 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -43,7 +43,7 @@ border-bottom: $button-shadow-size solid $govuk-button-shadow-colour; } - @include mq($from: tablet) { + @include govuk-media-query($from: tablet) { width: auto; } diff --git a/src/components/error-summary/_error-summary.scss b/src/components/error-summary/_error-summary.scss index 2991bb844c..226e9fecf6 100644 --- a/src/components/error-summary/_error-summary.scss +++ b/src/components/error-summary/_error-summary.scss @@ -14,7 +14,7 @@ border: $govuk-border-width-mobile solid $govuk-error-colour; - @include mq($from: tablet) { + @include govuk-media-query($from: tablet) { border: $govuk-border-width solid $govuk-error-colour; } } diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss index ea1a35f801..946566eb79 100644 --- a/src/components/header/_header.scss +++ b/src/components/header/_header.scss @@ -237,7 +237,7 @@ margin-right: 0; } - @include mq($media-type: print) { + @include govuk-media-query($media-type: print) { .govuk-header { border-bottom-width: 0; color: $govuk-black; diff --git a/src/components/panel/_panel.scss b/src/components/panel/_panel.scss index e1d0c4b97e..27026ad9e2 100644 --- a/src/components/panel/_panel.scss +++ b/src/components/panel/_panel.scss @@ -16,7 +16,7 @@ text-align: center; - @include mq($until: tablet) { + @include govuk-media-query($until: tablet) { padding: $govuk-spacing-scale-6 - $govuk-border-width; } } diff --git a/src/core/_lists.scss b/src/core/_lists.scss index 8c3a1b7675..41e5c461a8 100644 --- a/src/core/_lists.scss +++ b/src/core/_lists.scss @@ -19,7 +19,7 @@ } %govuk-list > li { - @include mq($from: tablet) { + @include govuk-media-query($from: tablet) { margin-bottom: $govuk-spacing-scale-1; } } diff --git a/src/core/_typography.scss b/src/core/_typography.scss index 1073970b5f..c50bc57c9c 100644 --- a/src/core/_typography.scss +++ b/src/core/_typography.scss @@ -85,7 +85,7 @@ margin-bottom: $govuk-spacing-scale-1; color: $govuk-secondary-text-colour; - @include mq($from: tablet) { + @include govuk-media-query($from: tablet) { margin-bottom: 0; } } @@ -171,7 +171,7 @@ %govuk-body-l + %govuk-heading-l { padding-top: $govuk-spacing-scale-1; - @include mq($from: tablet) { + @include govuk-media-query($from: tablet) { padding-top: $govuk-spacing-scale-2; } } @@ -190,7 +190,7 @@ %govuk-list + %govuk-heading-s { padding-top: $govuk-spacing-scale-1; - @include mq($from: tablet) { + @include govuk-media-query($from: tablet) { padding-top: $govuk-spacing-scale-2; } } diff --git a/src/helpers/_grid.scss b/src/helpers/_grid.scss index a78afa1753..f1fc6f96f8 100644 --- a/src/helpers/_grid.scss +++ b/src/helpers/_grid.scss @@ -91,7 +91,7 @@ $_govuk-grid-widths: ( width: 100%; } padding: 0 $govuk-gutter-half; - @include mq($from: $at) { + @include govuk-media-query($from: $at) { width: grid-width($width); float: $float; } diff --git a/src/helpers/_links.scss b/src/helpers/_links.scss index c886a8102e..f09b03a4f7 100644 --- a/src/helpers/_links.scss +++ b/src/helpers/_links.scss @@ -130,7 +130,7 @@ /// @access public @mixin govuk-link-print-friendly { - @include mq($media-type: print) { + @include govuk-media-query($media-type: print) { &[href^="/"], &[href^="http://"], diff --git a/src/helpers/_media-queries.scss b/src/helpers/_media-queries.scss index edf7fc4845..0f2e25383d 100644 --- a/src/helpers/_media-queries.scss +++ b/src/helpers/_media-queries.scss @@ -1,4 +1,12 @@ -// Import sass-mq as a helper for media queries +//// +/// @group helpers +//// + + + +// ========================================================= +// Wrangle sass-mq config... +// ========================================================= // Pass our breakpoints and static breakpoint definitions through to sass-mq. $mq-breakpoints: if(variable-exists(govuk-breakpoints), $govuk-breakpoints, ()); @@ -13,10 +21,9 @@ $mq-show-breakpoints: (); // When building a stylesheet for IE8, set $mq-responsive to false in order to // 'rasterize' any media queries. +$mq-responsive: true; @if (variable-exists(govuk-is-ie8) and $govuk-is-ie8) { $mq-responsive: false; -} @else { - $mq-responsive: true; } // This is a horrible, horrible hack to prevent the 'dev mode' CSS to display @@ -33,3 +40,62 @@ $sass-mq-already-included: false !default; @import "../vendor/sass-mq"; $sass-mq-already-included: true; + + + +// ========================================================= +// Helpers +// ========================================================= + +/// Media Query +/// +/// This is a currently a wrapper for sass-mq - abstracted so that we can +/// replace it in the future if we so choose. +/// +/// @param {String | Boolean} $from [false] - One of $govuk-breakpoints +/// @param {String | Boolean} $until [false] - One of $govuk-breakpoints +/// @param {String | Boolean} $and [false] - Additional media query parameters +/// @param {String} $media-type [all] - Media type: screen, print… +/// +/// @ignore Undocumented API, for advanced use only: +/// @ignore @param {Map} $breakpoints [$govuk-breakpoints] +/// @ignore @param {String} $static-breakpoint [$govuk-ie8-breakpoint] +/// @ignore @param {Boolean} $responsive [$govuk-is-ie8] +/// +/// @content styling rules, wrapped into a @media query when $responsive is true +/// +/// @example scss +/// .element { +/// @include govuk-media-query($from: mobile) { +/// color: red; +/// } +/// @include govuk-media-query($until: tablet) { +/// color: blue; +/// } +/// @include govuk-media-query(mobile, tablet) { +/// color: green; +/// } +/// @include govuk-media-query($from: tablet, $and: '(orientation: landscape)') { +/// color: teal; +/// } +/// @include govuk-media-query(950px) { +/// color: hotpink; +/// } +/// @include govuk-media-query(tablet, $media-type: screen) { +/// color: hotpink; +/// } +/// +/// @example scss Advanced use: +/// $my-breakpoints: (L: 900px, XL: 1200px); +/// @include govuk-media-query(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) { +/// color: hotpink; +/// } +/// } +/// +/// @access public + +@mixin govuk-media-query($args...) { + @include mq($args...) { + @content; + }; +} diff --git a/src/helpers/_spacing.scss b/src/helpers/_spacing.scss index d6b28459ad..4b3984c615 100644 --- a/src/helpers/_spacing.scss +++ b/src/helpers/_spacing.scss @@ -45,7 +45,7 @@ #{$property}-#{$direction}: $breakpoint-value iff($important, !important); } } @else { - @include mq($from: $breakpoint) { + @include govuk-media-query($from: $breakpoint) { @if $direction == all { #{$property}: $breakpoint-value iff($important, !important); } @else { diff --git a/src/helpers/_typography.scss b/src/helpers/_typography.scss index c3c359c53a..f50848c9c4 100644 --- a/src/helpers/_typography.scss +++ b/src/helpers/_typography.scss @@ -20,7 +20,7 @@ @include _govuk-font-face-nta; } - @include mq($media-type: print) { + @include govuk-media-query($media-type: print) { font-family: $govuk-font-family-print; } } @@ -34,7 +34,7 @@ @mixin govuk-text-colour { color: $govuk-text-colour; - @include mq($media-type: print) { + @include govuk-media-query($media-type: print) { color: $govuk-print-text-colour; } } @@ -112,12 +112,12 @@ font-size: $font-size; line-height: $line-height; } @elseif $breakpoint == "print" { - @include mq($media-type: print) { + @include govuk-media-query($media-type: print) { font-size: $font-size; line-height: $line-height; } } @else { - @include mq($from: $breakpoint) { + @include govuk-media-query($from: $breakpoint) { font-size: $font-size; line-height: $line-height; } diff --git a/src/helpers/media-queries.test.js b/src/helpers/media-queries.test.js new file mode 100644 index 0000000000..324debbdb9 --- /dev/null +++ b/src/helpers/media-queries.test.js @@ -0,0 +1,195 @@ +/* eslint-env jest */ + +const util = require('util') + +const configPaths = require('../../config/paths.json') + +const sass = require('node-sass') +const sassRender = util.promisify(sass.render) + +const sassConfig = { + includePaths: [ configPaths.src ], + outputStyle: 'compressed' +} + +const sassBootstrap = ` + $govuk-breakpoints: ( + mobile: 320px, + tablet: 740px, + desktop: 980px, + wide: 1300px + ); +` + +describe('@mixin govuk-media-query', () => { + it('allows you to target min-width using a numeric value', async() => { + const sass = ` + @import "helpers/media-queries"; + + .foo { + @include govuk-media-query($from: 20em) { + color: red; + } + }` + + const results = await sassRender({ data: sass, ...sassConfig }) + + expect(results.css.toString().trim()).toBe('@media (min-width: 20em){.foo{color:red}}') + }) + + it('allows you to target min-width using a predefined breakpoint', async() => { + const sass = ` + ${sassBootstrap} + @import "helpers/media-queries"; + + .foo { + @include govuk-media-query($from: mobile) { + color: red; + } + }` + + const results = await sassRender({ data: sass, ...sassConfig }) + + expect(results.css.toString().trim()).toBe('@media (min-width: 20em){.foo{color:red}}') + }) + + it('allows you to target max-width using a numeric value', async() => { + const sass = ` + @import "helpers/media-queries"; + + .foo { + @include govuk-media-query($until: 20em) { + color: red; + } + }` + + const results = await sassRender({ data: sass, ...sassConfig }) + + expect(results.css.toString().trim()).toBe('@media (max-width: 20em){.foo{color:red}}') + }) + + it('allows you to target max-width using a predefined breakpoint', async() => { + const sass = ` + ${sassBootstrap} + @import "helpers/media-queries"; + + .foo { + @include govuk-media-query($until: desktop) { + color: red; + } + }` + + const results = await sassRender({ data: sass, ...sassConfig }) + + expect(results.css.toString().trim()).toBe('@media (max-width: 61.24em){.foo{color:red}}') + }) + + it('allows you to target combined min-width and max-width using numeric values', async() => { + const sass = ` + @import "helpers/media-queries"; + + .foo { + @include govuk-media-query($from: 20em, $until: 40em) { + color: red; + } + }` + + const results = await sassRender({ data: sass, ...sassConfig }) + + expect(results.css.toString().trim()).toBe('@media (min-width: 20em) and (max-width: 40em){.foo{color:red}}') + }) + + it('allows you to target combined min-width and max-width using predefined breakpoints', async() => { + const sass = ` + ${sassBootstrap} + @import "helpers/media-queries"; + + .foo { + @include govuk-media-query($from: mobile, $until: tablet) { + color: red; + } + }` + + const results = await sassRender({ data: sass, ...sassConfig }) + + expect(results.css.toString().trim()).toBe('@media (min-width: 20em) and (max-width: 46.24em){.foo{color:red}}') + }) + + it('allows you to target using custom directives', async() => { + const sass = ` + @import "helpers/media-queries"; + + .foo { + @include govuk-media-query($until: 40em, $and: '(orientation: landscape)') { + color: red; + } + }` + + const results = await sassRender({ data: sass, ...sassConfig }) + + expect(results.css.toString().trim()).toBe('@media (max-width: 40em) and (orientation: landscape){.foo{color:red}}') + }) + + it('allows you to target particular media types', async() => { + const sass = ` + @import "helpers/media-queries"; + + .foo { + @include govuk-media-query($until: 40em, $media-type: 'aural') { + color: red; + } + }` + + const results = await sassRender({ data: sass, ...sassConfig }) + + expect(results.css.toString().trim()).toBe('@media aural and (max-width: 40em){.foo{color:red}}') + }) + + describe('when compiling a rasterized stylesheet for IE8', () => { + it('only outputs static breakpoint styles', async() => { + const sass = ` + $govuk-is-ie8: true; + + $govuk-breakpoints: ( + mobile: 320px, + tablet: 740px, + desktop: 980px, + wide: 1300px + ); + + @import "helpers/media-queries"; + + .foo { + @include govuk-media-query($until: tablet) { + color: lawngreen; + } + @include govuk-media-query($from: desktop) { + color: forestgreen; + } + }` + + const results = await sassRender({ data: sass, ...sassConfig }) + + expect(results.css.toString().trim()).toBe('.foo{color:forestgreen}') + }) + + it('does not rasterize print queries', async() => { + const sass = ` + ${sassBootstrap} + $govuk-is-ie8: true; + + @import "helpers/media-queries"; + + .foo { + color: blue; + @include govuk-media-query($media-type: 'print') { + color: red; + } + }` + + const results = await sassRender({ data: sass, ...sassConfig }) + + expect(results.css.toString().trim()).toBe('.foo{color:blue}') + }) + }) +}) diff --git a/src/objects/_width-container.scss b/src/objects/_width-container.scss index 1160915570..f97d8e798d 100644 --- a/src/objects/_width-container.scss +++ b/src/objects/_width-container.scss @@ -10,13 +10,13 @@ margin: 0 $govuk-gutter-half; // On tablet, add full width gutters - @include mq($from: tablet) { + @include govuk-media-query($from: tablet) { margin: 0 $govuk-gutter; } // As soon as the viewport is greater than the width of the page plus the // gutters, just centre the content instead of adding gutters. - @include mq($and: "(min-width: #{($govuk-page-width + $govuk-gutter * 2)})") { + @include govuk-media-query($and: "(min-width: #{($govuk-page-width + $govuk-gutter * 2)})") { margin: 0 auto; } } diff --git a/src/overrides/_width.scss b/src/overrides/_width.scss index 28f49acb78..37c2a9fd1c 100644 --- a/src/overrides/_width.scss +++ b/src/overrides/_width.scss @@ -2,7 +2,7 @@ .govuk-\!-width-three-quarters { width: 100% !important; - @include mq($from: tablet) { + @include govuk-media-query($from: tablet) { width: 75% !important; } } @@ -10,7 +10,7 @@ .govuk-\!-width-two-thirds { width: 100% !important; - @include mq($from: tablet) { + @include govuk-media-query($from: tablet) { width: 66.66% !important; } } @@ -18,7 +18,7 @@ .govuk-\!-width-one-half { width: 100% !important; - @include mq($from: tablet) { + @include govuk-media-query($from: tablet) { width: 50% !important; } } @@ -26,7 +26,7 @@ .govuk-\!-width-one-third { width: 100% !important; - @include mq($from: tablet) { + @include govuk-media-query($from: tablet) { width: 33.33% !important; } } @@ -34,7 +34,7 @@ .govuk-\!-width-one-quarter { width: 100% !important; - @include mq($from: tablet) { + @include govuk-media-query($from: tablet) { width: 25% !important; } } diff --git a/src/vendor/sass-mq.test.js b/src/vendor/sass-mq.test.js deleted file mode 100644 index 2636521daa..0000000000 --- a/src/vendor/sass-mq.test.js +++ /dev/null @@ -1,303 +0,0 @@ -/* eslint-env jest */ - -const util = require('util') - -const configPaths = require('../../config/paths.json') - -const sass = require('node-sass') -const sassRender = util.promisify(sass.render) -const outdent = require('outdent') - -const sassConfig = { - includePaths: [ configPaths.src ], - outputStyle: 'compressed' -} -describe('sass-mq', () => { - describe('mq-px2em function', () => { - it('converts px value to em', async () => { - const sass = ` - @import "vendor/sass-mq"; - - .foo { - width: mq-px2em(320px); - }` - - const results = await sassRender({ data: sass, ...sassConfig }) - - expect(results.css.toString().trim()).toBe('.foo{width:20em}') - }) - - it('assumes unitless value is px and converts it to em', async () => { - const sass = ` - @import "vendor/sass-mq"; - - .foo { - width: mq-px2em(640); - }` - - const results = await sassRender({ data: sass, ...sassConfig }) - - expect(results.css.toString().trim()).toBe('.foo{width:40em}') - }) - - it('accepts em value and outputs the same em value', async () => { - const sass = ` - @import "vendor/sass-mq"; - - .foo { - width: mq-px2em(40em); - }` - - const results = await sassRender({ data: sass, ...sassConfig }) - - expect(results.css.toString().trim()).toBe('.foo{width:40em}') - }) - - it('$mq-base-font-size change results in updated calculation', async () => { - const sass = ` - $mq-base-font-size: 19px; - @import "vendor/sass-mq"; - - .foo { - width: mq-px2em(320px); - }` - - const results = await sassRender({ data: sass, ...sassConfig }) - - expect(results.css.toString().trim()).toBe('.foo{width:16.84211em}') - }) - }) - - describe('@mq-get-breakpoint-width function', () => { - it('outputs media query value from the breakpoint map', async () => { - const sass = ` - $my-breakpoints: ( - mobile: 320px, - tablet: 641px, - desktop: 769px - ); - @import "vendor/sass-mq"; - - .foo { - @media (min-width: mq-get-breakpoint-width('desktop', $my-breakpoints)) { - color: red; - } - }` - - const results = await sassRender({ data: sass, ...sassConfig }) - - expect(results.css.toString().trim()).toBe('@media (min-width: 769px){.foo{color:red}}') - }) - - it('errors if the specified breakpoint does not exists in the map', async () => { - const data = ` - $my-breakpoints: ( - mobile: 320px, - tablet: 641px, - desktop: 769px - ); - - @import "vendor/sass-mq"; - - $value: mq-get-breakpoint-width('massive', $my-breakpoints); - ` - - // Stub out the @warn function so that we can assert on warnings that are - // thrown during compilation - const warnings = [] - - const customFuncs = { - '@warn': (warning) => { - warnings.push(warning.getValue()) - - return sass.NULL - } - } - - // Lost far too much time trying to make this test work with Promises, - // but couldn't get it to work. So we're doing it old school. - sass.render({ data: data, functions: customFuncs, ...sassConfig }, () => { - expect(warnings).toContain('Breakpoint massive wasn\'t found in $breakpoints.') - }) - }) - }) - - describe('@mq-add-breakpoint mixin', () => { - it('outputs a custom defined breakpoint', async () => { - const sass = ` - @import "vendor/sass-mq"; - - @include mq-add-breakpoint(tvscreen, 1920px); - - .hide-on-tv { - @include mq(tvscreen) { - display: none; - } - }` - - const results = await sassRender({ data: sass, ...sassConfig }) - - expect(results.css.toString().trim()).toBe('@media (min-width: 120em){.hide-on-tv{display:none}}') - }) - }) - - describe('@mq-show-breakpoints mixin', () => { - it('outputs all the specified breakpoints', async () => { - const sass = ` - @import "vendor/sass-mq"; - @include mq-show-breakpoints((L, XL), (L: 800px, XL: 1200px)); - ` - const sassConfig = { - includePaths: [ configPaths.src ], - outputStyle: 'nested' - } - const results = await sassRender({ data: sass, ...sassConfig }) - - expect(results.css.toString() - .trim()) - .toBe(outdent` - @charset \"UTF-8\"; - body:before { - background-color: #FCF8E3; - border-bottom: 1px solid #FBEED5; - border-left: 1px solid #FBEED5; - color: #C09853; - font: small-caption; - padding: 3px 6px; - pointer-events: none; - position: fixed; - right: 0; - top: 0; - z-index: 100; } - @media (min-width: 50em) { - body:before { - content: \"L ≥ 800px (50em)\"; } } - @media (min-width: 75em) { - body:before { - content: \"XL ≥ 1200px (75em)\"; } }`) - }) - }) - - describe('@mq mixin', () => { - it('outputs "min-width" media query', async() => { - const sass = ` - @import "vendor/sass-mq"; - - .foo { - @include mq($from: 20em) { - color: red; - } - }` - - const results = await sassRender({ data: sass, ...sassConfig }) - - expect(results.css.toString().trim()).toBe('@media (min-width: 20em){.foo{color:red}}') - }) - - it('outputs "max-width" media query', async() => { - const sass = ` - @import "vendor/sass-mq"; - - .foo { - @include mq($until: 20em) { - color: red; - } - }` - - const results = await sassRender({ data: sass, ...sassConfig }) - - expect(results.css.toString().trim()).toBe('@media (max-width: 20em){.foo{color:red}}') - }) - - it('outputs "min-width" and max-width" media queries', async() => { - const sass = ` - @import "vendor/sass-mq"; - - .foo { - @include mq(20em,40em) { - color: red; - } - }` - - const results = await sassRender({ data: sass, ...sassConfig }) - - expect(results.css.toString().trim()).toBe('@media (min-width: 20em) and (max-width: 40em){.foo{color:red}}') - }) - - it('outputs additional custom directives', async() => { - const sass = ` - @import "vendor/sass-mq"; - - .foo { - @include mq($until:40em, $and:'(orientation: landscape)') { - color: red; - } - }` - - const results = await sassRender({ data: sass, ...sassConfig }) - - expect(results.css.toString().trim()).toBe('@media (max-width: 40em) and (orientation: landscape){.foo{color:red}}') - }) - - it('outputs the correct media type', async() => { - const sass = ` - @import "vendor/sass-mq"; - - .foo { - @include mq($until:40em, $media-type: 'aural') { - color: red; - } - }` - - const results = await sassRender({ data: sass, ...sassConfig }) - - expect(results.css.toString().trim()).toBe('@media aural and (max-width: 40em){.foo{color:red}}') - }) - - it('only outputs static breakpoint styles', async() => { - const sass = ` - $mq-breakpoints: ( - mobile: 320px, - tablet: 740px, - desktop: 980px, - wide: 1300px - ); - - $mq-responsive: false; - $mq-static-breakpoint: desktop; - - @import "vendor/sass-mq"; - - .foo { - @include mq($until: tablet) { - color: lawngreen; - } - @include mq($from: desktop) { - color: forestgreen; - } - }` - - const results = await sassRender({ data: sass, ...sassConfig }) - - expect(results.css.toString().trim()).toBe('.foo{color:forestgreen}') - }) - - it('does not rasterize print queries', async() => { - const sass = ` - $mq-responsive: false; - - @import "vendor/sass-mq"; - - .foo { - color: blue; - @include mq($media-type: 'print') { - color: red; - } - }` - - const results = await sassRender({ data: sass, ...sassConfig }) - - expect(results.css.toString().trim()).toBe('.foo{color:blue}') - }) - }) -}) From 0eb0c9b053845d8552de5dcc882d81382aaaf561 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 7 Jun 2018 10:32:52 +0100 Subject: [PATCH 2/3] Document govuk-media-query replacing mq in changelog --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c11c03419f..e6c33318c2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -78,6 +78,12 @@ Note: We're not following semantic versioning yet, we are going to talk about th - Remove `pageStart` block from template, as could result in rendering issues in older IE. ([PR #765](https://github.com/alphagov/govuk-frontend/pull/765)) +- You should no longer call the `mq` mixin directly - you should replace any + calls to it from your own code with `govuk-media-query` which accepts the same + arguments. All mixins and settings that start with `mq-` should be considered + private – they could be removed in the future without notice. + ([PR #763](https://github.com/alphagov/govuk-frontend/pull/763)) + 🔧 Fixes: - Fix govuk-equilateral-height function usage in shape-arrow helper From b4d34494a02181999ab368d079b8d58f6ae47763 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 7 Jun 2018 10:40:25 +0100 Subject: [PATCH 3/3] Tidy up media-query sassdoc --- src/helpers/_media-queries.scss | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/helpers/_media-queries.scss b/src/helpers/_media-queries.scss index 0f2e25383d..00ea0ae6c2 100644 --- a/src/helpers/_media-queries.scss +++ b/src/helpers/_media-queries.scss @@ -57,7 +57,7 @@ $sass-mq-already-included: true; /// @param {String | Boolean} $and [false] - Additional media query parameters /// @param {String} $media-type [all] - Media type: screen, print… /// -/// @ignore Undocumented API, for advanced use only: +/// @ignore Undocumented mq API, for advanced use only: /// @ignore @param {Map} $breakpoints [$govuk-breakpoints] /// @ignore @param {String} $static-breakpoint [$govuk-ie8-breakpoint] /// @ignore @param {Boolean} $responsive [$govuk-is-ie8] @@ -84,12 +84,6 @@ $sass-mq-already-included: true; /// @include govuk-media-query(tablet, $media-type: screen) { /// color: hotpink; /// } -/// -/// @example scss Advanced use: -/// $my-breakpoints: (L: 900px, XL: 1200px); -/// @include govuk-media-query(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) { -/// color: hotpink; -/// } /// } /// /// @access public