refactor(card): add color/mode classes to header, title, content

- Remove native HTML element styling inside of cards (headings, paragraph) - Move the default color for the HTML elements to the content - Generate colors for the card itself, the header, the content, and the title using the color input - Add e2e test for card colors References #8330
ionic-team · Nov 10, 2016 · 7475133 · 7475133
1 parent ae1197a
commit 7475133
Show file tree

Hide file tree

Showing 7 changed files with 370 additions and 27 deletions.
diff --git a/src/components/card/card.ios.scss b/src/components/card/card.ios.scss
@@ -102,23 +102,24 @@ $card-ios-header-color:                #333 !default;
   border: 0;
 }
 
-.card-ios ion-card-content {
+.card-content-ios {
   padding: $card-ios-padding-top $card-ios-padding-right $card-ios-padding-bottom $card-ios-padding-left;
 
   font-size: $card-ios-font-size;
   line-height: 1.4;
+  color: $card-ios-text-color;
 }
 
-.card-ios ion-card-header {
+.card-header-ios {
   padding: $card-ios-header-padding;
 
   font-size: $card-ios-header-font-size;
   font-weight: $card-ios-header-font-weight;
   color: $card-ios-header-color;
 }
 
-.card-ios ion-card-header + ion-card-content,
-.card-ios .item + ion-card-content {
+.card-header-ios + .card-content-ios,
+.card-ios .item + .card-content-ios {
   padding-top: 0;
 }
 
@@ -127,7 +128,7 @@ $card-ios-header-color:                #333 !default;
   font-size: 1.3rem;
 }
 
-.card-ios ion-card-title {
+.card-title-ios {
   display: block;
 
   margin: $card-ios-title-margin;
@@ -166,9 +167,41 @@ $card-ios-header-color:                #333 !default;
   margin: 0 0 2px;
 
   font-size: 1.4rem;
-  color: $card-ios-text-color;
 }
 
 .card-ios + ion-card {
   margin-top: 0;
 }
+
+
+// Generate iOS Card Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+
+  .card-ios-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+
+    .card-header-ios,
+    .card-title-ios,
+    .card-content-ios {
+      color: $color-contrast;
+    }
+
+    @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+      .card-header-ios-#{$color-name},
+      .card-title-ios-#{$color-name},
+      .card-content-ios-#{$color-name} {
+        color: $color-base;
+      }
+    }
+  }
+
+  .card-header-ios-#{$color-name},
+  .card-title-ios-#{$color-name},
+  .card-content-ios-#{$color-name} {
+    color: $color-base;
+  }
+
+}
diff --git a/src/components/card/card.md.scss b/src/components/card/card.md.scss
@@ -107,22 +107,24 @@ $card-md-header-color:                #222 !default;
   border: 0;
 }
 
-.card-md ion-card-content {
+.card-content-md {
   padding: $card-md-padding-top $card-md-padding-right $card-md-padding-bottom $card-md-padding-left;
 
   font-size: $card-md-font-size;
   line-height: $card-md-line-height;
+
+  color: $card-md-text-color;
 }
 
-.card-md ion-card-header {
+.card-header-md {
   padding: $card-md-header-padding;
 
   font-size: $card-md-header-font-size;
   color: $card-md-header-color;
 }
 
-.card-md ion-card-header + ion-card-content,
-.card-md .item + ion-card-content {
+.card-header-md + .card-content-md,
+.card-md .item + .card-content-md {
   padding-top: 0;
 }
 
@@ -131,7 +133,7 @@ $card-md-header-color:                #222 !default;
   font-size: 1.3rem;
 }
 
-.card-md ion-card-title {
+.card-title-md {
   display: block;
 
   margin: $card-md-title-margin;
@@ -147,15 +149,13 @@ $card-md-header-color:                #222 !default;
 
   font-size: 2.4rem;
   font-weight: normal;
-  color: $card-md-text-color;
 }
 
 .card-md h2 {
   margin: 2px 0;
 
   font-size: 1.6rem;
   font-weight: normal;
-  color: $card-md-text-color;
 }
 
 .card-md h3,
@@ -166,7 +166,6 @@ $card-md-header-color:                #222 !default;
 
   font-size: 1.4rem;
   font-weight: normal;
-  color: $card-md-text-color;
 }
 
 .card-md p {
@@ -175,9 +174,41 @@ $card-md-header-color:                #222 !default;
   font-size: 1.4rem;
   font-weight: normal;
   line-height: 1.5;
-  color: $card-md-text-color;
 }
 
 .card-md + ion-card {
   margin-top: 0;
 }
+
+
+// Generate Material Design Card Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+
+  .card-md-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+
+    .card-header-md,
+    .card-title-md,
+    .card-content-md {
+      color: $color-contrast;
+    }
+
+    @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+      .card-header-md-#{$color-name},
+      .card-title-md-#{$color-name},
+      .card-content-md-#{$color-name} {
+        color: $color-base;
+      }
+    }
+  }
+
+  .card-header-md-#{$color-name},
+  .card-title-md-#{$color-name},
+  .card-content-md-#{$color-name} {
+    color: $color-base;
+  }
+
+}
diff --git a/src/components/card/card.ts b/src/components/card/card.ts
@@ -43,7 +43,31 @@ export class Card extends Ion {
 @Directive({
   selector: 'ion-card-content'
 })
-export class CardContent {}
+export class CardContent extends Ion {
+
+  /**
+   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   */
+  @Input()
+  set color(val: string) {
+    this._setColor('card-content', val);
+  }
+
+  /**
+   * @input {string} The mode to apply to this component.
+   */
+  @Input()
+  set mode(val: string) {
+    this._setMode('card-content', val);
+  }
+
+  constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
+    super(config, elementRef, renderer);
+
+    this.mode = config.get('mode');
+  }
+
+}
 
 
 /**
@@ -52,12 +76,60 @@ export class CardContent {}
 @Directive({
   selector: 'ion-card-header'
 })
-export class CardHeader {}
+export class CardHeader extends Ion {
+
+  /**
+   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   */
+  @Input()
+  set color(val: string) {
+    this._setColor('card-header', val);
+  }
+
+  /**
+   * @input {string} The mode to apply to this component.
+   */
+  @Input()
+  set mode(val: string) {
+    this._setMode('card-header', val);
+  }
+
+  constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
+    super(config, elementRef, renderer);
+
+    this.mode = config.get('mode');
+  }
+
+}
 
 /**
  * @private
  */
 @Directive({
   selector: 'ion-card-title'
 })
