@gitlab/ui 32.45.0 → 32.45.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [32.45.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.45.0...v32.45.1) (2021-12-10)
+
+
+### Bug Fixes
+
+* Guard against nonexistent localStorage ([248f7b7](https://gitlab.com/gitlab-org/gitlab-ui/commit/248f7b7c662a8011c27c05dc14a6aaca4d752e33))
+
 # [32.45.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.44.0...v32.45.0) (2021-12-10)
 
 

package/config.js

@@ -11,10 +11,22 @@ const tooltipGlobalConfig = {
   delay: tooltipDelay,
 };
 
-const glTooltipDelay = localStorage.getItem('gl-tooltip-delay');
+/**
+ * Guard against nonexistent localStorage,
+ * or corrupted localStorage
+ *
+ * localStorage access is not possible in certain environments like
+ * - in iframe usage in Chrome if embedded on another domain
+ * - tests / node
+ */
+try {
+  const glTooltipDelay = localStorage.getItem('gl-tooltip-delay');
 
-if (glTooltipDelay) {
-  tooltipGlobalConfig.delay = JSON.parse(glTooltipDelay);
+  if (glTooltipDelay) {
+    tooltipGlobalConfig.delay = JSON.parse(glTooltipDelay);
+  }
+} catch (e) {
+  // localStorage doesn't exist (or the value is not properly formatted)
 }
 
 const setConfigs = () => {

package/dist/components/base/label/label.documentation.js

@@ -1,15 +1,8 @@
-import examples from './examples';
+import description from './label';
 
 var label_documentation = {
   followsDesignSystem: true,
-  examples,
-  events: [{
-    event: 'click',
-    description: 'Emitted when label is clicked'
-  }, {
-    event: 'close',
-    description: 'Emitted when x is clicked'
-  }]
+  description
 };
 
 export default label_documentation;

package/dist/components/base/label/label.js

@@ -101,6 +101,28 @@ var script = {
       this.splitScopedLabelIndex = this.title.lastIndexOf('::');
     }
 
+  },
+  methods: {
+    onClick(e) {
+      /**
+       * Emitted when label is clicked
+       *
+       * @event click
+       * @type {object}
+       */
+      this.$emit('click', e);
+    },
+
+    onClose(e) {
+      /**
+       * Emitted when x is clicked
+       *
+       * @event close
+       * @type {object}
+       */
+      this.$emit('close', e);
+    }
+
   }
 };
 
@@ -108,7 +130,7 @@ var 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('span',_vm._b({ref:"labelTitle",staticClass:"gl-label",class:_vm.cssClasses,style:(_vm.cssVariables),on:{"click":function($event){return _vm.$emit('click', $event)}}},'span',_vm.$attrs,false),[_c('gl-link',{staticClass:"gl-label-link",attrs:{"href":_vm.target}},[_c('span',{staticClass:"gl-label-text"},[_vm._v("\n      "+_vm._s(_vm.scopedKey)+"\n    ")]),_vm._v(" "),(_vm.scoped && _vm.scopedValue)?_c('span',{staticClass:"gl-label-text-scoped"},[_vm._v("\n      "+_vm._s(_vm.scopedValue)+"\n    ")]):_vm._e()]),_vm._v(" "),(_vm.showCloseButton)?_c('close-button',{staticClass:"gl-label-close gl-p-0!",attrs:{"label":"Remove label","variant":"reset","disabled":_vm.disabled},on:{"click":function($event){return _vm.$emit('close', $event)}}}):_vm._e(),_vm._v(" "),(_vm.description)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.$refs.labelTitle; },"placement":_vm.tooltipPlacement,"boundary":"viewport"}},[(_vm.scoped)?_c('span',{staticClass:"gl-label-tooltip-title"},[_vm._v("Scoped label")]):_vm._e(),_vm._v("\n    "+_vm._s(_vm.description)+"\n  ")]):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',_vm._b({ref:"labelTitle",staticClass:"gl-label",class:_vm.cssClasses,style:(_vm.cssVariables),on:{"click":_vm.onClick}},'span',_vm.$attrs,false),[_c('gl-link',{staticClass:"gl-label-link",attrs:{"href":_vm.target}},[_c('span',{staticClass:"gl-label-text"},[_vm._v("\n      "+_vm._s(_vm.scopedKey)+"\n    ")]),_vm._v(" "),(_vm.scoped && _vm.scopedValue)?_c('span',{staticClass:"gl-label-text-scoped"},[_vm._v("\n      "+_vm._s(_vm.scopedValue)+"\n    ")]):_vm._e()]),_vm._v(" "),(_vm.showCloseButton)?_c('close-button',{staticClass:"gl-label-close gl-p-0!",attrs:{"label":"Remove label","variant":"reset","disabled":_vm.disabled},on:{"click":_vm.onClose}}):_vm._e(),_vm._v(" "),(_vm.description)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.$refs.labelTitle; },"placement":_vm.tooltipPlacement,"boundary":"viewport"}},[(_vm.scoped)?_c('span',{staticClass:"gl-label-tooltip-title"},[_vm._v("Scoped label")]):_vm._e(),_vm._v("\n    "+_vm._s(_vm.description)+"\n  ")]):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/skeleton_loader/skeleton_loader.documentation.js

