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

Fixes #1709

Author: acdvorak

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`. Only applicable to cards that have a primary action that the main surface should trigger.
 `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/_mixins.scss

@@ -43,10 +43,17 @@
 // Private
 //
 
-@mixin mdc-card-row-layout_($display: flex) {
+@mixin mdc-card-container-layout_ {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+@mixin mdc-card-actions-layout_($display: flex) {
   display: $display;
   flex-direction: row;
   align-items: center;
+  box-sizing: border-box;
 }
 
 @mixin mdc-card-media-aspect-ratio-base_ {

packages/mdc-card/mdc-card.scss

@@ -27,10 +27,7 @@
   @include mdc-card-fill-color(background);
   @include mdc-card-corner-radius(2px);
   @include mdc-elevation(2);
-
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
+  @include mdc-card-container-layout_;
 }
 
 .mdc-card--stroked {
@@ -48,7 +45,7 @@
 .mdc-card__media {
   @include mdc-card-media-aspect-ratio-base_;
 
-  position: relative;
+  position: relative; // Child element `__media-content` has `position: absolute`
   box-sizing: border-box;
   background-repeat: no-repeat;
   background-size: cover;
@@ -81,14 +78,41 @@
   box-sizing: border-box;
 }
 
+//
+// Primary action
+//
+
+.mdc-card__primary-action {
+  @include mdc-ripple-surface;
+  @include mdc-ripple-radius-bounded;
+  @include mdc-states;
+  @include mdc-card-container-layout_;
+
+  position: relative; // Needed to prevent the ripple wash from overflowing the container in IE and Edge
+  outline: none;
+  color: inherit;
+  text-decoration: none;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.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
 //
 
 .mdc-card__actions {
-  @include mdc-card-row-layout_;
+  @include mdc-card-actions-layout_;
 
-  box-sizing: border-box;
   min-height: 52px;
   padding: 8px;
 }
@@ -99,9 +123,7 @@
 
 .mdc-card__action-buttons,
 .mdc-card__action-icons {
-  @include mdc-card-row-layout_;
-
-  box-sizing: border-box;
+  @include mdc-card-actions-layout_;
 }
 
 .mdc-card__action-icons {
@@ -120,10 +142,9 @@
 //
 
 .mdc-card__action {
-  @include mdc-card-row-layout_(inline-flex);
+  @include mdc-card-actions-layout_(inline-flex);
 
-  box-sizing: border-box;
-  min-width: auto;
+  justify-content: center;
   cursor: pointer;
   user-select: none;