Merge pull request expressjs#78 from vtex/feature/nested

Add option to set nested-link color

config.js

@@ -44,6 +44,9 @@ module.exports = {
     "light-yellow": "#f3dd70",
     "light-red": "#ffd3c0"
   },
+  "nested": {
+    "links": ["blue", "light-blue"]
+  },
   "borderWidths": [0, .125, .25, .5, 1, 2],
   "borderRadius": [0, .125, .25, .5, 1],
   "widths": [1, 2, 4, 8, 16],

lib/config-utils.js

@@ -0,0 +1,17 @@
+const defaultConfig = require('../config')
+
+function getColor(customConfig, name, fallback) {
+  if (name && customConfig.colors[name]) {
+    return customConfig.colors[name]
+  }
+
+  if (name) {
+    console.warn(`Color "${name}" not found. Using Tachyons default color.`)
+  }
+
+  return defaultConfig.colors[fallback]
+}
+
+module.exports = {
+  getColor
+}

lib/generate.js

@@ -18,6 +18,7 @@ const generators = {
   opacity: require('./opacity'),
   lineHeight: require('./line-height'),
   tables: require('./tables'),
+  nested: require('./nested'),
 }
 
 const cssWithDocs = (generator, config, mqs, fullConfig) => `${generator.docs(config, mqs)}

partials/_nested.css.js → lib/nested.js

@@ -1,4 +1,19 @@
-module.exports = `
+const { getColor } = require('./config-utils')
+const { step, mqSteps } = require('./docs-helper')
+
+const docs = () =>
+  `
+/*
+
+    NESTED
+    Tachyons module for styling nested elements
+    that are generated by a cms.
+
+*/
+`
+
+const css = (nested, fullConfig) => {
+  return `
 .nested-copy-line-height p,
 .nested-copy-line-height ul,
 .nested-copy-line-height ol {
@@ -38,13 +53,27 @@ module.exports = `
 }
 
 .nested-links a {
-  color: var(--blue);
+  color: ${getColor(
+    fullConfig,
+    nested && nested.links && nested.links.length > 0 && nested.links[0],
+    'blue'
+  )};
   transition: color .15s ease-in;
 }
 
 .nested-links a:hover,
 .nested-links a:focus {
-  color: var(--light-blue);
+  color: ${getColor(
+    fullConfig,
+    nested && nested.links && nested.links.length > 0 && nested.links[1],
+    'light-blue'
+  )};
   transition: color .15s ease-in;
 }
-`
+`
+}
+
+module.exports = {
+  css,
+  docs,
+}

readme.md

@@ -104,6 +104,9 @@ generate()
     "light-yellow": "#f3dd70",
     "light-red": "#ffd3c0"
   },
+  "nested": {
+    "links": ["blue", "light-blue"]
+  },
   "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2],
   "borderRadius": [0, 0.125, 0.25, 0.5, 1],
   "widths": [1, 2, 4, 8, 16],

test/config-utils-test.js

@@ -0,0 +1,20 @@
+import test from 'ava'
+import { getColor } from '../lib/config-utils'
+
+test('should get the custom color if it exists', t => {
+  const customConfig = {
+    colors: {
+      customBlue: '#f1f8ff'
+    }
+  }
+
+  const color = getColor(customConfig, 'customBlue', 'blue')
+
+  t.is(color, '#f1f8ff')
+})
+
+test('should use the fallback color if the color is not defined', t => {
+  const color = getColor({ colors: {} }, 'customRed', 'red')
+
+  t.is(color, '#ff3223')
+})

test/nested-test.js

@@ -0,0 +1,24 @@
+import test from 'ava'
+import fs from 'fs'
+import path from 'path'
+
+import config from '../config'
+import tachyonsGenerator from '../'
+
+test('nested links colors fall back to default values when not defined', async t => {
+  const tachy = tachyonsGenerator()
+  const { modules: { nested } } = await tachy.generate()
+
+  t.snapshot(nested)
+})
+
+test('nested links colors are generated when defined', async t => {
+  const tachy = tachyonsGenerator({
+    nested: {
+      links: ['blue', 'lightest-blue'],
+    },
+  })
+  const { modules: { nested } } = await tachy.generate()
+
+  t.snapshot(nested)
+})

test/snapshots/integration-test.js.md

