@gitlab/ui 38.1.0 → 38.3.0

package/dist/components/base/dropdown/examples/dropdown.with_icons.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Some dropdown"}},[_c('gl-dropdown-item',{attrs:{"icon-color":"info","icon-name":"status_running","icon-right-name":"retry","icon-right-aria-label":"Retry"}},[_vm._v("\n    Status running\n  ")]),_vm._v(" "),_c('gl-dropdown-item',{attrs:{"icon-color":"success","icon-name":"status_success","icon-right-name":"cancel","icon-right-aria-label":"Cancel"}},[_vm._v("\n    Status success\n  ")]),_vm._v(" "),_c('gl-dropdown-item',{attrs:{"icon-color":"warning","icon-name":"status_warning","icon-right-name":"cancel","icon-right-aria-label":"Cancel"}},[_vm._v("\n    Status warning\n  ")]),_vm._v(" "),_c('gl-dropdown-item',{attrs:{"icon-color":"danger","icon-name":"status_failed","icon-right-name":"cancel","icon-right-aria-label":"Cancel"}},[_vm._v("\n    Status failed\n  ")]),_vm._v(" "),_c('gl-dropdown-item',{attrs:{"icon-name":"status_manual","icon-right-name":"cancel","icon-right-aria-label":"Cancel"}},[_vm._v("\n    Status manual\n  ")])],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/dropdown/examples/dropdown.with_right_align.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Right-aligned dropdown","right":""}},[_c('gl-dropdown-item',[_vm._v("First item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Second item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Last item")])],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/dropdown/examples/dropdown.with_search.example.js

