Skip to content

Commit

Permalink
Remove $class param from @govuk-grid-column mixin
Browse files Browse the repository at this point in the history 
This functionality was previously deprecated in v2.5.0 [1], although it was unfortunately not mentioned in the release notes.

[1]: #1090
  • Loading branch information
@36degrees @aliuk2012
36degrees authored and aliuk2012 committed Jun 14, 2019
1 parent df3cb5e commit 180ff43
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 80 deletions.
38 changes: 11 additions & 27 deletions src/helpers/_grid.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,6 @@
///
/// Creates a grid column with standard gutter between the columns.
///
/// If a `$class` is provided (which is the default, but deprecated behaviour),
/// the generated rules will be wrapped in a predefined selector in the format
/// `$class-$width` (e.g. `govuk-grid-column-full`). This behaviour is
/// deprecated and will be removed in v3.0
///
/// Grid widths are defined in the `$govuk-grid-widths` map.
///
/// By default the column width changes from 100% to specified width at the
Expand All @@ -35,11 +30,10 @@
/// @param {String} $width [full] name of a grid width from $govuk-grid-widths
/// @param {String} $float [left] left | right
/// @param {String} $at [tablet] - mobile | tablet | desktop | any custom breakpoint
/// @param {String} $class [govuk-grid-column] CSS class name (deprecated)
///
/// @example scss - Default
/// .govuk-grid-column-two-thirds {
/// @include govuk-grid-column(two-thirds, $class: false)
/// @include govuk-grid-column(two-thirds)
/// }
///
/// @example scss - Customising the breakpoint where width percentage is applied
Expand All @@ -49,28 +43,18 @@
///
/// @example scss - Customising the float direction
/// .govuk-grid-column-one-half-right {
/// @include govuk-grid-column(two-thirds, $float: right, $class: false);
/// }
///
/// @example scss - Customising the class name (deprecated)
/// @include govuk-grid-column(one-half, $class: "test-column");
/// @include govuk-grid-column(two-thirds, $float: right);
///
/// @access public

@mixin govuk-grid-column($width: full, $float: left, $at: tablet, $class: "govuk-grid-column") {
@if ($class) {
.#{$class}-#{$width} {
@include govuk-grid-column($width, $float, $at, $class: false);
}
} @else {
box-sizing: border-box;
@if $at != desktop {
width: 100%;
}
padding: 0 $govuk-gutter-half;
@include govuk-media-query($from: $at) {
width: govuk-grid-width($width);
float: $float;
}
@mixin govuk-grid-column($width: full, $float: left, $at: tablet) {
box-sizing: border-box;
@if $at != desktop {
width: 100%;
}
padding: 0 $govuk-gutter-half;
@include govuk-media-query($from: $at) {
width: govuk-grid-width($width);
float: $float;
}
}
56 changes: 5 additions & 51 deletions src/helpers/grid.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ describe('grid system', () => {
${sassImports}
.govuk-grid-column-full {
@include govuk-grid-column($class: false);
@include govuk-grid-column();
}
`

Expand All @@ -84,7 +84,7 @@ describe('grid system', () => {
${sassImports}
.govuk-grid-column-two-thirds {
@include govuk-grid-column(two-thirds, $class: false);
@include govuk-grid-column(two-thirds);
}
`
const results = await sassRender({ data: sass, ...sassConfig })
Expand All @@ -109,7 +109,7 @@ describe('grid system', () => {
${sassImports}
.govuk-grid-column-one-quarter-at-desktop {
@include govuk-grid-column(one-quarter, $at: desktop, $class: false);
@include govuk-grid-column(one-quarter, $at: desktop);
}
`
const results = await sassRender({ data: sass, ...sassConfig })
Expand All @@ -132,7 +132,7 @@ describe('grid system', () => {
${sassImports}
.govuk-grid-column-one-quarter-at-500px {
@include govuk-grid-column(one-quarter, $at: 500px, $class: false);
@include govuk-grid-column(one-quarter, $at: 500px);
}
`
const results = await sassRender({ data: sass, ...sassConfig })
Expand All @@ -157,7 +157,7 @@ describe('grid system', () => {
${sassImports}
.govuk-grid-column-one-half-right {
@include govuk-grid-column(one-half, $float: right, $class: false);
@include govuk-grid-column(one-half, $float: right);
}
`
const results = await sassRender({ data: sass, ...sassConfig })
Expand All @@ -176,51 +176,5 @@ describe('grid system', () => {
float: right; } }
`)
})

it('includes the class name by default (deprecated)', async () => {
const sass = `
${sassImports}
@include govuk-grid-column();
`

const results = await sassRender({ data: sass, ...sassConfig })

expect(results.css
.toString()
.trim())
.toBe(outdent`
.govuk-grid-column-full {
box-sizing: border-box;
width: 100%;
padding: 0 15px; }
@media (min-width: 40.0625em) {
.govuk-grid-column-full {
width: 100%;
float: left; } }`)
})

it('allows the class name to be overridden (deprecated)', async () => {
const sass = `
${sassImports}
@include govuk-grid-column(three-quarters, $class:'large-column');
`
const results = await sassRender({ data: sass, ...sassConfig })

expect(results.css
.toString()
.trim())
.toBe(outdent`
.large-column-three-quarters {
box-sizing: border-box;
width: 100%;
padding: 0 15px; }
@media (min-width: 40.0625em) {
.large-column-three-quarters {
width: 75%;
float: left; } }
`)
})
})
})
4 changes: 2 additions & 2 deletions src/objects/_grid.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

@each $width in map-keys($govuk-grid-widths) {
.govuk-grid-column-#{$width} {
@include govuk-grid-column($width, $class: false)
@include govuk-grid-column($width)
}
}

Expand All @@ -21,7 +21,7 @@
// them in the outputted CSS
@each $width in map-keys($govuk-grid-widths) {
.govuk-grid-column-#{$width}-from-desktop {
@include govuk-grid-column($width, $at: desktop, $class: false)
@include govuk-grid-column($width, $at: desktop)
}
}
}

0 comments on commit 180ff43

Please sign in to comment.