Added "aura.tokens" format

salesforce-ux · Sep 30, 2015 · 8b60c29 · 8b60c29
1 parent 987b3bd
commit 8b60c29
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -440,6 +440,14 @@ $prop-name: PROP_VALUE
 </aura:theme>
 ```
 
+###### aura.tokens
+
+```xml
+<aura:tokens>
+  <aura:token name="propName" value="PROP_VALUE" />
+</aura:tokens>
+```
+
 ###### common.js
 
 ```js

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "theo",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "A set of Gulp plugins for transforming and formatting Design Properties",
   "keywords": [
     "css",

diff --git a/src/props/index.js b/src/props/index.js
@@ -318,6 +318,36 @@ registerFormat('aura.theme', json => {
   return cleanOutput(xml);
 });
 
+registerFormat('aura.tokens', json => {
+  let auraImports = _.toArray(json.auraImports).map(theme => {
+    return `<aura:import name="${theme}" />`;
+  }).join('\n  ');
+  let auraExtends = _.isString(json.auraExtends) ? json.auraExtends : null;
+  let props = _.map(json.props, prop => {
+    let name = camelCase(prop.name);
+    let cssProperties = (() => {
+      if (_.isString(prop.cssProperties)) {
+        return `property="${prop.cssProperties}"`;
+      }
+      if (_.isArray(prop.cssProperties)) {
+        return `property="${prop.cssProperties.join(',')}"`;
+      }
+      return ''
+    })()
+    return `<aura:token name="${name}" value="${prop.value}" ${cssProperties} />`;
+  }).join('\n  ');
+  let openTag = auraExtends
+    ? `<aura:tokens extends="${auraExtends}">`
+    : `<aura:tokens>`;
+  let xml = `
+    ${openTag}
+      ${auraImports}
+      ${props}
+    </aura:tokens>
+  `;
+  return cleanOutput(xml);
+});
+
 registerFormat('html', require('./formats/html'));
 
 registerFormat('common.js', json => {

diff --git a/test/props/index.js b/test/props/index.js
@@ -773,12 +773,12 @@ describe('$props:formats', function() {
     it('has aura:var nodes', function() {
       assert(_.has(result['aura:theme'], 'aura:var'));
     });
-    it('var nodes have a "name" attribute', function() {
+    it('aura:var nodes have a "name" attribute', function() {
       result['aura:theme']['aura:var'].forEach(function(n) {
         assert(_.has(n.$, 'name'));
       });
     });
-    it('valueMatchers nodes have a "category" attribute', function() {
+    it('aura:var nodes have a "value" attribute', function() {
       result['aura:theme']['aura:var'].forEach(function(n) {
         assert(_.has(n.$, 'value'));
       });
@@ -793,6 +793,52 @@ describe('$props:formats', function() {
     });
   });
 
+  describe('aura.tokens', function() {
+    before($format('raw', 'aura.tokens', paths.sample, $toXML));
+    it('has a top level aura:tokens node', function() {
+      assert(_.has(result, 'aura:tokens'));
+    });
+    it('adds the "extends" attribute', function() {
+      assert(_.has(result['aura:tokens'].$, 'extends'));
+      assert(result['aura:tokens'].$.extends === 'one:theme');
+    });
+    it('has aura:token nodes', function() {
+      assert(_.has(result['aura:tokens'], 'aura:token'));
+    });
+    it('aura:token nodes have a "name" attribute', function() {
+      result['aura:tokens']['aura:token'].forEach(function(n) {
+        assert(_.has(n.$, 'name'));
+      });
+    });
+    it('aura:token nodes have a "value" attribute', function() {
+      result['aura:tokens']['aura:token'].forEach(function(n) {
+        assert(_.has(n.$, 'value'));
+      });
+    });
+    it('aura:token nodes have a "property" attribute if the token has a "cssProperties" key (array)', function() {
+      var token = _.find(result['aura:tokens']['aura:token'], function(n) {
+        return n.$.name === 'spacingNone';
+      });
+      assert(_.has(token, '$.property'));
+      assert(token.$.property === 'width,height,padding,margin');
+    });
+    it('aura:token nodes have a "property" attribute if the token has a "cssProperties" key (string)', function() {
+      var token = _.find(result['aura:tokens']['aura:token'], function(n) {
+        return n.$.name === 'stageLeftWidth';
+      });
+      assert(_.has(token, '$.property'));
+      assert(token.$.property === 'width');
+    });
+    it('has aura:import nodes', function() {
+      assert(_.has(result['aura:tokens'], 'aura:import'));
+    });
+    it('aura:import nodes have a "name" attribute', function() {
+      result['aura:tokens']['aura:import'].forEach(function(n) {
+        assert(_.has(n.$, 'name'));
+      });
+    });
+  });
+
   describe('html', function() {
     before($format('raw', 'html', paths.sink));
     it('outputs html', function() {

diff --git a/test/props/mock/sample.json b/test/props/mock/sample.json
@@ -17,7 +17,8 @@
     "spacing_none": {
       "value": "0",
       "label": "n",
-      "type": "number"
+      "type": "number",
+      "cssProperties": ["width","height","padding","margin"]
     },
     "spacing_xx_small": {
       "value": "0.25em",
@@ -34,7 +35,8 @@
     },
     "stage_left_width": {
       "value": "25%",
-      "type": "number"
+      "type": "number",
+      "cssProperties": "width"
     },
     "font": {
       "value": "'Arial Black', 'Arial Bold', Gadget, sans-serif",

diff --git a/test/props/mock/sample.yml b/test/props/mock/sample.yml
@@ -12,6 +12,7 @@
       value: "0"
       label: "n"
       type: "number"
+      cssProperties: ['width','height','padding','margin']
     spacing_xx_small: 
       value: "0.25em"
       label: "xxs"
@@ -22,6 +23,7 @@
     opportunity: 
       value: "rgba(255, 255, 0)"
       type: "color"
+      cssProperties: 'background-color'
     stage_left_width: 
       value: "25%"
       type: "number"