comp(MdBadge): new md-badge component (#1465)

* comp(MdBadge): add md-badge

* docs(MdBadge): add missing props, description

* feat(MdBadge): add z-index

* docs(MdBadge): add more examples

* feat(MdBadge): separate badge component

* feat(MdBadge): add dense prop

* docs(MdBadge): dense example, docs

docs/app/i18n/en-US/pages.js

@@ -134,6 +134,10 @@ export default {
     title: 'Avatar',
     description: 'Avatars can be used to represent people. When used with a specific logo, avatars can also be used to represent a brand.'
   },
+  badge: {
+    title: 'Badge',
+    description: 'Small status descriptors for UI elements.'
+  },
   bottomBar: {
     title: 'Bottom Bar',
     description: 'Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.'

docs/app/pages/Components/Badge/Badge.vue

@@ -0,0 +1,70 @@
+<example src="./examples/Buttons.vue" />
+<example src="./examples/Lists.vue" />
+<example src="./examples/Dense.vue" />
+
+<template>
+  <page-container centered :title="$t('pages.badge.title')">
+    <div class="page-container-section">
+      <p>Small status descriptors for UI elements.</p>
+    </div>
+
+    <div class="page-container-section">
+
+      <p>Some components like <b>button, avatar</b> needs to be wrapped with <code>md-badge</code> component.</p>
+      <code-example title="Example with buttons" :component="examples['buttons']" />
+
+      <code-example title="Example with lists" :component="examples['lists']" />
+
+      <code-example title="Dense" :component="examples['dense']" />
+
+      <api-item title="API - md-badge">
+        <p>The following option can be applied to any badge:</p>
+
+        <api-table :headings="props.headings" :props="props.props" slot="props" />
+        <api-table :headings="classes.headings" :props="classes.props" slot="classes" />
+      </api-item>
+    </div>
+  </page-container>
+</template>
+
+<script>
+  import examples from 'docs-mixins/docsExample'
+
+  export default {
+    name: 'DocBadge',
+    mixins: [examples],
+    data: () => ({
+      classes: {
+        headings: ['Name', 'Description'],
+        props: [
+          {
+            name: 'md-square',
+            description: 'Created square type badge.'
+          }
+        ]
+      },
+      props: {
+        headings: ['Name', 'Description', 'Default'],
+        props: [
+          {
+            name: 'md-content',
+            type: 'String, Number',
+            description: 'A content for badge'
+          },
+          {
+            name: 'md-position',
+            type: 'String',
+            description: 'Position of badge <code>top</code> or <code>bottom</code>',
+            defaults: 'top'
+          },
+          {
+            name: 'md-dense',
+            type: 'Boolean',
+            description: 'Enables the dense layout',
+            defaults: 'false'
+          },
+        ]
+      }
+    })
+  }
+</script>

docs/app/pages/Components/Badge/examples/Buttons.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="demo-badge">
+    <div>
+      <md-badge md-content="1">
+        <md-button class="md-icon-button">
+          <md-icon>notifications</md-icon>
+        </md-button>
+      </md-badge>
+
+      <md-badge class="md-primary" md-content="1">
+        <md-button class="md-icon-button">
+          <md-icon>home</md-icon>
+        </md-button>
+      </md-badge>
+
+      <md-badge md-position="bottom" md-content="2">
+        <md-button class="md-icon-button">
+          <md-icon>home</md-icon>
+        </md-button>
+      </md-badge>
+    </div>
+
+    <div>
+      <md-badge class="md-primary" md-content="12">
+        <md-avatar>
+          <img src="/assets/examples/avatar.png" alt="Avatar">
+        </md-avatar>
+      </md-badge>
+    </div>
+
+    <div>
+      <md-badge class="md-primary md-square" md-position="bottom" md-content="12">
+        <md-button>
+          Button with
+        </md-button>
+      </md-badge>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Buttons'
+  }
+</script>
+
+<style lang="scss" scoped>
+  .demo-badge {
+    > div {
+      margin-bottom: 16px;
+    }
+  }
+</style>

docs/app/pages/Components/Badge/examples/Dense.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="demo-badge">
+    <div>
+      <md-badge md-content="1" md-dense>
+        <md-button class="md-icon-button">
+          <md-icon>notifications</md-icon>
+        </md-button>
+      </md-badge>
+
+      <md-badge class="md-primary" md-content="12" md-dense>
+        <md-button class="md-icon-button">
+          <md-icon>home</md-icon>
+        </md-button>
+      </md-badge>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Dense'
+  }
+</script>
+
+<style lang="scss" scoped>
+  .demo-badge {
+    > div {
+      margin-bottom: 16px;
+    }
+  }
+</style>

