feat(card): update card (#369)

make ripple optional for primary action update docs use actions slot to replace fullBleedAction slot update demos update tests
matsp · Jul 30, 2019 · 842a4c3 · 842a4c3
1 parent df0d8a5
commit 842a4c3
Show file tree

Hide file tree

Showing 8 changed files with 219 additions and 71 deletions.
diff --git a/components/card/Card.vue b/components/card/Card.vue
@@ -13,14 +13,17 @@
     </div>
     <slot v-else />
     <div
-      v-if="$slots['actionButtons'] || $slots['actionIcons'] || $slots['fullBleedButton']"
+      v-if="$slots['actionButtons'] || $slots['actionIcons'] || $slots['fullBleedButton'] || $slots['actions']"
       :class="actionClasses"
       class="mdc-card__actions"
     >
       <slot
-        v-if="fullBleedAction"
+        v-if="fullBleedAction && $slots['fullBleedButton']"
         name="fullBleedButton"
       />
+      <slot
+        name="actions"
+      />
       <div
         v-if="!fullBleedAction && $slots['actionButtons']"
         class="mdc-card__action-buttons"
@@ -110,6 +113,14 @@ export default {
           }
         })
       }
+      if (this.$slots.actions) {
+        this.$slots.actions.forEach((n) => {
+          if (n.elm && n.elm.classList) {
+            n.elm.classList.add('mdc-card__action')
+            n.elm.classList.contains('mdc-icon-button') ? n.elm.classList.add('mdc-card__action--icon') : n.elm.classList.add('mdc-card__action--button')
+          }
+        })
+      }
     }
   }
 }

diff --git a/components/card/CardMedia.vue b/components/card/CardMedia.vue
@@ -3,7 +3,10 @@
     :class="classes"
     class="mdc-card__media"
   >
-    <div class="mdc-card__media-content">
+    <div
+      v-if="$slots['default']"
+      class="mdc-card__media-content"
+    >
       <slot />
     </div>
   </div>

diff --git a/components/card/CardPrimaryAction.vue b/components/card/CardPrimaryAction.vue
@@ -12,14 +12,27 @@
 import { MDCRipple } from '@material/ripple'
 
 export default {
-  name: 'CardPrimaryAction',
+  props: {
+    ripple: {
+      type: Boolean,
+      default: true
+    }
+  },
   data () {
     return {
       mdcRipple: undefined
     }
   },
+  watch: {
+    ripple () {
+      if (!this.ripple && this.mdcRipple) {
+        this.mdcRipple.destroyed()
+      }
+      if (this.ripple) this.mdcRipple = MDCRipple.attachTo(this.$el)
+    }
+  },
   mounted () {
-    this.mdcRipple = MDCRipple.attachTo(this.$el)
+    if (this.ripple) this.mdcRipple = MDCRipple.attachTo(this.$el)
   },
   beforeDestroy () {
     if (this.mdcRipple) {

diff --git a/components/card/README.md b/components/card/README.md
@@ -2,51 +2,156 @@
 
 ### Markup
 
+#### Minimal
+
+```html
+<m-card>
+  <!-- ... content ... -->
+</m-card>
+```
+
+#### Outlined
+
+```html
+<m-card outlined>
+  <!-- ... content ... -->
+</m-card>
+```
+
+#### With Primary Action
+
 ```html
-<m-card primaryAction>
-  <m-typo-headline class="demo">
-    Title
-  </m-typo-headline>
-  <m-typo-body
-    class="demo"
-    :level="1">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-    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>
-  <m-button
-    interactive
-    slot="actionButtons"
-    href="https://github.com/matsp/material-components-vue/blob/master/components/Card">
-    github
-  </m-button>
+<m-card>
+  <m-primary-action>
+      <!-- content within actionable area -->
+  </m-primary-action>
+    <!-- ... content ... -->
+</m-card>
+```
+
+You can have more than one `<m-primary-action>` within a `<m-card>`
+
+#### With Rich Media
+
+```html
+<m-card>
+  <m-card-media class="my-card__media">
+    Title        <!-- or other content on top of the media, usually a background-->
+  </m-card-media>
+      <!-- ... content ... -->
 </m-card>
 ```
-### CSS
 
 ```css
-.demo {
-  padding: 8px 16px;
+.my-card__media {
+  background-image: url("pretty.jpg");
 }
 ```
 
+#### Actions
+
+The `actions` slot is used for showing different actions the user can take, typically at the bottom of a card. It’s often used with `<m-button>`
+
+```html
+<m-card>
+  <template slot="actions">
+    <m-button>
+      action
+    </m-button>
+    <m-button>
+      action
+    </m-button>
+  </template>
+</m-card>
+```
+
+It can also be used with `<m-icon-button>`
+
+```html
+<m-card>
+  <template slot="actions">
+    <m-icon-button icon="share" title="Share">
+    </m-icon-button>
+    <m-icon-button icon="more_vert" title="More options">
+    </m-icon-button>
+  </template>
+</m-card>
+```
+
+
+To display buttons and icons in the same row, wrap them in `actionButtons` and `actionIcons` slots.
+
+```html
+<m-card>
+      <!-- ... content ... -->    
+    <template slot="actionButtons">
+      <m-button>
+        action
+      </m-button>
+      <m-button>
+        action
+      </m-button>
+    </template>
+    <template slot="actionIcons">
+      <m-icon-button icon="share" title="Share">
+      </m-icon-button>
+      <m-icon-button icon="more_vert" title="More options">
+      </m-icon-button>
+    </template>
+  </m-card>
+```
+To have a single action button take up the entire width of the action row, use `fullBleedAction` prop.
+
+```html
+<m-card full-bleed-action>
+  <m-button slot="actions">Button</m-button>
+</m-card>
+```
+
+#### Combined example
+
+```html
+<m-card>
+  <m-card-primary-action>
+    <m-card-media square>
+      Title
+    </m-card-media>
+        <!-- ... additional primary action content ... -->
+  </m-card-primary-action>
+  <template slot="actionButtons">
+    <m-button>
+      action
+    </m-button>
+    <m-button>
+      action
+    </m-button>
+    </template>
+    <template slot="actionIcons">
+      <m-icon-button icon="share" title="Share">
+      </m-icon-button>
+      <m-icon-button icon="more_vert" title="More options">
+      </m-icon-button>
+    </template>
+</m-card>
+```
+
 ### Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| outlined | Boolean | false | renders a hairline outline |
-| 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 |
+| outlined | Boolean | false | Removes the shadow and displays a hairline outline instead. |
+| fullBleedAction | Boolean | false | A single action will take up the entire space in the row of actions |
+| primaryAction | Boolean | false | DEPRECATED. Use `<m-card-primary-action>` instead. |
 
 ### Slots
 
 | Slot | Description |
 |------|-------------|
 | default | card content |
-| media | media content |
 | actionButtons | button components |
 | actionIcons | icon components |
+| fullBleedButton | DEPRECATED. Use `actions` slot instead |
+| actions | actions the user can take |
 
 ## CardMedia
 
@@ -61,7 +166,22 @@
 
 | Slot | Description |
 |------|-------------|
-| default | media content |
+| default | media content on top of the media, usually a background |
+
+## CardPrimaryAction 
+
+### Props 
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| ripple | Boolean | true | use js ripple or not |
+
+### Slots
+
+| Slot | Description |
+|------|-------------|
+| default | actionable content |
+
 
 ### Reference
 - https://github.com/material-components/material-components-web/tree/master/packages/mdc-card