Merge pull request expressjs#77 from jessestuart/jesse/add_line_heigh…

…t_options

[feat] Add module to configure `line-height`.

config.js

@@ -2,6 +2,7 @@ module.exports = {
   "typeScale": [
     3, 2.25, 1.5, 1.25, 1, 0.875, 0.75
   ],
+  "lineHeight": [1, 1.25, 1.5],
   "spacing": [2, 4, 6, 8, 10, 12, 14],
   "customMedia": [
     { "m": 48 },

lib/generate.js

@@ -15,7 +15,8 @@ const generators = {
   maxWidths: require('./max-widths'),
   heights: require('./heights'),
   typography: require('./typography'),
-  opacity: require('./opacity')
+  opacity: require('./opacity'),
+  lineHeight: require('./line-height'),
 }
 
 const cssWithDocs = (generator, config, mqs) => `${generator.docs(config, mqs)}
@@ -26,8 +27,7 @@ module.exports = (config, mediaQueries) => {
 
   const skipModules = (config.skipModules || []).map(n => camel(n))
 
-  const px = Object
-    .keys(manifest)
+  const px = Object.keys(manifest)
     .filter(filterSkipped.bind(null, skipModules))
     .map(name => {
       const module = manifest[name]
@@ -47,13 +47,10 @@ module.exports = (config, mediaQueries) => {
         return { name, css: raw }
       }
 
-      return mqify(raw, mediaQueries)
-        .then(css => ({ name, css }))
+      return mqify(raw, mediaQueries).then(css => ({ name, css }))
     })
 
-  return Promise
-    .all(px)
-    .then(reduceModules)
+  return Promise.all(px).then(reduceModules)
 }
 
 const reduceModules = modules => {

lib/line-height.js

@@ -0,0 +1,33 @@
+const { step, mqSteps } = require('./docs-helper')
+
+const docs = (_, mqs) => `
+/*
+  LINE HEIGHT / Leading
+  Docs: http://tachyons.io/docs/typography/line-height/
+
+  Base:
+    lh = line-height
+
+  Media Query Extensions:
+    ${mqSteps(mqs)}
+*/
+`
+
+const indexLabelMapping = {
+  0: 'solid',
+  1: 'title',
+  2: 'copy',
+}
+
+const css = lineHeights =>
+  lineHeights
+    .map(
+      (lineHeight, idx) =>
+        `.lh-${indexLabelMapping[idx]} { line-height: ${lineHeight} }`
+    )
+    .join('\n')
+
+module.exports = {
+  css,
+  docs,
+}

test/line-height-test.js

@@ -0,0 +1,20 @@
+import test from 'ava'
+import fs from 'fs'
+import path from 'path'
+
+import config from '../config'
+import tachyonsGenerator from '../'
+
+test('Line heights fall back to default values when not included.', async t => {
+  const tachy = tachyonsGenerator()
+  const { modules: { lineHeight } } = await tachy.generate()
+
+  t.snapshot(lineHeight)
+})
+
+test('Line heights are generated when included in config.', async t => {
+  const tachy = tachyonsGenerator({ lineHeight: [1.3, 1.5, 1.7] })
+  const { modules: { lineHeight } } = await tachy.generate()
+
+  t.snapshot(lineHeight)
+})

test/snapshots/integration-test.js.md

@@ -872,6 +872,17 @@ Generated by [AVA](https://ava.li).
     .tracked { letter-spacing: .1em; }␊
     .tracked-tight { letter-spacing: -.05em; }␊
     .tracked-mega { letter-spacing: .25em; }␊
+    /*␊
+      LINE HEIGHT / Leading␊
+      Docs: http://tachyons.io/docs/typography/line-height/␊
+    ␊
+      Base:␊
+        lh = line-height␊
+    ␊
+      Media Query Extensions:␊
+        -m  = 48em␊
+        -l  = 64em␊
+    */␊
     .lh-solid { line-height: 1; }␊
     .lh-title { line-height: 1.25; }␊
     .lh-copy { line-height: 1.5; }␊

test/snapshots/line-height-test.js.md

@@ -0,0 +1,75 @@
+# Snapshot report for `test/line-height-test.js`
+
+The actual snapshot is saved in `line-height-test.js.snap`.
+
+Generated by [AVA](https://ava.li).
+
+## Line heights are generated when included in config.
+
+> Snapshot 1
+
+    `␊
+    /*␊
+      LINE HEIGHT / Leading␊
+      Docs: http://tachyons.io/docs/typography/line-height/␊
+    ␊
+      Base:␊
+        lh = line-height␊
+    ␊
+      Media Query Extensions:␊
+        -m  = 48em␊
+        -l  = 64em␊
+    */␊
+    ␊
+    .lh-solid { line-height: 1.3 }␊
+    .lh-title { line-height: 1.5 }␊
+    .lh-copy { line-height: 1.7 }␊
+    ␊
+    					@media screen and (min-width: 48em) and (max-width: 64em) {␊
+    						.lh-solid-m { line-height: 1.3 }␊
+    .lh-title-m { line-height: 1.5 }␊
+    .lh-copy-m { line-height: 1.7 }␊
+    					}␊
+    				␊
+    ␊
+    					@media screen and (min-width: 64em) {␊
+    						.lh-solid-l { line-height: 1.3 }␊
+    .lh-title-l { line-height: 1.5 }␊
+    .lh-copy-l { line-height: 1.7 }␊
+    					}␊
+    				`
+
+## Line heights fall back to default values when not included.
+
+> Snapshot 1
+
+    `␊
+    /*␊
+      LINE HEIGHT / Leading␊
+      Docs: http://tachyons.io/docs/typography/line-height/␊
+    ␊
+      Base:␊
+        lh = line-height␊
+    ␊
+      Media Query Extensions:␊
+        -m  = 48em␊
+        -l  = 64em␊
+    */␊
+    ␊
+    .lh-solid { line-height: 1 }␊
+    .lh-title { line-height: 1.25 }␊
+    .lh-copy { line-height: 1.5 }␊
+    ␊
+    					@media screen and (min-width: 48em) and (max-width: 64em) {␊
+    						.lh-solid-m { line-height: 1 }␊
+    .lh-title-m { line-height: 1.25 }␊
+    .lh-copy-m { line-height: 1.5 }␊
+    					}␊
+    				␊
+    ␊
+    					@media screen and (min-width: 64em) {␊
+    						.lh-solid-l { line-height: 1 }␊
+    .lh-title-l { line-height: 1.25 }␊
+    .lh-copy-l { line-height: 1.5 }␊
+    					}␊
+    				`