Remove ability to pass ‘font maps’ directly

alphagov · Jun 7, 2018 · 93a0f33 · 93a0f33
1 parent f35ccff
commit 93a0f33
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 25 deletions.
diff --git a/src/helpers/_typography.scss b/src/helpers/_typography.scss
@@ -91,22 +91,11 @@
 
 @mixin govuk-typography-responsive($size, $override-line-height: false, $important: false) {
 
-  $font-map: null;
-
-  @if (type-of($size) == "map") {
-    $font-map: $size;
-  } @else {
-    @if (map-has-key($govuk-typography-scale, $size)) {
-      $font-map: map-get($govuk-typography-scale, $size);
-    }
+  @if not map-has-key($govuk-typography-scale, $size) {
+    @error "Unknown font size `#{$size}` - expected a point from the typography scale.";
   }
 
-  // Ensure that $font-map is actually a map
-  $actual-input-type: type-of($font-map);
-  @if $actual-input-type != "map" {
-    @error "Expected a map of breakpoints and font sizes, but got a "
-    + "#{$actual-input-type}. Make sure you are passing a font map.";
-  }
+  $font-map: map-get($govuk-typography-scale, $size);
 
   @each $breakpoint, $breakpoint-map in $font-map {
     $font-size: map-get($breakpoint-map, "font-size") iff($important, !important);

diff --git a/src/helpers/typography.test.js b/src/helpers/typography.test.js
@@ -54,7 +54,7 @@ describe('@mixin govuk-typography-responsive', () => {
       ${sassBootstrap}
 
       .foo {
-        @include govuk-typography-responsive(map-get($govuk-typography-scale, 14))
+        @include govuk-typography-responsive($size: 14)
       }`
 
     const results = await sassRender({ data: sass, ...sassConfig })
@@ -74,7 +74,7 @@ describe('@mixin govuk-typography-responsive', () => {
       ${sassBootstrap}
 
       .foo {
-        @include govuk-typography-responsive(12)
+        @include govuk-typography-responsive($size: 12)
       }`
 
     const results = await sassRender({ data: sass, ...sassConfig })
@@ -89,19 +89,18 @@ describe('@mixin govuk-typography-responsive', () => {
             line-height: 20pt; } }`)
   })
 
-  it('throws an exception when passed anything other than a font map', async () => {
+  it('throws an exception when passed a size that is not in the scale', async () => {
     const sass = `
       ${sassBootstrap}
 
       .foo {
-        @include govuk-typography-responsive(14px)
+        @include govuk-typography-responsive(3.14159265359)
       }`
 
     await expect(sassRender({ data: sass, ...sassConfig }))
       .rejects
       .toThrow(
-        'Expected a map of breakpoints and font sizes, but got a null. ' +
-        'Make sure you are passing a font map.'
+        'Unknown font size `3.14159` - expected a point from the typography scale.'
       )
   })
 
@@ -111,7 +110,7 @@ describe('@mixin govuk-typography-responsive', () => {
         ${sassBootstrap}
 
         .foo {
-          @include govuk-typography-responsive(14, $important: true);
+          @include govuk-typography-responsive($size: 14, $important: true);
         }`
 
       const results = await sassRender({ data: sass, ...sassConfig })
@@ -131,7 +130,7 @@ describe('@mixin govuk-typography-responsive', () => {
         ${sassBootstrap}
 
         .foo {
-          @include govuk-typography-responsive(12, $important: true);
+          @include govuk-typography-responsive($size: 12, $important: true);
         }`
 
       const results = await sassRender({ data: sass, ...sassConfig })
@@ -153,7 +152,7 @@ describe('@mixin govuk-typography-responsive', () => {
         ${sassBootstrap}
 
         .foo {
-          @include govuk-typography-responsive(14, $override-line-height: 30px);
+          @include govuk-typography-responsive($size: 14, $override-line-height: 30px);
         }`
 
       const results = await sassRender({ data: sass, ...sassConfig })

diff --git a/src/overrides/_typography.scss b/src/overrides/_typography.scss
@@ -3,9 +3,9 @@
 
   // Generate typography override classes for each responsive font map in the
   // typography scale eg .govuk-\!-f-80
-  @each $size, $font-map in $govuk-typography-scale {
+  @each $size in map-keys($govuk-typography-scale) {
     .govuk-\!-f-#{$size} {
-      @include govuk-typography-responsive($font-map, $important: true);
+      @include govuk-typography-responsive($size, $important: true);
     }
   }