Merge pull request #1088 from cozy/feat/lineHeightUtils

feat: Add line-height utility classes

stylus/cozy-ui/build.styl

@@ -832,6 +832,26 @@ Display an chip that represents complex identity
  Styleguide utilities.text.warn
 */
 
+/*
+ Line-height
+
+ Sets various line-height to a text
+
+ Markup:
+ <p style="background-color: silver;" class="{{modifier_class}}">Aliquam etiam natoque</p>
+
+ .u-lh-tiny - Sets a tiny line-height (1)
+ .u-lh-xsmall - Sets a xsmall line-height (1.1)
+ .u-lh-small - Sets a small line-height (1.2)
+ .u-lh-medium - Sets a medium line-height (1.3)
+ .u-lh-large - Sets a large line-height (1.4)
+ .u-lh-xlarge - Sets a large line-height (1.5)
+
+ Weight: 6
+
+ Styleguide utilities.text.line-height
+*/
+
 /*
  Font-size
 
@@ -847,7 +867,7 @@ Display an chip that represents complex identity
  .u-fz-medium - Sets a medium font-size (16px)
  .u-fz-large - Sets a large font-size (18px)
 
- Weight: 6
+ Weight: 7
 
  Styleguide utilities.text.fontsize
 */
@@ -864,7 +884,7 @@ Display an chip that represents complex identity
  .u-fs-normal - Sets a normal font style
  .u-fs-italic - Sets an italic font style
 
- Weight: 7
+ Weight: 8
 
  Styleguide utilities.text.fontstyle
 */
@@ -883,7 +903,7 @@ Display an chip that represents complex identity
  .u-ta-center - Sets a center alignment
  .u-ta-justify - Sets a justify alignment
 
- Weight: 8
+ Weight: 9
 
  Styleguide utilities.text.alignment
 */
@@ -899,7 +919,7 @@ Display an chip that represents complex identity
 
  .u-ellipsis - Ellipsis at the end
 
- Weight: 9
+ Weight: 10
 
  Styleguide utilities.text.ellipsis
 */
@@ -916,7 +936,7 @@ Display an chip that represents complex identity
 
  .u-midellipsis - Ellipsis in the middle
 
- Weight: 10
+ Weight: 11
 
  Styleguide utilities.text.midellipsis
 */

stylus/tools/mixins.styl

@@ -87,13 +87,21 @@ reset()
     padding 0
     border  0
 
-global(selector, placeholder)
-    if cssmodules == true
-        :global({selector})
-            @extend {placeholder} // @stylint ignore
-    else
-        {selector}
-            @extend {placeholder} // @stylint ignore
+global(selector, placeholder, type = extend)
+    if type == extend
+        if cssmodules == true
+            :global({selector})
+                @extend {placeholder} // @stylint ignore
+        else
+            {selector}
+                @extend {placeholder} // @stylint ignore
+    else if type == mixin
+        if cssmodules == true
+            :global({selector})
+                {placeholder}() // @stylint ignore
+        else
+            {selector}
+                {placeholder}() // @stylint ignore
 
 cssModulesUtils(props, breakpoints)
     for kProp, vProp in props

stylus/utilities/text.styl

@@ -52,25 +52,55 @@ $midellipsis
             text-overflow '[...]'
 
 // @stylint off
+lh-tiny()
+    line-height 1!important
+
+lh-xsmall()
+    line-height 1.1!important
+
+lh-small()
+    line-height 1.2!important
+
+lh-medium()
+    line-height 1.3!important
+
+lh-large()
+    line-height 1.4!important
+
+lh-xlarge()
+    line-height 1.5!important
+
+global('.u-lh-tiny', lh-tiny, mixin)
+
+global('.u-lh-xsmall', lh-xsmall, mixin)
+
+global('.u-lh-small', lh-small, mixin)
+
+global('.u-lh-medium', lh-medium, mixin)
+
+global('.u-lh-large', lh-large, mixin)
+
+global('.u-lh-xlarge', lh-xlarge, mixin)
+
 fz-tiny()
     font-size rem(12)!important
-    line-height 1.3!important
+    lh-medium()
 
 fz-xsmall()
     font-size rem(13)!important
-    line-height 1.4!important
+    lh-large()
 
 fz-small()
     font-size rem(14)!important
-    line-height 1.4!important
+    lh-large()
 
 fz-medium()
     font-size rem(16)!important
-    line-height 1.5!important
+    lh-xlarge()
 
 fz-large()
     font-size rem(18)!important
-    line-height 1.5!important
+    lh-xlarge()
 
 fontsize = {
     'fz-tiny': 'fz-tiny',