feat(card): Add primary action element with hover, focused, and pressed states

demos/card.html

@@ -44,14 +44,16 @@
 
       <section class="hero">
         <div class="mdc-card demo-card">
-          <div class="mdc-card__media mdc-card__media--16-9 demo-card__media demo-card__media--16-9"></div>
-          <div class="demo-card__primary">
-            <h2 class="demo-card__title mdc-typography--title">Our Changing Planet</h2>
-            <h3 class="demo-card__subtitle mdc-typography--subheading1">by Kurt Wagner</h3>
-          </div>
-          <div class="demo-card__secondary mdc-typography--body1">
-            Visit ten places on our planet that are undergoing the biggest changes today.
-          </div>
+          <a class="mdc-card__primary-action" href="#">
+            <div class="mdc-card__media mdc-card__media--16-9 demo-card__media demo-card__media--16-9"></div>
+            <div class="demo-card__primary">
+              <h2 class="demo-card__title mdc-typography--title">Our Changing Planet</h2>
+              <h3 class="demo-card__subtitle mdc-typography--subheading1">by Kurt Wagner</h3>
+            </div>
+            <div class="demo-card__secondary mdc-typography--body1">
+              Visit ten places on our planet that are undergoing the biggest changes today.
+            </div>
+          </a>
           <div class="mdc-card__actions">
             <div class="mdc-card__action-buttons">
               <button class="mdc-button mdc-card__action mdc-card__action--button">Read</button>
@@ -142,13 +144,15 @@ <h2 class="demo-card-article__title mdc-typography--headline">Asia's clean energ
         </div>
 
         <div class="mdc-card demo-card demo-card--photo">
-          <div class="mdc-card__media mdc-card__media--square demo-card__media">
-            <div class="mdc-card__media-content demo-card__media-content--with-title">
-              <div class="demo-card__media-title mdc-typography--subheading2">
-                Vacation Photos
+          <a class="mdc-card__primary-action demo-card__primary-action" href="#">
+            <div class="mdc-card__media mdc-card__media--square demo-card__media">
+              <div class="mdc-card__media-content demo-card__media-content--with-title">
+                <div class="demo-card__media-title mdc-typography--subheading2">
+                  Vacation Photos
+                </div>
               </div>
             </div>
-          </div>
+          </a>
           <div class="mdc-card__actions mdc-card__action-icons">
             <i class="mdc-icon-toggle material-icons mdc-card__action mdc-card__action--icon"
                tabindex="0"
@@ -179,14 +183,16 @@ <h2 class="demo-card-article__title mdc-typography--headline">Asia's clean energ
         </div>
 
         <div class="mdc-card demo-card demo-card--music">
-          <div class="demo-card__music-row">
-            <div class="mdc-card__media mdc-card__media--square demo-card__media demo-card__media--music"></div>
-            <div class="demo-card__music-info">
-              <div class="demo-card__music-title mdc-typography--headline">Rozes</div>
-              <div class="demo-card__music-artist mdc-typography--body1">Under the Grave</div>
-              <div class="demo-card__music-year mdc-typography--body1">(2016)</div>
+          <a class="mdc-card__primary-action demo-card__primary-action" href="#">
+            <div class="demo-card__music-row">
+              <div class="mdc-card__media mdc-card__media--square demo-card__media demo-card__media--music"></div>
+              <div class="demo-card__music-info">
+                <div class="demo-card__music-title mdc-typography--headline">Rozes</div>
+                <div class="demo-card__music-artist mdc-typography--body1">Under the Grave</div>
+                <div class="demo-card__music-year mdc-typography--body1">(2016)</div>
+              </div>
             </div>
-          </div>
+          </a>
           <hr class="mdc-list-divider">
           <div class="mdc-card__actions">
             <div class="mdc-card__action-buttons demo-card__action-buttons--text-only">Rate this album</div>
@@ -256,6 +262,10 @@ <h2 class="demo-card-article__title mdc-typography--headline">Asia's clean energ
         [].forEach.call(document.querySelectorAll('.mdc-ripple-surface'), function(surface) {
           mdc.ripple.MDCRipple.attachTo(surface);
         });
+
+        [].forEach.call(document.querySelectorAll('.mdc-card__primary-action'), function(el) {
+          mdc.ripple.MDCRipple.attachTo(el);
+        });
       });
     </script>
   </body>

demos/card.scss

@@ -153,7 +153,7 @@
 
 .demo-card__media--music {
   width: 110px;
-  border-top-left-radius: inherit; // for music card
+  border-top-left-radius: inherit;
 
   @include mdc-rtl {
     border-top-left-radius: 0;

packages/mdc-card/README.md

@@ -172,6 +172,7 @@ CSS Class | Description
 --- | ---
 `mdc-card` | Mandatory, for the card element
 `mdc-card--stroked` | Removes the shadow and displays a hairline stroke instead
+`mdc-card__primary-action` | The main tappable area of the card. Typically contains most (or all) card content _except_ `mdc-card__actions`.
 `mdc-card__media` | Media area that displays a custom `background-image` with `background-size: cover`
 `mdc-card__media--square` | Automatically scales the media area's height to equal its width
 `mdc-card__media--16-9` | Automatically scales the media area's height according to its width, maintaining a 16:9 aspect ratio

packages/mdc-card/mdc-card.scss

@@ -48,7 +48,9 @@
 .mdc-card__media {
   @include mdc-card-media-aspect-ratio-base_;
 
+  display: flex;
   position: relative;
+  flex-direction: column;
   box-sizing: border-box;
   background-repeat: no-repeat;
   background-size: cover;
@@ -81,6 +83,32 @@
   box-sizing: border-box;
 }
 
+//
+// Primary action
+//
+
+.mdc-card__primary-action {
+  @include mdc-ripple-surface;
+  @include mdc-ripple-radius-bounded;
+  @include mdc-states;
+
+  box-sizing: border-box;
+  outline: 0 none;
+  color: inherit;
+  text-decoration: none;
+  overflow: hidden;
+}
+
+.mdc-card__primary-action:first-child {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+.mdc-card__primary-action:last-child {
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+}
+
 //
 // Action row
 //