feat(card): Improvements (#1352)

- Inject `MdcRipple` into `mdc-card-primary-action` automatically
- Converted `mdc-card-primary-action` to a component selector
- Removed `icons: boolean` from `mdc-card-actions`
- Removed `buttons: boolean` from `mdc-card-actions`
- Converted `@HostBindings` to directive configuration
- Cleaned up documentation and examples
- Improved unit test coverage

BREAKING CHANGES:
- `MdcRipple` is now automatically injected into `mdc-card-primary-action`, just remove any previous `mdc-ripple` directives applied.
- Removed `icons: boolean` from `mdc-card-actions`. Please update your code to use `mdc-card-action-icons`.
- Removed `buttons: boolean` from `mdc-card-actions`. Please update your code to use `mdc-card-action-buttons`.

Author: trimox

demos/components/card-demo/card-demo.html

@@ -101,14 +101,6 @@ <h2>Design & API Documentation</h2>
             <td>fullBleed: boolean</td>
             <td>Removes the action area's padding and causes its only child (an mdc-card__action element) to consume 100% of the action area's width.</td>
           </tr>
-          <tr>
-            <td>icons: boolean</td>
-            <td>A group of supplemental action icons, displayed on the right side of the card (in LTR), adjacent to mdc-card-action buttons</td>
-          </tr>
-          <tr>
-            <td>buttons: boolean</td>
-            <td>A group of action buttons, displayed on the left side of the card (in LTR), adjacent to mdc-card-action icons</td>
-          </tr>
         </tbody>
       </table>
 
@@ -149,7 +141,7 @@ <h2>Design & API Documentation</h2>
           </tr>
           <tr>
             <td>
-              <span mdcSubtitle2>Example: mdcCardAction="icon" or mdcCardAction="button"</span>
+              <span mdcSubtitle2>Usage: mdcCardAction="icon" or mdcCardAction="button"</span>
             </td>
           </tr>
         </tbody>
@@ -166,8 +158,8 @@ <h2>Basic Usage</h2>
   </div>
 
   <mdc-card class="demo-card">
-    <mdc-card-primary-action mdc-ripple>
-      <mdc-card-media class="demo-card__media--16-9" [wide]="true"></mdc-card-media>
+    <mdc-card-primary-action>
+      <mdc-card-media class="demo-card__media--16-9" wide></mdc-card-media>
       <div class="demo-card__primary">
         <h2 class="demo-card__title" mdcHeadline6>Our Changing Planet</h2>
         <h3 class="demo-card__subtitle" mdcSubtitle2>by Kurt Wagner</h3>
@@ -192,7 +184,7 @@ <h3 class="demo-card__subtitle" mdcSubtitle2>by Kurt Wagner</h3>
     </mdc-card-actions>
   </mdc-card>
 
-  <mdc-card [outlined]="true" class="demo-card">
+  <mdc-card class="demo-card" outlined>
     <div class="demo-card-article-group-heading" mdcSubtitle2>Headlines</div>
     <mdc-list-divider></mdc-list-divider>
     <mdc-ripple class="demo-card-article">
@@ -216,7 +208,7 @@ <h2 class="demo-card-article__title" mdcHeadline5>Asia's clean energy ambitions<
       </p>
     </mdc-ripple>
     <mdc-list-divider></mdc-list-divider>
-    <mdc-card-actions [fullBleed]="true">
+    <mdc-card-actions fullBleed>
       <button mdc-button mdcCardAction="button">
           All Business Headlines
           <mdc-icon>arrow_forward</mdc-icon>
@@ -225,30 +217,32 @@ <h2 class="demo-card-article__title" mdcHeadline5>Asia's clean energy ambitions<
   </mdc-card>
 
   <mdc-card class="demo-card demo-card--photo">
-    <mdc-card-primary-action mdc-ripple>
-      <mdc-card-media [square]="true" class="demo-card__media">
+    <mdc-card-primary-action>
+      <mdc-card-media square class="demo-card__media">
         <mdc-card-media-content class="demo-card__media-content--with-title">
           <div class="demo-card__media-title" mdcSubtitle2>Vacation Photos</div>
         </mdc-card-media-content>
       </mdc-card-media>
     </mdc-card-primary-action>
-    <mdc-card-actions [icons]="true">
-        <button mdcIconButton mdcCardAction="icon">
-          <mdc-icon mdcIconOn>favorite</mdc-icon>
-          <mdc-icon>favorite_border</mdc-icon>
-        </button>
-        <button mdcIconButton mdcCardAction="icon">
-          <mdc-icon mdcIconOn>bookmark</mdc-icon>
-          <mdc-icon>bookmark_border</mdc-icon>
-        </button>
-      <mdc-icon mdcCardAction="icon" mdcRipple>share</mdc-icon>
+    <mdc-card-actions>
+      <mdc-card-action-icons>
+          <button mdcIconButton mdcCardAction="icon">
+            <mdc-icon mdcIconOn>favorite</mdc-icon>
+            <mdc-icon>favorite_border</mdc-icon>
+          </button>
+          <button mdcIconButton mdcCardAction="icon">
+            <mdc-icon mdcIconOn>bookmark</mdc-icon>
+            <mdc-icon>bookmark_border</mdc-icon>
+          </button>
+        <mdc-icon mdcCardAction="icon" mdcRipple>share</mdc-icon>
+      </mdc-card-action-icons>
     </mdc-card-actions>
   </mdc-card>
 
   <mdc-card class="demo-card demo-card--music">
-    <mdc-card-primary-action mdc-ripple>
+    <mdc-card-primary-action>
       <div class="demo-card__music-row">
-        <mdc-card-media [square]="true" class="demo-card__media demo-card__media--music"></mdc-card-media>
+        <mdc-card-media square class="demo-card__media demo-card__media--music"></mdc-card-media>
         <div class="demo-card__music-info">
           <div class="demo-card__music-title" mdcHeadline5>Title</div>
           <div class="demo-card__music-artist" mdcBody2>Under the Grave</div>

demos/components/shape-demo/shape-demo.html

@@ -126,8 +126,8 @@ <h3 class="demo-content__headline">FAB</h3>
   <div class="demo-content">
     <h3 class="demo-content__headline">Card</h3>
     <mdc-shape-container class="demo-shape-card-container">
-      <mdc-card [outlined]="true" class="demo-shape-card">
-        <mdc-card-primary-action mdc-ripple>
+      <mdc-card outlined class="demo-shape-card">
+        <mdc-card-primary-action>
           <div class="demo-shape-card--row">
             <mdc-card-media [square]="true" class="demo-shape-card__media"></mdc-card-media>
             <div class="demo-shape-card__info">

demos/components/shape-demo/shape-demo.ts

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'shape-demo',
   templateUrl: './shape-demo.html'
 })
 export class ShapeDemo { }

