@gitlab/ui 36.3.0 → 36.4.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [36.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v36.3.0...v36.4.0) (2022-02-09)
+
+
+### Features
+
+* **GlEmptyState:** make title into a slot ([45bacac](https://gitlab.com/gitlab-org/gitlab-ui/commit/45bacac972a7c4748e1fc96e1605615f816cb8ed))
+
 # [36.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v36.2.0...v36.3.0) (2022-02-08)
 
 

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

@@ -1,9 +1,6 @@
-import examples from './examples';
-
-var description = "### Single Stat\n\nThe single stat component is used to show a single value. The color of the meta icon / badge is\ndetermined by the **variant** prop, which can be one of \"success\", \"warning\", \"danger\", \"info\",\n\"neutral\" or \"muted\" (default).\n\n#### Hover state\n\nYou can make the component focusable by adding a `tabindex=0` attribute to it. This will also apply\na hover state to the component.\n";
+var description = "The single stat component is used to show a single value. The color of the meta icon / badge is\ndetermined by the **variant** prop, which can be one of \"success\", \"warning\", \"danger\", \"info\",\n\"neutral\" or \"muted\" (default).\n\n#### Hover state\n\nYou can make the component focusable by adding a `tabindex=0` attribute to it. This will also apply\na hover state to the component.\n";
 
 var single_stat_documentation = {
-  examples,
   description
 };
 

package/dist/components/regions/empty_state/empty_state.js

@@ -11,7 +11,8 @@ var script = {
      */
     title: {
       type: String,
-      required: true
+      required: false,
+      default: null
     },
 
     /**
@@ -113,7 +114,7 @@ const __vue_script__ = script;
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{staticClass:"gl-display-flex",class:{
     'empty-state gl-text-center gl-flex-direction-column': !_vm.compact,
     'gl-flex-direction-row': _vm.compact,
-  }},[_c('div',{class:{ 'gl-display-none gl-sm-display-block gl-px-4': _vm.compact, 'gl-max-w-full': !_vm.compact }},[(_vm.svgPath)?_c('div',{staticClass:"svg-250",class:{ 'svg-content': !_vm.compact }},[_c('img',{staticClass:"gl-max-w-full",attrs:{"src":_vm.svgPath,"alt":"","role":"img","height":_vm.height}})]):_vm._e()]),_vm._v(" "),_c('div',{class:_vm.compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-max-w-full gl-m-auto'},[_c('div',{staticClass:"gl-mx-auto gl-my-0",class:{ 'gl-p-5': !_vm.compact }},[_c('h1',{ref:"title",staticClass:"gl-font-size-h-display gl-line-height-36",class:_vm.compact ? 'h5' : 'h4'},[_vm._v("\n        "+_vm._s(_vm.title)+"\n      ")]),_vm._v(" "),(_vm.description || _vm.$scopedSlots.description)?_c('p',{ref:"description",staticClass:"gl-mt-3"},[_vm._t("description",[_vm._v("\n          "+_vm._s(_vm.description)+"\n        ")])],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-flex-wrap",class:{ 'gl-justify-content-center': !_vm.compact }},[_vm._t("actions",[(_vm.shouldRenderPrimaryButton)?_c('gl-button',{staticClass:"gl-mb-3",class:_vm.compact ? 'gl-mr-3' : 'gl-mx-2',attrs:{"variant":"confirm","href":_vm.primaryButtonLink}},[_vm._v(_vm._s(_vm.primaryButtonText))]):_vm._e(),_vm._v(" "),(_vm.shouldRenderSecondaryButton)?_c('gl-button',{staticClass:"gl-mb-3 gl-mr-3",class:{ 'gl-mx-2!': !_vm.compact },attrs:{"href":_vm.secondaryButtonLink}},[_vm._v(_vm._s(_vm.secondaryButtonText)+"\n          ")]):_vm._e()])],2)])])])};
+  }},[_c('div',{class:{ 'gl-display-none gl-sm-display-block gl-px-4': _vm.compact, 'gl-max-w-full': !_vm.compact }},[(_vm.svgPath)?_c('div',{staticClass:"svg-250",class:{ 'svg-content': !_vm.compact }},[_c('img',{staticClass:"gl-max-w-full",attrs:{"src":_vm.svgPath,"alt":"","role":"img","height":_vm.height}})]):_vm._e()]),_vm._v(" "),_c('div',{class:_vm.compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-max-w-full gl-m-auto'},[_c('div',{staticClass:"gl-mx-auto gl-my-0",class:{ 'gl-p-5': !_vm.compact }},[_vm._t("title",[_c('h1',{staticClass:"gl-font-size-h-display gl-line-height-36",class:_vm.compact ? 'h5' : 'h4'},[_vm._v("\n          "+_vm._s(_vm.title)+"\n        ")])]),_vm._v(" "),(_vm.description || _vm.$scopedSlots.description)?_c('p',{ref:"description",staticClass:"gl-mt-3"},[_vm._t("description",[_vm._v("\n          "+_vm._s(_vm.description)+"\n        ")])],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-flex-wrap",class:{ 'gl-justify-content-center': !_vm.compact }},[_vm._t("actions",[(_vm.shouldRenderPrimaryButton)?_c('gl-button',{staticClass:"gl-mb-3",class:_vm.compact ? 'gl-mr-3' : 'gl-mx-2',attrs:{"variant":"confirm","href":_vm.primaryButtonLink}},[_vm._v(_vm._s(_vm.primaryButtonText))]):_vm._e(),_vm._v(" "),(_vm.shouldRenderSecondaryButton)?_c('gl-button',{staticClass:"gl-mb-3 gl-mr-3",class:{ 'gl-mx-2!': !_vm.compact },attrs:{"href":_vm.secondaryButtonLink}},[_vm._v(_vm._s(_vm.secondaryButtonText)+"\n          ")]):_vm._e()])],2)],2)])])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/documentation/documented_stories.js

@@ -127,6 +127,7 @@ export const setupStorybookReadme = () =>
         'GlNavItem',
         'GlNavItemDropdown',
         'GlPopover',
+        'GlSingleStat',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

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

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

@@ -1,7 +1,5 @@
-import examples from './examples';
 import description from './single_stat.md';
 
 export default {
-  examples,
   description,
 };

package/src/components/charts/single_stat/single_stat.md

@@ -1,5 +1,3 @@
-### Single Stat
-
 The single stat component is used to show a single value. The color of the meta icon / badge is
 determined by the **variant** prop, which can be one of "success", "warning", "danger", "info",
 "neutral" or "muted" (default).

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

@@ -1,100 +1,93 @@
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
-import { withKnobs, text, select, boolean, number } from '@storybook/addon-knobs';
 import { GlSingleStat } from '../../../charts';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { badgeVariantOptions } from '../../../utils/constants';
 import readme from './single_stat.md';
 
-const components = {
-  GlSingleStat,
-};
-
-const template = `
-    <gl-single-stat
-      :title="title"
-      :value="value"
-      :unit="unit"
-      :variant="variant"
-      :meta-text="metaText"
-      :meta-icon="metaIcon"
-      :title-icon="titleIcon"
-      :should-animate="shouldAnimate"
-      :animation-decimal-places="animationDecimalPlaces"
-    />
-  `;
-
 const generateProps = ({
   variant = GlSingleStat.props.variant.default,
   title = 'Single stat',
   value = '100',
-  unit = null,
-  metaText = null,
+  unit = '',
+  metaText = '',
   metaIcon = null,
   titleIcon = null,
   shouldAnimate = false,
   animationDecimalPlaces = 0,
 } = {}) => ({
-  variant: {
-    type: String,
-    default: select('variant', Object.values(badgeVariantOptions), variant),
-  },
-  title: {
-    type: String,
-    default: text('title', title),
-  },
-  value: {
-    type: String,
-    default: text('value', value),
-  },
-  unit: {
-    type: [String, Number],
-    default: text('unit', unit),
-  },
-  metaText: {
-    type: String,
-    default: text('metaText', metaText),
-  },
-  metaIcon: {
-    type: String,
-    default: select('metaIcon', ['', ...iconSpriteInfo.icons], metaIcon),
-  },
-  titleIcon: {
-    type: String,
-    default: select('titleIcon', ['', ...iconSpriteInfo.icons], titleIcon),
-  },
-  shouldAnimate: {
-    type: Boolean,
-    default: boolean('shouldAnimate', shouldAnimate),
-  },
-  animationDecimalPlaces: {
-    type: Number,
-    default: number('animationDecimalPlaces', animationDecimalPlaces),
-  },
+  variant,
+  title,
+  value,
+  unit,
+  metaText,
+  metaIcon,
+  titleIcon,
+  shouldAnimate,
+  animationDecimalPlaces,
 });
 
 const metaText = 'Super fast';
 const metaIcon = 'check-circle';
 const titleIcon = 'hourglass';
 
-documentedStoriesOf('charts/single-stat', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    props: generateProps(),
-    template,
-  }))
-  .add('with badge', () => ({
-    components,
-    props: generateProps({ metaText, metaIcon }),
-    template,
-  }))
-  .add('with meta icon', () => ({
-    components,
-    props: generateProps({ metaIcon }),
-    template,
-  }))
-  .add('with title icon', () => ({
-    components,
-    props: generateProps({ titleIcon }),
-    template,
-  }));
+const Template = (args, { argTypes }) => ({
+  components: {
+    GlSingleStat,
+  },
+  props: Object.keys(argTypes),
+  template: `
+    <gl-single-stat
+      :title="title"
+      :value="value"
+      :unit="unit"
+      :variant="variant"
+      :meta-text="metaText"
+      :meta-icon="metaIcon"
+      :title-icon="titleIcon"
+      :should-animate="shouldAnimate"
+      :animation-decimal-places="animationDecimalPlaces"
+    />`,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const WithBadge = Template.bind({});
+WithBadge.args = generateProps({ metaText, metaIcon });
+
+export const WithMetaIcon = Template.bind({});
+WithMetaIcon.args = generateProps({ metaIcon });
+
+export const WithTitleIcon = Template.bind({});
+WithTitleIcon.args = generateProps({ titleIcon });
+
+export default {
+  title: 'charts/single-stat',
+  component: GlSingleStat,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      options: Object.values(badgeVariantOptions),
+      control: {
+        type: 'select',
+      },
+    },
+    metaIcon: {
+      options: iconSpriteInfo.icons,
+      control: 'select',
+    },
+    titleIcon: {
+      options: iconSpriteInfo.icons,
+      control: 'select',
+    },
+    unit: {
+      control: 'text',
+    },
+  },
+};

package/src/components/regions/empty_state/empty_state.spec.js

@@ -148,6 +148,55 @@ describe('empty state component', () => {
     });
   });
 
+  describe('with different titles', () => {
+    it('should render title from prop', () => {
+      component = shallowMount(EmptyState, {
+        propsData: {
+          ...props,
+        },
+      });
+
+      const title = component.find('h1');
+      expect(title.text()).toBe(props.title);
+    });
+
+    it('should render title from slot', () => {
+      const slotTitle = 'Slotted title';
+
+      component = shallowMount(EmptyState, {
+        propsData: {
+          ...props,
+          title: null,
+        },
+        slots: {
+          title: `<strong id="slotted">${slotTitle}</strong>`,
+        },
+      });
+
+      const title = component.find('#slotted');
+      expect(title.text()).toBe(slotTitle);
+    });
+
+    it('should render a slotted title over a props title', () => {
+      const slotTitle = 'Slotted title';
+
+      component = shallowMount(EmptyState, {
+        propsData: {
+          ...props,
+        },
+        slots: {
+          title: `<strong id="slotted">${slotTitle}</strong>`,
+        },
+      });
+
+      const title = component.find('#slotted');
+      const propTitle = component.find('h1');
+
+      expect(title.text()).toBe(slotTitle);
+      expect(propTitle.exists()).toBe(false);
+    });
+  });
+
   describe('with different descriptions', () => {
     it('should render description from prop', () => {
       component = shallowMount(EmptyState, {

package/src/components/regions/empty_state/empty_state.vue

@@ -11,7 +11,8 @@ export default {
      */
     title: {
       type: String,
-      required: true,
+      required: false,
+      default: null,
     },
     /**
      * The illustration's URL.
@@ -112,13 +113,15 @@ export default {
     </div>
     <div :class="compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-max-w-full gl-m-auto'">
       <div class="gl-mx-auto gl-my-0" :class="{ 'gl-p-5': !compact }">
-        <h1
-          ref="title"
-          class="gl-font-size-h-display gl-line-height-36"
-          :class="compact ? 'h5' : 'h4'"
-        >
-          {{ title }}
-        </h1>
+        <!--
+            @slot Use this slot to customize the empty state's title area.
+            Overrides the `title` prop.
+          -->
+        <slot ref="title" name="title">
+          <h1 class="gl-font-size-h-display gl-line-height-36" :class="compact ? 'h5' : 'h4'">
+            {{ title }}
+          </h1>
+        </slot>
         <p v-if="description || $scopedSlots.description" ref="description" class="gl-mt-3">
           <!--
             @slot Use this slot to customize the empty state's description

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

@@ -1,32 +0,0 @@
-import SingleStatBadgeExample from './single_stat.badge.example';
-import SingleStatHoverExample from './single_stat.hover.example';
-import SingleStatIconExample from './single_stat.meta_icon.example';
-import SingleStatSimpleExample from './single_stat.simple.example';
-import SingleStatTitleIconExample from './single_stat.title_icon.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'simple',
-    name: 'Simple',
-    component: SingleStatSimpleExample
-  }, {
-    id: 'metaIcon',
-    name: 'Meta Icon',
-    component: SingleStatIconExample
-  }, {
-    id: 'badge',
-    name: 'Badge',
-    component: SingleStatBadgeExample
-  }, {
-    id: 'titleIcon',
-    name: 'Title Icon',
-    component: SingleStatTitleIconExample
-  }, {
-    id: 'hover',
-    name: 'Hover',
-    component: SingleStatHoverExample
-  }]
-}];
-
-export default index;

package/dist/components/charts/single_stat/examples/single_stat.badge.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('div',{staticClass:"row"},[_c('div',{staticClass:"col-sm-4"},[_c('gl-single-stat',{attrs:{"title":"Success stat","value":"100","variant":"success","meta-text":"passed","meta-icon":"status_success_solid"}})],1),_vm._v(" "),_c('div',{staticClass:"col-sm-4"},[_c('gl-single-stat',{attrs:{"title":"Warning stat","value":"1000","variant":"warning","meta-text":"warning","meta-icon":"status-alert"}})],1),_vm._v(" "),_c('div',{staticClass:"col-sm-4"},[_c('gl-single-stat',{attrs:{"title":"Danger stat","value":"100000","variant":"danger","meta-text":"failed","meta-icon":"status-failed"}})],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/charts/single_stat/examples/single_stat.hover.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('div',{staticClass:"row"},[_c('div',{staticClass:"col-sm-4"},[_c('gl-single-stat',{attrs:{"title":"Single stat","value":"100","tabindex":"0"}})],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/charts/single_stat/examples/single_stat.meta_icon.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('div',{staticClass:"row"},[_c('div',{staticClass:"col-sm-4"},[_c('gl-single-stat',{attrs:{"title":"Trend up","value":"100","variant":"success","meta-icon":"trend-up"}})],1),_vm._v(" "),_c('div',{staticClass:"col-sm-4"},[_c('gl-single-stat',{attrs:{"title":"Trend down","value":"100000","variant":"danger","meta-icon":"trend-down"}})],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/charts/single_stat/examples/single_stat.simple.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('div',{staticClass:"row"},[_c('div',{staticClass:"col-sm-4"},[_c('gl-single-stat',{attrs:{"title":"Single stat","value":"100"}})],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/charts/single_stat/examples/single_stat.title_icon.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('div',{staticClass:"row"},[_c('div',{staticClass:"col-sm-4"},[_c('gl-single-stat',{attrs:{"title":"Likes","value":"100,000","title-icon":"heart"}})],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/src/components/charts/single_stat/examples/index.js

@@ -1,38 +0,0 @@
-import SingleStatBadgeExample from './single_stat.badge.example.vue';
-import SingleStatHoverExample from './single_stat.hover.example.vue';
-import SingleStatIconExample from './single_stat.meta_icon.example.vue';
-import SingleStatSimpleExample from './single_stat.simple.example.vue';
-import SingleStatTitleIconExample from './single_stat.title_icon.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'simple',
-        name: 'Simple',
-        component: SingleStatSimpleExample,
-      },
-      {
-        id: 'metaIcon',
-        name: 'Meta Icon',
-        component: SingleStatIconExample,
-      },
-      {
-        id: 'badge',
-        name: 'Badge',
-        component: SingleStatBadgeExample,
-      },
-      {
-        id: 'titleIcon',
-        name: 'Title Icon',
-        component: SingleStatTitleIconExample,
-      },
-      {
-        id: 'hover',
-        name: 'Hover',
-        component: SingleStatHoverExample,
-      },
-    ],
-  },
-];

package/src/components/charts/single_stat/examples/single_stat.badge.example.vue

@@ -1,31 +0,0 @@
-<template>
-  <div class="row">
-    <div class="col-sm-4">
-      <gl-single-stat
-        title="Success stat"
-        value="100"
-        variant="success"
-        meta-text="passed"
-        meta-icon="status_success_solid"
-      />
-    </div>
-    <div class="col-sm-4">
-      <gl-single-stat
-        title="Warning stat"
-        value="1000"
-        variant="warning"
-        meta-text="warning"
-        meta-icon="status-alert"
-      />
-    </div>
-    <div class="col-sm-4">
-      <gl-single-stat
-        title="Danger stat"
-        value="100000"
-        variant="danger"
-        meta-text="failed"
-        meta-icon="status-failed"
-      />
-    </div>
-  </div>
-</template>

package/src/components/charts/single_stat/examples/single_stat.hover.example.vue

@@ -1,7 +0,0 @@
-<template>
-  <div class="row">
-    <div class="col-sm-4">
-      <gl-single-stat title="Single stat" value="100" tabindex="0" />
-    </div>
-  </div>
-</template>

package/src/components/charts/single_stat/examples/single_stat.meta_icon.example.vue

@@ -1,10 +0,0 @@
-<template>
-  <div class="row">
-    <div class="col-sm-4">
-      <gl-single-stat title="Trend up" value="100" variant="success" meta-icon="trend-up" />
-    </div>
-    <div class="col-sm-4">
-      <gl-single-stat title="Trend down" value="100000" variant="danger" meta-icon="trend-down" />
-    </div>
-  </div>
-</template>

package/src/components/charts/single_stat/examples/single_stat.simple.example.vue

@@ -1,7 +0,0 @@
-<template>
-  <div class="row">
-    <div class="col-sm-4">
-      <gl-single-stat title="Single stat" value="100" />
-    </div>
-  </div>
-</template>

package/src/components/charts/single_stat/examples/single_stat.title_icon.example.vue

@@ -1,7 +0,0 @@
-<template>
-  <div class="row">
-    <div class="col-sm-4">
-      <gl-single-stat title="Likes" value="100,000" title-icon="heart" />
-    </div>
-  </div>
-</template>