diff options
Diffstat (limited to 'app/assets/javascripts/whats_new/components/feature.vue')
-rw-r--r-- | app/assets/javascripts/whats_new/components/feature.vue | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/app/assets/javascripts/whats_new/components/feature.vue b/app/assets/javascripts/whats_new/components/feature.vue new file mode 100644 index 00000000000..f6f7618b0d8 --- /dev/null +++ b/app/assets/javascripts/whats_new/components/feature.vue @@ -0,0 +1,67 @@ +<script> +import { GlBadge, GlIcon, GlLink, GlSafeHtmlDirective } from '@gitlab/ui'; + +export default { + components: { + GlBadge, + GlIcon, + GlLink, + }, + directives: { + SafeHtml: GlSafeHtmlDirective, + }, + props: { + feature: { + type: Object, + required: true, + }, + }, +}; +</script> + +<template> + <div class="gl-pb-7 gl-pt-5 gl-px-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"> + <gl-link + :href="feature.url" + target="_blank" + class="whats-new-item-title-link" + data-track-event="click_whats_new_item" + :data-track-label="feature.title" + :data-track-property="feature.url" + > + <h5 class="gl-font-lg" data-test-id="feature-title">{{ feature.title }}</h5> + </gl-link> + <div v-if="feature.packages" class="gl-mb-3"> + <gl-badge + v-for="packageName in feature.packages" + :key="packageName" + size="sm" + class="whats-new-item-badge gl-mr-2" + > + <gl-icon name="license" />{{ packageName }} + </gl-badge> + </div> + <gl-link + :href="feature.url" + target="_blank" + data-track-event="click_whats_new_item" + :data-track-label="feature.title" + :data-track-property="feature.url" + > + <img + :alt="feature.title" + :src="feature.image_url" + class="img-thumbnail gl-px-8 gl-py-3 whats-new-item-image" + /> + </gl-link> + <div v-safe-html="feature.body" class="gl-pt-3"></div> + <gl-link + :href="feature.url" + target="_blank" + data-track-event="click_whats_new_item" + :data-track-label="feature.title" + :data-track-property="feature.url" + >{{ __('Learn more') }}</gl-link + > + </div> +</template> |