prototype(card): create prototype card based on MDC web (#16588)

src/dev-app/mdc-card/BUILD.bazel

@@ -11,6 +11,7 @@ ng_module(
         ":mdc_card_demo_scss",
     ],
     deps = [
+        "//src/material-experimental/mdc-button",
         "//src/material-experimental/mdc-card",
         "@npm//@angular/router",
     ],

src/dev-app/mdc-card/mdc-card-demo-module.ts

@@ -8,12 +8,14 @@
 
 import {NgModule} from '@angular/core';
 import {MatCardModule} from '@angular/material-experimental/mdc-card';
+import {MatButtonModule} from '@angular/material-experimental/mdc-button';
 import {RouterModule} from '@angular/router';
 import {MdcCardDemo} from './mdc-card-demo';
 
 @NgModule({
   imports: [
     MatCardModule,
+    MatButtonModule,
     RouterModule.forChild([{path: '', component: MdcCardDemo}]),
   ],
   declarations: [MdcCardDemo],

src/dev-app/mdc-card/mdc-card-demo.html

@@ -1,2 +1,122 @@
-<!-- TODO: copy in demo template from existing mat-card demo. -->
-Not yet implemented.
+<div class="demo-card-container">
+
+<!-- TODO(jelbourn): re-add dividers and footers with progress bars once the MDC versions exist -->
+
+  <mat-card>
+    Card with only text content
+  </mat-card>
+
+  <mat-card>
+    <mat-card-content>
+      Card with only <code>&lt;mat-card-content&gt;</code> and text content.
+    </mat-card-content>
+  </mat-card>
+
+  <mat-card>
+    <mat-card-subtitle>Subtitle</mat-card-subtitle>
+    <mat-card-title>Card with title and footer</mat-card-title>
+    <mat-card-content>
+      <p>This is supporting text.</p>
+      <p>{{longText}}</p>
+    </mat-card-content>
+    <mat-card-actions>
+      <button mat-button>Like</button>
+      <button mat-button>Share</button>
+    </mat-card-actions>
+  </mat-card>
+
+  <mat-card>
+    <mat-card-subtitle>Subtitle</mat-card-subtitle>
+    <mat-card-title>Card with title, footer, and inset-divider</mat-card-title>
+    <mat-card-content>
+      <p>This is supporting text.</p>
+      <p>{{longText}}</p>
+    </mat-card-content>
+    <mat-card-actions>
+      <button mat-button>Like</button>
+      <button mat-button>Share</button>
+    </mat-card-actions>
+
+  </mat-card>
+
+  <mat-card>
+    <img mat-card-image src="https://material.angularjs.org/latest/img/washedout.png">
+    <mat-card-title>Content Title</mat-card-title>
+    <mat-card-content>
+      <p>Here is some content</p>
+    </mat-card-content>
+    <mat-card-actions align="end">
+      <button mat-button>Like</button>
+      <button mat-button>Share</button>
+    </mat-card-actions>
+  </mat-card>
+
+  <mat-card>
+    <mat-card-header>
+      <img mat-card-avatar>
+      <mat-card-title>Header title</mat-card-title>
+      <mat-card-subtitle>Header subtitle</mat-card-subtitle>
+    </mat-card-header>
+    <img mat-card-image src="https://material.angularjs.org/latest/img/washedout.png">
+    <mat-card-content>
+      <p>Here is some content</p>
+    </mat-card-content>
+  </mat-card>
+
+  <mat-card class="demo-card-blue mat-card-flat">
+    <mat-card-title>Easily customizable</mat-card-title>
+    <mat-card-actions>
+      <button mat-button>First</button>
+      <button mat-button>Second</button>
+    </mat-card-actions>
+  </mat-card>
+
+  <hr>
+  <h2>Cards with media area</h2>
+
+  <mat-card>
+    <mat-card-title-group>
+      <mat-card-title>Card</mat-card-title>
+      <mat-card-subtitle>Small</mat-card-subtitle>
+      <img mat-card-sm-image>
+    </mat-card-title-group>
+    <mat-card-content>
+      {{longText}}
+    </mat-card-content>
+  </mat-card>
+
+  <mat-card>
+    <mat-card-title-group>
+      <mat-card-title>Card</mat-card-title>
+      <mat-card-subtitle>Medium</mat-card-subtitle>
+      <img mat-card-md-image>
+    </mat-card-title-group>
+    <mat-card-content>
+      {{longText}}
+    </mat-card-content>
+  </mat-card>
+
+  <mat-card>
+    <mat-card-title-group>
+      <mat-card-title>Card</mat-card-title>
+      <mat-card-subtitle>Large</mat-card-subtitle>
+      <img mat-card-lg-image>
+    </mat-card-title-group>
+    <mat-card-content>
+      {{longText}}
+    </mat-card-content>
+  </mat-card>
+
+  <mat-card>
+    <mat-card-title-group>
+      <mat-card-title>Card</mat-card-title>
+      <mat-card-subtitle>Extra large</mat-card-subtitle>
+      <img mat-card-xl-image>
+    </mat-card-title-group>
+    <mat-card-content>
+      {{longText}}
+    </mat-card-content>
+  </mat-card>
+
+
+</div>

src/dev-app/mdc-card/mdc-card-demo.scss

@@ -1 +1,18 @@
-// TODO: copy in demo styles from existing mat-card demo.
+.demo-card-container {
+  display: flex;
+  flex-flow: column nowrap;
+
+  .mat-mdc-card {
+    margin: 0 16px 16px 0;
+    width: 350px;
+  }
+
+  // Use a gray background instead of real images for that "mock" feel.
+  img {
+    background-color: gray;
+  }
+
+  .mdc-button {
+    text-transform: uppercase;
+  }
+}

src/dev-app/mdc-card/mdc-card-demo.ts

@@ -6,13 +6,20 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 
 @Component({
   moduleId: module.id,
   selector: 'mdc-card-demo',
   templateUrl: 'mdc-card-demo.html',
   styleUrls: ['mdc-card-demo.css'],
+  encapsulation: ViewEncapsulation.None,
 })
 export class MdcCardDemo {
+  longText = `Once upon a midnight dreary, while I pondered, weak and weary,
+              Over many a quaint and curious volume of forgotten lore—
+              While I nodded, nearly napping, suddenly there came a tapping,
+              As of some one gently rapping, rapping at my chamber door.
+              “’Tis some visitor,” I muttered, “tapping at my chamber door—
+              Only this and nothing more.”`;
 }

src/material-experimental/mdc-card/BUILD.bazel

@@ -22,12 +22,21 @@ sass_library(
     srcs = glob(["**/_*.scss"]),
     deps = [
         "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material/core:core_scss_lib",
     ],
 )
 
 sass_binary(
     name = "card_scss",
     src = "card.scss",
+    include_paths = [
+        "external/npm/node_modules",
+    ],
+    deps = [
+        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+    ],
 )
 
 ng_e2e_test_library(

src/material-experimental/mdc-card/_mdc-card.scss

@@ -1,13 +1,34 @@
+@import '@material/card/mixins';
+@import '@material/typography/mixins';
 @import '../mdc-helpers/mdc-helpers';
 
 @mixin mat-card-theme-mdc($theme) {
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
   @include mat-using-mdc-theme($theme) {
-    // TODO: MDC theme styles here.
+    @include mdc-card-without-ripple($query: $mat-theme-styles-query);
+
+    // Card subtitles are an Angular Material construct (not MDC), so we explicitly set their
+    // color to secondary text here.
+    .mat-mdc-card-subtitle {
+      color: mat-color($foreground, secondary-text);
+    }
   }
 }
 
 @mixin mat-card-typography-mdc($config) {
   @include mat-using-mdc-typography($config) {
-    // TODO: MDC typography styles here.
+    @include mdc-card-without-ripple($query: $mat-typography-styles-query);
+
+    // Card subtitles and titles are an Angular Material construct (not MDC), so we explicitly
+    // set their typographic styles here.
+    .mat-mdc-card-title {
+      @include mdc-typography(headline6);
+    }
+
+    .mat-mdc-card-subtitle {
+      @include mdc-typography(subtitle2);
+    }
   }
 }

src/material-experimental/mdc-card/card-header.html

@@ -0,0 +1,8 @@
+<ng-content select="[mat-card-avatar], [matCardAvatar]"></ng-content>
+<div class="mat-mdc-card-header-text">
+  <ng-content
+      select="mat-card-title, mat-card-subtitle,
+      [mat-card-title], [mat-card-subtitle],
+      [matCardTitle], [matCardSubtitle]"></ng-content>
+</div>
+<ng-content></ng-content>

src/material-experimental/mdc-card/card-title-group.html

@@ -0,0 +1,12 @@
+<div>
+  <ng-content
+      select="mat-card-title, mat-card-subtitle,
+      [mat-card-title], [mat-card-subtitle],
+      [matCardTitle], [matCardSubtitle]"></ng-content>
+</div>
+<ng-content select="[mat-card-image], [matCardImage],
+                    [mat-card-sm-image], [matCardImageSmall],
+                    [mat-card-md-image], [matCardImageMedium],
+                    [mat-card-lg-image], [matCardImageLarge],
+                    [mat-card-xl-image], [matCardImageXLarge]"></ng-content>
+<ng-content></ng-content>

src/material-experimental/mdc-card/card.html

@@ -1 +1 @@
-<!-- TODO: MDC template here. -->
+<ng-content></ng-content>