demos/sass/_demo.scss

@@ -63,7 +63,7 @@
   position: fixed;
   overflow-y: auto;
   top: auto;
-  height: calc(100vh - 54px);
+  padding-bottom: 64px;
 
   .mdc-list-item {
     cursor: pointer;
@@ -75,8 +75,6 @@
 //
 
 .demo-page {
-  display: inline-flex;
-  flex-direction: column;
   padding-bottom: 45px;
 
   @media (min-width: 1240px) {
@@ -96,6 +94,11 @@
   margin: 1.5rem;
   padding: 1rem;
   background-color: $color-white;
+  max-width: calc(70% - 17rem);
+
+  @media (max-width: 1239px) {
+    max-width: calc(100% - 3rem);
+  }
 
   &__headline {
     @include mdc-typography(headline6);

demos/sass/_docs.scss

@@ -34,8 +34,13 @@
 
 .markdown-body {
   line-height: 1.5;
+  padding-left: 10px;
   word-wrap: break-word;
-  margin-top: 0 !important;
+  max-width: calc(70% - 17rem);
+
+  @media (max-width: 1239px) {
+    max-width: calc(100% - 3rem);
+  }
 
   h1 {
     @include mdc-typography(headline4);
@@ -90,14 +95,13 @@
 //
 
 .docs-api table {
-  margin: 0 12px 7px 0;
   border: 1px solid #eee;
   border-collapse: collapse;
   border-spacing: 0;
 
   td, th {
     border: 1px solid #eee;
-    padding: 12px 12px 12px 24px;
+    padding: 12px;
   }
 
   td:first-child, th:first-child {

demos/sass/_layout.scss

@@ -14,7 +14,8 @@
 
 .demo-layout__row-with-button {
   .mdc-button, .mdc-fab {
-    margin: 12px;
+    margin-right: 6px;
+    margin-bottom: 6px;
   }
 }