feat(card): Synchronise with mdc-web v0.31.0 (add primary action)

matsp · Feb 20, 2018 · ac51092 · ac51092
1 parent 28a7aac
commit ac51092
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/components/Card/Card.vue b/components/Card/Card.vue
@@ -2,8 +2,10 @@
   <div
     class="mdc-card"
     :class="classes">
-    <slot name="media"/>
-    <slot />
+    <div :class="contentClasses">
+      <slot name="media"/>
+      <slot />
+    </div>
     <div
       class="mdc-card__actions"
       :class="actionClasses"
@@ -32,6 +34,10 @@ export default {
     fullBleedAction: {
       type: Boolean,
       default: false
+    },
+    primaryAction: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -40,13 +46,18 @@ export default {
         'mdc-card--stroked': this.stroked
       }
     },
+    contentClasses () {
+      return {
+        'mdc-card__primary-action': this.primaryAction
+      }
+    },
     actionClasses () {
       return {
         'mdc-card__actions--full-bleed': this.fullBleedAction
       }
     }
   },
-  mounted () {
+  mounted () {    
     if (this.$slots.actionButtons) {
       this.$slots.actionButtons.map((n) => {
         n.elm.classList.add('mdc-card__action')

diff --git a/components/Card/README.md b/components/Card/README.md
@@ -3,7 +3,7 @@
 ### Markup
 
 ```html
-<m-card>
+<m-card primaryAction>
   <m-typo-headline class="demo">
     Title
   </m-typo-headline>
@@ -37,6 +37,7 @@
 |------|------|---------|-------------|
 | stroked | Boolean | false | renders a hairline stroke |
 | fullBleedAction | Boolean | false | a single action will take up the entire space in the row |
+| primaryAction | Boolean | false | visual support for a primary action on the card |
 
 ### Slots
 

diff --git a/demo/views/CardView.vue b/demo/views/CardView.vue
@@ -9,7 +9,7 @@
       </m-typo-body>
     </m-layout-grid-cell>
     <m-layout-grid-cell>
-      <m-card>
+      <m-card primaryAction>
         <m-typo-headline class="demo">
           Title
         </m-typo-headline>