@gitlab/ui 33.1.0 → 35.0.0

package/src/components/base/dropdown/dropdown.stories.js

@@ -9,6 +9,8 @@ import {
   GlDropdownItem,
   GlDropdownText,
   GlDropdownForm,
+  GlButton,
+  GlSearchBoxByType,
 } from '../../../../index';
 import {
   buttonCategoryOptions,
@@ -213,7 +215,7 @@ documentedStoriesOf('base/dropdown', readme)
   }))
   .add('with form', () => ({
     props: generateProps({ text: 'Some dropdown' }),
-    components,
+    components: { ...components, GlButton },
     template: wrap`
       <gl-dropdown-form class="gl-px-4">
         <gl-button>One</gl-button>
@@ -242,7 +244,7 @@ documentedStoriesOf('base/dropdown', readme)
   }))
   .add('with header and footer', () => ({
     props: generateProps({ text: 'Some dropdown', headerText: 'Header', hideHeaderBorder: true }),
-    components,
+    components: { ...components, GlSearchBoxByType },
     template: wrap`
       <template #header>
         <gl-search-box-by-type />

package/src/components/base/filtered_search/filtered_search.stories.js

@@ -1,6 +1,13 @@
 import { withKnobs } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlFilteredSearch, GlFilteredSearchToken } from '../../../../index';
+import {
+  GlFilteredSearch,
+  GlFilteredSearchToken,
+  GlFilteredSearchSuggestion,
+  GlLoadingIcon,
+  GlToken,
+  GlAvatar,
+} from '../../../../index';
 import { setStoryTimeout } from '../../../utils/test_utils';
 import readme from './filtered_search.md';
 
@@ -29,6 +36,7 @@ const fakeLabels = [
 ];
 
 const UserToken = {
+  components: { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon, GlAvatar },
   props: ['value', 'active'],
   inheritAttrs: false,
   data() {
@@ -104,6 +112,7 @@ const UserToken = {
 };
 
 const MilestoneToken = {
+  components: { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon },
   props: ['value', 'active'],
   inheritAttrs: false,
   data() {
@@ -163,6 +172,7 @@ const MilestoneToken = {
 };
 
 const LabelToken = {
+  components: { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon, GlToken },
   props: ['value', 'active'],
   inheritAttrs: false,
   data() {

package/src/components/base/filtered_search/filtered_search_suggestion.stories.js

@@ -1,4 +1,5 @@
 import { withKnobs } from '@storybook/addon-knobs';
+import { GlFilteredSearchSuggestion } from '../../../../index';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import readme from './filtered_search_suggestion.md';
 
@@ -7,6 +8,7 @@ const noop = () => {};
 documentedStoriesOf('base/filtered-search/suggestion', readme)
   .addDecorator(withKnobs)
   .add('default', () => ({
+    components: { GlFilteredSearchSuggestion },
     provide: {
       filteredSearchSuggestionListInstance: {
         register: noop,

package/src/components/base/filtered_search/filtered_search_suggestion_list.stories.js

@@ -1,4 +1,5 @@
 import { withKnobs } from '@storybook/addon-knobs';
+import { GlFilteredSearchSuggestionList, GlFilteredSearchSuggestion } from '../../../../index';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { provide } from './common_story_options';
 import readme from './filtered_search_suggestion_list.md';
@@ -6,6 +7,7 @@ import readme from './filtered_search_suggestion_list.md';
 documentedStoriesOf('base/filtered-search/suggestion-list', readme)
   .addDecorator(withKnobs)
   .add('default', () => ({
+    components: { GlFilteredSearchSuggestionList, GlFilteredSearchSuggestion },
     data() {
       return {
         iteration: 1,

package/src/components/base/filtered_search/filtered_search_token.stories.js

@@ -2,6 +2,7 @@ import { withKnobs, boolean } from '@storybook/addon-knobs';
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
+import { GlIcon } from '../../../../index';
 import { provide } from './common_story_options';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import readme from './filtered_search_token.md';
@@ -15,6 +16,7 @@ documentedStoriesOf('base/filtered-search/token', readme)
     components: {
       GlFilteredSearchToken,
       GlFilteredSearchSuggestion,
+      GlIcon,
     },
     provide,
     props: {

package/src/components/base/filtered_search/filtered_search_token_segment.stories.js

@@ -1,6 +1,7 @@
 import { withKnobs, boolean } from '@storybook/addon-knobs';
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
+import { GlFilteredSearchSuggestion } from '../../../../index';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { provide } from './common_story_options';
 import readme from './filtered_search_term.md';
@@ -18,6 +19,7 @@ documentedStoriesOf('base/filtered-search/token-segment', readme)
   .add('default', () => ({
     components: {
       GlFilteredSearchTokenSegment,
+      GlFilteredSearchSuggestion,
     },
     provide,
     props: {

package/src/components/base/form/form_group/form_group.stories.js

@@ -1,6 +1,6 @@
 import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
-import { GlFormGroup } from '../../../../../index';
+import { GlFormGroup, GlFormInput, GlFormTextarea } from '../../../../../index';
 import { sizeOptions } from '../../../../utils/constants';
 import readme from './form_group.md';
 
@@ -57,7 +57,7 @@ documentedStoriesOf('base/form/form-group', readme)
   .addDecorator(withKnobs)
   .add('default', () => ({
     props: generateProps(),
-    components,
+    components: { ...components, GlFormInput },
     template: `
       <gl-form-group
         :id="id"
@@ -75,7 +75,7 @@ documentedStoriesOf('base/form/form-group', readme)
   }))
   .add('disabled', () => ({
     props: generateProps(),
-    components,
+    components: { ...components, GlFormInput },
     template: `
       <gl-form-group
         id="group-id"
@@ -91,6 +91,7 @@ documentedStoriesOf('base/form/form-group', readme)
     `,
   }))
   .add('with textarea', () => ({
+    components: { ...components, GlFormTextarea },
     props: generateProps({ optional: true }),
     template: `
       <gl-form-group
@@ -106,7 +107,7 @@ documentedStoriesOf('base/form/form-group', readme)
   }))
   .add('with label description', () => ({
     props: generateProps({ optional: true }),
-    components,
+    components: { ...components, GlFormInput },
     template: `
       <gl-form-group
         :id="id"
@@ -125,7 +126,7 @@ documentedStoriesOf('base/form/form-group', readme)
   }))
   .add('with validations', () => ({
     props: generateProps({ label: 'Name', description: 'Enter a first and last name.' }),
-    components,
+    components: { ...components, GlFormInput },
     computed: {
       state() {
         return this.name.length >= 4;

package/src/components/base/form/form_radio_group/form_radio_group.stories.js

@@ -1,10 +1,11 @@
 import { withKnobs, object, text } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
-import { GlFormRadioGroup } from '../../../../../index';
+import { GlFormRadioGroup, GlFormRadio } from '../../../../../index';
 import readme from './form_radio_group.md';
 
 const components = {
   GlFormRadioGroup,
+  GlFormRadio,
 };
 
 const defaultOptions = [

package/src/components/base/loading_icon/loading_icon.stories.js

@@ -23,6 +23,7 @@ const generateProps = () => ({
 });
 
 const Template = (args) => ({
+  components: { GlLoadingIcon },
   props: Object.keys(args),
   template,
 });

package/src/components/base/nav/nav_item_dropdown.stories.js

@@ -1,11 +1,12 @@
 import { withKnobs } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlNav, GlNavItemDropdown } from '../../../../index';
+import { GlNav, GlNavItemDropdown, GlDropdownItem, GlDropdownDivider } from '../../../../index';
 import readme from './nav_item_dropdown.md';
 
 const components = {
   GlNav,
   GlNavItemDropdown,
+  GlDropdownItem,
 };
 
 documentedStoriesOf('base/nav/nav-item-dropdown', readme)
@@ -23,7 +24,7 @@ documentedStoriesOf('base/nav/nav-item-dropdown', readme)
     `,
   }))
   .add('with divider', () => ({
-    components,
+    components: { ...components, GlDropdownDivider },
     template: `
       <gl-nav>
         <gl-nav-item-dropdown text="Dropdown">

package/src/components/base/pagination/pagination.stories.js

@@ -2,6 +2,8 @@ import { alignOptions } from '../../../utils/constants';
 import readme from './pagination.md';
 import GlPagination from './pagination.vue';
 
+const components = { GlPagination };
+
 const generateBaseProps = ({ prevText = 'Prev', nextText = 'Next', disabled = false } = {}) => ({
   prevText,
   nextText,
@@ -30,6 +32,7 @@ const defaults = {
 };
 
 export const Default = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   ...defaults,
   template: `<gl-pagination
@@ -44,6 +47,7 @@ export const Default = (args, { argTypes }) => ({
 Default.args = generateFullProps();
 
 export const Compact = () => ({
+  components,
   ...defaults,
   props: generateFullProps(),
   data() {
@@ -77,6 +81,7 @@ export const Compact = () => ({
 });
 
 export const LinkBased = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   ...defaults,
   methods: {
@@ -97,6 +102,7 @@ export const LinkBased = (args, { argTypes }) => ({
 LinkBased.args = generateFullProps();
 
 export const AlignCenter = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   ...defaults,
   template: `<gl-pagination
@@ -112,6 +118,7 @@ export const AlignCenter = (args, { argTypes }) => ({
 AlignCenter.args = generateFullProps();
 
 export const AlignRight = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   ...defaults,
   template: `<gl-pagination

package/src/components/base/path/path.stories.js

@@ -1,4 +1,4 @@
-import { GlPath } from '../../../../index';
+import { GlPath, GlPopover } from '../../../../index';
 import { glThemes } from '../../../utils/constants';
 import { mockPathItems } from './data';
 import readme from './path.md';
@@ -28,7 +28,7 @@ export const Default = (args, { argTypes }) => ({
 Default.args = generateProps();
 
 export const WithPopovers = (args, { argTypes }) => ({
-  components: { GlPath },
+  components: { GlPath, GlPopover },
   props: Object.keys(argTypes),
   template: template(`
     <template #default="{ pathItem, pathId }">

package/src/components/base/popover/popover.stories.js

@@ -1,7 +1,10 @@
 import { withKnobs, select, text } from '@storybook/addon-knobs';
+import { GlPopover, GlButton } from '../../../../index';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { popoverPlacements } from '../../../utils/constants';
 
+const components = { GlPopover, GlButton };
+
 const contentString = `
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat a nisi non
   pellentesque. Pellentesque efficitur vulputate rutrum. Fusce nisl magna, porttitor in
@@ -57,10 +60,12 @@ function generateProps({ placement = popoverPlacements.top, title = 'Popover', t
 documentedStoriesOf('base/popover', '')
   .addDecorator(withKnobs)
   .add('default', () => ({
+    components,
     template,
     props: generateProps(),
   }))
   .add('with close button', () => ({
+    components,
     template: `
       <div class="gl-display-flex gl-justify-content-center gl-p-6">
         <gl-button id="pop-with-close-button">{{placement}}</gl-button>
@@ -81,6 +86,7 @@ documentedStoriesOf('base/popover', '')
   .add(
     'on click',
     () => ({
+      components,
       template: scopedSlotTemplate,
       props: generateProps(),
     }),

package/src/components/base/table/table.stories.js

@@ -1,6 +1,8 @@
-import { GlTable } from '../../../../index';
+import { GlTable, GlFormInput } from '../../../../index';
 import readme from './table.md';
 
+const components = { GlTable };
+
 const tableItems = [
   {
     column_one: 'test',
@@ -23,6 +25,7 @@ const generateProps = ({ fixed = false, footClone = false, stacked = false } = {
 });
 
 export const Default = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   template: `
   <gl-table
@@ -55,6 +58,7 @@ export const Default = (args, { argTypes }) => ({
 Default.args = generateProps();
 
 export const Empty = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   template: `
       <gl-table show-empty />
@@ -63,6 +67,7 @@ export const Empty = (args, { argTypes }) => ({
 Empty.parameters = { controls: { disable: true } };
 
 export const WithFilter = (args, { argTypes }) => ({
+  components: { ...components, GlFormInput },
   props: Object.keys(argTypes),
   template: `<div class="gl-line-height-normal">
       <gl-form-input v-model="filter" placeholder="Type to search" />

package/src/components/base/tabs/tabs/scrollable_tabs.spec.js

@@ -13,7 +13,6 @@ const TEST_ACTION = {
   text: 'Lorem ipsum',
 };
 const TEST_DEFAULT_PROPS = {
-  theme: 'red',
   contentClass: 'gl-test-content-class',
   navClass: 'gl-test-nav-class',
 };

package/src/components/base/tabs/tabs/tabs.md

@@ -10,7 +10,7 @@ tab, when active, will reveal it’s own unique content.
 ## Using the component Vue
 
 ~~~js
-<gl-tabs theme="indigo">
+<gl-tabs>
   <gl-tab title="Tab 1">
     Tab panel 1
   </gl-tab>
@@ -75,7 +75,7 @@ component. This is a separate Vue component because of some limitations:
 exceptions).
 
 ~~~html
-<gl-scrollable-tabs theme="indigo">
+<gl-scrollable-tabs>
   <gl-tab v-for="tab in tabs" :key="tab.key" :title="tab.title"> {{ tab.content }} </gl-tab>
 </gl-scrollable-tabs>
 ~~~

package/src/components/base/tabs/tabs/tabs.scss

@@ -52,125 +52,13 @@
 .gl-tab-nav-item-active {
   @include gl-font-weight-bold;
   @include gl-text-gray-900;
-}
-
-.gl-tab-nav-item-active-indigo {
-  @include gl-inset-border-b-2-theme-indigo-500;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-indigo-500, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-light-indigo {
-  @include gl-inset-border-b-2-theme-indigo-300;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-indigo-300, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-blue {
-  @include gl-inset-border-b-2-theme-blue-500;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-blue-500, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-light-blue {
-  @include gl-inset-border-b-2-theme-light-blue-500;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-light-blue-500, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-red {
-  @include gl-inset-border-b-2-theme-red-500;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-red-500, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-light-red {
-  @include gl-inset-border-b-2-theme-light-red-500;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-light-red-500, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-green {
-  @include gl-inset-border-b-2-theme-green-500;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-green-500, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-light-green {
-  @include gl-inset-border-b-2-theme-green-300;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-green-300, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-dark {
-  @include gl-inset-border-b-2-gray-500;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-500, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-light {
-  @include gl-inset-border-b-2-gray-300;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-300, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-gl-dark {
-  @include gl-inset-border-b-2-gray-100;
+  @include gl-inset-border-b-2-theme-accent;
 
   &:active,
   &:focus,
   &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-100, $focus-ring;
+    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500),
+      $focus-ring;
     @include gl-outline-none;
   }
 }

package/src/components/base/tabs/tabs/tabs.spec.js

@@ -1,4 +1,4 @@
-import { mount, shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { GlButton } from '../../../../../index';
 import { tabsButtonDefaults } from '../../../../utils/constants';
@@ -44,9 +44,12 @@ describe('tabs component', () => {
     wrapper.findAll('[role="tab"]').wrappers.find((tabWrapper) => tabWrapper.text() === text);
 
   describe('default', () => {
-    it('should have a default theme of indigo', () => {
-      buildTabs({ mountFn: shallowMount });
-      expect(wrapper.attributes('activenavitemclass')).toContain('gl-tab-nav-item-active-indigo');
+    it('the active tab should be styled', async () => {
+      buildTabs();
+
+      await nextTick();
+
+      expect(findActiveTab().classes()).toContain('gl-tab-nav-item-active');
     });
   });
 

package/src/components/base/tabs/tabs/tabs.stories.js

@@ -1,12 +1,12 @@
-import { withKnobs, select, boolean } from '@storybook/addon-knobs';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
 import { range } from 'lodash';
 import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
 import { GlTabs, GlTab, GlScrollableTabs } from '../../../../../index';
-import { colorThemes } from '../../../../utils/constants';
 import docs from './tabs.md';
 
 const ScrollableTabsGenerator = {
   components: {
+    GlTabs,
     GlScrollableTabs,
     GlTab,
   },
@@ -39,10 +39,6 @@ const createBaseStory = () => ({
     GlTab,
   },
   props: {
-    theme: {
-      type: String,
-      default: select('theme', [...Object.keys(colorThemes), 'gl-dark'], 'indigo'),
-    },
     syncActiveTabWithQueryParams: {
       type: Boolean,
       default: boolean('sync-active-tab-with-query-params', false),
@@ -55,7 +51,7 @@ documentedStoriesOf('base/tabs/tabs', docs)
   .add('default', () => ({
     ...createBaseStory(),
     template: `
-      <gl-tabs :theme="theme" :sync-active-tab-with-query-params="syncActiveTabWithQueryParams">
+      <gl-tabs :sync-active-tab-with-query-params="syncActiveTabWithQueryParams">
         <gl-tab title="Tab 1">
           Tab panel 1
         </gl-tab>
@@ -104,7 +100,7 @@ documentedStoriesOf('base/tabs/tabs', docs)
   .add('contentless tab', () => ({
     ...createBaseStory(),
     template: `
-      <gl-tabs :theme="theme">
+      <gl-tabs>
         <gl-tab title="Regular tab">
           <p>Regular tab content.</p>
           <p>The contentless tab is not selectable, as it has no content. This is useful for displaying things that aren't really tabs after the list of tabs.</p>
@@ -123,7 +119,7 @@ documentedStoriesOf('base/tabs/tabs', docs)
   .add('empty state', () => ({
     ...createBaseStory(),
     template: `
-      <gl-tabs :theme="theme">
+      <gl-tabs>
         <template #empty>
           This content is only displayed when there are no tabs. Useful for dynamically added/removed tabs.
         </template>
@@ -133,7 +129,7 @@ documentedStoriesOf('base/tabs/tabs', docs)
   .add('justified tabs', () => ({
     ...createBaseStory(),
     template: `
-      <gl-tabs :theme="theme" justified>
+      <gl-tabs justified>
         <gl-tab title="Tab 1">
           <p>Tab panel 1</p>
         </gl-tab>
@@ -177,7 +173,7 @@ documentedStoriesOf('base/tabs/tabs', docs)
     components: {
       ScrollableTabsGenerator,
     },
-    template: '<scrollable-tabs-generator :count="50" :theme="theme" />',
+    template: '<scrollable-tabs-generator :count="50" />',
   }))
   .add(
     'with scroll and growing',
@@ -197,7 +193,7 @@ documentedStoriesOf('base/tabs/tabs', docs)
           this.count += 1;
         }, 2000);
       },
-      template: '<scrollable-tabs-generator :count="count" :theme="theme" />',
+      template: '<scrollable-tabs-generator :count="count" />',
     }),
     { storyshots: false }
   );

package/src/components/base/tabs/tabs/tabs.vue

@@ -1,6 +1,6 @@
 <script>
 import { BTabs } from 'bootstrap-vue';
-import { colorThemes, tabsButtonDefaults } from '../../../../utils/constants';
+import { tabsButtonDefaults } from '../../../../utils/constants';
 import GlButton from '../../button/button.vue';
 
 const validatorHelper = (obj) =>
@@ -31,12 +31,6 @@ export default {
       default: null,
       validator: (obj) => validatorHelper(obj),
     },
-    theme: {
-      type: String,
-      required: false,
-      default: 'indigo',
-      validator: (value) => Object.keys(colorThemes).includes(value) || value === 'gl-dark',
-    },
     contentClass: {
       type: [String, Array, Object],
       required: false,
@@ -77,9 +71,6 @@ export default {
     hasActions() {
       return [this.actionPrimary, this.actionSecondary, this.actionTertiary].some(Boolean);
     },
-    activeItemBorderClass() {
-      return `gl-tab-nav-item-active-${this.theme}`;
-    },
     listeners() {
       return {
         ...this.$listeners,
@@ -214,7 +205,7 @@ export default {
     ref="bTabs"
     :no-nav-style="true"
     :no-fade="true"
-    :active-nav-item-class="`gl-tab-nav-item-active ${activeItemBorderClass}`"
+    active-nav-item-class="gl-tab-nav-item-active"
     :content-class="[contentClass, 'gl-tab-content']"
     :nav-class="[navClass, 'gl-tabs-nav']"
     :justified="justified"