feat(MdCard): create needed files to start creation of cards

Author: marcos-hotmart

docs/app/i18n/en-US.js

@@ -28,6 +28,9 @@ export default {
     app: {
       title: 'App'
     },
+    card: {
+      title: 'Card'
+    },
     checkbox: {
       title: 'Checkbox'
     },

docs/app/pages/Components/Card/Card.vue

@@ -0,0 +1,33 @@
+<example src="./examples/RegularCards.vue" />
+<example src="./examples/CardsWithHover.vue" />
+
+<template>
+  <page-container centered :title="$t('pages.card.title')">
+    <div class="page-container-section">
+      <p>The content surfaces that comprise applications are referred to in this spec as material, or sheets of material. The content component is commonly used to resemble a piece of paper. It'll be useful to theme a arbitrary content.</p>
+    </div>
+
+    <div class="page-container-section">
+      <h2>Card</h2>
+
+      <code-example title="Regular Cards" :component="examples['regular-cards']" />
+      <code-example title="Cards with hover" :component="examples['cards-with-hover']" />
+
+      <api-item title="API - md-card">
+        <p>This component do not have any extra option.</p>
+      </api-item>
+    </div>
+  </page-container>
+</template>
+
+<script>
+  import examples from 'docs-mixins/docsExample'
+
+  export default {
+    name: 'Card',
+    mixins: [examples],
+    data: () => ({
+
+    })
+  }
+</script>

docs/app/pages/Components/Card/examples/CardsWithHover.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <md-card md-with-hover>Regular card</md-card>
+    <md-card md-with-hover class="md-primary">Primary card</md-card>
+    <md-card md-with-hover class="md-accent">Accent card</md-card>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .md-card {
+    width: 200px;
+    padding: 16px;
+    display: inline-block;
+  }
+</style>
+
+<script>
+  export default {
+    name: 'RegularCards'
+  }
+</script>

docs/app/pages/Components/Card/examples/RegularCards.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <md-card>Regular card</md-card>
+    <md-card class="md-primary">Primary card</md-card>
+    <md-card class="md-accent">Accent card</md-card>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .md-card {
+    width: 200px;
+    padding: 16px;
+    display: inline-block;
+  }
+</style>
+
+<script>
+  export default {
+    name: 'RegularCards'
+  }
+</script>

docs/app/routes.js

@@ -49,6 +49,11 @@ export const routes = [
     name: 'components/drawer',
     component: () => import('./pages/Components/Drawer/Drawer.vue')
   },
+  {
+    path: '/components/card',
+    name: 'components/card',
+    component: () => import('./pages/Components/Card/Card.vue')
+  },
   {
     path: '/components/form',
     name: 'form',

docs/app/template/MainNavContent.vue

@@ -7,6 +7,7 @@
     <div class="main-nav-level">
       <router-link to="/components/app">{{ $t('pages.app.title') }}</router-link>
       <router-link to="/components/button">{{ $t('pages.button.title') }}</router-link>
+      <router-link to="/components/card">{{ $t('pages.card.title') }}</router-link>
       <router-link to="/components/content">{{ $t('pages.content.title') }}</router-link>
       <router-link to="/components/divider">{{ $t('pages.divider.title') }}</router-link>
       <router-link to="/components/drawer">{{ $t('pages.drawer.title') }}</router-link>

src/components/MdCard/MdCard.test.js

@@ -0,0 +1,17 @@
+import mountTemplate from 'test/utils/mountTemplate'
+import MdCard from './MdCard.vue'
+
+test('should render the content', async () => {
+  const template = '<md-card>Lorem ipsum</md-card>'
+  const wrapper = await mountTemplate(MdCard, template)
+
+  expect(wrapper.hasClass('md-card')).toBe(true)
+  expect(wrapper.text()).toBe('Lorem ipsum')
+})
+
+test('should render the theme class', async () => {
+  const template = '<md-card md-theme="alt">Lorem ipsum</md-card>'
+  const wrapper = await mountTemplate(MdCard, template)
+
+  expect(wrapper.hasClass('md-theme-alt')).toBe(true)
+})

src/components/MdCard/MdCard.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="md-card" :class="[$mdActiveTheme, cardClasses]">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  import MdComponent from 'core/MdComponent'
+
+  export default new MdComponent({
+    name: 'MdCard',
+    props: {
+      mdWithHover: Boolean
+    },
+    computed: {
+      cardClasses () {
+        return {
+          'md-with-hover': this.mdWithHover
+        }
+      }
+    }
+  })
+</script>
+
+<style lang="scss">
+  @import "~components/MdAnimation/variables";
+  @import "~components/MdElevation/mixins";
+
+  $md-card-radius: 2px;
+
+  .md-card {
+    @include md-elevation(2);
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    z-index: 1;
+    border-radius: $md-card-radius;
+    transition: .3s $md-transition-default-timing;
+    transition-property: color, background-color;
+    will-change: color, background-color;
+
+    &.md-with-hover {
+      cursor: pointer;
+      transition: .3s $md-transition-stand-timing;
+      transition-property: background-color, box-shadow;
+      will-change: background-color, box-shadow;
+
+      &:hover {
+        z-index: 2;
+        @include md-elevation(8);
+      }
+    }
+  }
+</style>

src/components/MdCard/index.js

@@ -0,0 +1,5 @@
+import MdCard from './MdCard'
+
+export default Vue => {
+  Vue.component(MdCard.name, MdCard)
+}

src/components/MdCard/theme.scss

@@ -0,0 +1,16 @@
+.md-card {
+  @include md-theme-component() {
+    @include md-theme-property(background-color, background);
+    @include md-theme-property(color, text-primary, background);
+
+    &.md-primary {
+      @include md-theme-property(background-color, primary);
+      @include md-theme-property(color, text-primary, primary);
+    }
+
+    &.md-accent {
+      @include md-theme-property(background-color, accent);
+      @include md-theme-property(color, text-primary, accent);
+    }
+  }
+}

src/components/index.js

@@ -1,5 +1,6 @@
 import MdApp from './MdApp'
 import MdButton from './MdButton'
+import MdCard from './MdCard'
 import MdCheckbox from './MdCheckbox'
 import MdContent from './MdContent'
 import MdDivider from './MdDivider'
@@ -19,6 +20,7 @@ import MdToolbar from './MdToolbar'
 export default {
   MdApp,
   MdButton,
+  MdCard,
   MdCheckbox,
   MdContent,
   MdDivider,

src/theme/all.scss

@@ -1,5 +1,6 @@
   @import "../base/theme";
   @import "../components/MdButton/theme";
+  @import "../components/MdCard/theme";
   @import "../components/MdCheckbox/theme";
   @import "../components/MdContent/theme";
   @import "../components/MdDivider/theme";