diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/markdown_drawer/markdown_drawer.stories.js')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/markdown_drawer/markdown_drawer.stories.js | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/markdown_drawer/markdown_drawer.stories.js b/app/assets/javascripts/vue_shared/components/markdown_drawer/markdown_drawer.stories.js new file mode 100644 index 00000000000..03bd64e2a57 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/markdown_drawer/markdown_drawer.stories.js @@ -0,0 +1,54 @@ +import { GlButton } from '@gitlab/ui'; +import { MOCK_HTML } from '../../../../../../spec/frontend/vue_shared/components/markdown_drawer/mock_data'; +import MarkdownDrawer from './markdown_drawer.vue'; + +export default { + component: MarkdownDrawer, + title: 'vue_shared/markdown_drawer', + parameters: { + mirage: { + timing: 1000, + handlers: { + get: { + '/help/user/search/global_search/advanced_search_syntax.json': [ + 200, + {}, + { html: MOCK_HTML }, + ], + }, + }, + }, + }, +}; + +const createStory = ({ ...options }) => (_, { argTypes }) => ({ + components: { MarkdownDrawer, GlButton }, + props: Object.keys(argTypes), + data() { + return { + render: false, + }; + }, + methods: { + toggleDrawer() { + this.$refs.drawer.toggleDrawer(); + }, + }, + mounted() { + window.requestAnimationFrame(() => { + this.render = true; + }); + }, + template: ` + <div v-if="render"> + <gl-button @click="toggleDrawer">Open Drawer</gl-button> + <markdown-drawer + :documentPath="'user/search/global_search/advanced_search_syntax.json'" + ref="drawer" + /> + </div> + `, + ...options, +}); + +export const Default = createStory({}); |