feat(Breadcrumbs): add breadcrumbs

vue/src/examples.js

@@ -3,6 +3,7 @@ import AlertBanner from './lib/alert-banner/examples/index.js';
 import Badge from './lib/badge/examples/index.js';
 import Button from './lib/button/examples/index.js';
 import ButtonGroup from './lib/button-group/examples/index.js';
+import Breadcrumbs from './lib/breadcrumbs/examples/index.js';
 import Checkbox from './lib/checkbox/examples/index.js';
 import Icon from './lib/icon/examples/index.js';
 import Label from './lib/label/examples/index.js';
@@ -20,6 +21,7 @@ const examples = [
   Badge,
   Button,
   ButtonGroup,
+  Breadcrumbs,
   Checkbox,
   Icon,
   Label,

vue/src/index.js

@@ -5,6 +5,7 @@ import AriaModal from './lib/aria-modal/index.vue';
 import Badge from './lib/badge/index.vue';
 import Button from './lib/button/index.vue';
 import ButtonGroup from './lib/button-group/index.vue';
+import Breadcrumbs from './lib/breadcrumbs/index.vue';
 import Checkbox from './lib/checkbox/index.vue';
 import CheckboxGroup from './lib/checkbox-group/index.vue';
 import CloseIcon from './lib/close-icon/index.vue';
@@ -34,6 +35,7 @@ const components = [
   Badge,
   Button,
   ButtonGroup,
+  Breadcrumbs,
   Checkbox,
   CheckboxGroup,
   CloseIcon,
@@ -75,6 +77,7 @@ export default {
   Badge,
   Button,
   ButtonGroup,
+  Breadcrumbs,
   Checkbox,
   CheckboxGroup,
   CloseIcon,

vue/src/lib/breadcrumbs/examples/default.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <md-breadcrumbs></md-breadcrumbs>
+    <md-breadcrumbs>
+      <li href='javascript:void(0)'>
+        Default
+      </li>
+    </md-breadcrumbs>
+
+
+    <md-breadcrumbs>
+      <li href='javascript:void(0)'>
+        Default
+      </li>
+      <li href='javascript:void(0)'>
+        Default2
+      </li>
+    </md-breadcrumbs>
+
+
+    <md-breadcrumbs>
+      <li href='javascript:void(0)'>
+        Default
+      </li>
+      <li href='javascript:void(0)'>
+        Default2
+      </li>
+      <li href='javascript:void(0)'>
+        Default3
+      </li>
+    </md-breadcrumbs>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'ExampleBreadcrumbsDefault',
+  };
+</script>
+

vue/src/lib/breadcrumbs/examples/index.js

@@ -0,0 +1,8 @@
+import Breadcrumbs from '../index.vue';
+import ExampleBreadcrumbsDefault from './default.vue';
+
+export default {
+  Breadcrumbs,
+  ExampleBreadcrumbsDefault
+};
+

vue/src/lib/breadcrumbs/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <ul
+    class="md-breadcrumbs"
+    :class="{className}">
+    <slot></slot>
+  </ul>
+</template>
+
+<script>
+  export default {
+    name: 'md-breadcrumbs',
+    props: {
+      className: ""
+    },
+    created() {
+      if (this.$slots && this.$slots.default) {
+        let lastTag = this.$slots.default[this.$slots.default.length - 1];
+        if(lastTag.tag === "li") {
+          lastTag.data.class = "current";
+        }
+      }
+    }
+  };
+</script>

vue/src/lib/breadcrumbs/tests/__snapshots__/breadcrumbs.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Breadcrumbs should match snapshot 1`] = `<ul class="md-breadcrumbs"></ul>`;

vue/src/lib/breadcrumbs/tests/breadcrumbs.spec.js

@@ -0,0 +1,10 @@
+import { mount } from '@vue/test-utils';
+import Breadcrumbs from '../index.vue';
+
+describe('Breadcrumbs', () => {
+  it('should match snapshot', () => {
+    const wrapper = mount(Breadcrumbs);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
+