From 8f1ced168f74fe186a27f5e6a52b3f8c7d391664 Mon Sep 17 00:00:00 2001 From: Keegan Date: Sat, 6 Feb 2016 18:33:07 -0800 Subject: [PATCH] insert styles from component on registration --- src/scripts/lib/clay-config.js | 7 ++++ src/styles/_base.scss | 10 +++--- src/styles/config-page.scss | 1 + src/styles/elements/_button.scss | 58 ++++++++++++++++++++++++++++++++ test/spec/lib/clay-config.js | 45 +++++++++++++------------ 5 files changed, 95 insertions(+), 26 deletions(-) create mode 100644 src/styles/elements/_button.scss diff --git a/src/scripts/lib/clay-config.js b/src/scripts/lib/clay-config.js index c8d1ca0..b51d01b 100644 --- a/src/scripts/lib/clay-config.js +++ b/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; }; diff --git a/src/styles/_base.scss b/src/styles/_base.scss index a3b90e8..5dcc7a8 100644 --- a/src/styles/_base.scss +++ b/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%; diff --git a/src/styles/config-page.scss b/src/styles/config-page.scss index a3f2046..fbd6c4e 100755 --- a/src/styles/config-page.scss +++ b/src/styles/config-page.scss @@ -3,3 +3,4 @@ @import "partials/reset"; @import "fonts"; @import "base"; +@import "elements/button"; diff --git a/src/styles/elements/_button.scss b/src/styles/elements/_button.scss new file mode 100644 index 0000000..4e42765 --- /dev/null +++ b/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; +} diff --git a/test/spec/lib/clay-config.js b/test/spec/lib/clay-config.js index 7ce2650..48685ba 100644 --- a/test/spec/lib/clay-config.js +++ b/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) { - delete componentRegistry.text; - assert.typeOf(componentRegistry.text, 'undefined'); - var clayConfig = fixtures.clayConfig(['text'], true); + it('adds the component to the registry and adds the style to the HEAD', + function(done) { + delete componentRegistry.select; + 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 _textComponent = _.copyObj(textComponent); + var clayConfig = fixtures.clayConfig(['select'], true); + var _textComponent = _.copyObj(selectComponent); _textComponent.manipulator = 'not_real'; clayConfig.on(clayConfig.EVENTS.BEFORE_BUILD, function() { @@ -145,20 +148,20 @@ describe('ClayConfig', function() { }); it('throws if manipulator does not have a `get` and `set` method', - function(done) { - var clayConfig = fixtures.clayConfig(['text'], true); - var _textComponent = _.copyObj(textComponent); - _textComponent.manipulator = {}; + function(done) { + var clayConfig = fixtures.clayConfig(['select'], true); + var _selectComponent = _.copyObj(selectComponent); + _selectComponent.manipulator = {}; - clayConfig.on(clayConfig.EVENTS.BEFORE_BUILD, function() { - assert.throws(function() { - clayConfig.registerComponent(_textComponent); - }, /(get.*set)|(set.*get)/); - done(); - }); - - clayConfig.build(); + clayConfig.on(clayConfig.EVENTS.BEFORE_BUILD, function() { + assert.throws(function() { + clayConfig.registerComponent(_selectComponent); + }, /(get.*set)|(set.*get)/); + done(); }); + + clayConfig.build(); + }); }); describe('.build()', function() {