Merge pull request #763 from alphagov/abstract-mq

Wrap sass-mq as govuk-media-query

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

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;
     }
 

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;
     }
   }

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;

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;
     }
   }

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;
     }
   }

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;
     }
   }

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;
     }

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://"],

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,56 @@ $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 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]
+///
+/// @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;
+///    }
+///  }
+///
+/// @access public
+
+@mixin govuk-media-query($args...) {
+  @include mq($args...) {
+    @content;
+  };
+}

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 {

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;
       }