tabs component, simplify togglebutton and more unit tests

src/css/g-tabs.css

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2012 The Toolkitchen Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+@host {
+  display: block;
+  height: 28px;
+  line-height: 28px;
+  border: 0;
+  border-bottom: 1px solid #ccc;
+}
+
+.vertical {
+  display: inline-block;
+  width: 71px;
+  height: 100%;
+  border: 0;
+  border-right: 1px solid #ccc;
+}
+
+.tabContainer > * {
+  display: inline-block;
+  min-width: 54px;
+  height: 27px;
+  line-height: 27px;
+  text-align: center;
+  padding: 0 8px;
+  cursor: default;
+  border: 1px solid transparent;
+  border-radius: 2px 2px 0 0;
+  -webkit-transition: all 0.218s;
+}
+
+.vertical .tabContainer > * {
+  border-radius: 2px 0 0 2px;
+}
+
+.tabContainer > :hover {
+  color: #555;
+}
+
+.tabContainer > .selected {
+  color: #202020;
+  border: 1px solid #ccc;
+}

src/g-component.html

@@ -47,7 +47,8 @@
         if (inAttributes) {
           var bindables = inAttributes.value.split(",");
           bindables.forEach(function(a) {
-            attrs.push(a.trim());
+            a = a.trim();
+            attrs.push(a);
             bindProperty.call(this, a, this[a]);
           }, this);
         }

src/g-selection.html

@@ -8,15 +8,11 @@
 <element name="g-selection" attributes="multi">
   <link rel="components" href="g-component.html">
   <template>
-    <style>
-      @host {
-        display: none;
-      }
-    </style>
   </template>
   <script>
     this.component({
       created: function() {
+        this.style.display = 'none';
         this.clear();
       },
       prototype: {

src/g-tabs.html

@@ -0,0 +1,25 @@
+<!--
+/*
+ * Copyright 2012 The Toolkitchen Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+-->
+<element name="g-tabs" extends="g-selector" attributes="selected, multi, vertical" handlers="click: clickHandler">
+  <link rel="components" href="g-selector.html">
+  <link rel="stylesheet" href="css/g-tabs.css" />
+  <template>
+    <div class="tabContainer">
+      <shadow></shadow>
+    </div>
+  </template>
+  <script>
+    this.component({
+      prototype: {
+        verticalChanged: function() {
+          this.classList.enable('vertical', this.vertical);
+        }
+      }
+    });
+  </script>
+</element>

src/g-togglebutton.html

@@ -5,7 +5,7 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<element name="g-togglebutton" attributes="value" handlers="click: clickHandler">
+<element name="g-togglebutton" attributes="value" handlers="click: toggle">
   <link rel="components" href="g-component.html">
   <link rel="stylesheet" href="css/g-togglebutton.css" />
   <template>
@@ -17,19 +17,12 @@
   </template>
   <script>
     this.component({
-      created: function() {
-        this.valueAttributeChanged();
-      },
       prototype: {
-        valueAttributeChanged: function() {
-          this.$.toggle.classList.enable('on', this.trueValue());
+        valueChanged: function() {
+          this.$.toggle.classList.enable('on', this.value);
         },
-        clickHandler: function() {
-          this.value = !this.trueValue();
-        },
-        // TODO(ffu): remove this when base component handles auto-converting string value to boolean
-        trueValue: function() {
-          return this.value != 'false' && Boolean(this.value);
+        toggle: function() {
+          this.value = !this.value;
         }
         // TODO(ffu): need to add dragging support
       }

test/selection.js

@@ -41,6 +41,17 @@ suite('g-selection', function() {
     expect(selection.isSelected(item)).to.be(false);
   });
 
+  suite('attributes', function() {
+    test('multi', function() {
+      selection.multi = true;
+      selection.select('foo');
+      selection.select('bar');
+      expect(selection.getSelection()).to.have.length(2);
+      expect(selection.getSelection()).to.contain('foo');
+      expect(selection.getSelection()).to.contain('bar');
+    });
+  });
+
   suite('events', function() {
     test('select', function() {
       var selected;

test/selector.js

@@ -41,5 +41,14 @@ suite('g-selector', function() {
       selector.selected = 2;
       expect(selector.getItems()[2].className).to.be('selected');
     });
+
+    test('multi', function() {
+      addItems(4);
+      selector.multi = true;
+      selector.selected = 0;
+      selector.selected = 1;
+      expect(selector.getItems()[0].className).to.be('selected');
+      expect(selector.getItems()[1].className).to.be('selected');
+    });
   });
 });

test/test.html

@@ -13,9 +13,11 @@
     <script src="../third_party/expect.js/expect.js"></script>
     <script src="../third_party/mocha/mocha.js"></script>
     <!-- -->
-    <script src="../../polyfills/Components/components-polyfill.js" shimShadow></script>
+    <script src="../../polyfills/Components/components-polyfill.js" shadow="shim"></script>
+    <link rel="components" href="../src/g-icon.html">
     <link rel="components" href="../src/g-selection.html">
     <link rel="components" href="../src/g-selector.html">
+    <link rel="components" href="../src/g-togglebutton.html">
     <style>
       #work {
         display: none;
@@ -29,8 +31,10 @@
     </script>
     <!--  -->
     <div id="work"></div>
+    <script src="icon.js"></script>
     <script src="selection.js"></script>
     <script src="selector.js"></script>
+    <script src="togglebutton.js"></script>
     <!--  -->
     <script>
       window.addEventListener('WebComponentsReady', function() {

test/togglebutton.js

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2012 The Toolkitchen Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+suite('g-togglebutton', function() {
+  var togglebutton;
+
+  setup(function() {
+    togglebutton = document.createElement('g-togglebutton');
+    work.appendChild(togglebutton);
+  });
+
+  teardown(function() {
+    work.textContent = '';
+  });
+
+  test('initial value', function() {
+    expect(togglebutton.value).to.not.be.ok();
+  });
+
+  test('toggle', function() {
+    var t = ShadowDOM.localQuery(togglebutton.shadow, '.toggle');
+    togglebutton.toggle();
+    expect(t.classList.contains('on')).to.be(true);
+    togglebutton.toggle();
+    expect(t.classList.contains('on')).to.be(false);
+  });
+
+  suite('attributes', function() {
+    test('value', function() {
+      var t = ShadowDOM.localQuery(togglebutton.shadow, '.toggle');
+      togglebutton.value = true;
+      expect(t.classList.contains('on')).to.be(true);
+      togglebutton.value = false;
+      expect(t.classList.contains('on')).to.be(false);
+    });
+  });
+});

workbench/ratings.html

@@ -6,7 +6,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Icon</title>
+  <title>Ratings</title>
   <script src="../../polyfills/Components/components-polyfill.js" shadow="shim"></script>
   <link rel="components" href="../../toolkit/src/g-ratings.html">
 </head>

workbench/tabs.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tabs</title>
+  <script src="../../polyfills/Components/components-polyfill.js" shadow="shim"></script>
+  <link rel="components" href="../../toolkit/src/g-tabs.html">
+</head>
+<body>
+  <g-tabs>
+    <span>One</span>
+    <span>Two</span>
+    <span>Three</span>
+    <span>Four</span>
+  </g-tabs>
+  <br><br>
+  <g-tabs vertical="true">
+    <span>One</span>
+    <span>Two</span>
+    <span>Three</span>
+    <span>Four</span>
+  </g-tabs>
+</body>
+</html>