diff options
Diffstat (limited to 'app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_info_card.vue')
-rw-r--r-- | app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_info_card.vue | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_info_card.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_info_card.vue new file mode 100644 index 00000000000..3d2a8eed9d4 --- /dev/null +++ b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_info_card.vue @@ -0,0 +1,70 @@ +<script> +import { GlLink, GlCard, GlIcon } from '@gitlab/ui'; +import { s__ } from '~/locale'; + +export default { + name: 'LearnGitlabInfoCard', + components: { GlLink, GlCard, GlIcon }, + i18n: { + trial: s__('Learn GitLab|Trial only'), + }, + props: { + title: { + required: true, + type: String, + }, + description: { + required: true, + type: String, + }, + actionLabel: { + required: true, + type: String, + }, + url: { + required: true, + type: String, + }, + completed: { + required: true, + type: Boolean, + }, + svg: { + required: true, + type: String, + }, + trialRequired: { + default: false, + required: false, + type: Boolean, + }, + }, +}; +</script> +<template> + <gl-card class="gl-pt-0"> + <div class="gl-text-right gl-h-5"> + <gl-icon + v-if="completed" + name="check-circle-filled" + class="gl-text-green-500" + :size="16" + data-testid="completed-icon" + /> + <span + v-else-if="trialRequired" + class="gl-text-gray-500 gl-font-sm gl-font-style-italic" + data-testid="trial-only" + >{{ $options.i18n.trial }}</span + > + </div> + <div + class="gl-text-center gl-display-flex gl-justify-content-center gl-align-items-center gl-flex-direction-column learn-gitlab-info-card-content" + > + <img :src="svg" /> + <h6>{{ title }}</h6> + <p class="gl-font-sm gl-text-gray-700">{{ description }}</p> + <gl-link :href="url" target="_blank">{{ actionLabel }}</gl-link> + </div> + </gl-card> +</template> |