@@ -1,6 +1,4 @@
-import examples from './examples';
-
-var skeleton_loader = "## Usage\n\nSkeleton loaders are to be used when pages or sections can be progressively populated with content,\nsuch as text and images, as they become available. Generally speaking the first batch of content\nwill be the lightest to load and is followed by secondary and tertiary content batches. Each loading\nstep will add in more detail to the page until no skeleton loaders are present anymore. Content\nshould replace skeleton objects immediately when the data is available.\n\nThe skeleton loader component accepts shapes which in return will create a skeleton state with a\nloading animation. Any skeleton state components should be created with\n`<gl-skeleton-loader></gl-skeleton-loader>`. If no shape is passed via the slot the default skeleton\nwill be used. See \"Default\" and \"Default With Custom Props\" examples.\n\n## Progressive Loading\n\nDetermine if progressive loading is available, if it is break apart the skeleton to load data as it\nbecomes readily available. If progessive loading is not available, replace the entire skeleton when\nthe data is available.\n\n## Under the hood\n\nSkeleton Loader is a port of [vue-content-loader](https://github.com/egoist/vue-content-loader).\nSome changes have been made to the code to better suit our codebase, such as removing props and\nrefactoring into a SFC. Please take a look at their documentation and a useful [UI tool](http://danilowoz.com/create-vue-content-loader/)\nfor seeing the code output for `svg` shapes.\n";
+var skeleton_loader = "Skeleton loaders are to be used when pages or sections can be progressively populated with content,\nsuch as text and images, as they become available. Generally speaking the first batch of content\nwill be the lightest to load and is followed by secondary and tertiary content batches. Each loading\nstep will add in more detail to the page until no skeleton loaders are present anymore. Content\nshould replace skeleton objects immediately when the data is available.\n\nThe skeleton loader component accepts shapes which in return will create a skeleton state with a\nloading animation. Any skeleton state components should be created with\n`<gl-skeleton-loader></gl-skeleton-loader>`. If no shape is passed via the slot the default skeleton\nwill be used. See \"Default\" and \"Default With Custom Props\" examples.\n\n## Progressive Loading\n\nDetermine if progressive loading is available, if it is break apart the skeleton to load data as it\nbecomes readily available. If progessive loading is not available, replace the entire skeleton when\nthe data is available.\n\n## Under the hood\n\nSkeleton Loader is a port of [vue-content-loader](https://github.com/egoist/vue-content-loader).\nSome changes have been made to the code to better suit our codebase, such as removing props and\nrefactoring into a SFC. Please take a look at their documentation and a useful [UI tool](http://danilowoz.com/create-vue-content-loader/)\nfor seeing the code output for `svg` shapes.\n";
 
 var description = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -9,31 +7,7 @@ var description = /*#__PURE__*/Object.freeze({
 
 var skeleton_loader_documentation = {
   followsDesignSystem: true,
-  description,
-  examples,
-  propsInfo: {
-    width: {
-      additionalInfo: 'It will be set in the viewbox attr in the <svg />. Defaults to 400 when skeleton is passed via the slot. Defaults to 235 when default skeleton is used'
-    },
-    height: {
-      additionalInfo: 'It will be set in the viewbox attr in the <svg />. Defaults to 130 when skeleton is passed via the slot. Defaults to the combined height of the lines when default skeleton is used'
-    },
-    uniqueKey: {
-      additionalInfo: 'Defaults to unique id'
-    },
-    preserveAspectRatio: {
-      additionalInfo: 'Aspect ratio option of <svg/>'
-    },
-    baseUrl: {
-      additionalInfo: `Required if you're using <base url="/" /> in your <head />. Defaults to an empty string. This prop is common used as: <gl-skeleton-loader :base-url="$route.fullPath" /> which will fill the SVG attribute with the relative path.`
-    },
-    lines: {
-      additionalInfo: 'Number of lines to show when using the default skeleton'
-    },
-    equalWidthLines: {
-      additionalInfo: 'If the default skeleton lines should all be the same width'
-    }
-  }
+  description
 };
 
 export default skeleton_loader_documentation;

package/dist/components/base/skeleton_loader/skeleton_loader.js

@@ -12,36 +12,66 @@ var script = {
   name: 'GlSkeletonLoader',
   functional: true,
   props: {
+    /**
+     * It will be set in the viewbox attr in the <svg />.
+     * Defaults to 400 when skeleton is passed via the slot. Defaults to 235 when default skeleton is used
+     */
     width: {
       type: Number,
       default: null,
       required: false
     },
+
+    /**
+     * It will be set in the viewbox attr in the <svg />. Defaults to 130 when skeleton is passed via the slot.
+     * Defaults to the combined height of the lines when default skeleton is used
+     */
     height: {
       type: Number,
       default: null,
       required: false
     },
+
+    /**
+     * Aspect ratio option of <svg/>
+     */
     preserveAspectRatio: {
       type: String,
       default: 'xMidYMid meet',
       required: false
     },
+
+    /**
+     * Required if you're using <base url="/" /> in your <head />. Defaults to an empty string.
+     * This prop is common used as: <gl-skeleton-loader :base-url="$route.fullPath" /> which will fill the SVG attribute with the relative path.
+     */
     baseUrl: {
       type: String,
       default: '',
       required: false
     },
+
+    /**
+     * Defaults to unique id
+     */
     uniqueKey: {
       type: String,
       default: () => uid(),
       required: false
     },
+
+    /**
+     * Number of lines to show when using the default skeleton
+     */
     lines: {
       type: Number,
       default: 3,
       required: false
     },
+
+    /**
+     * If the default skeleton lines should all be the same width
+     */
     equalWidthLines: {
       type: Boolean,
       default: false,

package/dist/config.js

@@ -9,10 +9,22 @@ const tooltipGlobalConfig = {
   customClass: 'gl-tooltip',
   delay: tooltipDelay
 };
-const glTooltipDelay = localStorage.getItem('gl-tooltip-delay');
+/**
+ * Guard against nonexistent localStorage,
+ * or corrupted localStorage
+ *
+ * localStorage access is not possible in certain environments like
+ * - in iframe usage in Chrome if embedded on another domain
+ * - tests / node
+ */
 
-if (glTooltipDelay) {
-  tooltipGlobalConfig.delay = JSON.parse(glTooltipDelay);
+try {
+  const glTooltipDelay = localStorage.getItem('gl-tooltip-delay');
+
+  if (glTooltipDelay) {
+    tooltipGlobalConfig.delay = JSON.parse(glTooltipDelay);
+  }
+} catch (e) {// localStorage doesn't exist (or the value is not properly formatted)
 }
 
 const setConfigs = () => {

package/documentation/documented_stories.js

@@ -100,6 +100,8 @@ export const setupStorybookReadme = () =>
         'GlAvatar',
         'GlAvatarLink',
         'GlPagination',
+        'GlSkeletonLoader',
+        'GlLabel',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

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

package/src/components/base/label/label.documentation.js

@@ -1,16 +1,6 @@
-import examples from './examples';
+import description from './label.vue';
 
 export default {
   followsDesignSystem: true,
-  examples,
-  events: [
-    {
-      event: 'click',
-      description: 'Emitted when label is clicked',
-    },
-    {
-      event: 'close',
-      description: 'Emitted when x is clicked',
-    },
-  ],
+  description,
 };

package/src/components/base/label/label.md

@@ -1,15 +1,10 @@
-# Label
-
-<!-- STORY -->
-## Usage
-
 Labels are editable objects that allow users to manually categorize other objects, like issues,
 merge requests, and epics. They have a name, description, and a customizable background color.
 They provide a quick way to recognize which categories the labeled object belongs to.
 
 ## Using the component
 
-~~~js
+```js
 <gl-label
   background-color="#D9C2EE"
   title="Label content"
@@ -18,4 +13,4 @@ They provide a quick way to recognize which categories the labeled object belong
   tooltipPlacement="top"
   target="http://some.url"
 />
-~~~
+```

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

@@ -1,110 +1,84 @@
-import { withKnobs, text, color, select, boolean } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlLabel } from '../../../../index';
 import { labelSizeOptions, tooltipPlacements } from '../../../utils/constants';
 import readme from './label.md';
 
-const components = {
-  GlLabel,
-};
+const template = `
+  <div class="gl-display-flex">
+    <gl-label
+      :background-color="backgroundColor"
+      :size="size"
+      :title="title"
+      :description="description"
+      :tooltip-placement="tooltipPlacement"
+      :target="target"
+      :scoped="scoped"
+      :show-close-button="showCloseButton"
+      :disabled="disabled"
+    />
+  </div>`;
+
+const Template = (args, { argTypes }) => ({
+  components: { GlLabel },
+  props: Object.keys(argTypes),
+  template,
+});
 
 const generateProps = ({
   title = 'Label title',
   size = labelSizeOptions.default,
   tooltipPlacement = tooltipPlacements.top,
   scoped = false,
+  description = '',
+  target = '#',
+  backgroundColor = '#D9C2EE',
   showCloseButton = false,
-} = {}) => {
-  const props = {
-    backgroundColor: {
-      default: color('Background color', '#D9C2EE'),
-    },
-    title: {
-      default: text('Label title', title),
+  disabled = false,
+} = {}) => ({
+  backgroundColor,
+  title,
+  description,
+  size,
+  tooltipPlacement,
+  target,
+  scoped,
+  showCloseButton,
+  disabled,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const Scoped = Template.bind({});
+Scoped.args = generateProps({ title: 'scoped::label', scoped: true });
+
+export const WithCloseButton = Template.bind({});
+WithCloseButton.args = generateProps({ showCloseButton: true });
+
+export default {
+  title: 'base/label',
+  component: GlLabel,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
     },
-    description: {
-      default: text('Label description', ''),
+  },
+  argTypes: {
+    backgroundColor: {
+      control: {
+        type: 'color',
+      },
     },
     size: {
-      type: String,
-      default: select('Size', labelSizeOptions, size),
+      options: labelSizeOptions,
     },
     tooltipPlacement: {
-      type: String,
-      default: select('Tooltip Placement', tooltipPlacements, tooltipPlacement),
-    },
-    target: {
-      default: text('Link to label target', '#'),
-    },
-    scoped: {
-      default: boolean('Label is scoped', scoped),
-    },
-    showCloseButton: {
-      default: boolean('Show close button', showCloseButton),
+      options: tooltipPlacements,
+      control: {
+        type: 'select',
+      },
     },
-    disabled: {
-      default: boolean('Close button disabled', false),
-    },
-  };
-
-  return props;
+  },
 };
-
-documentedStoriesOf('base/label', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components,
-    template: `
-      <div class="gl-display-flex">
-      <gl-label
-          :background-color="backgroundColor"
-          :size="size"
-          :title="title"
-          :description="description"
-          :tooltip-placement="tooltipPlacement"
-          :target="target"
-          :scoped="scoped"
-          :show-close-button="showCloseButton"
-          :disabled="disabled"
-      />
-      </div>`,
-  }))
-  .add('scoped', () => ({
-    props: generateProps({ title: 'scoped::label', scoped: true }),
-    components,
-    template: `
-      <div class="gl-display-flex">
-      <gl-label
-          :background-color="backgroundColor"
-          :size="size"
-          :title="title"
-          :description="description"
-          :tooltip-placement="tooltipPlacement"
-          :target="target"
-          :scoped="scoped"
-          :show-close-button="showCloseButton"
-          :disabled="disabled"
-      />
-      </div>
-    `,
-  }))
-  .add('with close button', () => ({
-    props: generateProps({ showCloseButton: true }),
-    components,
-    template: `
-      <div class="gl-display-flex">
-      <gl-label
-          :background-color="backgroundColor"
-          :size="size"
-          :title="title"
-          :description="description"
-          :tooltip-placement="tooltipPlacement"
-          :target="target"
-          :scoped="scoped"
-          :show-close-button="showCloseButton"
-          :disabled="disabled"
-      />
-      </div>
-    `,
-  }));

package/src/components/base/label/label.vue

@@ -96,6 +96,26 @@ export default {
       this.splitScopedLabelIndex = this.title.lastIndexOf('::');
     },
   },
+  methods: {
+    onClick(e) {
+      /**
+       * Emitted when label is clicked
+       *
+       * @event click
+       * @type {object}
+       */
+      this.$emit('click', e);
+    },
+    onClose(e) {
+      /**
+       * Emitted when x is clicked
+       *
+       * @event close
+       * @type {object}
+       */
+      this.$emit('close', e);
+    },
+  },
 };
 </script>
 
@@ -106,7 +126,7 @@ export default {
     :class="cssClasses"
     :style="cssVariables"
     v-bind="$attrs"
-    @click="$emit('click', $event)"
+    @click="onClick"
   >
     <gl-link :href="target" class="gl-label-link">
       <span class="gl-label-text">
@@ -122,7 +142,7 @@ export default {
       label="Remove label"
       variant="reset"
       :disabled="disabled"
-      @click="$emit('close', $event)"
+      @click="onClose"
     />
     <gl-tooltip
       v-if="description"

package/src/components/base/skeleton_loader/skeleton_loader.documentation.js

@@ -1,33 +1,6 @@
-import examples from './examples';
 import * as description from './skeleton_loader.md';
 
 export default {
   followsDesignSystem: true,
   description,
-  examples,
-  propsInfo: {
-    width: {
-      additionalInfo:
-        'It will be set in the viewbox attr in the <svg />. Defaults to 400 when skeleton is passed via the slot. Defaults to 235 when default skeleton is used',
-    },
-    height: {
-      additionalInfo:
-        'It will be set in the viewbox attr in the <svg />. Defaults to 130 when skeleton is passed via the slot. Defaults to the combined height of the lines when default skeleton is used',
-    },
-    uniqueKey: {
-      additionalInfo: 'Defaults to unique id',
-    },
-    preserveAspectRatio: {
-      additionalInfo: 'Aspect ratio option of <svg/>',
-    },
-    baseUrl: {
-      additionalInfo: `Required if you're using <base url="/" /> in your <head />. Defaults to an empty string. This prop is common used as: <gl-skeleton-loader :base-url="$route.fullPath" /> which will fill the SVG attribute with the relative path.`,
-    },
-    lines: {
-      additionalInfo: 'Number of lines to show when using the default skeleton',
-    },
-    equalWidthLines: {
-      additionalInfo: 'If the default skeleton lines should all be the same width',
-    },
-  },
 };

package/src/components/base/skeleton_loader/skeleton_loader.md

@@ -1,5 +1,3 @@
-## Usage
-
 Skeleton loaders are to be used when pages or sections can be progressively populated with content,
 such as text and images, as they become available. Generally speaking the first batch of content
 will be the lightest to load and is followed by secondary and tertiary content batches. Each loading

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

@@ -1,14 +1,9 @@
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlSkeletonLoader } from '../../../../index';
 import readme from './skeleton_loader.md';
 
-const components = {
-  GlSkeletonLoader,
-};
-
-documentedStoriesOf('base/skeleton-loader', readme).add('default', () => ({
-  props: {},
-  components,
+const Template = (args) => ({
+  components: { GlSkeletonLoader },
+  props: Object.keys(args),
   template: `
   <div style="background: #fff; border: 1px solid #dfdfdf; box-shadow: 0 1px 2px rgba(0,0,0,0.1); width: 359px; height: 135px; padding: 1rem; border-radius: 0.25rem;">
     <div style="width: 327px; height: 102px;">
@@ -24,4 +19,23 @@ documentedStoriesOf('base/skeleton-loader', readme).add('default', () => ({
       </gl-skeleton-loader>
     </div>
   </div>`,
-}));
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export default {
+  title: 'base/skeleton-loader',
+  component: GlSkeletonLoader,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+    controls: {
+      disable: true,
+    },
+  },
+};

package/src/components/base/skeleton_loader/skeleton_loader.vue

@@ -13,36 +13,60 @@ export default {
   name: 'GlSkeletonLoader',
   functional: true,
   props: {
+    /**
+     * It will be set in the viewbox attr in the <svg />.
+     * Defaults to 400 when skeleton is passed via the slot. Defaults to 235 when default skeleton is used
+     */
     width: {
       type: Number,
       default: null,
       required: false,
     },
+    /**
+     * It will be set in the viewbox attr in the <svg />. Defaults to 130 when skeleton is passed via the slot.
+     * Defaults to the combined height of the lines when default skeleton is used
+     */
     height: {
       type: Number,
       default: null,
       required: false,
     },
+    /**
+     * Aspect ratio option of <svg/>
+     */
     preserveAspectRatio: {
       type: String,
       default: 'xMidYMid meet',
       required: false,
     },
+    /**
+     * Required if you're using <base url="/" /> in your <head />. Defaults to an empty string.
+     * This prop is common used as: <gl-skeleton-loader :base-url="$route.fullPath" /> which will fill the SVG attribute with the relative path.
+     */
     baseUrl: {
       type: String,
       default: '',
       required: false,
     },
+    /**
+     * Defaults to unique id
+     */
     uniqueKey: {
       type: String,
       default: () => uid(),
       required: false,
     },
+    /**
+     * Number of lines to show when using the default skeleton
+     */
     lines: {
       type: Number,
       default: 3,
       required: false,
     },
+    /**
+     * If the default skeleton lines should all be the same width
+     */
     equalWidthLines: {
       type: Boolean,
       default: false,

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

@@ -1,19 +0,0 @@
-import LabelBasicExample from './label.basic.example';
-import LabelScopedExample from './label.scoped.example';
-
-var index = [{
-  name: 'Label',
-  items: [{
-    id: 'label-basic',
-    name: 'default',
-    description: 'Basic Label',
-    component: LabelBasicExample
-  }, {
-    id: 'label-scoped',
-    name: 'scoped',
-    description: 'Scoped::Label',
-    component: LabelScopedExample
-  }]
-}];
-
-export default index;

package/dist/components/base/label/examples/label.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-label',{attrs:{"target":"#","background-color":"#D9C2EE","title":"Basic Label"}})};
-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/label/examples/label.scoped.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-label',{attrs:{"target":"#","background-color":"#D9C2EE","title":"Basic::Label","scoped":""}})};
-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/skeleton_loader/examples/ci_header_skeleton.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('div',{staticStyle:{"width":"575px","height":"24px"}},[_c('gl-skeleton-loader',{attrs:{"width":575,"height":24}},[_c('rect',{attrs:{"width":"86","height":"24","rx":"4"}}),_vm._v(" "),_c('rect',{attrs:{"x":"94","y":"4","width":"300","height":"16","rx":"4"}}),_vm._v(" "),_c('rect',{attrs:{"x":"430","y":"4","width":"145","height":"16","rx":"4"}}),_vm._v(" "),_c('circle',{attrs:{"cx":"414","cy":"12","r":"12"}})])],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/skeleton_loader/examples/default_skeleton.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-skeleton-loader')};
-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/skeleton_loader/examples/default_skeleton_custom_props.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-skeleton-loader',{attrs:{"preserve-aspect-ratio":"none","equal-width-lines":"","lines":5,"width":600,"height":66}})};
-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/skeleton_loader/examples/index.js

@@ -1,37 +0,0 @@
-import CiHeaderSkeletonBasicExample from './ci_header_skeleton.basic.example';
-import DefaultSkeletonBasicExample from './default_skeleton.basic.example';
-import DefaultSkeletonCustomPropsBasicExample from './default_skeleton_custom_props.basic.example';
-import IssueCardSkeletonBasicExample from './issue_card_skeleton.basic.example';
-import JobLogSkeletonBasicExample from './job_log_skeleton.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'default-skeleton-basic',
-    name: 'Default',
-    description: 'Default Skeleton',
-    component: DefaultSkeletonBasicExample
-  }, {
-    id: 'default-skeleton-custom-width-basic',
-    name: 'Default With Custom Props',
-    description: 'Default Skeleton With `preserve-aspect-ratio`, `lines`, `equal-width-lines`, `width` and `height` props set',
-    component: DefaultSkeletonCustomPropsBasicExample
-  }, {
-    id: 'issue-card-skeleton-basic',
-    name: 'Issue Board Card',
-    description: 'Basic Issue Card Skeleton',
-    component: IssueCardSkeletonBasicExample
-  }, {
-    id: 'job-log-skeleton-basic',
-    name: 'Job Log',
-    description: 'Basic Job Log Skeleton',
-    component: JobLogSkeletonBasicExample
-  }, {
-    id: 'ci-header-skeleton-basic',
-    name: 'CI Header',
-    description: 'Basic CI Header Skeleton',
-    component: CiHeaderSkeletonBasicExample
-  }]
-}];
-
-export default index;

package/dist/components/base/skeleton_loader/examples/issue_card_skeleton.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('div',{staticStyle:{"background":"#fff","border":"1px solid #dfdfdf","box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)","width":"359px","height":"135px","padding":"1rem","border-radius":"0.25rem"}},[_c('div',{staticStyle:{"width":"327px","height":"102px"}},[_c('gl-skeleton-loader',{attrs:{"width":327,"height":102}},[_c('rect',{attrs:{"width":"276","height":"16","rx":"4"}}),_vm._v(" "),_c('rect',{attrs:{"y":"18","width":"237","height":"16","rx":"4"}}),_vm._v(" "),_c('rect',{attrs:{"y":"42","width":"118","height":"16","rx":"8"}}),_vm._v(" "),_c('rect',{attrs:{"x":"122","y":"42","width":"130","height":"16","rx":"8"}}),_vm._v(" "),_c('rect',{attrs:{"y":"62","width":"106","height":"16","rx":"8"}}),_vm._v(" "),_c('rect',{attrs:{"x":"110","y":"62","width":"56","height":"16","rx":"8"}}),_vm._v(" "),_c('rect',{attrs:{"x":"256","y":"42","width":"71","height":"16","rx":"8"}}),_vm._v(" "),_c('rect',{attrs:{"y":"86","width":"38","height":"16","rx":"4"}})])],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/skeleton_loader/examples/job_log_skeleton.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('div',{staticStyle:{"background":"#000","padding":"16px","border-radius":"0.25rem","width":"865px","height":"175px"}},[_c('div',{staticStyle:{"width":"830px","height":"113px"}},[_c('gl-skeleton-loader',{attrs:{"width":830,"height":113}},[_c('rect',{attrs:{"width":"540","height":"16","rx":"4"}}),_vm._v(" "),_c('rect',{attrs:{"y":"49","width":"701","height":"16","rx":"4"}}),_vm._v(" "),_c('rect',{attrs:{"y":"24","width":"830","height":"16","rx":"4"}}),_vm._v(" "),_c('rect',{attrs:{"y":"73","width":"540","height":"16","rx":"4"}}),_vm._v(" "),_c('rect',{attrs:{"y":"97","width":"639","height":"16","rx":"4"}})])],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/base/label/examples/index.js

@@ -1,22 +0,0 @@
-import LabelBasicExample from './label.basic.example.vue';
-import LabelScopedExample from './label.scoped.example.vue';
-
-export default [
-  {
-    name: 'Label',
-    items: [
-      {
-        id: 'label-basic',
-        name: 'default',
-        description: 'Basic Label',
-        component: LabelBasicExample,
-      },
-      {
-        id: 'label-scoped',
-        name: 'scoped',
-        description: 'Scoped::Label',
-        component: LabelScopedExample,
-      },
-    ],
-  },
-];

package/src/components/base/label/examples/label.basic.example.vue

@@ -1,3 +0,0 @@
-<template>
-  <gl-label target="#" background-color="#D9C2EE" title="Basic Label" />
-</template>

package/src/components/base/label/examples/label.scoped.example.vue

@@ -1,3 +0,0 @@
-<template>
-  <gl-label target="#" background-color="#D9C2EE" title="Basic::Label" scoped />
-</template>

package/src/components/base/skeleton_loader/examples/ci_header_skeleton.basic.example.vue

@@ -1,10 +0,0 @@
-<template>
-  <div style="width: 575px; height: 24px">
-    <gl-skeleton-loader :width="575" :height="24">
-      <rect width="86" height="24" rx="4" />
-      <rect x="94" y="4" width="300" height="16" rx="4" />
-      <rect x="430" y="4" width="145" height="16" rx="4" />
-      <circle cx="414" cy="12" r="12" />
-    </gl-skeleton-loader>
-  </div>
-</template>

package/src/components/base/skeleton_loader/examples/default_skeleton.basic.example.vue

@@ -1,3 +0,0 @@
-<template>
-  <gl-skeleton-loader />
-</template>

package/src/components/base/skeleton_loader/examples/default_skeleton_custom_props.basic.example.vue

@@ -1,9 +0,0 @@
-<template>
-  <gl-skeleton-loader
-    preserve-aspect-ratio="none"
-    equal-width-lines
-    :lines="5"
-    :width="600"
-    :height="66"
-  />
-</template>

package/src/components/base/skeleton_loader/examples/index.js

@@ -1,44 +0,0 @@
-import CiHeaderSkeletonBasicExample from './ci_header_skeleton.basic.example.vue';
-import DefaultSkeletonBasicExample from './default_skeleton.basic.example.vue';
-import DefaultSkeletonCustomPropsBasicExample from './default_skeleton_custom_props.basic.example.vue';
-import IssueCardSkeletonBasicExample from './issue_card_skeleton.basic.example.vue';
-import JobLogSkeletonBasicExample from './job_log_skeleton.basic.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'default-skeleton-basic',
-        name: 'Default',
-        description: 'Default Skeleton',
-        component: DefaultSkeletonBasicExample,
-      },
-      {
-        id: 'default-skeleton-custom-width-basic',
-        name: 'Default With Custom Props',
-        description:
-          'Default Skeleton With `preserve-aspect-ratio`, `lines`, `equal-width-lines`, `width` and `height` props set',
-        component: DefaultSkeletonCustomPropsBasicExample,
-      },
-      {
-        id: 'issue-card-skeleton-basic',
-        name: 'Issue Board Card',
-        description: 'Basic Issue Card Skeleton',
-        component: IssueCardSkeletonBasicExample,
-      },
-      {
-        id: 'job-log-skeleton-basic',
-        name: 'Job Log',
-        description: 'Basic Job Log Skeleton',
-        component: JobLogSkeletonBasicExample,
-      },
-      {
-        id: 'ci-header-skeleton-basic',
-        name: 'CI Header',
-        description: 'Basic CI Header Skeleton',
-        component: CiHeaderSkeletonBasicExample,
-      },
-    ],
-  },
-];

package/src/components/base/skeleton_loader/examples/issue_card_skeleton.basic.example.vue

@@ -1,26 +0,0 @@
-<template>
-  <div
-    style="
-      background: #fff;
-      border: 1px solid #dfdfdf;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-      width: 359px;
-      height: 135px;
-      padding: 1rem;
-      border-radius: 0.25rem;
-    "
-  >
-    <div style="width: 327px; height: 102px">
-      <gl-skeleton-loader :width="327" :height="102">
-        <rect width="276" height="16" rx="4" />
-        <rect y="18" width="237" height="16" rx="4" />
-        <rect y="42" width="118" height="16" rx="8" />
-        <rect x="122" y="42" width="130" height="16" rx="8" />
-        <rect y="62" width="106" height="16" rx="8" />
-        <rect x="110" y="62" width="56" height="16" rx="8" />
-        <rect x="256" y="42" width="71" height="16" rx="8" />
-        <rect y="86" width="38" height="16" rx="4" />
-      </gl-skeleton-loader>
-    </div>
-  </div>
-</template>

package/src/components/base/skeleton_loader/examples/job_log_skeleton.basic.example.vue

@@ -1,13 +0,0 @@
-<template>
-  <div style="background: #000; padding: 16px; border-radius: 0.25rem; width: 865px; height: 175px">
-    <div style="width: 830px; height: 113px">
-      <gl-skeleton-loader :width="830" :height="113">
-        <rect width="540" height="16" rx="4" />
-        <rect y="49" width="701" height="16" rx="4" />
-        <rect y="24" width="830" height="16" rx="4" />
-        <rect y="73" width="540" height="16" rx="4" />
-        <rect y="97" width="639" height="16" rx="4" />
-      </gl-skeleton-loader>
-    </div>
-  </div>
-</template>