Prefer NHS default $at param

Author: colinrotherham

packages/core/tools/_grid.scss

@@ -64,12 +64,12 @@
 /// Grid widths are defined in the `$nhsuk-grid-widths` map.
 ///
 /// By default the column width changes from 100% to specified width at the
-/// 'tablet' breakpoint, but other breakpoints can be specified using the `$at`
+/// 'desktop' breakpoint, but other breakpoints can be specified using the `$at`
 /// parameter.
 ///
 /// @param {String} $width [full] name of a grid width from $nhsuk-grid-widths
 /// @param {String} $float [left] left | right
-/// @param {String} $at [tablet] - mobile | tablet | desktop | any custom breakpoint
+/// @param {String} $at [desktop] - mobile | tablet | desktop | any custom breakpoint
 /// @param {String} $class [nhsuk-grid-column] CSS class name (deprecated)
 ///
 /// @example scss - Default
@@ -78,8 +78,8 @@
 ///   }
 ///
 /// @example scss - Customising the breakpoint where width percentage is applied
-///   .nhsuk-grid-column-one-half-at-desktop {
-///     @include govuk-grid-column(one-half, $at: desktop);
+///   .nhsuk-grid-column-one-half-at-tablet {
+///     @include govuk-grid-column(one-half, $at: tablet);
 ///   }
 ///
 /// @example scss - Customising the float direction
@@ -92,14 +92,14 @@
 ///
 /// @access public
 
-@mixin govuk-grid-column($width: full, $float: left, $at: tablet, $class: "nhsuk-grid-column") {
+@mixin govuk-grid-column($width: full, $float: left, $at: desktop, $class: "nhsuk-grid-column") {
   @if $class {
     .#{$class}-#{$width} {
       @include govuk-grid-column($width, $float, $at, $class: false);
     }
   } @else {
     box-sizing: border-box;
-    @if $at != desktop {
+    @if $at != tablet {
       width: 100%;
     }
     padding: 0 $nhsuk-gutter-half;

packages/core/tools/grid.unit.test.js

@@ -123,7 +123,7 @@ describe('grid system', () => {
           width: 100%;
           padding: 0 16px;
         }
-        @media (min-width: 46.25em) {
+        @media (min-width: 61.25em) {
           .nhsuk-grid-column-full {
             width: 100%;
             float: left;
@@ -151,7 +151,7 @@ describe('grid system', () => {
           width: 100%;
           padding: 0 16px;
         }
-        @media (min-width: 46.25em) {
+        @media (min-width: 61.25em) {
           .nhsuk-grid-column-two-thirds {
             width: 66.6666666667%;
             float: left;
@@ -164,8 +164,8 @@ describe('grid system', () => {
       const sass = `
         ${sassImports}
 
-        .nhsuk-grid-column-one-quarter-at-desktop {
-          @include govuk-grid-column(one-quarter, $at: desktop, $class: false);
+        .nhsuk-grid-column-one-quarter-at-tablet {
+          @include govuk-grid-column(one-quarter, $at: tablet, $class: false);
         }
       `
 
@@ -174,12 +174,12 @@ describe('grid system', () => {
       })
 
       expect(results.css).toBe(outdent`
-        .nhsuk-grid-column-one-quarter-at-desktop {
+        .nhsuk-grid-column-one-quarter-at-tablet {
           box-sizing: border-box;
           padding: 0 16px;
         }
-        @media (min-width: 61.25em) {
-          .nhsuk-grid-column-one-quarter-at-desktop {
+        @media (min-width: 46.25em) {
+          .nhsuk-grid-column-one-quarter-at-tablet {
             width: 25%;
             float: left;
           }
@@ -234,7 +234,7 @@ describe('grid system', () => {
           width: 100%;
           padding: 0 16px;
         }
-        @media (min-width: 46.25em) {
+        @media (min-width: 61.25em) {
           .nhsuk-grid-column-one-half-right {
             width: 50%;
             float: right;
@@ -260,7 +260,7 @@ describe('grid system', () => {
           width: 100%;
           padding: 0 16px;
         }
-        @media (min-width: 46.25em) {
+        @media (min-width: 61.25em) {
           .nhsuk-grid-column-full {
             width: 100%;
             float: left;
@@ -286,7 +286,7 @@ describe('grid system', () => {
           width: 100%;
           padding: 0 16px;
         }
-        @media (min-width: 46.25em) {
+        @media (min-width: 61.25em) {
           .large-column-three-quarters {
             width: 75%;
             float: left;