fix(card): bring back prop primaryAction (#319)

matsp · Jul 1, 2019 · 3ad11bc · 3ad11bc
1 parent 2d1cb41
commit 3ad11bc
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 4 deletions.
diff --git a/components/card/Card.vue b/components/card/Card.vue
@@ -3,7 +3,15 @@
     :class="classes"
     class="mdc-card"
   >
-    <slot />
+    <div
+      v-if="primaryAction"
+      class="mdc-card__primary-action"
+      tabindex="0"
+      v-on="$listeners"
+    >
+      <slot />
+    </div>
+    <slot v-else />
     <div
       v-if="$slots['actionButtons'] || $slots['actionIcons'] || $slots['fullBleedButton']"
       :class="actionClasses"
@@ -42,6 +50,10 @@ export default {
     fullBleedAction: {
       type: Boolean,
       default: false
+    },
+    primaryAction: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -59,9 +71,6 @@ export default {
       return {
         'mdc-card__actions--full-bleed': this.fullBleedAction
       }
-    },
-    primaryAction () {
-      return this.$slots.actionableContent != null
     }
   },
   mounted () {

diff --git a/components/card/__test__/Card.spec.js b/components/card/__test__/Card.spec.js
@@ -105,6 +105,22 @@ describe('Card', () => {
       expect(w.classes()).toContain('mdc-card__action--icon')
     })
   })
+
+  it('should render with primary action', () => {
+    let wrapper = mount(Card, {
+      slots: {
+        default: [CardMedia]
+      },
+      propsData: {
+        primaryAction: true
+      }
+    })
+    expect(wrapper).toMatchSnapshot()
+
+    let primaryAction = wrapper.find('.mdc-card__primary-action')
+    expect(primaryAction.exists()).toBe(true)
+    expect(primaryAction.find('.mdc-card__media').exists()).toBe(true)
+  })
 })
 
 describe('CardPrimaryAction', () => {

diff --git a/components/card/__test__/__snapshots__/Card.spec.js.snap b/components/card/__test__/__snapshots__/Card.spec.js.snap
@@ -67,4 +67,15 @@ exports[`Card should render with no prop 1`] = `
 </div>
 `;
 
+exports[`Card should render with primary action 1`] = `
+<div class="mdc-card">
+  <div tabindex="0" class="mdc-card__primary-action">
+    <div class="mdc-card__media mdc-card__media--square">
+      <div class="mdc-card__media-content"></div>
+    </div>
+  </div>
+  <!---->
+</div>
+`;
+
 exports[`CardPrimaryAction should render with no prop 1`] = `<div tabindex="0" class="mdc-card__primary-action"></div>`;