@@ -1,67 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      searchTerm: '',
-      tagNames: []
-    };
-  },
-
-  computed: {
-    filteredTagNames() {
-      return this.tagNames.filter(tagName => tagName.includes(this.searchTerm.toLowerCase()));
-    },
-
-    filteredTagNamesLength() {
-      return this.filteredTagNames.length === 0;
-    }
-
-  },
-
-  mounted() {
-    const tagNames = new Set();
-    const elements = document.querySelectorAll('*');
-    elements.forEach(element => tagNames.add(element.tagName.toLowerCase()));
-    this.tagNames = Array.from(tagNames).sort();
-  }
-
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Select HTML tag","header-text":"Header"},scopedSlots:_vm._u([{key:"header",fn:function(){return [_c('gl-search-box-by-type',{model:{value:(_vm.searchTerm),callback:function ($$v) {_vm.searchTerm=(typeof $$v === 'string'? $$v.trim(): $$v);},expression:"searchTerm"}})]},proxy:true}])},[_vm._v(" "),_vm._l((_vm.filteredTagNames),function(tagName){return _c('gl-dropdown-item',{key:tagName},[_vm._v("\n    "+_vm._s(tagName)+"\n  ")])}),_vm._v(" "),_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.filteredTagNamesLength),expression:"filteredTagNamesLength"}],staticClass:"text-secondary p-2"},[_vm._v("Nothing found…")])],2)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/dropdown/examples/dropdown.with_section_headers.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Some dropdown"}},[_c('gl-dropdown-section-header',[_vm._v("First group")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("First item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Second item")]),_vm._v(" "),_c('gl-dropdown-divider'),_vm._v(" "),_c('gl-dropdown-section-header',[_vm._v("Second group")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Last item")])],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/dropdown/examples/index.js

@@ -1,85 +0,0 @@
-import DropdownDefaultExample from './dropdown.default.example';
-import DropdownLinksExample from './dropdown.links.example';
-import DropdownWithAvatarAndSecondaryText from './dropdown.with_avatar_and_secondary_text.example';
-import DropdownWithCheckedItemsExample from './dropdown.with_checked_items.example';
-import DropdownClearAllExample from './dropdown.with_clear_all.example';
-import DropdownWithDividerExample from './dropdown.with_divider.example';
-import DropdownWithFormExample from './dropdown.with_form.example';
-import DropdownWithHeaderExample from './dropdown.with_header.example';
-import DropdownWithHighlightedItemsExample from './dropdown.with_highlighted_items.example';
-import DropdownWithIcons from './dropdown.with_icons.example';
-import DropdownWithRightAlignExample from './dropdown.with_right_align.example';
-import DropdownWithSearchExample from './dropdown.with_search.example';
-import DropdownWithSectionHeadersExample from './dropdown.with_section_headers.example';
-
-var index = [{
-  name: 'Dropdown',
-  items: [{
-    id: 'new-dropdown-default',
-    name: 'Default',
-    description: 'Default Dropdown',
-    component: DropdownDefaultExample
-  }, {
-    id: 'new-dropdown-links',
-    name: 'With Links',
-    description: 'Dropdown with links as items',
-    component: DropdownLinksExample
-  }, {
-    id: 'new-dropdown-with-divider',
-    name: 'With Divider',
-    description: 'Dropdown with divider',
-    component: DropdownWithDividerExample
-  }, {
-    id: 'new-dropdown-with-header',
-    name: 'With Header',
-    description: 'Dropdown with section header',
-    component: DropdownWithHeaderExample
-  }, {
-    id: 'new-dropdown-with-highlighted-items',
-    name: 'With Highlighted items',
-    description: 'Dropdown with highlighted items',
-    component: DropdownWithHighlightedItemsExample
-  }, {
-    id: 'new-dropdown-with-section-headers',
-    name: 'With Section Headers',
-    description: 'Dropdown with section headers',
-    component: DropdownWithSectionHeadersExample
-  }, {
-    id: 'new-dropdown-with-right-align',
-    name: 'With Right Alignment',
-    description: 'Dropdown aligned to the right side',
-    component: DropdownWithRightAlignExample
-  }, {
-    id: 'new-dropdown-with-search',
-    name: 'With Search',
-    description: 'Dropdown with search field',
-    component: DropdownWithSearchExample
-  }, {
-    id: 'new-dropdown-with-checked-items',
-    name: 'With Checked Items',
-    description: 'Dropdown with checked items',
-    component: DropdownWithCheckedItemsExample
-  }, {
-    id: 'new-dropdown-with-avatar-and-secondary-text',
-    name: 'With Avatar and Secondary Text',
-    description: 'Dropdown with avatar and secondary text',
-    component: DropdownWithAvatarAndSecondaryText
-  }, {
-    id: 'new-dropdown-with-icons',
-    name: 'With Icons',
-    description: 'Dropdown with icons',
-    component: DropdownWithIcons
-  }, {
-    id: 'new-dropdown-with-form',
-    name: 'With Form',
-    description: 'Dropdown with form',
-    component: DropdownWithFormExample
-  }, {
-    id: 'new-dropdown-with-clear-all',
-    name: 'With Clear all',
-    description: 'Dropdown with clear all',
-    component: DropdownClearAllExample
-  }]
-}];
-
-export default index;

package/dist/components/base/form/form_checkbox_tree/examples/form_checkbox_tree.basic.example.js

@@ -1,103 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-checkbox-tree',{attrs:{"value":[1, 11, 12, 121, 122, 2113, 3],"options":[
-    {
-      value: 1,
-      label: 'Felidae',
-      children: [
-        {
-          value: 11,
-          label: 'Lion',
-        },
-        {
-          value: 12,
-          label: 'Felinae',
-          children: [
-            {
-              value: 121,
-              label: 'Cheetah',
-            },
-            {
-              value: 122,
-              label: 'Ocelot',
-            } ],
-        } ],
-    },
-    {
-      value: 2,
-      label: 'Canidae',
-      children: [
-        {
-          value: 21,
-          label: 'Caninae',
-          children: [
-            {
-              value: 211,
-              label: 'Canis lupus',
-              children: [
-                {
-                  value: 2112,
-                  label: 'Wolf',
-                },
-                {
-                  value: 2113,
-                  label: 'Himalayan wolf',
-                },
-                {
-                  value: 2114,
-                  label: 'Dingo',
-                } ],
-            },
-            {
-              value: 212,
-              label: 'Black-backed jackal',
-            } ],
-        },
-        {
-          value: 22,
-          label: 'Fennec fox',
-        } ],
-    },
-    {
-      value: 3,
-      label: 'Karabair',
-    },
-    {
-      value: 4,
-      label: 'Okapi',
-    } ]}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/form/form_checkbox_tree/examples/index.js

@@ -1,13 +0,0 @@
-import BasicExample from './form_checkbox_tree.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'form-checkbox-tree-basic',
-    name: 'Basic',
-    description: 'Basic Form Checkbox Tree',
-    component: BasicExample
-  }]
-}];
-
-export default index;

package/src/components/base/dropdown/dropdown_divider.documentation.js

@@ -1,6 +0,0 @@
-import description from './dropdown_divider.md';
-
-export default {
-  description,
-  bootstrapComponent: 'b-dropdown',
-};

package/src/components/base/dropdown/dropdown_divider.md

