diff options
Diffstat (limited to 'app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue')
-rw-r--r-- | app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue | 43 |
1 files changed, 43 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue new file mode 100644 index 00000000000..6f51c7372fd --- /dev/null +++ b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue @@ -0,0 +1,43 @@ +<script> +import { GlLink, GlIcon } from '@gitlab/ui'; +import { s__ } from '~/locale'; +import { ACTION_LABELS } from '../constants'; + +export default { + name: 'LearnGitlabSectionLink', + components: { GlLink, GlIcon }, + i18n: { + ACTION_LABELS, + trialOnly: s__('LearnGitlab|Trial only'), + }, + props: { + action: { + required: true, + type: String, + }, + value: { + required: true, + type: Object, + }, + }, + computed: { + trialOnly() { + return ACTION_LABELS[this.action].trialRequired; + }, + }, +}; +</script> +<template> + <div class="gl-mb-4"> + <span v-if="value.completed" class="gl-text-green-500"> + <gl-icon name="check-circle-filled" :size="16" data-testid="completed-icon" /> + {{ $options.i18n.ACTION_LABELS[action].title }} + </span> + <span v-else> + <gl-link :href="value.url">{{ $options.i18n.ACTION_LABELS[action].title }}</gl-link> + </span> + <span v-if="trialOnly" class="gl-font-style-italic gl-text-gray-500" data-testid="trial-only"> + - {{ $options.i18n.trialOnly }} + </span> + </div> +</template> |