-export class CardTitle {}
+export class CardTitle extends Ion {
+
+  /**
+   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   */
+  @Input()
+  set color(val: string) {
+    this._setColor('card-title', val);
+  }
+
+  /**
+   * @input {string} The mode to apply to this component.
+   */
+  @Input()
+  set mode(val: string) {
+    this._setMode('card-title', val);
+  }
+
+  constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
+    super(config, elementRef, renderer);
+
+    this.mode = config.get('mode');
+  }
+
+}
diff --git a/src/components/card/card.wp.scss b/src/components/card/card.wp.scss
@@ -108,22 +108,24 @@ $card-wp-header-color:                #222 !default;
   border: 0;
 }
 
-.card-wp ion-card-content {
+.card-content-wp {
   padding: $card-wp-padding-top $card-wp-padding-right $card-wp-padding-bottom $card-wp-padding-left;
 
   font-size: $card-wp-font-size;
   line-height: $card-wp-line-height;
+  color: $card-wp-text-color;
 }
 
-.card-wp ion-card-header {
+.card-header-wp {
   padding: $card-wp-header-padding;
 
   font-size: $card-wp-header-font-size;
+
   color: $card-wp-header-color;
 }
 
-.card-wp ion-card-header + ion-card-content,
-.card-wp .item + ion-card-content {
+.card-header-wp + .card-content-wp,
+.card-wp .item + .card-content-wp {
   padding-top: 0;
 }
 
@@ -132,7 +134,7 @@ $card-wp-header-color:                #222 !default;
   font-size: 1.3rem;
 }
 
-.card-wp ion-card-title {
+.card-title-wp {
   display: block;
 
   margin: $card-wp-title-margin;
@@ -148,15 +150,13 @@ $card-wp-header-color:                #222 !default;
 
   font-size: 2.4rem;
   font-weight: normal;
-  color: $card-wp-text-color;
 }
 
 .card-wp h2 {
   margin: 2px 0;
 
   font-size: 1.6rem;
   font-weight: normal;
-  color: $card-wp-text-color;
 }
 
 .card-wp h3,
@@ -167,7 +167,6 @@ $card-wp-header-color:                #222 !default;
 
   font-size: 1.4rem;
   font-weight: normal;
-  color: $card-wp-text-color;
 }
 
 .card-wp p {
@@ -176,9 +175,41 @@ $card-wp-header-color:                #222 !default;
   font-size: 1.4rem;
   font-weight: normal;
   line-height: 1.5;
-  color: $card-wp-text-color;
 }
 
 .card-wp + ion-card {
   margin-top: 0;
 }
+
+
+// Generate Windows Card Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+
+  .card-wp-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+
+    .card-header-wp,
+    .card-title-wp,
+    .card-content-wp {
+      color: $color-contrast;
+    }
+
+    @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+      .card-header-wp-#{$color-name},
+      .card-title-wp-#{$color-name},
+      .card-content-wp-#{$color-name} {
+        color: $color-base;
+      }
+    }
+  }
+
+  .card-header-wp-#{$color-name},
+  .card-title-wp-#{$color-name},
+  .card-content-wp-#{$color-name} {
+    color: $color-base;
+  }
+
+}