@gitlab/ui 32.46.0 → 32.47.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [32.47.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.46.0...v32.47.0) (2021-12-13)
+
+
+### Features
+
+* **GlInputGroupText:** Migrate storybook story ([3fb2328](https://gitlab.com/gitlab-org/gitlab-ui/commit/3fb2328829b002480149bf5654c6026ff26fd670))
+
 # [32.46.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.45.1...v32.46.0) (2021-12-13)
 
 

package/dist/components/base/form/form_combobox/form_combobox.documentation.js

@@ -1,6 +1,4 @@
-import examples from './examples';
-
-var form_combobox = "# GlFormCombobox\n\nUse this component to add a [`FormInput`](/?path=/story/base-form-form-input--default) component\nwith synchronous autocomplete dropdown. It behaves as follows:\n\n- Typing matches tokens; dropdown disappears when there is no match  \n- Up and down arrows navigate the dropdown  \n- Enter selects keyboard-highlighted item; clicking overrides this  \n- Esc closes dropdown when it is open, clears field when it is not  \n- Browser/native autocomplete dropdown hidden when ours is open, shows when it is not  \n- Tab selects current entered text and moves to next field  \n\nThis behavior based on\n[this w3c pattern](https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html)\nand [this accessible combobox example](https://alligator.io/vuejs/vue-a11y-autocomplete/).\n\n## Usage\n\nThe combobox accepts an array of string tokens, a `v-model`, and label text. Internally, it generates\nunique element IDs so multiple can be used on one page without clashing.\n\nOn selection it sets the input value to the selected string and emits a `value-selected` event for\nconsumption by parent components.\n\n```html\n<gl-form-combobox\n  v-model=\"inputVal\"\n  :token-list=\"tokens\"\n  label-text=\"Combobox Label\"\n/>\n```\n\nIt does not have a loading state nor does it accept tokens other than strings. It allows for one\nselected value.\n\n### What if I need to load the options asynchronously?\n\nYou may want to look at [`GlSearchBoxByType`] or [`GlSearchBoxByClick`].\n\n### What if I need multiple options?\n\nThe [`GlTokenSelector`] may be what you need. Alternately, [`GlFilteredSearch`] will let you search\nand include tokens.\n\n## Edge cases\n\nThe algorithm to match tokens with the input is very naive. If you need to use the component with a\nvery large list of matches, you may want to update the implementation or use one of the search\ninputs, like [`GlSearchBoxByType`], [`GlSearchBoxByClick`], or [`GlFilteredSearch`].\n\n[`GlSearchBoxByType`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-search-box-by-type--default\n[`GlSearchBoxByClick`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-search-box-by-click--default\n[`GlTokenSelector`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-token-selector--default\n[`GlFilteredSearch`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-filtered-search--default\n";
+var form_combobox = "Use this component to add a [`FormInput`](/?path=/story/base-form-form-input--default) component\nwith synchronous autocomplete dropdown. It behaves as follows:\n\n- Typing matches tokens; dropdown disappears when there is no match  \n- Up and down arrows navigate the dropdown  \n- Enter selects keyboard-highlighted item; clicking overrides this  \n- Esc closes dropdown when it is open, clears field when it is not  \n- Browser/native autocomplete dropdown hidden when ours is open, shows when it is not  \n- Tab selects current entered text and moves to next field  \n\nThis behavior based on\n[this w3c pattern](https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html)\nand [this accessible combobox example](https://alligator.io/vuejs/vue-a11y-autocomplete/).\n\n## Usage\n\nThe combobox accepts an array of string tokens, a `v-model`, and label text. Internally, it generates\nunique element IDs so multiple can be used on one page without clashing.\n\nOn selection it sets the input value to the selected string and emits a `value-selected` event for\nconsumption by parent components.\n\n```html\n<gl-form-combobox\n  v-model=\"inputVal\"\n  :token-list=\"tokens\"\n  label-text=\"Combobox Label\"\n/>\n```\n\nIt does not have a loading state nor does it accept tokens other than strings. It allows for one\nselected value.\n\n### What if I need to load the options asynchronously?\n\nYou may want to look at [`GlSearchBoxByType`] or [`GlSearchBoxByClick`].\n\n### What if I need multiple options?\n\nThe [`GlTokenSelector`] may be what you need. Alternately, [`GlFilteredSearch`] will let you search\nand include tokens.\n\n## Edge cases\n\nThe algorithm to match tokens with the input is very naive. If you need to use the component with a\nvery large list of matches, you may want to update the implementation or use one of the search\ninputs, like [`GlSearchBoxByType`], [`GlSearchBoxByClick`], or [`GlFilteredSearch`].\n\n[`GlSearchBoxByType`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-search-box-by-type--default\n[`GlSearchBoxByClick`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-search-box-by-click--default\n[`GlTokenSelector`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-token-selector--default\n[`GlFilteredSearch`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-filtered-search--default\n";
 
 var description = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -9,12 +7,7 @@ var description = /*#__PURE__*/Object.freeze({
 
 var form_combobox_documentation = {
   followsDesignSystem: true,
-  description,
-  examples,
-  events: [{
-    event: 'value-selected',
-    description: 'Emitted when a value is selected.'
-  }]
+  description
 };
 
 export default form_combobox_documentation;

package/dist/components/base/form/form_combobox/form_combobox.js

@@ -141,6 +141,11 @@ var script = {
     selectToken(value) {
       this.$emit('input', value);
       this.closeSuggestions();
+      /**
+       * Emitted when a value is selected.
+       * @event value-selected
+       */
+
       this.$emit('value-selected', value);
     }
 

package/dist/components/base/form/input_group_text/input_group_text.documentation.js

@@ -1,5 +1,3 @@
-import examples from './examples';
-
 var input_group_text = "### Under the hood\n\nUses [`BInputGroupText`](https://bootstrap-vue.org/docs/components/input-group#comp-ref-b-input-group-text)\nfrom Vue Boostrap\n";
 
 var description = /*#__PURE__*/Object.freeze({
@@ -8,9 +6,7 @@ var description = /*#__PURE__*/Object.freeze({
 });
 
 var input_group_text_documentation = {
-  description,
-  examples,
-  propsInfo: {}
+  description
 };
 
 export default input_group_text_documentation;

package/dist/components/charts/tooltip/tooltip.documentation.js

@@ -1,12 +1,8 @@
-import examples from './examples';
-
 var description = "### ECharts custom tooltip\n\nUses GitLab UI's `popover` component in lieu of echart's tooltip.\n";
 
 var tooltip_documentation = {
   followsDesignSystem: false,
-  description,
-  examples,
-  bootstrapComponent: 'b-popover'
+  description
 };
 
 export default tooltip_documentation;

package/documentation/documented_stories.js

@@ -104,6 +104,9 @@ export const setupStorybookReadme = () =>
         'GlLabel',
         'GlStackedColumnChart',
         'GlDiscreteScatterChart',
+        'GlFormCombobox',
+        'GlChartTooltip',
+        'GlInputGroupText',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.46.0",
+  "version": "32.47.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/form/form_combobox/form_combobox.documentation.js

@@ -1,14 +1,6 @@
-import examples from './examples';
 import * as description from './form_combobox.md';
 
 export default {
   followsDesignSystem: true,
   description,
-  examples,
-  events: [
-    {
-      event: 'value-selected',
-      description: 'Emitted when a value is selected.',
-    },
-  ],
 };

package/src/components/base/form/form_combobox/form_combobox.md

@@ -1,5 +1,3 @@
-# GlFormCombobox
-
 Use this component to add a [`FormInput`](/?path=/story/base-form-form-input--default) component
 with synchronous autocomplete dropdown. It behaves as follows:
 

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

@@ -1,41 +1,41 @@
-import { withKnobs, object, text } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
 import { tokenList, labelText } from './constants';
 import readme from './form_combobox.md';
 import GlFormCombobox from './form_combobox.vue';
 
-const components = {
-  GlFormCombobox,
-};
-
-const getProps = () => {
-  return {
-    tokenList: {
-      type: Array,
-      default: object('tokens', tokenList),
-    },
-    labelText: {
-      type: String,
-      default: text('label text', labelText),
-    },
-  };
-};
+const getProps = () => ({
+  tokenList,
+  labelText,
+});
 
-documentedStoriesOf('base/form/form-combobox', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    props: getProps(),
-    data: () => {
-      return {
-        value: '',
-      };
-    },
-    template: `
+const Template = (args) => ({
+  components: { GlFormCombobox },
+  data: () => {
+    return {
+      value: '',
+    };
+  },
+  props: Object.keys(args),
+  template: `
       <gl-form-combobox
         v-model="value"
         :token-list="tokenList"
         :labelText="labelText"
       />
     `,
-  }));
+});
+
+export const Default = Template.bind({});
+Default.args = getProps();
+
+export default {
+  title: 'base/form/form-combobox',
+  component: GlFormCombobox,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

package/src/components/base/form/form_combobox/form_combobox.vue

@@ -128,6 +128,10 @@ export default {
     selectToken(value) {
       this.$emit('input', value);
       this.closeSuggestions();
+      /**
+       * Emitted when a value is selected.
+       * @event value-selected
+       */
       this.$emit('value-selected', value);
     },
   },

package/src/components/base/form/input_group_text/input_group_text.documentation.js

@@ -1,8 +1,5 @@
-import examples from './examples';
 import * as description from './input_group_text.md';
 
 export default {
   description,
-  examples,
-  propsInfo: {},
 };

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

@@ -1,25 +1,31 @@
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
 import readme from './input_group_text.md';
 import GlInputGroupText from './input_group_text.vue';
 
-const components = {
-  GlInputGroupText,
-};
-
-const defaultProps = {};
-
-function generateProps(props = {}) {
-  return {
-    ...defaultProps,
-    ...props,
-  };
-}
+const generateProps = (props = {}) => ({
+  ...props,
+});
 
-documentedStoriesOf('base/form/input-group-text', readme).add('default', () => ({
-  components,
-  props: generateProps(),
-  data: () => ({}),
+const Template = (args) => ({
+  components: { GlInputGroupText },
+  props: Object.keys(args),
   template: `
       <gl-input-group-text>Some text</gl-input-group-text>
     `,
-}));
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export default {
+  title: 'base/form/input-group-text',
+  component: GlInputGroupText,
+  parameters: {
+    controls: { disable: true },
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

package/src/components/charts/tooltip/tooltip.documentation.js

@@ -1,9 +1,6 @@
-import examples from './examples';
 import description from './tooltip.md';
 
 export default {
   followsDesignSystem: false,
   description,
-  examples,
-  bootstrapComponent: 'b-popover',
 };

package/src/components/charts/tooltip/tooltip.stories.js

@@ -1,11 +1,9 @@
 import { GlChart, GlChartTooltip, GlChartSeriesLabel } from '../../../../charts';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import {
   SERIES_NAME,
   SERIES_NAME_LONG,
   SERIES_NAME_LONG_WITHOUT_SPACES,
 } from '../../../utils/stories_utils';
-
 import readme from './tooltip.md';
 
 const components = {
@@ -33,10 +31,9 @@ const baseStoryOptions = {
   },
 };
 
-const getStoryOptions = (tooltipContent) => {
-  return {
-    ...baseStoryOptions,
-    template: `<div class="position-relative">
+const getStoryOptions = (tooltipContent) => ({
+  ...baseStoryOptions,
+  template: `<div class="position-relative">
     <gl-chart
       :options="options"
       :height="100"
@@ -57,43 +54,61 @@ const getStoryOptions = (tooltipContent) => {
       ${tooltipContent}
     </gl-chart-tooltip>
 </div>`,
-  };
-};
+});
+
+export const Default = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...getStoryOptions('Example Content'),
+});
+
+export const WithLongSeriesLabel = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...getStoryOptions(`
+        <gl-chart-series-label color="#1F78D1">${SERIES_NAME[SERIES_NAME_LONG]}</gl-chart-series-label>
+      `),
+});
 
-documentedStoriesOf('charts/chart-tooltip', readme)
-  .add('default', () => getStoryOptions('Example Content'))
-  .add('with long series label', () =>
-    getStoryOptions(`
-      <gl-chart-series-label color="#1F78D1">${SERIES_NAME[SERIES_NAME_LONG]}</gl-chart-series-label>
-    `)
-  )
-  .add('with long series label with no spaces', () =>
-    getStoryOptions(`
-      <gl-chart-series-label color="#1F78D1">${SERIES_NAME[SERIES_NAME_LONG_WITHOUT_SPACES]}</gl-chart-series-label>
-    `)
-  )
+export const WithLongSeriesLabelWithNoSpaces = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...getStoryOptions(`
+        <gl-chart-series-label color="#1F78D1">${SERIES_NAME[SERIES_NAME_LONG_WITHOUT_SPACES]}</gl-chart-series-label>
+      `),
+});
 
