Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feature Request]: Added Breadcrumb component #3464

Merged
merged 23 commits into from
Sep 18, 2021
Merged

[Feature Request]: Added Breadcrumb component #3464

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
4989527
Moving to new branch
mouadTaoussi Aug 15, 2021
fd9300d
Moving to new branch
mouadTaoussi Aug 15, 2021
121fc1f
added breadcrumb feature: next writing tests and docs
mouadTaoussi Aug 15, 2021
e7dee04
Merge branch 'dev' of https://github.com/mouadTaoussi/buefy into brea…
mouadTaoussi Aug 16, 2021
20044d8
added breadcrumb feature: next writing tests and docs
mouadTaoussi Aug 16, 2021
f290705
added breadcrumb feature: writing tests
mouadTaoussi Aug 17, 2021
bbc359c
added breadcrumb feature: wrote tests
mouadTaoussi Aug 17, 2021
4d31dd7
added breadcrumb feature: wrote tests
mouadTaoussi Aug 17, 2021
390f009
added breadcrumb feature: wrote tests
mouadTaoussi Aug 17, 2021
3d7d03d
Removed empty scss file
mouadTaoussi Aug 24, 2021
ac6c0ea
removed data elements
mouadTaoussi Aug 24, 2021
85f7010
removed data elements: fix failed test
mouadTaoussi Aug 24, 2021
d6d556c
removed router-link
mouadTaoussi Aug 24, 2021
58fb23e
used dynamic component instead of <a> tag
mouadTaoussi Aug 27, 2021
a6d24a1
Merge branch 'buefy:dev' into breadcrumbFeature
mouadTaoussi Sep 11, 2021
42d0963
Merge branch 'buefy:dev' into breadcrumbFeature
mouadTaoussi Sep 15, 2021
0d9e5d1
added breadcrumb-item
mouadTaoussi Sep 16, 2021
29a60a5
added breadcrumb-item
mouadTaoussi Sep 16, 2021
a095b6d
Merge branch 'buefy:dev' into breadcrumbFeature
mouadTaoussi Sep 17, 2021
ccb5ee1
Removed useless tag attribute, used attributes inheritance
mouadTaoussi Sep 17, 2021
1717576
Removed useless tag attribute, used attributes inheritance
mouadTaoussi Sep 17, 2021
a35d87c
Merge branch 'breadcrumbFeature' of https://github.com/mouadTaoussi/b…
mouadTaoussi Sep 17, 2021
a67bf16
Removed useless snippet
mouadTaoussi Sep 17, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 34 additions & 14 deletions docs/pages/components/breadcrumb/api/breadcrumb.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,7 @@
export default [
{
title : 'Breadcrumb',
props: [
{
name: '<code>tag</code>',
description: 'Sets the type of the component that have to render breadcrumb item.',
type: 'String',
values: '<code>router-link</code>, <code>a</code>',
default: '<code>a</code>'
},
{
name: '<code>items</code>',
description: 'Navigation items with <strong>label</strong> and <strong>path</strong> provided.',
type: 'Array',
values: '—',
default: '—'
},
{
name: '<code>align</code>',
description: 'Breadcrumb alignment.',
Expand All @@ -37,5 +24,38 @@ export default [
default: '<code>is-medium</code>'
}
]
},
{
title : 'Breadcrumb Item',
props: [
{
name: '<code>tag</code>',
description: 'Sets the tag of the component that have to render breadcrumb item.',
type: 'String',
values: '<code>router-link</code>, <code>a</code>',
default: '<code>a</code>'
},
{
name: '<code>href</code>',
description: 'path used if set <code><tag/></code> to <code><a/></code>.',
type: 'String',
values: '—',
default: '—'
},
{
name: '<code>to</code>',
description: 'path used if set <code><tag/></code> to <code><router-link/></code>.',
type: 'String',
values: '—',
default: '—'
},
{
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>'
}
]
}
]
42 changes: 15 additions & 27 deletions docs/pages/components/breadcrumb/examples/ExAlignments.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,29 @@
<b-breadcrumb
tag="router-link"
align="is-left"
:items="items"
/>
>
<b-breadcrumb-item tag='a' href="/">Home</b-breadcrumb-item>
<b-breadcrumb-item tag='a' href="/documentation">Docs</b-breadcrumb-item>
<b-breadcrumb-item tag='a' active href="/documentation/breadcrumb">Breadcrumb</b-breadcrumb-item>
</b-breadcrumb>
<!-- Center -->
<b-breadcrumb
tag="router-link"
align="is-centered"
:items="items"
/>
>
<b-breadcrumb-item tag='a' href="/">Home</b-breadcrumb-item>
<b-breadcrumb-item tag='a' href="/documentation">Docs</b-breadcrumb-item>
<b-breadcrumb-item tag='a' active href="/documentation/breadcrumb">Breadcrumb</b-breadcrumb-item>
</b-breadcrumb>
<!-- Right -->
<b-breadcrumb
tag="router-link"
align="is-right"
:items="items"
/>
>
<b-breadcrumb-item tag='a' href="/">Home</b-breadcrumb-item>
<b-breadcrumb-item tag='a' href="/documentation">Docs</b-breadcrumb-item>
<b-breadcrumb-item tag='a' active href="/documentation/breadcrumb">Breadcrumb</b-breadcrumb-item>
</b-breadcrumb>
</section>
</template>

Expand All @@ -26,26 +35,5 @@ export default {

name: 'ExAlignments',

data () {
return {
items: [
{
label: 'Home',
path: '/',
},
{
label: 'Docs',
path: '/documentation',
},
{
label: 'Breadcrumb',
path: '/documentation/breadcrumb',
}
]
}
}
}
</script>

<style lang="css" scoped>
</style>
53 changes: 25 additions & 28 deletions docs/pages/components/breadcrumb/examples/ExSeparators.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,32 +4,47 @@
<b-breadcrumb
tag="router-link"
jtommy marked this conversation as resolved.
Show resolved Hide resolved
separator=""
:items="items"
/>
>
<b-breadcrumb-item tag='a' href="/">Home</b-breadcrumb-item>
<b-breadcrumb-item tag='a' href="/documentation">Docs</b-breadcrumb-item>
<b-breadcrumb-item tag='a' active href="/documentation/breadcrumb">Breadcrumb</b-breadcrumb-item>
</b-breadcrumb>
<!-- Arrow -->
<b-breadcrumb
tag="router-link"
separator="has-arrow-separator"
:items="items"
/>
>
<b-breadcrumb-item tag='a' href="/">Home</b-breadcrumb-item>
<b-breadcrumb-item tag='a' href="/documentation">Docs</b-breadcrumb-item>
<b-breadcrumb-item tag='a' active href="/documentation/breadcrumb">Breadcrumb</b-breadcrumb-item>
</b-breadcrumb>
<!-- Bullet -->
<b-breadcrumb
tag="router-link"
separator="has-bullet-separator"
:items="items"
/>
>
<b-breadcrumb-item tag='a' href="/">Home</b-breadcrumb-item>
<b-breadcrumb-item tag='a' href="/documentation">Docs</b-breadcrumb-item>
<b-breadcrumb-item tag='a' active href="/documentation/breadcrumb">Breadcrumb</b-breadcrumb-item>
</b-breadcrumb>
<!-- Dot -->
<b-breadcrumb
tag="router-link"
separator="has-dot-separator"
:items="items"
/>
>
<b-breadcrumb-item tag='a' href="/">Home</b-breadcrumb-item>
<b-breadcrumb-item tag='a' href="/documentation">Docs</b-breadcrumb-item>
<b-breadcrumb-item tag='a' active href="/documentation/breadcrumb">Breadcrumb</b-breadcrumb-item>
</b-breadcrumb>
<!-- Succeeds -->
<b-breadcrumb
tag="router-link"
separator="has-succeeds-separator"
:items="items"
/>
>
<b-breadcrumb-item tag='a' href="/">Home</b-breadcrumb-item>
<b-breadcrumb-item tag='a' href="/documentation">Docs</b-breadcrumb-item>
<b-breadcrumb-item tag='a' active href="/documentation/breadcrumb">Breadcrumb</b-breadcrumb-item>
</b-breadcrumb>
</section>
</template>

Expand All @@ -38,23 +53,5 @@ export default {

name: 'ExSeparators',

data () {
return {
items: [
{
label: 'Home',
path: '/',
},
{
label: 'Docs',
path: '/documentation',
},
{
label: 'Breadcrumb',
path: '/documentation/breadcrumb',
}
]
}
}
}
</script>
39 changes: 15 additions & 24 deletions docs/pages/components/breadcrumb/examples/ExSizes.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,29 @@
<b-breadcrumb
tag="router-link"
size="is-small"
:items="items"
/>
>
<b-breadcrumb-item tag='a' href="/">Home</b-breadcrumb-item>
<b-breadcrumb-item tag='a' href="/documentation">Docs</b-breadcrumb-item>
<b-breadcrumb-item tag='a' active href="/documentation/breadcrumb">Breadcrumb</b-breadcrumb-item>
</b-breadcrumb>
<!-- Center -->
<b-breadcrumb
tag="router-link"
size="is-medium"
:items="items"
/>
>
<b-breadcrumb-item tag='a' href="/">Home</b-breadcrumb-item>
<b-breadcrumb-item tag='a' href="/documentation">Docs</b-breadcrumb-item>
<b-breadcrumb-item tag='a' active href="/documentation/breadcrumb">Breadcrumb</b-breadcrumb-item>
</b-breadcrumb>
<!-- Right -->
<b-breadcrumb
tag="router-link"
size="is-large"
:items="items"
/>
>
<b-breadcrumb-item tag='a' href="/">Home</b-breadcrumb-item>
<b-breadcrumb-item tag='a' href="/documentation">Docs</b-breadcrumb-item>
<b-breadcrumb-item tag='a' active href="/documentation/breadcrumb">Breadcrumb</b-breadcrumb-item>
</b-breadcrumb>
</section>
</template>

Expand All @@ -26,23 +35,5 @@ export default {

name: 'ExSizes',

data () {
return {
items: [
{
label: 'Home',
path: '/',
},
{
label: 'Docs',
path: '/documentation',
},
{
label: 'Breadcrumb',
path: '/documentation/breadcrumb',
}
]
}
}
}
</script>
42 changes: 0 additions & 42 deletions src/components/breadcrumb/Breadcrumb.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,6 @@ import BBreadcrumb from '@components/breadcrumb/Breadcrumb'

describe('BBreadcrumb', () => {
let wrapper = shallowMount(BBreadcrumb)
let tag = 'router-link'
const items = [
{
label: 'Home',
path: '/'
},
{
label: 'Docs',
path: '/documentation'
},
{
label: 'Breadcrumb',
path: '/documentation/breadcrumb'
}
]

it('is called', () => {
expect(wrapper.name()).toBe('BBreadcrumb')
Expand All @@ -28,33 +13,9 @@ describe('BBreadcrumb', () => {
expect(wrapper.html()).toMatchSnapshot()
})

it('should be router-link tag, then it should be a tag', () => {
wrapper = mount(BBreadcrumb, {
propsData: {
tag,
items
}
})

expect(wrapper.contains(tag)).toBeTruthy()

// a tag
tag = 'a'

wrapper = mount(BBreadcrumb, {
propsData: {
tag,
items
}
})

expect(wrapper.contains(tag)).toBeTruthy()
})

it('should set align to right', () => {
wrapper = mount(BBreadcrumb, {
propsData: {
items,
align: 'is-right'
}
})
Expand All @@ -65,7 +26,6 @@ describe('BBreadcrumb', () => {
it('should set separator to arrow', () => {
wrapper = mount(BBreadcrumb, {
propsData: {
items,
separator: 'has-arrow-separator'
}
})
Expand All @@ -76,7 +36,6 @@ describe('BBreadcrumb', () => {
it('should set size to large', () => {
wrapper = mount(BBreadcrumb, {
propsData: {
items,
size: 'is-large'
}
})
Expand All @@ -87,7 +46,6 @@ describe('BBreadcrumb', () => {
it('computes breadcrumbClasses correctly', () => {
wrapper = mount(BBreadcrumb, {
propsData: {
items,
align: 'is-left',
separator: 'has-dot-separator',
size: 'is-medium'
Expand Down
22 changes: 1 addition & 21 deletions src/components/breadcrumb/Breadcrumb.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,7 @@
<template>
<nav :class="breadcrumbClasses">
<ul>
<template v-for="(item, index) in items">
<li
v-if="item"
:key="item"
:class="{ 'is-active': index === items.length - 1 }">
<component
:is="tag"
:href="tag == 'a' ? item.path : undefined"
:to="tag == 'router-link' ? item.path : undefined"
>
{{ item.label }}
</component>
</li>
</template>
<slot />
</ul>
</nav>
</template>
Expand All @@ -27,13 +14,6 @@ export default {
name: 'BBreadcrumb',

props: {
tag: {
type: String,
default: () => {
return config.defaultBreadcrumbTag
}
},
items: Array,
align: {
type: String,
default: () => {
Expand Down
Loading