From 76e56cfd0f6d89872a8c9b4623efdcf8936729d5 Mon Sep 17 00:00:00 2001
From: "Andrew C. Dvorak" <acdvorak@gmail.com>
Date: Fri, 26 Jan 2018 16:11:23 -0800
Subject: [PATCH] feat(card): Add `--stroked` variant and `mdc-card-stroke`
 mixin (#2035)

Fixes #1708
---
 demos/card.html                 | 2 +-
 packages/mdc-card/README.md     | 2 ++
 packages/mdc-card/_mixins.scss  | 4 ++++
 packages/mdc-card/mdc-card.scss | 8 ++++++++
 4 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/demos/card.html b/demos/card.html
index b624c92cbbb..ccaec5aa1cd 100644
--- a/demos/card.html
+++ b/demos/card.html
@@ -99,7 +99,7 @@ <h3 class="demo-card__subtitle mdc-typography--subheading1">by Kurt Wagner</h3>
       </section>
 
       <section class="demo-card-collection">
-        <div class="mdc-card demo-card">
+        <div class="mdc-card mdc-card--stroked demo-card">
           <div class="demo-card-article-group-heading mdc-typography--subheading2">Headlines</div>
 
           <hr class="mdc-list-divider">
diff --git a/packages/mdc-card/README.md b/packages/mdc-card/README.md
index 2df45f7bee2..86edd25f446 100644
--- a/packages/mdc-card/README.md
+++ b/packages/mdc-card/README.md
@@ -171,6 +171,7 @@ elements:
 CSS Class | Description
 --- | ---
 `mdc-card` | Mandatory, for the card element
+`mdc-card--stroked` | Removes the shadow and displays a hairline stroke instead
 `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
@@ -188,5 +189,6 @@ CSS Class | Description
 Mixin | Description
 --- | ---
 `mdc-card-fill-color($color)` | Sets the fill color of a card
+`mdc-card-stroke($color, $thickness)` | Sets the color and thickness of a card's stroke (but does _not_ remove its shadow)
 `mdc-card-corner-radius($radius)` | Sets the corner radius of a card
 `mdc-card-media-aspect-ratio($x, $y)` | Maintains the given aspect ratio on a `mdc-card__media` subelement by dynamically scaling its height relative to its width
diff --git a/packages/mdc-card/_mixins.scss b/packages/mdc-card/_mixins.scss
index b8b1f72f429..ff1d60f8368 100644
--- a/packages/mdc-card/_mixins.scss
+++ b/packages/mdc-card/_mixins.scss
@@ -24,6 +24,10 @@
   @include mdc-theme-prop(background-color, $color);
 }
 
+@mixin mdc-card-stroke($color, $thickness: 1px) {
+  border: $thickness solid mdc-theme-prop-value($color);
+}
+
 @mixin mdc-card-corner-radius($radius) {
   border-radius: $radius;
 }
diff --git a/packages/mdc-card/mdc-card.scss b/packages/mdc-card/mdc-card.scss
index 5ef2c313fae..8d788884b4f 100644
--- a/packages/mdc-card/mdc-card.scss
+++ b/packages/mdc-card/mdc-card.scss
@@ -33,6 +33,14 @@
   box-sizing: border-box;
 }
 
+.mdc-card--stroked {
+  $fill-color: mdc-theme-prop-value(background);
+  $stroke-color: mdc-theme-dark-variant($fill-color, 1);
+
+  @include mdc-elevation(0);
+  @include mdc-card-stroke($stroke-color);
+}
+
 //
 // Media
 //