From 7977104ce898274088c3b0dcdc246aa65a13c1e5 Mon Sep 17 00:00:00 2001
From: "Dongdong Wang (dongdwan)" <dongdwan@cisco.com>
Date: Thu, 29 Aug 2019 14:52:47 +0800
Subject: [PATCH] feat(Breadcrumbs): add breadcrumbs

---
 vue/src/examples.js                           |  2 +
 vue/src/index.js                              |  3 ++
 vue/src/lib/breadcrumbs/examples/default.vue  | 40 +++++++++++++++++++
 vue/src/lib/breadcrumbs/examples/index.js     |  8 ++++
 vue/src/lib/breadcrumbs/index.vue             | 24 +++++++++++
 .../__snapshots__/breadcrumbs.spec.js.snap    |  3 ++
 .../lib/breadcrumbs/tests/breadcrumbs.spec.js | 10 +++++
 7 files changed, 90 insertions(+)
 create mode 100644 vue/src/lib/breadcrumbs/examples/default.vue
 create mode 100644 vue/src/lib/breadcrumbs/examples/index.js
 create mode 100644 vue/src/lib/breadcrumbs/index.vue
 create mode 100644 vue/src/lib/breadcrumbs/tests/__snapshots__/breadcrumbs.spec.js.snap
 create mode 100644 vue/src/lib/breadcrumbs/tests/breadcrumbs.spec.js

diff --git a/vue/src/examples.js b/vue/src/examples.js
index 5e5268c518..a89ad90e98 100644
--- a/vue/src/examples.js
+++ b/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,
diff --git a/vue/src/index.js b/vue/src/index.js
index a1059a325c..4fc03a1798 100644
--- a/vue/src/index.js
+++ b/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,
diff --git a/vue/src/lib/breadcrumbs/examples/default.vue b/vue/src/lib/breadcrumbs/examples/default.vue
new file mode 100644
index 0000000000..91e68e90a5
--- /dev/null
+++ b/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>
+
diff --git a/vue/src/lib/breadcrumbs/examples/index.js b/vue/src/lib/breadcrumbs/examples/index.js
new file mode 100644
index 0000000000..54cd633114
--- /dev/null
+++ b/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
+};
+
diff --git a/vue/src/lib/breadcrumbs/index.vue b/vue/src/lib/breadcrumbs/index.vue
new file mode 100644
index 0000000000..9021b34641
--- /dev/null
+++ b/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>
diff --git a/vue/src/lib/breadcrumbs/tests/__snapshots__/breadcrumbs.spec.js.snap b/vue/src/lib/breadcrumbs/tests/__snapshots__/breadcrumbs.spec.js.snap
new file mode 100644
index 0000000000..be558c59e1
--- /dev/null
+++ b/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>`;
diff --git a/vue/src/lib/breadcrumbs/tests/breadcrumbs.spec.js b/vue/src/lib/breadcrumbs/tests/breadcrumbs.spec.js
new file mode 100644
index 0000000000..4e410ffc08
--- /dev/null
+++ b/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();
+  });
+});
+