diff --git a/.storybook/preview.js b/.storybook/preview.js index 3b8c5e35d1ff10295b26b21b1ff0cc7ab9d429e1..2f6373c3cffb8456f859edca0fe7de7e93d297ff 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,6 +1,7 @@ import Vue from 'vue'; import { h } from '@vue/compat'; import { useArgs } from '@storybook/preview-api'; +import GlAlert from '../src/components/base/alert/alert.vue'; import 'iframe-resizer/js/iframeResizer.contentWindow.min.js'; import setConfigs from '../src/config'; @@ -15,8 +16,60 @@ let decorators = [ const [_, updateArgs] = useArgs(); return story({ ...context, updateArgs }); }, - () => ({ - template: '', + // Pass context to the component + (story, context) => ({ + components: { GlAlert }, + data() { + return { + storyContext: context, + }; + }, + template: ` +
+ +

+ The GitLab UI project has + moved + into the + design.gitlab.com repository. +

+

+ Please visit the new site to see an + up to date version of this page. +

+
+ +
+ `, + computed: { + isVisualTest() { + return process.env.IS_VISUAL_TEST; + }, + newStorybookUrl() { + return 'https://design.gitlab.com/storybook'; + }, + newStorybookPageUrl() { + const NEW_BASE_URL = 'https://design.gitlab.com'; + const storyId = this.storyContext?.id; + + if (!storyId) return 'https://design.gitlab.com/storybook'; + + const { pathname } = window.location; + const newPathname = pathname.startsWith('/gitlab-ui/vue3/') + ? 'storybook-vue3' + : 'storybook'; + + const url = new URL(`${newPathname}?path=/story/${storyId}`, NEW_BASE_URL); + return url.href; + }, + }, mounted() { this.$nextTick().then(() => { this.$el.parentElement.classList.add('vue-component-mounted');