feat: make cite-block an optional component & use it as default for <cite>

Note: this remove the backward incompability included in 18af0ed805ebe7a18a1b77dd09cd2e1a33a5b469

diff --git a/scss/typography/_base.scss b/scss/typography/_base.scss
index fc04a1514540ce3a533070134a8702b850a51651..d82a460cf69c7ad4f4f576e687e395bdb21f66d3 100644 (file)
--- a/scss/typography/_base.scss
+++ b/scss/typography/_base.scss
@@ -79,7 +79,7 @@ $header-styles: (
   @each $size, $headers in $header-sizes {
     $header-map: ();
     @each $header, $font-size in $headers {
-      $header-map: map-merge($header-map, ($header: ('font-size': $font-size)));  
+      $header-map: map-merge($header-map, ($header: ('font-size': $font-size)));
     }
     $header-styles: map-merge($header-styles, ($size: $header-map));
   }
@@ -215,9 +215,9 @@ $blockquote-padding: rem-calc(9 20 0 19) !default;
 /// @type List
 $blockquote-border: 1px solid $medium-gray !default;
 
-/// Text color for `<cite>` elements.
-/// @type Color
-$cite-color: $dark-gray !default;
+/// Use the `.cite-block` component as default for `<cite>` elements.
+/// @type Boolean
+$enable-cite-block: true;
 
 /// Font family for `<kbd>` elements.
 /// @type String | List
@@ -447,16 +447,15 @@ $abbr-underline: 1px dotted $black !default;
       line-height: $paragraph-lineheight;
       color: $blockquote-color;
     }
-
-    // Citations
-    cite {
-      @include block-citation;
-    }
   }
 
   // Inline Citations
-  cite {
-    color: $cite-color;
+  @if ($enable-cite-block == true) {
+    cite {
+      // Extending a class is not recommanded.
+      // TODO: Break the typography-base/typography-helpers separation
+      @extend .cite-block;
+    }
   }
 
   // Abbreviations
@@ -470,7 +469,7 @@ $abbr-underline: 1px dotted $black !default;
   figure {
     margin: 0;
   }
-  
+
   // Code
   code {
     padding: $code-padding;

diff --git a/scss/typography/_helpers.scss b/scss/typography/_helpers.scss
index 7f05f0d651a6c82a2727a176a29668542f06eb12..74edffe6e116ce1fa54d9730895f752b83c7ee30 100644 (file)
--- a/scss/typography/_helpers.scss
+++ b/scss/typography/_helpers.scss
@@ -6,15 +6,6 @@
 /// @group typography-helpers
 ////
 
-
-/// Font size for `<cite>` elements.
-/// @type Number
-$cite-font-size: rem-calc(13) !default;
-
-/// Pseudo content for `<cite>` elements.
-/// @type String
-$cite-pseudo-content: '\2014 \0020' !default;
-
 /// Default font size for lead paragraphs.
 /// @type Number
 $lead-font-size: $global-font-size * 1.25 !default;
@@ -47,6 +38,29 @@ $subheader-margin-bottom: 0.5rem !default;
 /// @type Number
 $stat-font-size: 2.5rem !default;
 
+/// Text color for `.cite-block` component.
+/// @type Color
+$cite-color: $dark-gray !default;
+
+/// Font size for `.cite-block` component.
+/// @type Number
+$cite-font-size: rem-calc(13) !default;
+
+/// Pseudo content for `.cite-block` component.
+/// @type String
+$cite-pseudo-content: '\2014 \0020' !default;
+
+
+@mixin cite-block {
+  display: block;
+  color: $cite-color;
+  font-size: $cite-font-size;
+
+  &:before {
+    content: $cite-pseudo-content;
+  }
+}
+
 @mixin foundation-typography-helpers {
   // Use to create a subheading under a main header
   // Make sure you pair the two elements in a <header> element, like this:
@@ -86,14 +100,8 @@ $stat-font-size: 2.5rem !default;
       list-style: none;
     }
   }
-}
 
-@mixin block-citation {
-  // Use to restore the block version of cite elements
-  display: block;
-  font-size: $cite-font-size;
-
-  &:before {
-    content: $cite-pseudo-content;
+  .cite-block {
+    @include cite-block;
   }
 }