diff --git a/packages/vue-components/src/Dropdown.vue b/packages/vue-components/src/Dropdown.vue
index 05a9f2a9c..e0a73bea3 100644
--- a/packages/vue-components/src/Dropdown.vue
+++ b/packages/vue-components/src/Dropdown.vue
@@ -12,6 +12,7 @@
data-bs-toggle="dropdown"
>
<slot name="header"></slot>
+ <span>{{ tabGroupHeader }}</span>
</a>
</slot>
<slot name="dropdown-menu" :class="[{ 'show': show }, { 'dropdown-menu-end': menuAlignRight }]">
@@ -70,6 +71,10 @@ export default {
type: String,
default: 'light',
},
+ tabGroupHeader: {
+ type: String,
+ default: '',
+ },
menuAlignRight: {
type: Boolean,
default: false,
diff --git a/packages/vue-components/src/Tabset.vue b/packages/vue-components/src/Tabset.vue
index 339059173..f450ad941 100644
--- a/packages/vue-components/src/Tabset.vue
+++ b/packages/vue-components/src/Tabset.vue
@@ -24,7 +24,7 @@
v-else
:key="index"
class="nav-item"
- :header="t.headerRendered"
+ :tab-group-header="t.headerRendered"
:class="{active:t.active}"
:disabled="t.disabled"
>
diff --git a/packages/vue-components/src/__tests__/Dropdown.spec.js b/packages/vue-components/src/__tests__/Dropdown.spec.js
index e01789dcd..f942e3d3c 100644
--- a/packages/vue-components/src/__tests__/Dropdown.spec.js
+++ b/packages/vue-components/src/__tests__/Dropdown.spec.js
@@ -1,10 +1,8 @@
import { mount } from '@vue/test-utils';
import Dropdown from '../Dropdown.vue';
-import Submenu from '../Submenu.vue';
const DEFAULT_STUBS = {
'dropdown': Dropdown,
- 'submenu': Submenu,
};
const DROPDOWN = `
diff --git a/packages/vue-components/src/__tests__/Tabset.spec.js b/packages/vue-components/src/__tests__/Tabset.spec.js
new file mode 100644
index 000000000..aab2e5b46
--- /dev/null
+++ b/packages/vue-components/src/__tests__/Tabset.spec.js
@@ -0,0 +1,78 @@
+import { mount } from '@vue/test-utils';
+import Tab from '../Tab.vue';
+import TabGroup from '../TabGroup.vue';
+import Tabset from '../Tabset.vue';
+
+const DEFAULT_STUBS = {
+ 'tab': Tab,
+ 'tab-group': TabGroup,
+};
+
+const TABSET_HEADER = 'Tabset Header';
+
+const TAB_COMPONENT = `
+ <tab header="Tab 1">
+ Text in the first tab
+ </tab>
+ <tab header="Tab 2">
+ Text in the second tab
+ </tab>
+`;
+
+const TABGROUP_COMPONENT = `
+ <tab-group header="Third tab group :milky_way:">
+ <tab header="Stars :star:">
+ Some stuff about stars ...
+ </tab>
+ <tab header="Disabled Moon :new_moon:" disabled>
+ </tab>
+ </tab-group>
+ <tab-group header="Disabled fourth tab group" disabled>
+ <tab header="Hidden tab">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.
+ </tab>
+ </tab-group>
+`;
+
+const TAB_AND_TABGROUP_COMPONENT = `
+ ${TAB_COMPONENT}
+ ${TABGROUP_COMPONENT}
+`;
+
+describe('Tabset (Tabs) with Tab and Tab-Group Components', () => {
+ test('renders tabset with tabs', () => {
+ const wrapper = mount(Tabset, {
+ slots: {
+ header: TABSET_HEADER,
+ default: TAB_COMPONENT,
+ },
+ stubs: DEFAULT_STUBS,
+ });
+
+ expect(wrapper.element).toMatchSnapshot();
+ });
+
+ test('renders tabset with tab-group', () => {
+ const wrapper = mount(Tabset, {
+ slots: {
+ header: TABSET_HEADER,
+ default: TABGROUP_COMPONENT,
+ },
+ stubs: DEFAULT_STUBS,
+ });
+
+ expect(wrapper.element).toMatchSnapshot();
+ });
+
+ test('renders tabset with both tabs and tab-group', () => {
+ const wrapper = mount(Tabset, {
+ slots: {
+ header: TABSET_HEADER,
+ default: TAB_AND_TABGROUP_COMPONENT,
+ },
+ stubs: DEFAULT_STUBS,
+ });
+
+ expect(wrapper.element).toMatchSnapshot();
+ });
+});
diff --git a/packages/vue-components/src/__tests__/__snapshots__/Tabset.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Tabset.spec.js.snap
new file mode 100644
index 000000000..a3ba44a98
--- /dev/null
+++ b/packages/vue-components/src/__tests__/__snapshots__/Tabset.spec.js.snap
@@ -0,0 +1,244 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tabset (Tabs) with Tab and Tab-Group Components renders tabset with both tabs and tab-group 1`] = `
+<div
+ class="printable-tabs"
+>
+ <ul
+ class="nav nav-tabs d-print-none nav-tabs"
+ role="tablist"
+ />
+
+ <div
+ class="tab-content"
+ >
+ <div
+ class="tab-pane active printable-tab-pane tab-pane-hide"
+ role="tabpanel"
+ >
+ <div
+ class="nav-tabs printable-tab-header"
+ >
+ <div
+ class="nav-link active"
+ />
+ </div>
+
+ Text in the first tab
+
+ <hr />
+ </div>
+
+ <div
+ class="tab-pane active printable-tab-pane tab-pane-hide"
+ role="tabpanel"
+ >
+ <div
+ class="nav-tabs printable-tab-header"
+ >
+ <div
+ class="nav-link active"
+ />
+ </div>
+
+ Text in the second tab
+
+ <hr />
+ </div>
+
+ <div
+ class="printable-tab-group"
+ >
+ <div
+ class="printable-tab-group-header"
+ />
+
+ <div
+ class="tab-pane active printable-tab-pane tab-pane-hide"
+ role="tabpanel"
+ >
+ <div
+ class="nav-tabs printable-tab-header"
+ >
+ <div
+ class="nav-link active"
+ />
+ </div>
+
+ Some stuff about stars ...
+
+ <hr />
+ </div>
+
+ <div
+ class="tab-pane active printable-tab-pane tab-pane-hide"
+ role="tabpanel"
+ >
+ <div
+ class="nav-tabs printable-tab-header"
+ >
+ <div
+ class="nav-link active"
+ />
+ </div>
+
+ <hr />
+ </div>
+ </div>
+
+ <div
+ class="printable-tab-group"
+ >
+ <div
+ class="printable-tab-group-header"
+ />
+
+ <div
+ class="tab-pane active printable-tab-pane tab-pane-hide"
+ role="tabpanel"
+ >
+ <div
+ class="nav-tabs printable-tab-header"
+ >
+ <div
+ class="nav-link active"
+ />
+ </div>
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.
+
+ <hr />
+ </div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`Tabset (Tabs) with Tab and Tab-Group Components renders tabset with tab-group 1`] = `
+<div
+ class="printable-tabs"
+>
+ <ul
+ class="nav nav-tabs d-print-none nav-tabs"
+ role="tablist"
+ />
+
+ <div
+ class="tab-content"
+ >
+ <div
+ class="printable-tab-group"
+ >
+ <div
+ class="printable-tab-group-header"
+ />
+
+ <div
+ class="tab-pane active printable-tab-pane tab-pane-hide"
+ role="tabpanel"
+ >
+ <div
+ class="nav-tabs printable-tab-header"
+ >
+ <div
+ class="nav-link active"
+ />
+ </div>
+
+ Some stuff about stars ...
+
+ <hr />
+ </div>
+
+ <div
+ class="tab-pane active printable-tab-pane tab-pane-hide"
+ role="tabpanel"
+ >
+ <div
+ class="nav-tabs printable-tab-header"
+ >
+ <div
+ class="nav-link active"
+ />
+ </div>
+
+ <hr />
+ </div>
+ </div>
+
+ <div
+ class="printable-tab-group"
+ >
+ <div
+ class="printable-tab-group-header"
+ />
+
+ <div
+ class="tab-pane active printable-tab-pane tab-pane-hide"
+ role="tabpanel"
+ >
+ <div
+ class="nav-tabs printable-tab-header"
+ >
+ <div
+ class="nav-link active"
+ />
+ </div>
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.
+
+ <hr />
+ </div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`Tabset (Tabs) with Tab and Tab-Group Components renders tabset with tabs 1`] = `
+<div
+ class="printable-tabs"
+>
+ <ul
+ class="nav nav-tabs d-print-none nav-tabs"
+ role="tablist"
+ />
+
+ <div
+ class="tab-content"
+ >
+ <div
+ class="tab-pane active printable-tab-pane tab-pane-hide"
+ role="tabpanel"
+ >
+ <div
+ class="nav-tabs printable-tab-header"
+ >
+ <div
+ class="nav-link active"
+ />
+ </div>
+
+ Text in the first tab
+
+ <hr />
+ </div>
+
+ <div
+ class="tab-pane active printable-tab-pane tab-pane-hide"
+ role="tabpanel"
+ >
+ <div
+ class="nav-tabs printable-tab-header"
+ >
+ <div
+ class="nav-link active"
+ />
+ </div>
+
+ Text in the second tab
+
+ <hr />
+ </div>
+ </div>
+</div>
+`;