make Clay work with phone apps

gulpfile.js

@@ -11,6 +11,28 @@ var sass = require('gulp-sass');
 var sourceMaps = require('gulp-sourcemaps');
 var autoprefixer = require('gulp-autoprefixer');
 var sassify = require('sassify');
+var autoprefixify = require('./src/scripts/vendor/autoprefixify');
+
+var sassIncludePaths = [].concat(
+  require('bourbon').includePaths,
+  'src/styles'
+);
+
+var sassifyOptions = {
+  base64Encode: false,
+  sourceMap: false,
+  sourceMapEmbed: false,
+  sourceMapContents: false,
+  outputStyle: 'compact',
+  includePaths: sassIncludePaths
+};
+
+var autoprefixerOptions = {
+  browsers: ['Android 4', 'iOS 8'],
+  cascade: false
+};
+
+var stringifyOptions = ['.html', '.tpl'];
 
 gulp.task('clean-js', function() {
   return del(['tmp/config-page.js']);
@@ -18,7 +40,6 @@ gulp.task('clean-js', function() {
 
 gulp.task('js', ['clean-js'], function() {
   return browserify('src/scripts/config-page.js', { debug: true })
-    .transform(stringify(['.html', '.tpl']))
     .transform('deamdify')
     .bundle()
     .pipe(source('config-page.js'))
@@ -31,11 +52,10 @@ gulp.task('clean-sass', function() {
 gulp.task('sass', ['clean-sass'], function() {
   gulp.src('./src/styles/config-page.scss')
     .pipe(sourceMaps.init())
-    .pipe(sass().on('error', sass.logError))
+    .pipe(sass({
-    .pipe(autoprefixer({
+      includePaths: sassIncludePaths
-      browsers: ['Android 4', 'iOS 8'],
+    }).on('error', sass.logError))
-      cascade: false
+    .pipe(autoprefixer(autoprefixerOptions))
-    }))
     .pipe(sourceMaps.write('./'))
     .pipe(gulp.dest('tmp'));
 });
@@ -56,8 +76,13 @@ gulp.task('inlineHtml', ['js', 'sass'], function() {
 });
 
 gulp.task('clay', ['inlineHtml'], function() {
-  return browserify('index.js', { debug: false })
+  return browserify('index.js', {
-    .transform(stringify(['.html', '.tpl']))
+    debug: false,
+    standalone: 'clay'
+  })
+    .transform(stringify(stringifyOptions))
+    .transform(sassify, sassifyOptions)
+    .transform(autoprefixify, autoprefixerOptions)
     .require(require.resolve('./index'), {expose: 'pebble-clay'})
     .bundle()
     .pipe(source('clay.js'))
@@ -65,21 +90,10 @@ gulp.task('clay', ['inlineHtml'], function() {
 });
 
 gulp.task('dev-js', ['js', 'sass'], function() {
-  return browserify('dev/dev.js', { debug: true, global: true })
+  return browserify('dev/dev.js', { debug: true })
-    .transform(stringify(['.html', '.tpl']), { global: true })
+    .transform(stringify(stringifyOptions))
     .transform('deamdify')
-    .transform(sassify, {
+    .transform(sassify, sassifyOptions)
-      global: true,
-      base64Encode: false,
-      sourceMap: false,
-      sourceMapEmbed: false,
-      sourceMapContents: false,
-      outputStyle: 'compact',
-      includePaths: [].concat(
-        require('bourbon').includePaths,
-        'src/styles'
-      )
-    })
     .bundle()
     .pipe(source('dev.js'))
     .pipe(gulp.dest('./tmp/'));

index.js

@@ -1,6 +1,8 @@
 'use strict';
 
 var configPageHtml = require('./tmp/config-page.html');
+var toSource = require('tosource');
+var standardComponents = require('./src/scripts/components');
 
 /**
  * @param {string} input
@@ -56,16 +58,42 @@ function encodeDataUri(input) {
 }
 
 /**
- * @param {array} config - the Clay config
+ * @param {Array} config - the Clay config
  * @param {function} [customFn] - custom code to run from the config page.
  * Will run with api as context
  * @constructor
  */
 function Clay(config, customFn) {
-  this.config = config;
+  var self = this;
-  this.customFn = customFn || function() {};
+
+  self.config = config;
+  self.customFn = customFn || function() {};
+  self.components = [];
+
+  /**
+   * @private
+   * @param {Clay~ConfigItem|Array} item
+   * @return {void}
+   */
+  function _registerStandardComponents(item) {
+    if (Array.isArray(item)) {
+      item.forEach(function(item) {
+        _registerStandardComponents(item);
+      });
+    } else if (item.type === 'section') {
+      _registerStandardComponents(item.items);
+    } else if (standardComponents[item.type]) {
+      self.registerComponent(standardComponents[item.type]);
+    }
+  }
+
+  _registerStandardComponents(self.config);
 }
 
+Clay.prototype.registerComponent = function(component) {
+  this.components.push(component);
+};
+
 /**
  * Generate the Data URI used by the config Page with settings injected
  * @param {string} returnTo - used while developing on desktop.
@@ -80,19 +108,13 @@ Clay.prototype.generateUrl = function(returnTo) {
     settings = {};
   }
 
-  var strings = {
-    customFn: this.customFn.toString().replace(/^.*?\{/, '{'),
-    returnTo: returnTo || 'pebblejs://close#',
-    config: JSON.stringify(this.config),
-    settings: JSON.stringify(settings)
-  };
-
   // Show config page
   return encodeDataUri(configPageHtml
-    .replace('$$CUSTOM_FN$$', strings.customFn)
+    .replace('$$CUSTOM_FN$$', toSource(this.customFn))
-    .replace('$$RETURN_TO$$', strings.returnTo)
+    .replace('$$RETURN_TO$$', returnTo || 'pebblejs://close#')
-    .replace('$$CONFIG$$', strings.config)
+    .replace('$$CONFIG$$', toSource(this.config))
-    .replace('$$SETTINGS$$', strings.settings)
+    .replace('$$SETTINGS$$', toSource(settings))
+    .replace('$$COMPONENTS$$', toSource(this.components))
   );
 };
 

package.json

@@ -29,6 +29,7 @@
   },
   "homepage": "https://github.com/pebble/clay#readme",
   "devDependencies": {
+    "autoprefixer": "^6.3.1",
     "bourbon": "^4.2.6",
     "browserify": "^13.0.0",
     "browserify-istanbul": "^0.2.1",
@@ -54,9 +55,13 @@
     "karma-threshold-reporter": "^0.1.15",
     "mocha": "^2.3.4",
     "pebble-clay-components": "git+https://github.com/pebble/clay-components.git#master",
+    "postcss": "^5.0.14",
+    "require-from-string": "^1.1.0",
     "sassify": "^0.9.1",
     "sinon": "^1.17.3",
     "stringify": "^3.2.0",
+    "through": "^2.3.8",
+    "tosource": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",
     "watchify": "^3.7.0"
   },

src/config-page.html

@@ -8,11 +8,12 @@
       window.returnTo = '$$RETURN_TO$$';
       window.clayConfig = $$CONFIG$$;
       window.claySettings = $$SETTINGS$$;
-      window.customFn = function() $$CUSTOM_FN$$;
+      window.customFn = $$CUSTOM_FN$$;
+      window.clayComponents = $$COMPONENTS$$;
     </script>
   </head>
   <body>
     <form id="main-form" class="inputs"></form>
-    <script uglify src="../tmp/config-page.js"></script>
+    <script src="../tmp/config-page.js"></script>
   </body>
 </html>

src/scripts/components/color.js

@@ -0,0 +1,107 @@
+'use strict';
+
+module.exports = {
+  name: 'color',
+  template: require('../../templates/components/color.tpl'),
+  style: require('../../styles/clay/components/color.scss'),
+  manipulator: 'val',
+  defaults: {
+    label: ''
+  },
+  initialize: function(minified) {
+    var HTML = minified.HTML;
+    var self = this;
+
+    /* eslint-disable  comma-spacing, no-multi-spaces, max-len,
+        standard/array-bracket-even-spacing */
+    var layout = self.config.layout || [
+      [false    , false    , '#55FF00', '#AAFF55', false    , '#FFFF55', '#FFFFAA', false    , false    ],
+      [false    , '#AAFFAA', '#55FF55', '#00FF00', '#AAFF00', '#FFFF00', '#FFAA55', '#FFAAAA', false    ],
+      ['#55FFAA', '#00FF55', '#00AA00', '#55AA00', '#AAAA55', '#AAAA00', '#FFAA00', '#FF5500', '#FF5555'],
+      ['#AAFFFF', '#00FFAA', '#00AA55', '#55AA55', '#005500', '#555500', '#AA5500', '#FF0000', '#FF0055'],
+      [false    , '#55AAAA', '#00AAAA', '#005555', '#FFFFFF', '#000000', '#AA5555', '#AA0000', false    ],
+      ['#55FFFF', '#00FFFF', '#00AAFF', '#0055AA', '#AAAAAA', '#555555', '#550000', '#AA0055', '#FF55AA'],
+      ['#55AAFF', '#0055FF', '#0000FF', '#0000AA', '#000055', '#550055', '#AA00AA', '#FF00AA', '#FFAAFF'],
+      [false    , '#5555AA', '#5555FF', '#5500FF', '#5500AA', '#AA00FF', '#FF00FF', '#FF55FF', false    ],
+      [false    , false    , false    , '#AAAAFF', '#AA55FF', '#AA55AA', false    , false    , false    ]
+    ];
+    /* eslint-enable */
+
+    var grid = '';
+    var itemWidth = 100 / layout[0].length;
+    var itemHeight = 100 / layout.length;
+    var $elem = self.$element;
+
+    for (var i = 0; i < layout.length; i++) {
+      for (var j = 0; j < layout[i].length; j++) {
+
+        var color = layout[i][j] || 'transparent';
+        var selectable = (color !== 'transparent' ? ' selectable' : '');
+
+        var roundedTL = (i === 0 && j === 0) || i === 0 && !layout[i][j - 1] ||
+                        !layout[i][j - 1] && !layout[i - 1][j] ?
+          ' rounded-tl' :
+          '';
+
+        var roundedTR = i === 0 && !layout[i][j + 1] ||
+                        !layout[i][j + 1] && !layout[i - 1][j] ?
+          ' rounded-tr ' :
+          '';
+
+        var roundedBL = (i === layout.length - 1 && j === 0) ||
+                        i === layout.length - 1 && !layout[i][j - 1] ||
+                        !layout[i][j - 1] && !layout[i + 1][j] ?
+          ' rounded-bl' :
+          '';
+
+        var roundedBR = i === layout.length - 1 && !layout[i][j + 1] ||
+                        !layout[i][j + 1] && !layout[i + 1][j] ?
+          ' rounded-br' :
+          '';
+
+        grid += '<i ' +
+          'class="color-box ' + selectable + roundedTL + roundedTR + roundedBL +
+              roundedBR + '" ' +
+          'data-value="' + color.replace(/^#/, '0x').toLowerCase() + '" ' +
+          'style="' +
+            'width:' + itemWidth + '%; ' +
+            'height:' + itemHeight + '%; ' +
+            'background:' + color + ';">' +
+        '</i>';
+      }
+    }
+
+    $elem.select('.color-box-container').add(HTML(grid));
+
+    var $valueDisplay = $elem.select('.value');
+    var $picker = $elem.select('.picker-wrap');
+    var disabled = self.$manipulatorTarget.get('disabled');
+
+    $elem.select('label').on('click', function(ev) {
+      if (!disabled) {
+        $picker.set('show'); // toggle visibility
+      }
+    });
+
+    self.on('change', function() {
+      var value = self.get().replace(/^0x/, '').toLowerCase();
+      $valueDisplay.set('$background-color', '#' + value);
+      $elem.select('.color-box').set('-selected');
+      $elem.select('.color-box[data-value="0x' + value + '"]').set('+selected');
+    });
+
+    $elem.select('.color-box.selectable').on('click', function(ev) {
+      self.set(ev.target.dataset.value);
+      $picker.set('-show');
+    });
+
+    self.on('disabled', function() {
+      disabled = true;
+    });
+
+    self.on('enabled', function() {
+      disabled = false;
+    });
+
+  }
+};

src/scripts/components/footer.js

@@ -0,0 +1,10 @@
+'use strict';
+
+module.exports = {
+  name: 'footer',
+  template: require('../../templates/components/footer.tpl'),
+  manipulator: 'html',
+  defaults: {
+    attributes: {}
+  }
+};

src/scripts/components/heading.js

@@ -0,0 +1,11 @@
+'use strict';
+
+module.exports = {
+  name: 'heading',
+  template: require('../../templates/components/heading.tpl'),
+  manipulator: 'html',
+  defaults: {
+    attributes: {},
+    size: 4
+  }
+};

src/scripts/components/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+module.exports = {
+  color: require('./color'),
+  footer: require('./footer'),
+  heading: require('./heading'),
+  input: require('./input'),
+  select: require('./select'),
+  submit: require('./submit'),
+  text: require('./text'),
+  toggle: require('./toggle')
+};

src/scripts/components/input.js

@@ -0,0 +1,12 @@
+'use strict';
+
+module.exports = {
+  name: 'input',
+  template: require('../../templates/components/input.tpl'),
+  style: require('../../styles/clay/components/input.scss'),
+  manipulator: 'val',
+  defaults: {
+    label: '',
+    attributes: {}
+  }
+};

src/scripts/components/select.js

@@ -0,0 +1,22 @@
+'use strict';
+
+module.exports = {
+  name: 'select',
+  template: require('../../templates/components/select.tpl'),
+  style: require('../../styles/clay/components/select.scss'),
+  manipulator: 'val',
+  defaults: {
+    label: '',
+    options: []
+  },
+  initialize: function() {
+    var self = this;
+
+    var $value = self.$element.select('.value');
+
+    self.on('change', function(ev) {
+      var value = self.$manipulatorTarget.select('option:checked').get('innerHTML');
+      $value.set('innerHTML', value);
+    });
+  }
+};

src/scripts/components/submit.js

@@ -0,0 +1,10 @@
+'use strict';
+
+module.exports = {
+  name: 'submit',
+  template: require('../../templates/components/submit.tpl'),
+  manipulator: 'val',
+  defaults: {
+    attributes: {}
+  }
+};

src/scripts/components/text.js

@@ -0,0 +1,10 @@
+'use strict';
+
+module.exports = {
+  name: 'text',
+  template: require('../../templates/components/text.tpl'),
+  manipulator: 'html',
+  defaults: {
+    attributes: {}
+  }
+};

src/scripts/components/toggle.js

@@ -0,0 +1,11 @@
+'use strict';
+
+module.exports = {
+  name: 'toggle',
+  template: require('../../templates/components/toggle.tpl'),
+  style: require('../../styles/clay/components/toggle.scss'),
+  manipulator: 'checked',
+  defaults: {
+    attributes: {}
+  }
+};

src/scripts/config-page.js

@@ -1,13 +1,20 @@
 'use strict';
 
-var $ = require('./vendor/minified/minified').$;
+var minified = require('./vendor/minified');
-var _ = require('./vendor/minified/minified')._;
 var ClayConfig = require('./lib/clay-config');
-var config = _.extend([], window.clayConfig || []);
 
+var $ = minified.$;
+var _ = minified._;
+
+var config = _.extend([], window.clayConfig || []);
 var settings = _.extend({}, window.claySettings || {});
 var returnTo = window.returnTo || 'pebblejs://close#';
 var customFn = window.customFn || function() {};
+var clayComponents = window.clayComponents || {};
+
+_.eachObj(clayComponents, function(key, component) {
+  ClayConfig.registerComponent(component);
+});
 
 var $mainForm = $('#main-form');
 var clayConfig = new ClayConfig(settings, config, $mainForm);
@@ -27,7 +34,7 @@ clayConfig.on(clayConfig.EVENTS.AFTER_BUILD, function() {
 });
 
 // Run the custom function in the context of the ClayConfig
-customFn.call(clayConfig);
+customFn.call(clayConfig, minified);
 
 // Now that we have given the dev's custom code to run and attach listeners,
 // we build the config

src/scripts/lib/clay-config.js

@@ -9,12 +9,12 @@
  * @property {string} [id]
  * @property {string} [label]
  * @property {object} [attributes]
- * @property {array} [options]
+ * @property {Array} [options]
- * @property {array} [items]
+ * @property {Array} [items]
  */
 
-var HTML = require('../vendor/minified/minified').HTML;
+var HTML = require('../vendor/minified').HTML;
-var _ = require('../vendor/minified/minified')._;
+var _ = require('../vendor/minified')._;
 var ClayItem = require('./clay-item');
 var utils = require('../lib/utils');
 var ClayEvents = require('./clay-events');
@@ -39,7 +39,7 @@ function ClayConfig(settings, config, $rootContainer) {
 
   /**
    * Add item(s) to the config
-   * @param {Clay~ConfigItem|array} item
+   * @param {Clay~ConfigItem|Array} item
    * @param {M} $container
    * @return {void}
    */

src/scripts/lib/clay-events.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var $ = require('../vendor/minified/minified').$;
+var $ = require('../vendor/minified').$;
-var _ = require('../vendor/minified/minified')._;
+var _ = require('../vendor/minified')._;
 
 /**
  * Attaches event methods to the context.

src/scripts/lib/clay-item.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var componentRegistry = require('./component-registry');
-var minified = require('../vendor/minified/minified');
+var minified = require('../vendor/minified');
 var utils = require('../lib/utils');
 var ClayEvents = require('./clay-events');
 

src/scripts/vendor/autoprefixify.js

@@ -0,0 +1,54 @@
+var path = require('path');
+var through = require('through');
+var postcss = require('postcss');
+var autoprefixer = require('autoprefixer');
+var requireFromString = require('require-from-string');
+
+/**
+ * Stringifies the content
+ * @param   {string}    content
+ * @returns {string}
+ */
+function stringify (content) {
+  return 'module.exports = ' + JSON.stringify(content) + ';\n';
+}
+
+module.exports = function (file, options) {
+
+  /**
+   * The function Browserify will use to transform the input.
+   * @param   {string} file
+   * @returns {stream}
+   */
+  function browserifyTransform (file) {
+    var extensions = ['.css', '.sass', '.scss', '.less'];
+    var chunks = [];
+
+    if (extensions.indexOf(path.extname(file)) === -1) {
+      return through();
+    }
+
+    var write = function (buffer) {
+      chunks.push(buffer);
+    };
+
+    var end = function () {
+      var contents = requireFromString(Buffer.concat(chunks).toString('utf8'));
+      contents = postcss([autoprefixer(options)]).process(contents).css;
+      this.queue(stringify(contents));
+      this.queue(null);
+    };
+
+    return through(write, end);
+  }
+
+  if (typeof file !== 'string') {
+    // Factory: return a function.
+    // Set options variable here so it is ready for when browserifyTransform
+    // is called. Note: first argument is the options.
+    options = file;
+    return browserifyTransform;
+  } else {
+    return browserifyTransform(file);
+  }
+};

src/styles/clay/_base.scss

@@ -1,6 +1,5 @@
 @import "bourbon";
-@import "vars";
+@import "clay";
-@import "mixins";
 
 html, body {
   @include font-pfdin(regular);

src/styles/clay/components/color.scss

@@ -0,0 +1,91 @@
+@import "clay";
+
+.component-color {
+
+  .value {
+    width: $small-component-width;
+    height: $base-height;
+    border-radius: $base-height / 2;
+    box-shadow: $box-shadow-small-components;
+  }
+
+  input:disabled ~ .value,
+  input:disabled ~ .label {
+    opacity: 0.25;
+  }
+
+  .picker-wrap {
+    left: 0;
+    top: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    position: fixed;
+    padding: 1rem;
+    background: rgba(0,0,0,0.7);
+    opacity: 0;
+    transition: opacity 70ms ease-in 175ms;
+    pointer-events: none;
+    z-index: 100;
+
+    .picker {
+      padding: 1rem;
+      background: $color-gray-11;
+      border-radius: $border-radius;
+    }
+
+    &.show {
+      transition-delay: 0ms;
+      pointer-events: auto;
+      opacity: 1;
+    }
+  }
+
+  .color-box-wrap {
+    box-sizing: border-box;
+    position: relative;
+    height: 0;
+    width: 100%;
+    padding: 0 0 100% 0; // overridden with inline style
+    margin: 0.6em 0 0em;
+
+    .color-box-container {
+      position: absolute;
+      height: 99.97%;
+      width: 100%;
+      left: 0;
+      top: 0;
+
+      .color-box {
+        float:left;
+        cursor: pointer;
+        -webkit-tap-highlight-color: rgba(0,0,0,0);
+
+        &.rounded-tl {
+          border-top-left-radius: $border-radius;
+        }
+
+        &.rounded-tr {
+          border-top-right-radius: $border-radius;
+        }
+
+        &.rounded-bl {
+          border-bottom-left-radius: $border-radius;
+        }
+
+        &.rounded-br {
+          border-bottom-right-radius: $border-radius;
+        }
+
+        &.selected {
+          transform: scale(1.15);
+          border-radius: $border-radius;
+          box-shadow: #111 0 0 0.24rem;
+          position: relative;
+          z-index: 100;
+        }
+      }
+
+    }
+  }
+}

src/styles/clay/components/input.scss

@@ -0,0 +1,41 @@
+@import "clay";
+
+.component-input {
+
+  display: block;
+
+  .label {
+    padding-bottom: $item-spacing-v;
+  }
+
+  .input {
+    position: relative;
+    min-width: 100%;
+    margin-top: $item-spacing-v;
+    margin-left: 0;
+  }
+
+  input {
+    display:block;
+    width: 100%;
+    background: $color-gray-2;
+    border-radius: $border-radius;
+    padding: $item-spacing-v / 2 $item-spacing-h / 2;
+    border: none;
+    vertical-align: baseline;
+    color: $color-white;
+    font-size: inherit;
+
+    @include placeholder {
+      color: $color-gray-8;
+    }
+
+    &:focus {
+      @include placeholder {
+        color: $color-gray-6;
+      }
+      border: none;
+      box-shadow: none ;
+    }
+  }
+}

src/styles/clay/components/select.scss

@@ -0,0 +1,36 @@
+@import "bourbon";
+@import "clay";
+
+.component-select {
+  position: relative;
+
+  .value {
+    $triangle-size: 0.85rem;
+    position: relative;
+    padding-right: $triangle-size + 0.25rem;
+
+    &:after {
+      content: "";
+      position: absolute;
+      right: 0;
+      top: 50%;
+      margin-top: -0.1rem;
+      @include triangle($triangle-size, $color-gray-10, down);
+    }
+  }
+
+  select {
+    opacity: 0;
+    position: absolute;
+    display: block;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: #000;
+    width: 100%;
+    border: none;
+    margin:0;
+    padding:0;
+  }
+}

src/styles/clay/components/toggle.scss

@@ -0,0 +1,51 @@
+@import "clay";
+
+.component-toggle {
+
+  $slide-height: $base-height * 0.75;
+  $slide-width: $small-component-width;
+  $marker-diameter: $base-height;
+
+  input {
+    display: none; // @todo make sure this doesn't mess up interactivity on iOS
+  }
+
+  .graphic {
+    display: inline-block;
+    position: relative;
+
+    .slide {
+      display:block;
+      border-radius: $slide-height;
+      height: $slide-height;
+      width: $slide-width;
+      background: $color-gray-1;
+      transition: background-color 150ms linear;
+    }
+
+    .marker {
+      background: $color-gray-10;
+      width: $marker-diameter;
+      height: $marker-diameter;
+      border-radius: $marker-diameter;
+      position: absolute;
+      left: 0;
+      display: block;
+      top: ($marker-diameter - $slide-height) / 2 * -1;
+      transition: transform 150ms linear;
+      box-shadow: $box-shadow-small-components;
+    }
+  }
+
+  input:checked + .graphic {
+    .slide {
+      background: $color-orange-dark;
+    }
+
+    .marker {
+      background: $color-orange;
+      transform: translateX($slide-width - $marker-diameter);
+    }
+  }
+
+}

src/styles/clay/elements/_button.scss

@@ -1,5 +1,4 @@
-@import "../vars";
+@import "clay";
-@import "../mixins";
 
 button,
 .button {

src/templates/components/color.tpl

@@ -0,0 +1,17 @@
+<div class="component-color">
+  <label class="component">
+    <input
+      data-manipulator-target
+      type="hidden"
+    />
+    <span class="label">{{{label}}}</span>
+    <span class="value"></span>
+  </label>
+  <div class="picker-wrap">
+    <div class="picker">
+      <div class="color-box-wrap">
+        <div class="color-box-container"></div>
+      </div>
+    </div>
+  </div>
+</div>

src/templates/components/footer.tpl

@@ -0,0 +1,5 @@
+<div
+  data-manipulator-target
+  class="item-container-footer"
+  {{each attributes}} {{this.key}}="{{this.value}}" {{/each}}
+></div>

src/templates/components/heading.tpl

@@ -0,0 +1,3 @@
+<div class="component component-heading">
+  <h{{size}} data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}></h{{size}}>
+</div>

src/templates/components/input.tpl

@@ -0,0 +1,9 @@
+<label class="component component-input">
+  <span class="label">{{{label}}}</span>
+  <span class="input">
+    <input
+      data-manipulator-target
+      {{each key: attributes}}{{key}}="{{this}}"{{/each}}
+    />
+  </span>
+</label>

src/templates/components/select.tpl

@@ -0,0 +1,9 @@
+<label class="component component-select">
+  <span class="label">{{{label}}}</span>
+  <span class="value"></span>
+  <select data-manipulator-target>
+    {{each options}}
+      <option value="{{this.value}}" class="item-select-option">{{this.label}}</option>
+    {{/each}}
+  </select>
+</label>

src/templates/components/submit.tpl

@@ -0,0 +1,9 @@
+<div class="component component-button">
+  <button
+    data-manipulator-target
+    type="submit"
+    {{each key: attributes}}{{key}}="{{this}}"{{/each}}
+  >
+    {{{label}}}
+  </button>
+</div>

src/templates/components/text.tpl

@@ -0,0 +1,3 @@
+<div class="component component-text">
+  <p data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}></p>
+</div>

src/templates/components/toggle.tpl

@@ -0,0 +1,14 @@
+<label class="component component-toggle">
+  <span class="label">{{{label}}}</span>
+  <span class="input">
+    <input
+      data-manipulator-target
+      type="checkbox"
+      {{each key: attributes}}{{key}}="{{this}}"{{/each}}
+    />
+    <span class="graphic">
+      <span class="slide"></span>
+      <span class="marker"></span>
+    </span>
+  </span>
+</label>

test/fixture.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var _ = require('../src/scripts/vendor/minified/minified')._;
+var _ = require('../src/scripts/vendor/minified')._;
-var $ = require('../src/scripts/vendor/minified/minified').$;
+var $ = require('../src/scripts/vendor/minified').$;
-var HTML = require('../src/scripts/vendor/minified/minified').HTML;
+var HTML = require('../src/scripts/vendor/minified').HTML;
 var ClayItem = require('../src/scripts/lib/clay-item');
 var ClayConfig = require('../src/scripts/lib/clay-config');
 var idCounter = 0;

test/spec/lib/clay-config.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var assert = require('chai').assert;
-var _ = require('../../../src/scripts/vendor/minified/minified')._;
+var _ = require('../../../src/scripts/vendor/minified')._;
 var selectComponent = require('pebble-clay-components').select;
 var componentRegistry = require('../../../src/scripts/lib/component-registry');
 var checkReadOnly = require('../../test-utils').checkReadOnly;

test/spec/lib/clay-events.js

@@ -2,8 +2,8 @@
 var sinon = require('sinon');
 var assert = require('chai').assert;
 var ClayEvents = require('../../../src/scripts/lib/clay-events');
-var $ = require('../../../src/scripts/vendor/minified/minified').$;
+var $ = require('../../../src/scripts/vendor/minified').$;
-var HTML = require('../../../src/scripts/vendor/minified/minified').HTML;
+var HTML = require('../../../src/scripts/vendor/minified').HTML;
 
 /**
  * @extends ClayEvents

test/spec/lib/clay-item.js

@@ -4,7 +4,7 @@ var assert = require('chai').assert;
 var sinon = require('sinon');
 var checkReadOnly = require('../../test-utils').checkReadOnly;
 var ClayItem = require('../../../src/scripts/lib/clay-item');
-var minified = require('../../../src/scripts/vendor/minified/minified');
+var minified = require('../../../src/scripts/vendor/minified');
 var clayItemFixture = require('../../fixture').clayItem;
 var configItemFixture = require('../../fixture').configItem;
 var componentRegistry = require('../../../src/scripts/lib/component-registry');