[Feature Request]: Added Breadcrumb component

docs/data/menu.json

@@ -17,6 +17,7 @@
         {
             "category": "UI components",
             "pages": [
+                "documentation/breadcrumb",
                 "documentation/button",
                 "documentation/carousel",
                 "documentation/collapse",

docs/data/routes.json

@@ -425,6 +425,18 @@
             "documentation/pagination"
         ]
     },
+    "documentation/breadcrumb": {
+        "title": "Breadcrumb",
+        "subtitle": "Breadcrumb component for flexible navigation through the pages of your website!",
+        "path": "/documentation/breadcrumb",
+        "githubPath": "pages/components/breadcrumb/Breadcrumb.vue",
+        "menu": "documentation",
+        "breadcrumb": [
+            "/",
+            "documentation",
+            "documentation/breadcrumb"
+        ]
+    },
     "documentation/button": {
         "title": "Button",
         "subtitle": "The classic button, in different colors, sizes, and states",

docs/pages/components/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,47 @@
+<template>
+    <section>
+    	<Example :component="ExAlignments" :code="ExAlignmentsCode" title="Alignments"/>
+
+    	<Example :component="ExSeparators" :code="ExSeparatorsCode" title="Separators"/>
+
+    	<Example :component="ExSizes" :code="ExSizesCode" title="Sizes"/>
+
+        <ApiView :data="api"/>
+        <VariablesView :data="variables"/>
+    </section>
+</template>
+
+<script>
+	import api from './api/breadcrumb'
+    import variables from './variables/breadcrumb'
+
+	import ExAlignments from './examples/ExAlignments'
+    import ExAlignmentsCode from '!!raw-loader!./examples/ExAlignments'
+
+    import ExSeparators from './examples/ExSeparators'
+    import ExSeparatorsCode from '!!raw-loader!./examples/ExSeparators'
+
+    import ExSizes from './examples/ExSizes'
+    import ExSizesCode from '!!raw-loader!./examples/ExSizes'
+
+    export default {
+
+        name: 'Breadcrumb',
+
+        data () {
+            return {
+            	api,
+            	variables,
+            	ExAlignments,
+            	ExAlignmentsCode,
+            	ExSeparators,
+            	ExSeparatorsCode,
+            	ExSizes,
+            	ExSizesCode,
+            }
+        }
+    }
+</script>
+
+<style lang="css" scoped>
+</style>

docs/pages/components/breadcrumb/api/breadcrumb.js

@@ -0,0 +1,47 @@
+export default [
+    {
+        title : 'Breadcrumb',
+        props: [
+            {
+                name: '<code>align</code>',
+                description: 'Breadcrumb alignment.',
+                type: 'String',
+                values: '<code>is-left</code>, <code>is-centered</code>, <code>is-right</code>',
+                default: '<code>is-right</code>'
+            },
+            {
+                name: '<code>separator</code>',
+                description: 'Symbole that separates the bradcrumb items.',
+                type: 'String',
+                values: '<code>has-arrow-separator</code>, <code>has-bullet-separator</code>, <code>has-dot-separator</code>, <code>has-succeeds-separator</code>',
+                default: '—'
+            },
+            {
+                name: '<code>size</code>',
+                description: 'The breadcrumb size',
+                type: 'String',
+                values: '<code>is-small</code>, <code>is-medium</code>, <code>is-large</code>',
+                default: '<code>is-medium</code>'
+            }
+        ]
+    },
+    {
+        title : 'Breadcrumb Item',
+        props: [
+            {
+                name: '<code>tag</code>',
+                description: "a, router-link and it's html attributes like href, to, etc...",
+                type: 'String',
+                values: '<code>router-link</code>, <code>a</code>',
+                default: '<code>a</code>'
+            },
+             {
+                name: '<code>active</code>',
+                description: 'is the current breadcrumb is actually the current page.',
+                type: 'Boolean',
+                values: '<code>false</code>, <code>true</code>',
+                default: '<code>false</code>'
+            }
+        ]
+    }
+]

docs/pages/components/breadcrumb/examples/ExAlignments.vue

@@ -0,0 +1,36 @@
+<template>
+	<section>
+        <!-- Left -->
+        <b-breadcrumb
+            align="is-left"
+        >
+            <b-breadcrumb-item tag='router-link' to="/">Home</b-breadcrumb-item>
+            <b-breadcrumb-item tag='router-link' to="/documentation">Docs</b-breadcrumb-item>
+            <b-breadcrumb-item tag='router-link' to="/documentation/breadcrumb" active>Breadcrumb</b-breadcrumb-item>
+        </b-breadcrumb>
+        <!-- Center -->
+        <b-breadcrumb
+            align="is-centered"
+        >
+            <b-breadcrumb-item href="/">Home</b-breadcrumb-item>
+            <b-breadcrumb-item href="/documentation">Docs</b-breadcrumb-item>
+            <b-breadcrumb-item href="/documentation/breadcrumb" active>Breadcrumb</b-breadcrumb-item>
+        </b-breadcrumb>
+        <!-- Right -->
+        <b-breadcrumb
+            align="is-right"
+        >
+            <b-breadcrumb-item href="/">Home</b-breadcrumb-item>
+            <b-breadcrumb-item href="/documentation">Docs</b-breadcrumb-item>
+            <b-breadcrumb-item href="/documentation/breadcrumb" active>Breadcrumb</b-breadcrumb-item>
+        </b-breadcrumb>
+    </section>
+</template>
+
+<script>
+export default {
+
+  name: 'ExAlignments',
+
+}
+</script>

docs/pages/components/breadcrumb/examples/ExSeparators.vue

@@ -0,0 +1,50 @@
+<template>
+	<section>
+		<!-- Default -->
+        <b-breadcrumb>
+            <b-breadcrumb-item tag='router-link' to="/">Home</b-breadcrumb-item>
+            <b-breadcrumb-item tag='router-link' to="/documentation">Docs</b-breadcrumb-item>
+            <b-breadcrumb-item tag='router-link' to="/documentation/breadcrumb" active>Breadcrumb</b-breadcrumb-item>
+        </b-breadcrumb>
+        <!-- Arrow -->
+        <b-breadcrumb
+            separator="has-arrow-separator"
+        >
+            <b-breadcrumb-item href="/">Home</b-breadcrumb-item>
+            <b-breadcrumb-item href="/documentation">Docs</b-breadcrumb-item>
+            <b-breadcrumb-item href="/documentation/breadcrumb" active>Breadcrumb</b-breadcrumb-item>
+        </b-breadcrumb>
+        <!-- Bullet -->
+        <b-breadcrumb
+            separator="has-bullet-separator"
+        >
+            <b-breadcrumb-item href="/">Home</b-breadcrumb-item>
+            <b-breadcrumb-item href="/documentation">Docs</b-breadcrumb-item>
+            <b-breadcrumb-item href="/documentation/breadcrumb" active>Breadcrumb</b-breadcrumb-item>
+        </b-breadcrumb>
+        <!-- Dot -->
+        <b-breadcrumb
+            separator="has-dot-separator"
+        >
+            <b-breadcrumb-item href="/">Home</b-breadcrumb-item>
+            <b-breadcrumb-item href="/documentation">Docs</b-breadcrumb-item>
+            <b-breadcrumb-item href="/documentation/breadcrumb" active>Breadcrumb</b-breadcrumb-item>
+        </b-breadcrumb>
+        <!-- Succeeds -->
+        <b-breadcrumb
+            separator="has-succeeds-separator"
+        >
+            <b-breadcrumb-item href="/">Home</b-breadcrumb-item>
+            <b-breadcrumb-item href="/documentation">Docs</b-breadcrumb-item>
+            <b-breadcrumb-item href="/documentation/breadcrumb" active>Breadcrumb</b-breadcrumb-item>
+        </b-breadcrumb>
+    </section>
+</template>
+
+<script>
+export default {
+
+  name: 'ExSeparators',
+
+}
+</script>

docs/pages/components/breadcrumb/examples/ExSizes.vue

@@ -0,0 +1,36 @@
+<template>
+	<section>
+        <!-- Left -->
+        <b-breadcrumb
+            size="is-small"
+        >
+            <b-breadcrumb-item tag='router-link' to="/">Home</b-breadcrumb-item>
+            <b-breadcrumb-item tag='router-link' to="/documentation">Docs</b-breadcrumb-item>
+            <b-breadcrumb-item tag='router-link' to="/documentation/breadcrumb" active>Breadcrumb</b-breadcrumb-item>
+        </b-breadcrumb>
+        <!-- Center -->
+        <b-breadcrumb
+            size="is-medium"
+        >
+            <b-breadcrumb-item href="/">Home</b-breadcrumb-item>
+            <b-breadcrumb-item href="/documentation">Docs</b-breadcrumb-item>
+            <b-breadcrumb-item href="/documentation/breadcrumb" active>Breadcrumb</b-breadcrumb-item>
+        </b-breadcrumb>
+        <!-- Right -->
+        <b-breadcrumb
+            size="is-large"
+        >
+            <b-breadcrumb-item href="/">Home</b-breadcrumb-item>
+            <b-breadcrumb-item href="/documentation">Docs</b-breadcrumb-item>
+            <b-breadcrumb-item href="/documentation/breadcrumb" active>Breadcrumb</b-breadcrumb-item>
+        </b-breadcrumb>
+    </section>
+</template>
+
+<script>
+export default {
+
+  name: 'ExSizes',
+
+}
+</script>

docs/pages/components/breadcrumb/variables/breadcrumb.js

@@ -0,0 +1,6 @@
+export default [
+    {
+        name: 'Bulma variables',
+        default: '<a target="_blank" href="https://bulma.io/documentation/components/breadcrumb/#variables">Link</a>'
+    }
+]

docs/router/index.js

@@ -63,6 +63,7 @@ const router = new Router({
                 route('documentation/upload', 'components/upload/Upload'),
                 route('documentation/table', 'components/table/Table'),
                 route('documentation/pagination', 'components/pagination/Pagination'),
+                route('documentation/breadcrumb', 'components/breadcrumb/Breadcrumb'),
                 route('documentation/button', 'components/button/Button'),
                 route('documentation/numberinput', 'components/numberinput/Numberinput'),
                 route('documentation/steps', 'components/steps/Steps'),

src/components/breadcrumb/Breadcrumb.spec.js

@@ -0,0 +1,63 @@
+import { shallowMount, mount } from '@vue/test-utils'
+import BBreadcrumb from '@components/breadcrumb/Breadcrumb'
+
+describe('BBreadcrumb', () => {
+    let wrapper
+
+    beforeEach(() => {
+        wrapper = shallowMount(BBreadcrumb)
+    })
+
+    it('is called', () => {
+        expect(wrapper.name()).toBe('BBreadcrumb')
+        expect(wrapper.isVueInstance()).toBeTruthy()
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should set align to right', () => {
+        wrapper = mount(BBreadcrumb, {
+            propsData: {
+                align: 'is-right'
+            }
+        })
+
+        expect(wrapper.classes()).toContain('is-right')
+    })
+
+    it('should set separator to arrow', () => {
+        wrapper = mount(BBreadcrumb, {
+            propsData: {
+                separator: 'has-arrow-separator'
+            }
+        })
+
+        expect(wrapper.classes()).toContain('has-arrow-separator')
+    })
+
+    it('should set size to large', () => {
+        wrapper = mount(BBreadcrumb, {
+            propsData: {
+                size: 'is-large'
+            }
+        })
+
+        expect(wrapper.classes()).toContain('is-large')
+    })
+
+    it('computes breadcrumbClasses correctly', () => {
+        wrapper = mount(BBreadcrumb, {
+            propsData: {
+                align: 'is-left',
+                separator: 'has-dot-separator',
+                size: 'is-medium'
+            }
+        })
+
+        expect(wrapper.classes()).toContain('is-left')
+        expect(wrapper.classes()).toContain('has-dot-separator')
+        expect(wrapper.classes()).toContain('is-medium')
+    })
+})

src/components/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,43 @@
+<template>
+    <nav :class="breadcrumbClasses">
+        <ul>
+            <slot />
+        </ul>
+    </nav>
+</template>
+
+<script>
+import config from '../../utils/config'
+
+export default {
+
+    name: 'BBreadcrumb',
+
+    props: {
+        align: {
+            type: String,
+            default: () => {
+                return config.defaultBreadcrumbAlign
+            }
+        },
+        separator: {
+            type: String,
+            default: () => {
+                return config.defaultBreadcrumbSeparator
+            }
+        },
+        size: {
+            type: String,
+            default: () => {
+                return config.defaultBreadcrumbSize
+            }
+        }
+    },
+
+    computed: {
+        breadcrumbClasses() {
+            return ['breadcrumb', this.align, this.separator, this.size]
+        }
+    }
+}
+</script>

src/components/breadcrumb/BreadcrumbItem.spec.js

@@ -0,0 +1,26 @@
+import { mount } from '@vue/test-utils'
+import BBreadcrumbItem from '@components/breadcrumb/BreadcrumbItem.vue'
+
+describe('BBreadcrumbItem', () => {
+    let wrapper
+    beforeEach(() => {
+        wrapper = mount(BBreadcrumbItem, {
+            propsData: {
+                tag: 'router-link',
+                to: '/'
+            }
+        })
+    })
+
+    it('is called', () => {
+        expect(wrapper.isVueInstance()).toBeTruthy()
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should have a li tag', () => {
+        expect(wrapper.contains('li')).toBeTruthy()
+    })
+})