@@ -1,7 +0,0 @@
-# Dropdown Divider
-
-<!-- STORY -->
-
-## Usage
-
-The dropdown divider component is meant to be used for visual dividers inside a dropdown component.

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

@@ -1,16 +0,0 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlDropdownDivider } from '../../../index';
-import readme from './dropdown_divider.md';
-
-const components = {
-  GlDropdownDivider,
-};
-
-documentedStoriesOf('base/dropdown/dropdown-divider', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: {},
-    components,
-    template: '<ul class="list-unstyled"><gl-dropdown-divider /></ul>',
-  }));

package/src/components/base/dropdown/dropdown_form.documentation.js

@@ -1,9 +0,0 @@
-import * as description from './dropdown_form.md';
-import examples from './examples';
-
-export default {
-  description,
-  examples,
-  bootstrapComponent: 'b-dropdown-form',
-  propsInfo: {},
-};

package/src/components/base/dropdown/dropdown_form.md

@@ -1,4 +0,0 @@
-Unlike `b-dropdown-form`, we do _not_ add any additional padding with the `gl-dropdown-form` component.
-This is to prevent double padding with `gl-dropdown-item` and similar components, so in most cases
-shouldn't be needed. To add padding, either add a padding utility class to your form, or an inner
-element with some padding.

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

@@ -1,17 +0,0 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlDropdownForm, GlButton } from '../../../index';
-import readme from './dropdown_form.md';
-
-const components = {
-  GlDropdownForm,
-  GlButton,
-};
-
-documentedStoriesOf('base/dropdown/dropdown-form', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    template:
-      '<ul class="list-unstyled"><gl-dropdown-form><gl-button>One</gl-button></gl-dropdown-form></ul>',
-  }));

package/src/components/base/dropdown/dropdown_section_header.documentation.js

@@ -1,6 +0,0 @@
-import description from './dropdown_section_header.md';
-
-export default {
-  description,
-  bootstrapComponent: 'b-dropdown',
-};

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

@@ -1,17 +0,0 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlDropdownSectionHeader } from '../../../index';
-import readme from './dropdown_section_header.md';
-
-const components = {
-  GlDropdownSectionHeader,
-};
-
-documentedStoriesOf('base/dropdown/dropdown-section-header', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: {},
-    components,
-    template:
-      '<ul class="list-unstyled"><gl-dropdown-section-header>Some header</gl-dropdown-section-header></ul>',
-  }));

package/src/components/base/dropdown/dropdown_text.documentation.js

@@ -1,6 +0,0 @@
-import description from './dropdown_text.md';
-
-export default {
-  description,
-  bootstrapComponent: 'b-dropdown',
-};

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

@@ -1,16 +0,0 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlDropdownText } from '../../../index';
-import readme from './dropdown_text.md';
-
-const components = {
-  GlDropdownText,
-};
-
-documentedStoriesOf('base/dropdown/dropdown-text', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: {},
-    components,
-    template: '<ul class="list-unstyled"><gl-dropdown-text>Some text</gl-dropdown-text></ul>',
-  }));

package/src/components/base/dropdown/examples/dropdown.default.example.vue

@@ -1,7 +0,0 @@
-<template>
-  <gl-dropdown text="Some dropdown">
-    <gl-dropdown-item>First item</gl-dropdown-item>
-    <gl-dropdown-item>Second item</gl-dropdown-item>
-    <gl-dropdown-item>Last item</gl-dropdown-item>
-  </gl-dropdown>
-</template>

package/src/components/base/dropdown/examples/dropdown.links.example.vue

@@ -1,7 +0,0 @@
-<template>
-  <gl-dropdown text="Some dropdown">
-    <gl-dropdown-item href="https://about.gitlab.com/">First link</gl-dropdown-item>
-    <gl-dropdown-item href="https://about.gitlab.com/">Second link</gl-dropdown-item>
-    <gl-dropdown-item href="https://about.gitlab.com/">Last link</gl-dropdown-item>
-  </gl-dropdown>
-</template>

package/src/components/base/dropdown/examples/dropdown.with_avatar_and_secondary_text.example.vue

@@ -1,7 +0,0 @@
-<template>
-  <gl-dropdown text="Some dropdown">
-    <gl-dropdown-item avatar-url="./img/avatar.png" secondary-text="@sytses">
-      Sid Sijbrandij
-    </gl-dropdown-item>
-  </gl-dropdown>
-</template>

package/src/components/base/dropdown/examples/dropdown.with_checked_items.example.vue

