feat(subheader): add subheader component

references: #216

config/build.config.js

@@ -89,6 +89,7 @@ module.exports = {
       'src/components/sidenav/sidenav.js',
       'src/components/slider/slider.js',
       'src/components/switch/switch.js',
+      'src/components/subheader/subheader.js',
       'src/components/tabs/tabs.js',
       'src/components/tabs/js/*.js',
       'src/components/toast/toast.js',

src/base/constants.js

@@ -4,6 +4,7 @@ var Constant = {
       BUTTON : 'button',
       CHECKBOX : 'checkbox',
       DIALOG : 'dialog',
+      HEADING : 'heading',
       LIST : 'list',
       LIST_ITEM : 'listitem',
       RADIO : 'radio',

src/components/subheader/_subheader.scss

@@ -0,0 +1,13 @@
+material-subheader {
+  color: $text-medium;
+  display: block;
+  font-size: $subheader-font-size;
+  font-weight: $subheader-font-weight;
+  line-height: $subheader-line-height;
+  padding: $subheader-padding;
+  margin: $subheader-margin;
+
+  &.material-subheader-colored {
+    color: $theme-light-blue
+  }
+}

src/components/subheader/demos/basic/index.html

@@ -0,0 +1,39 @@
+
+<div ng-app="app" ng-controller="AppCtrl">
+  <material-content layout="vertical">
+    <section>
+      <material-subheader class="material-subheader-colored">Unread Messages</material-subheader>
+      <material-list layout="vertical">
+        <material-item ng-repeat="message in messages">
+          <div class="material-tile-left">
+              <img ng-src="{{message.face}}" class="face" alt="{{message.who}}">
+          </div>
+          <div class="material-tile-content">
+            <h2>{{message.what}}</h2>
+            <h3>{{message.who}}</h3>
+            <p>
+              {{message.notes}}
+            </p>
+          </div>
+        </material-item>
+      </material-list>
+    </section>
+    <section>
+      <material-subheader>Read Messages</material-subheader>
+      <material-list layout="vertical">
+        <material-item ng-repeat="message in messages">
+          <div class="material-tile-left">
+              <img ng-src="{{message.face}}" class="face" alt="{{message.who}}">
+          </div>
+          <div class="material-tile-content">
+            <h2>{{message.what}}</h2>
+            <h3>{{message.who}}</h3>
+            <p>
+              {{message.notes}}
+            </p>
+          </div>
+        </material-item>
+      </material-list>
+    </section>
+  </material-content>
+</div>

src/components/subheader/demos/basic/script.js

@@ -0,0 +1,21 @@
+
+angular.module('app', ['ngMaterial'])
+
+.controller('AppCtrl', function($scope) {
+    $scope.messages = [
+      {
+        face : '/img/list/60.jpeg',
+        what: 'Brunch this weekend?',
+        who: 'Min Li Chan',
+        when: '3:08PM',
+        notes: " I'll be in your neighborhood doing errands"
+      },
+      {
+        face : '/img/list/60.jpeg',
+        what: 'Brunch this weekend?',
+        who: 'Min Li Chan',
+        when: '3:08PM',
+        notes: " I'll be in your neighborhood doing errands"
+      },
+    ];
+});

src/components/subheader/demos/basic/style.css

@@ -0,0 +1,12 @@
+
+material-content {
+  margin-right: 7px;
+}
+
+.face {
+  border-radius: 30px;
+  border: 1px solid #ddd;
+  width: 48px;
+  margin: 16px;
+}
+

src/components/subheader/module.json

@@ -0,0 +1,10 @@
+{
+  "module": "material.components.subheader",
+  "name": "SubHeader",
+  "demos": {
+    "basic": {
+      "name": "Basic Usage",
+      "files": ["demos/basic/*"]
+    }
+  }
+}

src/components/subheader/subheader.js

@@ -0,0 +1,38 @@
+/**
+ * @ngdoc module
+ * @name material.components.subheader
+ * @description
+ * SubHeader module
+ */
+angular.module('material.components.subheader', [])
+
+.directive('materialSubheader', [
+  materialSubheaderDirective
+]);
+
+/**
+ * @ngdoc directive
+ * @name materialSubheader
+ * @module material.components.subheader
+ *
+ * @restrict E
+ *
+ * @description
+ * The `<material-subheader>` directive is a subheader for a section
+ *
+ * @usage
+ * <hljs lang="html">
+ * <material-subheader>Online Friends</material-subheader>
+ * </hljs>
+ */
+
+function materialSubheaderDirective() {
+  return {
+    restrict: 'E',
+    compile: function($el, $attr) {
+      $el.attr({
+        'role' : Constant.ARIA.ROLE.HEADING
+      });
+    }
+  };
+}

src/components/subheader/subheader.spec.js

@@ -0,0 +1,17 @@
+describe('materialSubheader', function() {
+  beforeEach(module('material.components.subheader'));
+
+  it('should set aria role', inject(function($compile, $rootScope) {
+    var $el = $compile('<material-subheader>Hello world!</material-header>')($rootScope);
+    expect($el.attr('role')).toEqual('heading');
+  }));
+
+  it('should preserve content', inject(function($compile, $rootScope) {
+    var $scope = $rootScope.$new();
+    $scope.to = 'world';
+    var $el = $compile('<material-subheader>Hello {{ to }}!</material-subheader>')($scope);
+    $scope.$digest();
+    expect($el.html()).toEqual('Hello world!');
+  }));
+
+});

src/main.scss

@@ -26,6 +26,7 @@
 "components/sidenav/sidenav",
 "components/form/form",
 "components/slider/slider",
+"components/subheader/subheader",
 "components/switch/switch",
 "components/toast/toast",
 "components/toolbar/toolbar",

src/theme/_variables.scss

@@ -9,6 +9,7 @@ $font-color-base: #444;
 
 // Font colors
 $text-light: #f1f1f1;
+$text-medium: #999;
 $text-dark: #111111;
 
 // Theme colors
@@ -89,6 +90,14 @@ $whiteframe-zindex-z4: 4;
 $whiteframe-shadow-z5: 0px 27px 24px 0 rgba(0,0,0,0.2);
 $whiteframe-zindex-z5: 5;
 
+// SubHeader
+
+$subheader-line-height: 1em;
+$subheader-font-size: 0.9em;
+$subheader-padding: ($baseline-grid * 2) 0px ($baseline-grid * 2) ($baseline-grid * 2);
+$subheader-font-weight: 400;
+$subheader-margin: 0 0 0 0;
+
 // Lists and tiles
 
 $list-h2-font-size: 1.1em;