build: add card example to mdc-migration integration test

integration/mdc-migration/golden/src/app/app.component.html

@@ -1,5 +1,6 @@
 <autocomplete-example></autocomplete-example>
 <button-example></button-example>
+<card-example></card-example>
 <chips-example></chips-example>
 <form-field-example></form-field-example>
 <input-example></input-example>

integration/mdc-migration/golden/src/app/app.module.ts

@@ -6,6 +6,7 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {ReactiveFormsModule} from '@angular/forms';
 import {MatAutocompleteModule} from '@angular/material-experimental/mdc-autocomplete';
 import {MatButtonModule} from '@angular/material-experimental/mdc-button';
+import {MatCardModule} from '@angular/material-experimental/mdc-card';
 import {MatChipsModule} from '@angular/material-experimental/mdc-chips';
 import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
 import {MatIconModule} from '@angular/material/icon';
@@ -16,6 +17,7 @@ import {MatProgressBarModule} from '@angular/material-experimental/mdc-progress-
 import {MatProgressSpinnerModule} from '@angular/material-experimental/mdc-progress-spinner';
 import {MatSelectModule} from '@angular/material-experimental/mdc-select';
 import {AutocompleteComponent} from './components/autocomplete/autocomplete.component';
+import {CardComponent} from './components/card/card.component';
 import {ChipsComponent} from './components/chips/chips.component';
 import {FormFieldComponent} from './components/form-field/form-field.component';
 import {InputComponent} from './components/input/input.component';
@@ -31,6 +33,7 @@ import {ButtonComponent} from './components/button/button.component';
     AutocompleteComponent,
     AppComponent,
     ButtonComponent,
+    CardComponent,
     ChipsComponent,
     FormFieldComponent,
     InputComponent,
@@ -45,6 +48,7 @@ import {ButtonComponent} from './components/button/button.component';
     BrowserAnimationsModule,
     MatAutocompleteModule,
     MatButtonModule,
+    MatCardModule,
     MatChipsModule,
     MatFormFieldModule,
     MatIconModule,

integration/mdc-migration/golden/src/app/components/card/card.component.html

@@ -0,0 +1,16 @@
+<h2>Card example</h2>
+<mat-card appearance="outlined">Pomeranian</mat-card><mat-card appearance="outlined">Maltese</mat-card>
+<mat-card appearance="outlined">Chihuahua</mat-card>
+<mat-card appearance="outlined">
+  Welsh Corgi
+  <mat-card
+    appearance="outlined"
+    class="example-card">
+    Cardigan Welsh Corgi
+  </mat-card>
+  <mat-card
+    appearance="outlined"
+    class="example-card">
+    Pembroke Welsh Corgi
+  </mat-card>
+</mat-card>

integration/mdc-migration/golden/src/app/components/card/card.component.scss

@@ -0,0 +1,12 @@
+.example-card { color: gray; }
+
+
+.mat-mdc-card .example-card {
+  padding-left: 24px;
+}
+
+/* TODO: The following rule targets internal classes of card that may no longer apply for the MDC version. */
+
+.mat-card-flat {
+  margin: 4px;
+}

integration/mdc-migration/golden/src/app/components/card/card.component.spec.ts

@@ -0,0 +1,26 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {MatCardModule} from '@angular/material/card';
+import {CardComponent} from './card.component';
+
+describe('CardComponent', () => {
+  let component: CardComponent;
+  let fixture: ComponentFixture<CardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BrowserAnimationsModule, MatCardModule],
+      declarations: [CardComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

integration/mdc-migration/golden/src/app/components/card/card.component.ts

@@ -0,0 +1,12 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'card-example',
+  templateUrl: './card.component.html',
+  styleUrls: ['./card.component.scss'],
+})
+export class CardComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

integration/mdc-migration/golden/src/styles.scss

