diff --git a/README.md b/README.md index a2c228b..55ee21c 100755 --- a/README.md +++ b/README.md @@ -440,6 +440,14 @@ $prop-name: PROP_VALUE ``` +###### aura.tokens + +```xml + + + +``` + ###### common.js ```js diff --git a/package.json b/package.json index 5d484b9..59765cf 100755 --- 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 index c5b3b82..ec80af3 100755 --- 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 ``; + }).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 ``; + }).join('\n '); + let openTag = auraExtends + ? `` + : ``; + let xml = ` + ${openTag} + ${auraImports} + ${props} + + `; + return cleanOutput(xml); +}); + registerFormat('html', require('./formats/html')); registerFormat('common.js', json => { diff --git a/test/props/index.js b/test/props/index.js index 4dec581..cde9338 100644 --- 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 index cc809fa..be0218b 100644 --- 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 index fa6f59a..5a1d596 100644 --- 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"