@@ -927,6 +927,13 @@ Generated by [AVA](https://ava.li).
     .mw9 { max-width: 96rem; }␊
     .mw-none { max-width: none; }␊
     .mw-100 { max-width: 100%; }␊
+    /*␊
+    ␊
+        NESTED␊
+        Tachyons module for styling nested elements␊
+        that are generated by a cms.␊
+    ␊
+    */␊
     .nested-copy-line-height p, .nested-copy-line-height ul,␊
     .nested-copy-line-height ol { line-height: 1.5; }␊
     .nested-headline-line-height h1, .nested-headline-line-height h2,␊
@@ -937,8 +944,7 @@ Generated by [AVA](https://ava.li).
     .nested-copy-separator p+p { margin-top: 1.5em; }␊
     .nested-img img { width: 100%; max-width: 100%; display: block; }␊
     .nested-links a { color: #357edd; transition: color .15s ease-in; }␊
-    .nested-links a:hover { color: #96ccff; transition: color .15s ease-in; }␊
-    .nested-links a:focus { color: #96ccff; transition: color .15s ease-in; }␊
+    .nested-links a:hover, .nested-links a:focus { color: #96ccff; transition: color .15s ease-in; }␊
     .dim { opacity: 1; transition: opacity .15s ease-in; }␊
     .dim:hover, .dim:focus { opacity: .5; transition: opacity .15s ease-in; }␊
     .dim:active { opacity: .8; transition: opacity .15s ease-out; }␊

test/snapshots/nested-test.js.md

@@ -0,0 +1,133 @@
+# Snapshot report for `test/nested-test.js`
+
+The actual snapshot is saved in `nested-test.js.snap`.
+
+Generated by [AVA](https://ava.li).
+
+## nested links colors are generated when defined
+
+> Snapshot 1
+
+    `␊
+    /*␊
+    ␊
+        NESTED␊
+        Tachyons module for styling nested elements␊
+        that are generated by a cms.␊
+    ␊
+    */␊
+    ␊
+    ␊
+    .nested-copy-line-height p,␊
+    .nested-copy-line-height ul,␊
+    .nested-copy-line-height ol {␊
+      line-height: 1.5;␊
+    }␊
+    ␊
+    .nested-headline-line-height h1,␊
+    .nested-headline-line-height h2,␊
+    .nested-headline-line-height h3,␊
+    .nested-headline-line-height h4,␊
+    .nested-headline-line-height h5,␊
+    .nested-headline-line-height h6 {␊
+      line-height: 1.25;␊
+    }␊
+    ␊
+    .nested-list-reset ul,␊
+    .nested-list-reset ol {␊
+      padding-left: 0;␊
+      margin-left: 0;␊
+      list-style-type: none;␊
+    }␊
+    ␊
+    .nested-copy-indent p+p {␊
+      text-indent: 1em;␊
+      margin-top: 0;␊
+      margin-bottom: 0;␊
+    }␊
+    ␊
+    .nested-copy-separator p+p {␊
+      margin-top: 1.5em;␊
+    }␊
+    ␊
+    .nested-img img {␊
+      width: 100%;␊
+      max-width: 100%;␊
+      display: block;␊
+    }␊
+    ␊
+    .nested-links a {␊
+      color: #357edd;␊
+      transition: color .15s ease-in;␊
+    }␊
+    ␊
+    .nested-links a:hover,␊
+    .nested-links a:focus {␊
+      color: #cdecff;␊
+      transition: color .15s ease-in;␊
+    }␊
+    `
+
+## nested links colors fall back to default values when not defined
+
+> Snapshot 1
+
+    `␊
+    /*␊
+    ␊
+        NESTED␊
+        Tachyons module for styling nested elements␊
+        that are generated by a cms.␊
+    ␊
+    */␊
+    ␊
+    ␊
+    .nested-copy-line-height p,␊
+    .nested-copy-line-height ul,␊
+    .nested-copy-line-height ol {␊
+      line-height: 1.5;␊
+    }␊
+    ␊
+    .nested-headline-line-height h1,␊
+    .nested-headline-line-height h2,␊
+    .nested-headline-line-height h3,␊
+    .nested-headline-line-height h4,␊
+    .nested-headline-line-height h5,␊
+    .nested-headline-line-height h6 {␊
+      line-height: 1.25;␊
+    }␊
+    ␊
+    .nested-list-reset ul,␊
+    .nested-list-reset ol {␊
+      padding-left: 0;␊
+      margin-left: 0;␊
+      list-style-type: none;␊
+    }␊
+    ␊
+    .nested-copy-indent p+p {␊
+      text-indent: 1em;␊
+      margin-top: 0;␊
+      margin-bottom: 0;␊
+    }␊
+    ␊
+    .nested-copy-separator p+p {␊
+      margin-top: 1.5em;␊
+    }␊
+    ␊
+    .nested-img img {␊
+      width: 100%;␊
+      max-width: 100%;␊
+      display: block;␊
+    }␊
+    ␊
+    .nested-links a {␊
+      color: #357edd;␊
+      transition: color .15s ease-in;␊
+    }␊
+    ␊
+    .nested-links a:hover,␊
+    .nested-links a:focus {␊
+      color: #96ccff;␊
+      transition: color .15s ease-in;␊
+    }␊
+    `