[SDPA-910] Add padding to Display Heading typography. (#479)

* [SDPA-910] Add padding to Display Heading typography. * Update typography function to optionally include base rules (rules that are only needed once for all breakpoints). * [SDPA-910] Added display heading vars. Fixed storybook typography knobs. * [SDPA-910] Added note about Browser support.
dpc-sdp · Aug 15, 2019 · 2b0a7e3 · 2b0a7e3
1 parent 9ea0755
commit 2b0a7e3
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 30 deletions.
diff --git a/packages/components/Atoms/Global/README.md b/packages/components/Atoms/Global/README.md
@@ -82,6 +82,12 @@ See [Storybook/Atoms/Global/Divider](https://ripple.sdp.vic.gov.au/?path=/story/
 
 --------------------------------------------------------------------------------
 
+## Known issues
+
+* Typography: Display headings (with background) have reduced padding on IE11 / Edge.
+
+--------------------------------------------------------------------------------
+
 <!-- GENERATED_LICENSE -->
 ## License
 

diff --git a/packages/components/Atoms/Global/scss/settings/_font.scss b/packages/components/Atoms/Global/scss/settings/_font.scss
@@ -30,6 +30,19 @@ $rpl-font-display-background-line-height: (
   'xxs': rem(17px + 2px)
 ) !default;
 
+$rpl-font-display-background-padding: (
+  'tera': rem(16px),
+  'xgiga': rem(10px),
+  'giga': rem(10px),
+  'mega': rem(8px),
+  'xl': rem(8px),
+  'l': rem(8px),
+  'm': rem(8px),
+  's': rem(8px),
+  'xs': rem(8px),
+  'xxs': rem(8px)
+) !default;
+
 $rpl-fonts: (
   'regular': ('VIC-Regular', 'Arial', 'Helvetica', 'sans-serif'),
   'medium': ('VIC-Medium', 'Arial', 'Helvetica', 'sans-serif'),

diff --git a/packages/components/Atoms/Global/scss/settings/_variables.scss b/packages/components/Atoms/Global/scss/settings/_variables.scss
@@ -16,6 +16,10 @@ $rpl-typography: (
   'copy_extra_small': ('xxs', 1em, 'regular')
 ) !default;
 
+// Display heading colours
+$rpl-display-background-color: rpl-color('secondary') !default;
+$rpl-display-text-color: rpl-color('white') !default;
+
 // Spacing
 $rpl-space: .25rem !default;
 $rpl-space-2: .5rem !default;

diff --git a/packages/components/Atoms/Global/scss/tools/_typography.scss b/packages/components/Atoms/Global/scss/tools/_typography.scss
@@ -1,4 +1,4 @@
-@mixin rpl_typography_font($font-size: 's', $line-height: 1.2em, $font-family: 'inherit') {
+@mixin rpl_typography_font($font-size: 's', $line-height: 1.2em, $font-family: 'inherit', $include-base: true) {
   @if $font-family != 'inherit' {
     font-family: rpl-font($font-family);
   }
@@ -9,17 +9,32 @@
     font-size: $font-size;
   }
   line-height: $line-height;
-  // The custom Vicfont has fixed font weight,
-  // so we set this to always normal,
-  // this will make all browsers render the font more consistently.
-  // See: https://stormconsultancy.co.uk/blog/development/tips-tricks/dealing-with-firefox-rendering-fonts-too-bold-with-browser-specific-css/
-  font-weight: normal;
+  @if $include-base == true {
+    // The custom Vicfont has fixed font weight,
+    // so we set this to always normal,
+    // this will make all browsers render the font more consistently.
+    // See: https://stormconsultancy.co.uk/blog/development/tips-tricks/dealing-with-firefox-rendering-fonts-too-bold-with-browser-specific-css/
+    font-weight: normal;
+  }
 }
 
-@mixin rpl_display_background($font-size) {
-  background-color: rpl-color('secondary');
-  color: rpl-color('white');
-  display: inline;
+@mixin rpl_display_background($font-size, $include-base: true) {
+  @if $include-base == true {
+    background-color: $rpl-display-background-color;
+    color: $rpl-display-text-color;
+    display: inline;
+    // sass-lint:disable no-vendor-prefixes
+    @supports (box-decoration-break: clone) or (-webkit-box-decoration-break: clone) {
+      -webkit-box-decoration-break: clone;
+      box-decoration-break: clone;
+    }
+    // sass-lint:enable no-vendor-prefixes
+  }
+  // sass-lint:disable no-vendor-prefixes
+  @supports (box-decoration-break: clone) or (-webkit-box-decoration-break: clone) {
+    padding: 0 map-get($rpl-font-display-background-padding, $font-size);
+  }
+  // sass-lint:enable no-vendor-prefixes
   @if $font-size {
     line-height: map-get($rpl-font-display-background-line-height, $font-size);
   }
@@ -40,15 +55,23 @@
   }
   // Print breakpoints
   @if type-of($ruleset) == map {
-    @each $breakpoint, $breakpoint-rules in $ruleset {
+    $breakpoints: map-keys($ruleset);
+    @each $breakpoint in $breakpoints {
+      $index: index($breakpoints, $breakpoint);
+      $breakpoint-rules: map-get($ruleset, $breakpoint);
+      // Avoid unnecessary duplication; include base styles only on first breakpoint.
+      $include-base: false;
+      @if $index == 1 {
+        $include-base: true;
+      }
       @include rpl_breakpoint($breakpoint) {
-        @include rpl_typography_print_rules($breakpoint-rules);
+        @include rpl_typography_print_rules($breakpoint-rules, $include-base);
       }
     }
   }
 }
 
-@mixin rpl_typography_print_rules($rules) {
+@mixin rpl_typography_print_rules($rules, $include-base: true) {
   $font-size: nth($rules, 1);
   $line-height: nth($rules, 2);
   $font-family: nth($rules, 3);
@@ -59,10 +82,10 @@
   @if $include-back == true {
     $line-height: 0;
   }
-  @include rpl_typography_font($font-size, $line-height, $font-family);
+  @include rpl_typography_font($font-size, $line-height, $font-family, $include-base);
   @if $include-back == true {
     span {
-      @include rpl_display_background($font-size);
+      @include rpl_display_background($font-size, $include-base);
     }
   }
 }
diff --git a/packages/components/Atoms/Global/stories.js b/packages/components/Atoms/Global/stories.js
@@ -38,21 +38,29 @@ storiesOf('Atoms/Global', module)
     components: { SFonts },
     template:
       '<s-fonts :size="size" :lineHeight="lineHeight" :weight="weight" :text="text" :background="background" />',
-    data () {
-      return {
-        size: select(
+    props: {
+      size: {
+        default: select(
           'Size',
           ['tera', 'xgiga', 'giga', 'mega', 'xl', 'l', 'm', 's', 'xs', 'xxs'],
           'tera'
-        ),
-        lineHeight: text('Line Height', '1.1em'),
-        weight: select(
+        )
+      },
+      lineHeight: {
+        default: text('Line Height', '1.1em')
+      },
+      weight: {
+        default: select(
           'Weight',
           ['regular', 'medium', 'semibold', 'bold'],
           'bold'
-        ),
-        background: boolean('Background', false),
-        text: text('Titles', 'The quick brown fox jumps over the lazy dog')
+        )
+      },
+      background: {
+        default: boolean('Background', false)
+      },
+      text: {
+        default: text('Titles', 'The quick brown fox jumps over the lazy dog')
       }
     }
   }))
@@ -63,9 +71,9 @@ storiesOf('Atoms/Global', module)
     components: { STypography },
     template:
       '<s-typography :samples="samples" :text="text" :paragraph="paragraph"/>',
-    data () {
-      return {
-        samples: [
+    props: {
+      samples: {
+        default: [
           'display_l',
           'display_m',
           'display_s',
@@ -80,9 +88,13 @@ storiesOf('Atoms/Global', module)
           'body_default',
           'body_small',
           'copy_extra_small'
-        ],
-        text: text('Titles', 'The quick brown fox jumps over the lazy dog'),
-        paragraph: text(
+        ]
+      },
+      text: {
+        default: text('Titles', 'The quick brown fox jumps over the lazy dog')
+      },
+      paragraph: {
+        default: text(
           'Paragraphs',
           'Lorem ipsum dolor sit amet consectetur adipisicing elit. A vitae quod nobis earum saepe inventore rerum dicta voluptatem ullam iste rem deleniti odit culpa tempora dolor animi, non, amet ducimus.'
         )