@@ -36,6 +36,8 @@ $sample-project-theme: mat.define-light-theme((
 @include mat.mdc-fab-typography($sample-project-theme);
 @include mat.mdc-icon-button-theme($sample-project-theme);
 @include mat.mdc-icon-button-typography($sample-project-theme);
+@include mat.mdc-card-theme($sample-project-theme);
+@include mat.mdc-card-typography($sample-project-theme);
 @include mat.mdc-chips-theme($sample-project-theme);
 @include mat.mdc-chips-typography($sample-project-theme);
 @include mat.mdc-form-field-theme($sample-project-theme);

integration/mdc-migration/sample-project/src/app/app.component.html

@@ -1,5 +1,6 @@
 <autocomplete-example></autocomplete-example>
 <button-example></button-example>
+<card-example></card-example>
 <chips-example></chips-example>
 <form-field-example></form-field-example>
 <input-example></input-example>

integration/mdc-migration/sample-project/src/app/app.module.ts

@@ -6,6 +6,7 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {ReactiveFormsModule} from '@angular/forms';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
 import {MatChipsModule} from '@angular/material/chips';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
@@ -16,6 +17,7 @@ import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatSelectModule} from '@angular/material/select';
 import {AutocompleteComponent} from './components/autocomplete/autocomplete.component';
+import {CardComponent} from './components/card/card.component';
 import {ChipsComponent} from './components/chips/chips.component';
 import {FormFieldComponent} from './components/form-field/form-field.component';
 import {InputComponent} from './components/input/input.component';
@@ -31,6 +33,7 @@ import {ButtonComponent} from './components/button/button.component';
     AutocompleteComponent,
     AppComponent,
     ButtonComponent,
+    CardComponent,
     ChipsComponent,
     FormFieldComponent,
     InputComponent,
@@ -45,6 +48,7 @@ import {ButtonComponent} from './components/button/button.component';
     BrowserAnimationsModule,
     MatAutocompleteModule,
     MatButtonModule,
+    MatCardModule,
     MatChipsModule,
     MatFormFieldModule,
     MatIconModule,

integration/mdc-migration/sample-project/src/app/components/card/card.component.html

@@ -0,0 +1,14 @@
+<h2>Card example</h2>
+<mat-card>Pomeranian</mat-card><mat-card>Maltese</mat-card>
+<mat-card>Chihuahua</mat-card>
+<mat-card>
+  Welsh Corgi
+  <mat-card
+    class="example-card">
+    Cardigan Welsh Corgi
+  </mat-card>
+  <mat-card
+    class="example-card">
+    Pembroke Welsh Corgi
+  </mat-card>
+</mat-card>

integration/mdc-migration/sample-project/src/app/components/card/card.component.scss

@@ -0,0 +1,10 @@
+.example-card { color: gray; }
+
+
+.mat-card .example-card {
+  padding-left: 24px;
+}
+
+.mat-card-flat {
+  margin: 4px;
+}

integration/mdc-migration/sample-project/src/app/components/card/card.component.spec.ts

@@ -0,0 +1,26 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {MatCardModule} from '@angular/material/card';
+import {CardComponent} from './card.component';
+
+describe('CardComponent', () => {
+  let component: CardComponent;
+  let fixture: ComponentFixture<CardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BrowserAnimationsModule, MatCardModule],
+      declarations: [CardComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

integration/mdc-migration/sample-project/src/app/components/card/card.component.ts

@@ -0,0 +1,12 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'card-example',
+  templateUrl: './card.component.html',
+  styleUrls: ['./card.component.scss'],
+})
+export class CardComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

integration/mdc-migration/sample-project/src/styles.scss

@@ -30,6 +30,7 @@ $sample-project-theme: mat.define-light-theme((
 
 @include mat.autocomplete-theme($sample-project-theme);
 @include mat.button-theme($sample-project-theme);
+@include mat.card-theme($sample-project-theme);
 @include mat.chips-theme($sample-project-theme);
 @include mat.form-field-theme($sample-project-theme);
 @include mat.menu-theme($sample-project-theme);