feat(card): Add card component

src/components/card/card-header.html

@@ -0,0 +1,5 @@
+<ng-content select="[md-card-avatar]"></ng-content>
+<div class="md-card-header-text">
+  <ng-content select="md-card-title, md-card-subtitle"></ng-content>
+</div>
+<ng-content></ng-content>

src/components/card/card-title-group.html

@@ -0,0 +1,5 @@
+<div>
+  <ng-content select="md-card-title, md-card-subtitle"></ng-content>
+</div>
+<ng-content select="img"></ng-content>
+<ng-content></ng-content>

src/components/card/card.html

@@ -0,0 +1,3 @@
+<div class="md-card">
+  <ng-content></ng-content>
+</div>

src/components/card/card.scss

@@ -0,0 +1,221 @@
+
+@import "variables";
+@import "shadows";
+@import "default-theme";   // TODO: Remove this
+
+$md-card-default-padding: 24px !default;
+$md-card-mobile-padding: 24px 16px !default;
+$md-card-border-radius: 2px !default;
+$md-card-header-size: 40px !default;
+
+md-card {
+  display: block;
+  position: relative;
+  padding: $md-card-default-padding;
+  border-radius: $md-card-border-radius;
+  box-shadow: $md-shadow-bottom-z-1;
+  font-family: $font-family;
+  background: md-color($md-background, 50);       // TODO(kara): use updated background palette
+}
+
+md-card:hover {
+  box-shadow: $md-shadow-bottom-z-2;
+  transition: $swift-ease-in;
+}
+
+.md-card-flat {
+  box-shadow: none;
+}
+
+// base styles for each card section preset (md-card-content, etc)
+%md-card-section-base {
+  display: block;
+  margin-bottom: 16px;  
+}
+
+md-card-title {
+  @extend %md-card-section-base;
+  font-size: 24px;
+  font-weight: 400;
+}
+
+md-card-subtitle {
+  @extend %md-card-section-base;
+  font-size: $md-body-font-size-base;
+  color: md-color($md-foreground, secondary-text);
+}
+
+md-card-content {
+  @extend %md-card-section-base;
+  font-size: $md-body-font-size-base;
+}
+
+md-card-actions {
+  @extend %md-card-section-base;
+  margin-left: -16px;
+  margin-right: -16px;
+  padding: 8px 0;
+}
+
+[md-card-image] {
+  width: calc(100% + 48px);
+  margin: 0 -24px 16px -24px;
+}
+
+[md-card-xl-image] {
+  width: 240px;
+  height: 240px;
+  margin: -8px;
+}
+
+md-card-footer {
+  position: absolute;
+  bottom: 0;
+}
+
+md-card-actions {
+  [md-button], [md-raised-button] {
+    margin: 0 4px;
+  } 
+}
+
+/* HEADER STYLES */
+
+md-card-header {
+  display: flex;
+  flex-direction: row;
+  height: $md-card-header-size;
+  margin: -8px 0 16px 0;
+}
+
+.md-card-header-text {
+  height: $md-card-header-size;
+  margin: 0 8px;
+}
+
+[md-card-avatar] {
+  height: $md-card-header-size;
+  width: $md-card-header-size;
+  border-radius: 50%;
+}
+
+md-card-header md-card-title {
+  font-size: $md-body-font-size-base;
+}
+
+/* TITLE-GROUP STYLES */
+
+// images grouped with title in title-group layout
+%md-card-title-img {
+  margin: -8px 0;
+}
+
+md-card-title-group {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 -8px;
+}
+
+[md-card-sm-image] {
+  @extend %md-card-title-img;
+  width: 80px;
+  height: 80px;
+}
+
+[md-card-md-image] {
+  @extend %md-card-title-img;
+  width: 112px;
+  height: 112px;
+}
+
+[md-card-lg-image] {
+  @extend %md-card-title-img;
+  width: 152px;
+  height: 152px;
+}
+
+/* MEDIA QUERIES */
+
+@media ($md-xsmall) {
+  md-card {
+    padding: $md-card-mobile-padding;
+  }
+
+  [md-card-image] {
+    width: calc(100% + 32px);
+    margin: 16px -16px;
+  }
+
+  md-card-title-group {
+    margin: 0;
+  }
+
+  [md-card-xl-image] {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  md-card-header {
+    margin: -8px 0 0 0;
+  }
+
+}
+
+/* FIRST/LAST CHILD ADJUSTMENTS */
+
+// top els in md-card-content and md-card can't have their default margin-tops (e.g. <p> tags)
+// or they'll incorrectly add to card's top padding
+.md-card > :first-child, md-card-content > :first-child {
+  margin-top: 0;
+}
+
+// last els in md-card-content and md-card can't have their default margin-bottoms (e.g. <p> tags)
+// or they'll incorrectly add to card's bottom padding
+.md-card > :last-child, md-card-content > :last-child {
+  margin-bottom: 0;
+}
+
+// if main image is on top, need to place it flush against top 
+// (by stripping card's default 24px padding)
+[md-card-image]:first-child {
+  margin-top: -24px;
+}
+
+// actions panel on bottom should be 8px from bottom of card
+// so must strip 16px from default card padding of 24px
+.md-card > md-card-actions:last-child {
+  margin-bottom: -16px;
+  padding-bottom: 0;
+}
+
+// actions panel should always be 8px from sides,
+// so the first button in the actions panel can't add its own margins
+md-card-actions [md-button]:first-child,
+md-card-actions [md-raised-button]:first-child {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+// should be 12px space between titles and subtitles generally
+// default margin-bottom is 16px, so need to move lower title up 4px
+md-card-title:not(:first-child), md-card-subtitle:not(:first-child) {
+  margin-top: -4px;
+}
+
+// should be 8px space between titles and subtitles in header
+// default margin-bottom is 16px, so need to move subtitle in header up 4px
+md-card-header md-card-subtitle:not(:first-child) {
+  margin-top: -8px;
+}
+
+// xl image should always have 16px on top. 
+// when it's the first el, it'll need to remove 8px from default card padding of 24px
+.md-card > [md-card-xl-image]:first-child{
+  margin-top: -8px;
+}
+
+// xl image should always have 16px on bottom
+// when it's the last el, it'll need to remove 8px from default card padding of 24px
+.md-card > [md-card-xl-image]:last-child {
+  margin-bottom: -8px;
+}

src/components/card/card.ts

@@ -0,0 +1,71 @@
+import {Component, View, ViewEncapsulation} from 'angular2/core';
+import {CONST_EXPR, Type} from 'angular2/src/facade/lang';
+
+/*
+
+<md-card> is a basic content container component that adds the styles of a material design card.
+
+While you can use this component alone, it also provides a number of preset styles for common card sections, including:
+ - md-card-title
+ - md-card-subtitle
+ - md-card-content
+ - md-card-actions
+ - md-card-footer
+
+ You can see some examples of cards here:
+ http://embed.plnkr.co/s5O4YcyvbLhIApSrIhtj/
+
+ TODO(kara): update link to demo site when it exists
+
+*/
+
+@Component({
+  selector: 'md-card',
+  templateUrl: './components/card/card.html',
+  styleUrls: ['./components/card/card.css'],
+  encapsulation: ViewEncapsulation.None
+})
+export class MdCard {}
+
+
+/*  The following components don't have any behavior. They simply use content projection to wrap user content 
+ for flex layout purposes in <md-card> (and thus allow a cleaner, boilerplate-free API). 
+
+ 
+<md-card-header> is a component intended to be used within the <md-card> component.
+It adds styles for a preset header section (i.e. a title, subtitle, and avatar layout).
+
+You can see an example of a card with a header here:
+http://embed.plnkr.co/tvJl19z3gZTQd6WmwkIa/
+
+TODO(kara): update link to demo site when it exists
+*/
+
+@Component({
+  selector: 'md-card-header',
+  templateUrl: '/components/card/card-header.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class MdCardHeader {}
+
+/*
+
+<md-card-title-group> is a component intended to be used within the <md-card> component.
+It adds styles for a preset layout that groups an image with a title section.
+
+You can see an example of a card with a title-group section here:
+http://embed.plnkr.co/EDfgCF9eKcXjini1WODm/
+
+TODO(kara): update link to demo site when it exists
+*/
+
+@Component({
+  selector: 'md-card-title-group',
+  templateUrl: './components/card/card-title-group.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class MdCardTitleGroup {}
+
+export const MD_CARD_DIRECTIVES: Type[] =
+    CONST_EXPR([MdCard, MdCardHeader, MdCardTitleGroup]);
+

src/core/style/_variables.scss

@@ -3,6 +3,10 @@
 
 // Typography
 $md-body-font-size-base: rem(1.400) !default;
+$font-family: Roboto, 'Helvetica Neue', sans-serif !default;
+
+// Media queries
+$md-xsmall: "max-width: 600px";
 
 // z-index master list
 $z-index-fab: 20 !default;

src/demo-app/demo-app.html

@@ -1,7 +1,57 @@
 <p>
   material2 Works!
-
   <button md-button>HELLO</button>
   <button md-raised-button class="md-primary">HELLO</button>
   <button md-fab class="md-accent">HI</button>
 </p>
+<div class="card-container">
+
+  <md-card>
+    <md-card-title-group>
+      <md-card-title>Card with title</md-card-title>
+      <md-card-subtitle>Subtitle</md-card-subtitle>
+      <img md-card-md-image>
+    </md-card-title-group>
+  </md-card>
+
+  <md-card>
+    <md-card-subtitle>Subtitle</md-card-subtitle>
+    <md-card-title>Card with title</md-card-title>
+    <md-card-content>
+      <p>This is supporting text.</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </md-card-content>
+    <md-card-actions>
+      <button md-button>LIKE</button>
+      <button md-button>SHARE</button>
+    </md-card-actions>
+  </md-card>
+
+  <md-card>
+    <img md-card-image src="https://material.angularjs.org/latest/img/washedout.png">
+    <md-card-title>Content Title</md-card-title>
+    <md-card-content>
+      <p>Here is some content</p>
+    </md-card-content>
+  </md-card>
+
+  <md-card>
+    <md-card-header>
+      <img md-card-avatar>
+      <md-card-title>Header title</md-card-title>
+      <md-card-subtitle>Header subtitle</md-card-subtitle>
+    </md-card-header>
+    <img md-card-image src="https://material.angularjs.org/latest/img/washedout.png">
+    <md-card-content>
+      <p>Here is some content</p>
+    </md-card-content>
+  </md-card>
+
+  <md-card class="blue md-card-flat">
+    <md-card-title>Easily customizable</md-card-title>
+    <md-card-actions>
+      <button md-button>First</button>
+      <button md-button>Second</button>
+    </md-card-actions>
+  </md-card>
+</div>

src/demo-app/demo-app.scss

@@ -0,0 +1,22 @@
+md-card {
+  margin: 0 16px 16px 0;
+  width: 350px;
+}
+
+.card-container {
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+.blue {
+  background-color: #B0BECC;
+}
+
+.blue md-card-actions {
+  display: flex;
+  flex-direction: column;
+}
+
+img {
+  background-color: gray;
+}

src/demo-app/demo-app.ts

@@ -1,12 +1,13 @@
 import {Component} from 'angular2/core';
 import {MdButton} from '../components/button/button';
-
+import {MD_CARD_DIRECTIVES} from '../components/card/card';
 
 @Component({
   selector: 'demo-app',
   providers: [],
   templateUrl: 'demo-app/demo-app.html',
-  directives: [MdButton],
+  styleUrls: ['demo-app/demo-app.css'],
+  directives: [MdButton, MD_CARD_DIRECTIVES],
   pipes: []
 })
 export class DemoApp { }