diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/new_namespace/components/welcome.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/new_namespace/components/welcome.vue | 71 |
1 files changed, 71 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/new_namespace/components/welcome.vue b/app/assets/javascripts/vue_shared/new_namespace/components/welcome.vue new file mode 100644 index 00000000000..e9983af5401 --- /dev/null +++ b/app/assets/javascripts/vue_shared/new_namespace/components/welcome.vue @@ -0,0 +1,71 @@ +<script> +import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; +import Vue from 'vue'; +import Tracking from '~/tracking'; + +export default { + directives: { + SafeHtml, + }, + props: { + title: { + type: String, + required: true, + }, + panels: { + type: Array, + required: true, + }, + experiment: { + type: String, + required: false, + default: null, + }, + }, + created() { + const trackingMixin = Tracking.mixin({ ...gon.tracking_data, experiment: this.experiment }); + const trackingInstance = new Vue({ + ...trackingMixin, + render() { + return null; + }, + }); + this.track = trackingInstance.track; + }, +}; +</script> +<template> + <div class="container"> + <h2 class="gl-my-7 gl-font-size-h1 gl-text-center"> + {{ title }} + </h2> + <div> + <div + v-for="panel in panels" + :key="panel.name" + class="new-namespace-panel-wrapper gl-display-inline-block gl-px-3 gl-mb-5" + > + <a + :href="`#${panel.name}`" + :data-qa-selector="`${panel.name}_link`" + class="new-namespace-panel gl-display-flex gl-flex-shrink-0 gl-flex-direction-column gl-lg-flex-direction-row gl-align-items-center gl-rounded-base gl-border-gray-100 gl-border-solid gl-border-1 gl-w-full gl-py-6 gl-px-8 gl-hover-text-decoration-none!" + @click="track('click_tab', { label: panel.name })" + > + <div + v-safe-html="panel.illustration" + class="new-namespace-panel-illustration gl-text-white gl-display-flex gl-flex-shrink-0 gl-justify-content-center" + ></div> + <div class="gl-pl-4"> + <h3 class="gl-font-size-h2 gl-reset-color"> + {{ panel.title }} + </h3> + <p class="gl-text-gray-900"> + {{ panel.description }} + </p> + </div> + </a> + </div> + </div> + <slot name="footer"></slot> + </div> +</template> |