comp(MdSubheader): create subheaders

Author: marcosmoura

docs/app/i18n/en-US.js

@@ -52,6 +52,9 @@ export default {
     switch: {
       title: 'Switch'
     },
+    subheader: {
+      title: 'Subheader'
+    },
     toolbar: {
       title: 'Toolbar'
     },

docs/app/pages/Components/Divider/Divider.vue

@@ -1,7 +1,7 @@
 <example src="./examples/Divider.vue" />
 
 <template>
-  <page-container centered :title="$t('pages.content.title')">
+  <page-container centered :title="$t('pages.divider.title')">
     <div class="page-container-section">
       <p>A divider is a thin, lightweight rule that groups content in lists and page layouts and help organize page content and hierarchy into individual tiles.</p>
       <p>The dividers can be used in lists and to separate content. They fit well in navigation panels and menus.</p>

docs/app/pages/Components/Subheader/Subheader.vue

@@ -0,0 +1,29 @@
+<example src="./examples/Subheader.vue" />
+
+<template>
+  <page-container centered :title="$t('pages.subheader.title')">
+    <div class="page-container-section">
+      <p>Subheaders are list tiles that delineate sections of a list or grid list.</p>
+      <p>The subheader can be used in lists, grid and even on selects and are typically related to filtering or sorting criteria. They fit well in navigation panels and grid lists.</p>
+    </div>
+
+    <div class="page-container-section">
+      <h2>Subheader</h2>
+
+      <code-example title="Subheader" :component="examples['subheader']" />
+
+      <api-item title="API - md-subheader">
+        <p>This componen do not have any extra option.</p>
+      </api-item>
+    </div>
+  </page-container>
+</template>
+
+<script>
+  import examples from 'docs-mixins/docsExample'
+
+  export default {
+    name: 'Subheader',
+    mixins: [examples]
+  }
+</script>

docs/app/pages/Components/Subheader/examples/Subheader.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <md-subheader>Subheader Default</md-subheader>
+    <md-subheader class="md-primary">Subheader Primary</md-subheader>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .md-subheader + .md-subheader {
+    margin-top: 16px;
+  }
+</style>
+
+<script>
+  export default {
+    name: 'Subheader'
+  }
+</script>

docs/app/routes.js

@@ -64,6 +64,11 @@ export const routes = [
     name: 'components/radio',
     component: () => import('./pages/Components/Radio/Radio.vue')
   },
+  {
+    path: '/components/subheader',
+    name: 'components/subheader',
+    component: () => import('./pages/Components/Subheader/Subheader.vue')
+  },
   {
     path: '/components/switch',
     name: 'components/switch',

docs/app/template/MainNavContent.vue

@@ -19,6 +19,7 @@
       </div>
 
       <router-link to="/components/icon">{{ $t('pages.icon.title') }}</router-link>
+      <router-link to="/components/subheader">{{ $t('pages.subheader.title') }}</router-link>
       <router-link to="/components/toolbar">{{ $t('pages.toolbar.title') }}</router-link>
     </div>
 

src/components/MdDivider/MdDivider.vue

@@ -1,7 +1,5 @@
 <template>
-  <div class="md-divider" :class="[$mdActiveTheme]">
-    <slot />
-  </div>
+  <hr class="md-divider" :class="[$mdActiveTheme]">
 </template>
 
 <script>

src/components/MdSubheader/MdSubheader.test.js

@@ -0,0 +1,40 @@
+import Vue from 'vue'
+import mountTemplate from 'test/utils/mountTemplate'
+import MdSubheader from './MdSubheader.vue'
+
+test('should render the subheader', async () => {
+  const template = '<md-subheader>Lorem ipsum</md-subheader>'
+  const wrapper = await mountTemplate(MdSubheader, template)
+
+  expect(wrapper.hasClass('md-subheader')).toBe(true)
+  expect(wrapper.text()).toBe('Lorem ipsum')
+})
+
+test('should render the theme class', async () => {
+  const template = '<md-subheader md-theme="alt">Lorem ipsum</md-subheader>'
+  const wrapper = await mountTemplate(MdSubheader, template)
+
+  expect(wrapper.hasClass('md-theme-alt')).toBe(true)
+})
+
+test('should render a <li> tag when inside lists', async () => {
+  Vue.component('MdList', {
+    template: '<div><slot></slot></div>'
+  })
+  const template = `
+    <md-list>
+      <md-subheader>Lorem ipsum</md-subheader>
+    </md-list>`
+  const wrapper = await mountTemplate(MdSubheader, template)
+  const subheader = wrapper.find(MdSubheader)[0]
+
+  expect(subheader.vm.$el.tagName.toLowerCase()).toBe('li')
+})
+
+test('should render a <div> tag when inside any other element', async () => {
+  const template = `<md-subheader>Lorem ipsum</md-subheader>`
+  const wrapper = await mountTemplate(MdSubheader, template)
+  const subheader = wrapper.find(MdSubheader)[0]
+
+  expect(subheader.vm.$el.tagName.toLowerCase()).toBe('div')
+})

src/components/MdSubheader/MdSubheader.vue

@@ -0,0 +1,36 @@
+<template>
+  <li class="md-subheader" :class="[$mdActiveTheme]" v-if="insideList">
+    <slot></slot>
+  </li>
+
+  <div class="md-subheader" :class="[$mdActiveTheme]" v-else>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  import MdComponent from 'core/MdComponent'
+
+  export default new MdComponent({
+    name: 'MdSubheader',
+    computed: {
+      insideList () {
+        return this.$parent.$options._componentTag === 'md-list'
+      }
+    }
+  })
+</script>
+
+<style lang="scss">
+  @import "~components/MdAnimation/variables";
+
+  .md-subheader {
+    min-height: 48px;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    flex-flow: row wrap;
+    font-size: 14px;
+    font-weight: 500;
+  }
+</style>

src/components/MdSubheader/index.js

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