diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/badges/experiment_badge.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/badges/experiment_badge.vue | 43 |
1 files changed, 43 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/badges/experiment_badge.vue b/app/assets/javascripts/vue_shared/components/badges/experiment_badge.vue new file mode 100644 index 00000000000..26bae71ddb8 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/badges/experiment_badge.vue @@ -0,0 +1,43 @@ +<script> +import { s__ } from '~/locale'; +import HoverBadge from './hover_badge.vue'; + +export default { + name: 'ExperimentBadge', + components: { HoverBadge }, + i18n: { + badgeLabel: s__('ExperimentBadge|Experiment'), + popoverTitle: s__("ExperimentBadge|What's an Experiment?"), + descriptionParagraph: s__( + "ExperimentBadge|An Experiment is a feature that's in the process of being developed. It's not production-ready. We encourage users to try Experimental features and provide feedback.", + ), + listIntroduction: s__('ExperimentBadge|An Experiment:'), + listItemStability: s__('ExperimentBadge|May be unstable.'), + listItemDataLoss: s__('ExperimentBadge|Can cause data loss.'), + listItemNoSupport: s__('ExperimentBadge|Has no support and might not be documented.'), + listItemCanBeRemoved: s__('ExperimentBadge|Can be removed at any time.'), + }, + props: { + size: { + type: String, + required: false, + default: 'md', + }, + }, +}; +</script> + +<template> + <hover-badge :label="$options.i18n.badgeLabel" :size="size" :title="$options.i18n.popoverTitle"> + <p>{{ $options.i18n.descriptionParagraph }}</p> + + <p class="gl-mb-0">{{ $options.i18n.listIntroduction }}</p> + + <ul class="gl-pl-4"> + <li>{{ $options.i18n.listItemStability }}</li> + <li>{{ $options.i18n.listItemDataLoss }}</li> + <li>{{ $options.i18n.listItemNoSupport }}</li> + <li>{{ $options.i18n.listItemCanBeRemoved }}</li> + </ul> + </hover-badge> +</template> |