Merge pull request #404 from alphagov/line-height-override

Allow line height to be overridden in typography helpers

src/components/button/_button.scss

@@ -2,7 +2,11 @@
 
 @include exports("button") {
   .govuk-c-button {
-    @include govuk-font-regular-19;
+    @include govuk-font-regular;
+    @include govuk-typography-responsive(
+      $govuk-font-19,
+      $override-line-height: 1
+    );
 
     box-sizing: border-box;
     display: inline-block;
@@ -20,8 +24,6 @@
     background-color: $govuk-button-colour;
     box-shadow: 0 2px 0 $govuk-button-colour-darken-15;
     font-family: $govuk-font-stack;
-    // Had to use important because th linter won't let me put this under the font-size include
-    line-height: 1 !important;
     text-align: center;
     text-decoration: none;
     vertical-align: top;
@@ -103,7 +105,12 @@
   }
 
   .govuk-c-button--start {
-    @include govuk-font-bold-24;
+    @include govuk-typography-weight-bold;
+    @include govuk-typography-responsive(
+      $govuk-font-24,
+      $override-line-height: 1
+    );
+
     min-height: auto;
     padding-top: $govuk-spacing-scale-2 - $govuk-border-width-form-element;
     padding-right: $govuk-spacing-scale-7;
@@ -123,7 +130,6 @@
     @include ie-lte(8) {
       border-bottom: $govuk-border-width-form-element solid $govuk-button-colour-darken-15;
     }
-    line-height: 1 !important;
   }
 
   // making the click target bigger than the button

src/components/link/_link.scss

@@ -3,9 +3,11 @@
 @include exports("link") {
 
   .govuk-c-link {
-    @include govuk-font-regular-16;
-
-    line-height: 1.25;
+    @include govuk-font-regular;
+    @include govuk-typography-responsive(
+      $govuk-font-16,
+      $override-line-height: 1.25
+    );
 
     text-decoration: underline;
   }

src/components/previous-next/_previous-next.scss

@@ -58,9 +58,12 @@
   }
 
   .govuk-c-previous-next__link-title {
-    @include govuk-font-regular-27;
+    @include govuk-font-regular;
+    @include govuk-typography-responsive(
+      $govuk-font-27,
+      $override-line-height: (33.75 / 27)
+    );
     display: block;
-    line-height: (33.75 / 27);
   }
 
   .govuk-c-previous-next__link-icon {

src/components/select/_select.scss

@@ -3,7 +3,11 @@
 
 @include exports("select") {
   .govuk-c-select {
-    @include govuk-font-regular-19;
+    @include govuk-font-regular;
+    @include govuk-typography-responsive(
+      $govuk-font-19,
+      $override-line-height: 1.25
+    );
 
     box-sizing: border-box; // should this be global?
     width: 100%;
@@ -12,8 +16,6 @@
 
     padding: $govuk-spacing-scale-1; // was 5px 4px 4px - size of it should be adjusted to match other form elements
     border: $govuk-border-width-form-element solid $govuk-text-colour;
-
-    line-height: 1.25;
   }
 
   .govuk-c-select:focus {

src/components/tag/_tag.scss

@@ -2,15 +2,18 @@
 
 @include exports("tag") {
   .govuk-c-tag {
-    @include govuk-font-bold-16;
+    @include govuk-font-bold;
+    @include govuk-typography-responsive(
+      $govuk-font-16,
+      $override-line-height: 1.25
+    );
 
     display: inline-block;
     padding: $govuk-spacing-scale-1 $govuk-spacing-scale-1 0;
 
     color: $govuk-white;
     background-color: $govuk-blue;
     letter-spacing: 1px;
-    line-height: 1.25;
 
     text-decoration: none;
     text-transform: uppercase;

src/components/textarea/_textarea.scss

@@ -4,7 +4,11 @@
 
 @include exports("textarea") {
   .govuk-c-textarea {
-    @include govuk-font-regular-19;
+    @include govuk-font-regular;
+    @include govuk-typography-responsive(
+      $govuk-font-19,
+      $override-line-height: 1.25
+    );
 
     box-sizing: border-box; // should this be global?
     display: block;
@@ -15,8 +19,6 @@
     border: $govuk-border-width-form-element solid $govuk-text-colour;
     border-radius: 0;
 
-    line-height: 1.25;
-
     -webkit-appearance: none;
   }
 

src/globals/scss/helpers/_typography.scss

@@ -66,14 +66,22 @@
 // );
 //
 // @param {Map} $font-map - Font map
+// @param {Number} $override-line-height - Non responsive custom line height.
+//        Omit to use the line height from the font map.
 // @param {Boolean} $important - Whether to mark declarations as important.
 //        Generally Used to create override classes.
 
-@mixin govuk-typography-responsive($font-map, $important: false) {
+@mixin govuk-typography-responsive($font-map, $override-line-height: false, $important: false) {
   @each $breakpoint, $breakpoint-map in $font-map {
     $font-size: map-get($breakpoint-map, "font-size") iff($important, !important);
     $line-height: map-get($breakpoint-map, "line-height") iff($important, !important);
 
+    // Sometimes we need to use a custom non-responsive line height for
+    // a component.
+    @if $override-line-height {
+      $line-height: $override-line-height iff($important, !important);
+    }
+
     @if $breakpoint == null {
       font-size: $font-size;
       line-height: $line-height;