docs/app/pages/Components/Badge/examples/Lists.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <md-list>
+      <md-list-item>
+        <md-icon>move_to_inbox</md-icon>
+        <span class="md-list-item-text">Inbox</span>
+        <md-badge class="md-primary md-square" md-content="6" />
+      </md-list-item>
+
+      <md-list-item>
+        <md-icon>send</md-icon>
+        <span class="md-list-item-text">Sent Mail</span>
+      </md-list-item>
+
+      <md-list-item>
+        <md-icon>delete</md-icon>
+        <span class="md-list-item-text">Trash</span>
+        <md-badge class="md-primary" md-content="6" />
+      </md-list-item>
+
+      <md-list-item>
+        <md-icon>error</md-icon>
+        <span class="md-list-item-text">Spam</span>
+        <md-badge class="md-square" md-content="New" />
+      </md-list-item>
+    </md-list>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Lists'
+  }
+</script>
+
+<style lang="scss" scoped>
+  .md-list {
+    width: 320px;
+    max-width: 100%;
+    display: inline-block;
+    vertical-align: top;
+    border: 1px solid rgba(#000, .12);
+  }
+</style>

docs/app/routes.js

@@ -1,4 +1,9 @@
 export const routes = [
+  {
+    path: '/components/badge',
+    name: 'components/badge',
+    page: 'Components/Badge/Badge.vue'
+  },
   {
     path: '/components/autocomplete',
     name: 'components/autocomplete',

docs/app/template/MainNavContent.vue

@@ -24,6 +24,7 @@
     <div class="main-nav-level">
       <router-link to="/components/app">{{ $t('pages.app.title') }}</router-link>
       <router-link to="/components/avatar">{{ $t('pages.avatar.title') }}</router-link>
+      <router-link to="/components/badge">{{ $t('pages.badge.title') }}</router-link>
       <router-link to="/components/bottom-bar">{{ $t('pages.bottomBar.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>

src/components/MdBadge/MdBadge.test.js

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

src/components/MdBadge/MdBadge.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="md-badge-content" v-if="hasDefaultSlot">
+    <slot />
+    <md-badge-standalone :class="badgeClasses">
+      <div>
+        {{ mdContent }}
+      </div>
+    </md-badge-standalone>
+  </div>
+  <md-badge-standalone :class="badgeClasses" v-else>
+    {{ mdContent }}
+  </md-badge-standalone>
+</template>
+
+<script>
+  import MdComponent from 'core/MdComponent'
+
+  import MdBadgeStandalone from './MdBadgeStandalone'
+
+  export default new MdComponent({
+    name: 'MdBadge',
+    components: {
+      MdBadgeStandalone
+    },
+    props: {
+      mdContent: [String, Number],
+      mdPosition: {
+        type: String,
+        default: 'top'
+      },
+      mdDense: Boolean
+    },
+    computed: {
+      hasDefaultSlot () {
+        return !!this.$slots.default
+      },
+      badgeClasses () {
+        return {
+          ['md-position-' + this.mdPosition]: true,
+          'md-dense': this.mdDense
+        }
+      }
+    }
+  })
+</script>
+
+<style lang="scss">
+  @import "~components/MdAnimation/variables";
+
+  .md-badge-content {
+    position: relative;
+    display: inline-block;
+    .md-position {
+      &-top {
+        top: -4px;
+      }
+      &-bottom {
+        bottom: -4px;
+      }
+    }
+  }
+</style>

src/components/MdBadge/MdBadgeStandalone.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="md-badge" :class="[$mdActiveTheme]">
+    <slot />
+  </div>
+</template>
+
+<script>
+  import MdComponent from 'core/MdComponent'
+
+  export default new MdComponent({
+    name: 'MdBadgeStandalone'
+  })
+</script>
+
+<style lang="scss">
+  @import "~components/MdAnimation/variables";
+
+  .md-badge {
+    position: absolute;
+    transition: .3s $md-transition-default-timing;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    right: -4px;
+    font-size: 10px;
+    font-style: normal;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    color: #fff;
+    pointer-events: none;
+    z-index: 11;
+    .md-list-item-content & {
+      position: relative;
+      top: 0;
+      bottom: 0;
+      right: 0;
+    }
+    &.md-dense {
+      width: 18px;
+      height: 18px;
+      font-size: 8px;
+    }
+    &.md-square {
+      width: auto;
+      border-radius: 3px;
+      height: 18px;
+      padding: 0 4px;
+    }
+  }
+</style>

src/components/MdBadge/index.js

@@ -0,0 +1,7 @@
+import material from 'vue-material/material'
+import MdBadge from './MdBadge'
+
+export default Vue => {
+  material(Vue)
+  Vue.component(MdBadge.name, MdBadge)
+}

src/components/MdBadge/theme.scss

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

src/components/index.js

@@ -1,4 +1,5 @@
 import MdApp from './MdApp'
+import MdBadge from './MdBadge'
 import MdAutocomplete from './MdAutocomplete'
 import MdAvatar from './MdAvatar'
 import MdBottomBar from './MdBottomBar'
@@ -37,6 +38,7 @@ import MdToolbar from './MdToolbar'
 import MdTooltip from './MdTooltip'
 
 export {
+  MdBadge,
   MdApp,
   MdAutocomplete,
   MdAvatar,