insert styles from component on registration

src/scripts/lib/clay-config.js

@@ -208,6 +208,13 @@ ClayConfig.registerComponent = function(component) {
     throw new Error('The manipulator must have both a `get` and `set` method');
   }
 
+  if (_component.style) {
+    var style = document.createElement('style');
+    style.type = 'text/css';
+    style.appendChild(document.createTextNode(_component.style));
+    document.head.appendChild(style);
+  }
+
   componentStore[_component.name] = _component;
 };
 

src/styles/_base.scss

@@ -51,7 +51,7 @@ h6 {
   @include font-size(0.8);
 }
 
-.item {
+.component {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -92,7 +92,7 @@ h6 {
   margin-bottom: 1rem;
   box-shadow: $color-gray-1 0 0.15rem 0.25rem;
 
-  .item {
+  .component {
     padding-top: $item-spacing-v;
     padding-right: $item-spacing-h;
     padding-left: $item-spacing-h;
@@ -120,14 +120,14 @@ h6 {
     }
   }
 
-  .item-heading:first-child {
+  .component-heading:first-child {
     background: $color-gray-3;
     border-radius: $border-radius $border-radius 0 0;
   }
 
 }
 
-label.item{
+label.component{
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
 
   &:active {
@@ -153,7 +153,7 @@ a {
   width:100%;
   border-collapse: collapse;
 
-  .section & .item {
+  .section & .component {
     display: table;
     width:100%;
 

src/styles/config-page.scss

@@ -3,3 +3,4 @@
 @import "partials/reset";
 @import "fonts";
 @import "base";
+@import "elements/button";

src/styles/elements/_button.scss

@@ -0,0 +1,58 @@
+@import "../partials/vars";
+@import "../partials/mixins";
+
+button,
+.button {
+  @include font-pfdin(medium);
+  text-transform: uppercase;
+  background-color: $color-gray-4;
+  border-radius: $border-radius;
+  font-size: 1rem;
+  line-height: 1;
+  border: none;
+  display: block;
+
+  color: $color-white;
+  min-width: 12rem;
+  text-align: center;
+  margin: 0 auto;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+
+  padding: $button-padding;
+
+  .platform-ios & {
+    padding: $button-padding-ios;
+  }
+
+  &:disabled {
+    background-color: $color-gray-3;
+    color: $color-gray-8;
+  }
+
+  &:not(:disabled):active {
+    background-color: $color-gray-8;
+  }
+
+  &.orange, &[type="submit"] {
+    background-color: $color-orange;
+
+    &:disabled {
+      background-color: $color-orange-dark;
+      color: $color-gray-3;
+    }
+
+    &:not(:disabled):active {
+      background-color: $color-red;
+    }
+  }
+
+  &.light-grey {
+    background-color: $color-gray-5;
+  }
+
+}
+
+a.button {
+  text-decoration: none;
+  color: $color-white;
+}

test/spec/lib/clay-config.js

@@ -2,7 +2,7 @@
 
 var assert = require('chai').assert;
 var _ = require('../../../src/scripts/vendor/minified/minified')._;
-var textComponent = require('pebble-clay-components').text;
+var selectComponent = require('pebble-clay-components').select;
 var componentRegistry = require('../../../src/scripts/lib/component-registry');
 var checkReadOnly = require('../../test-utils').checkReadOnly;
 var fixtures = require('../../fixture');
@@ -111,17 +111,20 @@ describe('ClayConfig', function() {
   });
 
   describe('.registerComponent()', function() {
-    it('adds the component to the registry', function(done) {
+    it('adds the component to the registry and adds the style to the HEAD',
-      delete componentRegistry.text;
+    function(done) {
-      assert.typeOf(componentRegistry.text, 'undefined');
+      delete componentRegistry.select;
-      var clayConfig = fixtures.clayConfig(['text'], true);
+      assert.typeOf(componentRegistry.select, 'undefined');
+      var clayConfig = fixtures.clayConfig(['select'], true);
 
       clayConfig.on(clayConfig.EVENTS.BEFORE_BUILD, function() {
-        clayConfig.registerComponent(textComponent);
+        clayConfig.registerComponent(selectComponent);
+        assert.strictEqual(componentRegistry.select.name, selectComponent.name);
+        assert.include(document.head.innerHTML, selectComponent.style);
       });
 
       clayConfig.on(clayConfig.EVENTS.AFTER_BUILD, function() {
-        assert.strictEqual(this.getAllItems()[0].config.type, 'text');
+        assert.strictEqual(this.getAllItems()[0].config.type, 'select');
         done();
       });
 
@@ -130,8 +133,8 @@ describe('ClayConfig', function() {
 
     it('throws if manipulator is a string and does not match built-in manipulator',
     function(done) {
-      var clayConfig = fixtures.clayConfig(['text'], true);
+      var clayConfig = fixtures.clayConfig(['select'], true);
-      var _textComponent = _.copyObj(textComponent);
+      var _textComponent = _.copyObj(selectComponent);
       _textComponent.manipulator = 'not_real';
 
       clayConfig.on(clayConfig.EVENTS.BEFORE_BUILD, function() {
@@ -146,13 +149,13 @@ describe('ClayConfig', function() {
 
     it('throws if manipulator does not have a `get` and `set` method',
     function(done) {
-        var clayConfig = fixtures.clayConfig(['text'], true);
+      var clayConfig = fixtures.clayConfig(['select'], true);
-        var _textComponent = _.copyObj(textComponent);
+      var _selectComponent = _.copyObj(selectComponent);
-        _textComponent.manipulator = {};
+      _selectComponent.manipulator = {};
 
       clayConfig.on(clayConfig.EVENTS.BEFORE_BUILD, function() {
         assert.throws(function() {
-            clayConfig.registerComponent(_textComponent);
+          clayConfig.registerComponent(_selectComponent);
         }, /(get.*set)|(set.*get)/);
         done();
       });