@@ -1,6 +0,0 @@
-<template>
-  <gl-dropdown text="Some dropdown">
-    <gl-dropdown-item :is-check-item="true" :is-checked="true">Checked item</gl-dropdown-item>
-    <gl-dropdown-item :is-check-item="true">Unchecked item</gl-dropdown-item>
-  </gl-dropdown>
-</template>

package/src/components/base/dropdown/examples/dropdown.with_clear_all.example.vue

@@ -1,7 +0,0 @@
-<template>
-  <gl-dropdown text="Some dropdown" :show-clear-all="true" :clear-all-text="'Clear all'">
-    <gl-dropdown-item>First item</gl-dropdown-item>
-    <gl-dropdown-item>Second item</gl-dropdown-item>
-    <gl-dropdown-item>Last item</gl-dropdown-item>
-  </gl-dropdown>
-</template>

package/src/components/base/dropdown/examples/dropdown.with_divider.example.vue

@@ -1,9 +0,0 @@
-<template>
-  <gl-dropdown text="Some dropdown">
-    <gl-dropdown-item>First item</gl-dropdown-item>
-    <gl-dropdown-item>Second item</gl-dropdown-item>
-    <gl-dropdown-divider />
-    <gl-dropdown-item>Third item</gl-dropdown-item>
-    <gl-dropdown-item>Fourth item</gl-dropdown-item>
-  </gl-dropdown>
-</template>

package/src/components/base/dropdown/examples/dropdown.with_form.example.vue

@@ -1,10 +0,0 @@
-<template>
-  <gl-dropdown text="Some dropdown" header-text="Dropdown header">
-    <gl-dropdown-form>
-      <div class="gl-px-4">
-        <gl-button>First item</gl-button>
-        <gl-button>Second item</gl-button>
-      </div>
-    </gl-dropdown-form>
-  </gl-dropdown>
-</template>

package/src/components/base/dropdown/examples/dropdown.with_header.example.vue

@@ -1,7 +0,0 @@
-<template>
-  <gl-dropdown text="Some dropdown" header-text="Dropdown header">
-    <gl-dropdown-section-header>Section header title</gl-dropdown-section-header>
-    <gl-dropdown-item>First item</gl-dropdown-item>
-    <gl-dropdown-item>Second item</gl-dropdown-item>
-  </gl-dropdown>
-</template>

package/src/components/base/dropdown/examples/dropdown.with_highlighted_items.example.vue

@@ -1,9 +0,0 @@
-<template>
-  <gl-dropdown text="Some dropdown">
-    <template #highlighted-items>
-      <gl-dropdown-item>First item</gl-dropdown-item>
-      <gl-dropdown-item>Second item</gl-dropdown-item>
-    </template>
-    <gl-dropdown-item>Last item</gl-dropdown-item>
-  </gl-dropdown>
-</template>

package/src/components/base/dropdown/examples/dropdown.with_icons.example.vue

@@ -1,43 +0,0 @@
-<template>
-  <gl-dropdown text="Some dropdown">
-    <gl-dropdown-item
-      icon-color="info"
-      icon-name="status_running"
-      icon-right-name="retry"
-      icon-right-aria-label="Retry"
-    >
-      Status running
-    </gl-dropdown-item>
-    <gl-dropdown-item
-      icon-color="success"
-      icon-name="status_success"
-      icon-right-name="cancel"
-      icon-right-aria-label="Cancel"
-    >
-      Status success
-    </gl-dropdown-item>
-    <gl-dropdown-item
-      icon-color="warning"
-      icon-name="status_warning"
-      icon-right-name="cancel"
-      icon-right-aria-label="Cancel"
-    >
-      Status warning
-    </gl-dropdown-item>
-    <gl-dropdown-item
-      icon-color="danger"
-      icon-name="status_failed"
-      icon-right-name="cancel"
-      icon-right-aria-label="Cancel"
-    >
-      Status failed
-    </gl-dropdown-item>
-    <gl-dropdown-item
-      icon-name="status_manual"
-      icon-right-name="cancel"
-      icon-right-aria-label="Cancel"
-    >
-      Status manual
-    </gl-dropdown-item>
-  </gl-dropdown>
-</template>

package/src/components/base/dropdown/examples/dropdown.with_right_align.example.vue

@@ -1,7 +0,0 @@
-<template>
-  <gl-dropdown text="Right-aligned dropdown" right>
-    <gl-dropdown-item>First item</gl-dropdown-item>
-    <gl-dropdown-item>Second item</gl-dropdown-item>
-    <gl-dropdown-item>Last item</gl-dropdown-item>
-  </gl-dropdown>
-</template>