-  // This story exists to avoid regressions as part of
-  // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1482, and may be affected
-  // by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1479
-  .add('title prop', () => ({
-    ...baseStoryOptions,
-    template: `
-      <div class="position-relative">
-        <gl-chart
-          :options="options"
-          :height="100"
-          @created="onCreated"
-        />
-        <gl-chart-tooltip
-          v-if="chart"
-          :chart="chart"
-          :show="showTooltip"
-          :top="top"
-          :left="left"
-          title="Title from prop"
-        >
-          Example content
-        </gl-chart-tooltip>
-      </div>`,
-  }));
+export const TitleProp = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...baseStoryOptions,
+  template: `
+        <div class="position-relative">
+          <gl-chart
+            :options="options"
+            :height="100"
+            @created="onCreated"
+          />
+          <gl-chart-tooltip
+            v-if="chart"
+            :chart="chart"
+            :show="showTooltip"
+            :top="top"
+            :left="left"
+            title="Title from prop"
+          >
+            Example content
+          </gl-chart-tooltip>
+        </div>`,
+});
+
+export default {
+  title: 'charts/chart-tooltip',
+  component: GlChartTooltip,
+  parameters: {
+    bootstrapComponent: 'b-popover',
+    knobs: { disable: true },
+    controls: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

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

@@ -1,50 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  tokens: ['giraffe', 'dog', 'dodo', 'komodo dragon', 'hippo', 'platypus', 'jackalope', 'quetzal', 'badger', 'vicuña', 'whale', 'xenarthra'],
-
-  data() {
-    return {
-      inputVal: ''
-    };
-  }
-
-};
-
-/* 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-form-combobox',{attrs:{"token-list":_vm.$options.tokens,"label-text":"Animals We Tolerate"},model:{value:(_vm.inputVal),callback:function ($$v) {_vm.inputVal=$$v;},expression:"inputVal"}})};
-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/form/form_combobox/examples/index.js

@@ -1,13 +0,0 @@
-import BasicExample from './form_combobox.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'form-combobox-basic',
-    name: 'Basic',
-    description: 'Basic Combobox',
-    component: BasicExample
-  }]
-}];
-
-export default index;

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

@@ -1,13 +0,0 @@
-import BasicExample from './input_group_text.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'input-group-text-basic',
-    name: 'Basic',
-    description: 'Basic Input Group Text',
-    component: BasicExample
-  }]
-}];
-
-export default index;

package/dist/components/base/form/input_group_text/examples/input_group_text.basic.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-input-group-text',[_vm._v("Some text")])};
-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/charts/tooltip/examples/chart_tooltip.basic.example.js

@@ -1,54 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      echartInstance: null
-    };
-  },
-
-  methods: {
-    onCreated(chart) {
-      this.echartInstance = chart;
-    }
-
-  }
-};
-
-/* 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('div',{staticClass:"position-relative"},[_c('gl-chart',{attrs:{"options":{},"height":100},on:{"created":_vm.onCreated}}),_vm._v(" "),(_vm.echartInstance)?_c('gl-chart-tooltip',{attrs:{"chart":_vm.echartInstance,"show":true,"top":"50%","left":"0px"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v("Tooltip Title")])]},proxy:true}],null,false,1548852484)},[_vm._v("\n    Basic Tooltip Content\n  ")]):_vm._e()],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_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/charts/tooltip/examples/index.js

@@ -1,13 +0,0 @@
-import ChartTooltipBasicExample from './chart_tooltip.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'chart-tooltip-basic',
-    name: 'Basic',
-    description: 'Basic Tooltip',
-    component: ChartTooltipBasicExample
-  }]
-}];
-
-export default index;

package/src/components/base/form/form_combobox/examples/form_combobox.basic.example.vue

@@ -1,31 +0,0 @@
-<script>
-export default {
-  tokens: [
-    'giraffe',
-    'dog',
-    'dodo',
-    'komodo dragon',
-    'hippo',
-    'platypus',
-    'jackalope',
-    'quetzal',
-    'badger',
-    'vicuña',
-    'whale',
-    'xenarthra',
-  ],
-  data() {
-    return {
-      inputVal: '',
-    };
-  },
-};
-</script>
-
-<template>
-  <gl-form-combobox
-    v-model="inputVal"
-    :token-list="$options.tokens"
-    label-text="Animals We Tolerate"
-  />
-</template>

package/src/components/base/form/form_combobox/examples/index.js

@@ -1,15 +0,0 @@
-import BasicExample from './form_combobox.basic.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'form-combobox-basic',
-        name: 'Basic',
-        description: 'Basic Combobox',
-        component: BasicExample,
-      },
-    ],
-  },
-];

package/src/components/base/form/input_group_text/examples/index.js

@@ -1,15 +0,0 @@
-import BasicExample from './input_group_text.basic.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'input-group-text-basic',
-        name: 'Basic',
-        description: 'Basic Input Group Text',
-        component: BasicExample,
-      },
-    ],
-  },
-];

package/src/components/base/form/input_group_text/examples/input_group_text.basic.example.vue

@@ -1,3 +0,0 @@
-<template>
-  <gl-input-group-text>Some text</gl-input-group-text>
-</template>

package/src/components/charts/tooltip/examples/chart_tooltip.basic.example.vue

@@ -1,32 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      echartInstance: null,
-    };
-  },
-  methods: {
-    onCreated(chart) {
-      this.echartInstance = chart;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="position-relative">
-    <gl-chart :options="{}" :height="100" @created="onCreated" />
-    <gl-chart-tooltip
-      v-if="echartInstance"
-      :chart="echartInstance"
-      :show="true"
-      top="50%"
-      left="0px"
-    >
-      <template #title>
-        <div>Tooltip Title</div>
-      </template>
-      Basic Tooltip Content
-    </gl-chart-tooltip>
-  </div>
-</template>

package/src/components/charts/tooltip/examples/index.js

@@ -1,15 +0,0 @@
-import ChartTooltipBasicExample from './chart_tooltip.basic.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'chart-tooltip-basic',
-        name: 'Basic',
-        description: 'Basic Tooltip',
-        component: ChartTooltipBasicExample,
-      },
-    ],
-  },
-];