docs(material/card): add the divider and progress bar for footer

Author: rameshworsht

src/components-examples/material/card/BUILD.bazel

@@ -19,6 +19,8 @@ ng_module(
         "//src/material/button/testing",
         "//src/material/card",
         "//src/material/card/testing",
+        "//src/material/divider",
+        "//src/material/progress-bar",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
         "@npm//@types/jasmine",

src/components-examples/material/card/card-footer/card-footer-example.css

@@ -2,6 +2,3 @@
   max-width: 400px;
 }
 
-.example-card-footer {
-  padding: 0 16px;
-}

src/components-examples/material/card/card-footer/card-footer-example.html

@@ -2,17 +2,15 @@
   <mat-card-subtitle>Dog Breed</mat-card-subtitle>
   <mat-card-title>Shiba Inu</mat-card-title>
   <mat-card-content>
-    <p>This card indeterminates progress bar and divider.</p>
+    <p>This card has divider and indeterminates progress as footer</p>
     <p>{{ longText }}</p>
   </mat-card-content>
-  <!-- <mat-divider [inset]="true"></mat-divider> -->
-  <hr/>
+  <mat-divider [inset]="true"></mat-divider>
   <mat-card-actions>
     <button mat-button>LIKE</button>
     <button mat-button>SHARE</button>
   </mat-card-actions>
   <mat-card-footer>
-    <!-- <mat-progress-bar mode="indeterminate"></mat-progress-bar> -->
-    <div class="example-card-footer">This is the footer!</div>
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
   </mat-card-footer>
 </mat-card>

src/components-examples/material/card/index.ts

@@ -1,6 +1,8 @@
 import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
+import {MatDividerModule} from '@angular/material/divider';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {CardFancyExample} from './card-fancy/card-fancy-example';
 import {CardOverviewExample} from './card-overview/card-overview-example';
 import {CardHarnessExample} from './card-harness/card-harness-example';
@@ -33,6 +35,8 @@ const EXAMPLES = [
   imports: [
     MatButtonModule,
     MatCardModule,
+    MatDividerModule,
+    MatProgressBarModule
   ],
   declarations: EXAMPLES,
   exports: EXAMPLES,