feat(card): add primary action component (#292)

components/card/Card.vue

@@ -3,14 +3,6 @@
     :class="classes"
     class="mdc-card"
   >
-    <div
-      v-if="$slots['actionableContent']"
-      ref="content"
-      :class="contentClasses"
-      tabindex="0"
-    >
-      <slot name="actionableContent" />
-    </div>
     <slot />
     <div
       v-if="$slots['actionButtons'] || $slots['actionIcons'] || $slots['fullBleedButton']"
@@ -38,7 +30,6 @@
 </template>
 
 <script>
-import { MDCRipple } from '@material/ripple'
 import { baseComponentMixin, themeClassMixin } from '../base'
 
 export default {
@@ -55,8 +46,7 @@ export default {
   },
   data () {
     return {
-      slotObserver: undefined,
-      mdcRipple: undefined
+      slotObserver: undefined
     }
   },
   computed: {
@@ -65,11 +55,6 @@ export default {
         'mdc-card--outlined': this.outlined
       }
     },
-    contentClasses () {
-      return {
-        'mdc-card__primary-action': this.primaryAction
-      }
-    },
     actionClasses () {
       return {
         'mdc-card__actions--full-bleed': this.fullBleedAction
@@ -79,26 +64,16 @@ export default {
       return this.$slots.actionableContent != null
     }
   },
-  watch: {
-    primaryAction (value) {
-      value ? this.mdcRipple = MDCRipple.attachTo(this.$refs.content) : this.mdcRipple.destroy()
-    }
-  },
   mounted () {
     this.updateSlots()
     this.slotObserver = new MutationObserver(() => this.updateSlots())
     this.slotObserver.observe(this.$el, {
       childList: true,
       subtree: true
     })
-
-    if (this.primaryAction) { this.mdcRipple = MDCRipple.attachTo(this.$refs.content) }
   },
   beforeDestroy () {
     this.slotObserver.disconnect()
-    if (typeof this.mdcRipple !== 'undefined') {
-      this.mdcRipple.destroy()
-    }
   },
   methods: {
     updateSlots () {

components/card/CardPrimaryAction.vue

@@ -0,0 +1,30 @@
+<template>
+  <div
+    class="mdc-card__primary-action"
+    tabindex="0"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+
+import { MDCRipple } from '@material/ripple'
+
+export default {
+  name: 'CardPrimaryAction',
+  data () {
+    return {
+      mdcRipple: undefined
+    }
+  },
+  mounted () {
+    this.mdcRipple = MDCRipple.attachTo(this.$el)
+  },
+  beforeDestroy () {
+    if (this.mdcRipple) {
+      this.mdcRipple.destroyed()
+    }
+  }
+}
+</script>

components/card/__test__/Card.spec.js

@@ -4,6 +4,7 @@ import Card from '../Card.vue'
 import CardMedia from '../CardMedia.vue'
 import Button from '../../button/Button.vue'
 import IconButton from '../../icon-button/IconButton.vue'
+import CardPrimaryAction from '../CardPrimaryAction'
 
 describe('Card Media', () => {
   it('should mount', () => {
@@ -61,18 +62,6 @@ describe('Card', () => {
     expect(wrapper.classes()).toContain('mdc-card--outlined')
   })
 
-  it('should render as primary action', () => {
-    let wrapper = mount(Card, {
-      slots: {
-        actionableContent: 'content'
-      }
-    })
-    expect(wrapper).toMatchSnapshot()
-    let content = wrapper.find('.mdc-card__primary-action')
-    expect(content).toBeDefined()
-    expect(content.attributes().tabindex).toBe('0')
-  })
-
   it('should render with full bleed action', () => {
     let wrapper = mount(Card, {
       propsData: {
@@ -117,3 +106,17 @@ describe('Card', () => {
     })
   })
 })
+
+describe('CardPrimaryAction', () => {
+  it('should mount', () => {
+    let wrapper = mount(CardPrimaryAction)
+    expect(wrapper.isVueInstance()).toBeTruthy()
+    expect(wrapper.vm.$data.mdcRipple).toBeDefined()
+  })
+
+  it('should render with no prop', () => {
+    let wrapper = mount(CardPrimaryAction)
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.classes()).toContain('mdc-card__primary-action')
+  })
+})

components/card/__test__/__snapshots__/Card.spec.js.snap

@@ -21,20 +21,11 @@ exports[`Card Media should render with no prop 1`] = `
 exports[`Card should render as outlined 1`] = `
 <div class="mdc-card mdc-card--outlined">
   <!---->
-  <!---->
-</div>
-`;
-
-exports[`Card should render as primary action 1`] = `
-<div class="mdc-card">
-  <div tabindex="0" class="mdc-card__primary-action">content</div>
-  <!---->
 </div>
 `;
 
 exports[`Card should render with action buttons 1`] = `
 <div class="mdc-card">
-  <!---->
   <div class="mdc-card__actions">
     <!---->
     <div class="mdc-card__action-buttons"><button class="mdc-button mdc-card__action mdc-card__action--button"> </button><button class="mdc-button mdc-card__action mdc-card__action--button"> </button></div>
@@ -45,7 +36,6 @@ exports[`Card should render with action buttons 1`] = `
 
 exports[`Card should render with action icons 1`] = `
 <div class="mdc-card">
-  <!---->
   <div class="mdc-card__actions">
     <!---->
     <!---->
@@ -64,7 +54,6 @@ exports[`Card should render with action icons 1`] = `
 
 exports[`Card should render with full bleed action 1`] = `
 <div class="mdc-card">
-  <!---->
   <div class="mdc-card__actions mdc-card__actions--full-bleed"><button class="mdc-button mdc-card__action mdc-card__action--button"> </button>
     <!---->
     <!---->
@@ -75,6 +64,7 @@ exports[`Card should render with full bleed action 1`] = `
 exports[`Card should render with no prop 1`] = `
 <div class="mdc-card">
   <!---->
-  <!---->
 </div>
 `;
+
+exports[`CardPrimaryAction should render with no prop 1`] = `<div tabindex="0" class="mdc-card__primary-action"></div>`;

components/card/index.js

@@ -1,5 +1,6 @@
 import Card from './Card.vue'
 import CardMedia from './CardMedia.vue'
+import CardPrimaryAction from './CardPrimaryAction'
 import './styles.scss'
 
 import { initPlugin } from '../'
@@ -8,6 +9,7 @@ const plugin = {
   install (vm) {
     vm.component('m-card', Card)
     vm.component('m-card-media', CardMedia)
+    vm.component('m-card-primary-action', CardPrimaryAction)
   }
 }
 export default plugin

docs/.vuepress/components/CardDemo.vue

@@ -5,7 +5,7 @@
     :outlined="radioProps[1].value"
     :fullBleedAction="checkboxProps[0].value"
     :primaryAction="checkboxProps[1].value">
-    <section class="card-section" slot="actionableContent">
+    <m-card-primary-action class="card-section">
     <m-typo-headline :level="6">
       Title
     </m-typo-headline>
@@ -15,7 +15,7 @@
       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
       Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
     </m-typo-body>
-    </section>
+    </m-card-primary-action>
     <m-button slot="fullBleedButton">
       full bleed
     </m-button>

docs/.vuepress/components/CardMediaDemo.vue

@@ -6,7 +6,6 @@
     :fullBleedAction="checkboxProps[2].value"
     :primaryAction="checkboxProps[3].value">
     <m-card-media
-      slot="media"
       class="card-media card-media-content"
       :square="checkboxProps[0].value"
       :sixteenNine="checkboxProps[1].value">
@@ -55,7 +54,7 @@ export default {
 .card-section {
   display: flex;
   flex-direction: column;
-  align-items: left;
+  align-items: start;
   justify-content: flex-start;
   padding: 8px 16px;
   width: 300px;