@gitlab/ui
Version:
GitLab UI Components
103 lines (92 loc) • 4.22 kB
JavaScript
import uniqueId from 'lodash/uniqueId';
import GlBadge from '../../base/badge/badge';
import GlLink from '../../base/link/link';
import GlPopover from '../../base/popover/popover';
import GlSprintf from '../../utilities/sprintf/sprintf';
import { badgeTypeValidator } from './constants';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
const i18n = {
experiment: {
BADGE: 'Experiment',
HELP_PAGE_URL: 'https://docs.gitlab.com/ee/policy/development_stages_support.html#experiment',
POPOVER_TITLE: "What's an experiment?",
POPOVER_CONTENT: 'An %{linkStart}experiment%{linkEnd} is not yet production-ready, but is released for initial testing and feedback during development.%{line-breakStart}Experiments:%{line-breakEnd} %{bullets}',
POPOVER_BULLETS: ['Might be unstable or cause data loss.', 'Are not supported and might not be documented.', 'Could be changed or removed at any time.']
},
beta: {
BADGE: 'Beta',
HELP_PAGE_URL: 'https://docs.gitlab.com/ee/policy/development_stages_support.html#beta',
POPOVER_TITLE: "What's a beta?",
POPOVER_CONTENT: "A %{linkStart}beta%{linkEnd} feature is not yet production-ready, but is ready for testing and unlikely to change significantly before it's released.%{line-breakStart}Beta features:%{line-breakEnd} %{bullets}",
POPOVER_BULLETS: ['Have a low risk of data loss, but might still be unstable.', 'Are supported on a commercially-reasonable effort basis.', 'Have a near complete user experience.']
}
};
var script = {
name: 'GlExperimentBadge',
components: {
GlBadge,
GlPopover,
GlSprintf,
GlLink
},
props: {
/**
* The placement of the popover in relation to the button.
*/
popoverPlacement: {
type: String,
required: false,
default: 'bottom'
},
/**
* The type of the badge. Can be 'experiment' or 'beta'.
*/
type: {
type: String,
required: false,
default: 'experiment',
validator: badgeTypeValidator
}
},
computed: {
activeType() {
return i18n[this.type];
}
},
created() {
this.triggerId = uniqueId('experiment-badge-');
}
};
/* 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-badge',{ref:"badge",staticClass:"gl-mx-4 hover:gl-cursor-pointer",attrs:{"id":_vm.triggerId,"href":"#","variant":"neutral"}},[_c('span',[_vm._v(_vm._s(_vm.activeType.BADGE))]),_vm._v(" "),_c('gl-popover',{attrs:{"triggers":"hover focus click","show-close-button":"","placement":_vm.popoverPlacement,"target":_vm.triggerId,"css-classes":['!gl-z-9999'],"title":_vm.activeType.POPOVER_TITLE}},[_c('gl-sprintf',{attrs:{"message":_vm.activeType.POPOVER_CONTENT},scopedSlots:_vm._u([{key:"link",fn:function(ref){
var content = ref.content;
return [_c('gl-link',{staticClass:"!gl-text-sm",attrs:{"href":_vm.activeType.HELP_PAGE_URL,"target":"_blank"}},[_vm._v("\n "+_vm._s(content))])]}},{key:"bullets",fn:function(){return [_c('ul',{staticClass:"gl-mb-0 gl-pl-5"},_vm._l((_vm.activeType.POPOVER_BULLETS),function(item,i){return _c('li',{key:("li-" + i)},[_vm._v("\n "+_vm._s(item)+"\n ")])}),0)]},proxy:true},{key:"line-break",fn:function(ref){
var content = ref.content;
return [_c('span',{staticClass:"gl-mb-0 gl-mt-5 gl-block"},[_vm._v(_vm._s(content))])]}}])})],1)],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__ = /*#__PURE__*/__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 { __vue_component__ as default, i18n };