@spaceone/design-system/src/data-display/markdown/PMarkdown.stories.mdx

SpaceONE Design System

import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs/blocks';
import PMarkdown from './PMarkdown.vue';
import mock from './mock.ts';

<Meta title='Data Display/Markdown' parameters={{
    design: {
        type: 'figma',
        url: 'https://www.figma.com/file/wq4wSowBcADBuUrMEZLz6i/SpaceONE-Console-Design?node-id=5718%3A9288',
    },
}} component={PMarkdown} argTypes={{
    markdown: {
        name: 'markdown',
        type: {name: 'string'},
        description: 'Markdown data',
        defaultValue: mock.markdown,
        table: {
            type: {
                summary: '`string` or `object`'
            },
            category: 'props',
            defaultValue: {
                summary: ''
            },
        },
        control: {
            type: 'object'
        }
    },
    data: {
        name: 'data',
        type: {name: 'object'},
        description: 'Variable data to be rendered combined with markdown. Use the ejs.render function internally.',
        defaultValue: mock.data,
        table: {
            type: {
                summary: 'object'
            },
            category: 'props',
            defaultValue: {
                summary: undefined
            },
        },
        control: {
            type: 'object',
        }
    },
    language: {
        name: 'language',
        type: {name: 'string'},
        description: 'Language for display markdown',
        defaultValue: 'en',
        table: {
            type: {
                summary: 'string'
            },
            category: 'props',
            defaultValue: {
                summary: 'en'
            },
        },
        control: {
            type: 'select',
            options: ['en', 'ko']
        }
    },
}}/>


export const Template = (args, { argTypes }) => ({
    props: Object.keys(argTypes),
    components: { PMarkdown },
    template: `
        <p-markdown :markdown="markdown" :language="language" :data="data" >
        </p-markdown>
    `,
    setup() {
        return {
        }
    }
});


# Markdown
<br/>
<br/>

## String Markdown

<Canvas>
    <Story name="String Markdown" args={{
        markdown: mock.markdown.en
    }}>
        {Template.bind({})}
    </Story>
</Canvas>

<br/>
<br/>

## Object Markdown

<Canvas>
    <Story name="Object Markdown" args={{
        markdown: mock.markdown,
        language: 'ko'
    }}>
        {Template.bind({})}
    </Story>
</Canvas>

<br/>
<br/>

## Data Combining

<Canvas>
    <Story name="Data Combining" args={{
        markdown: mock.markdownWithData,
        language: 'ko'
    }}>
        {Template.bind({})}
    </Story>
</Canvas>

<br/>
<br/>


## Playground

<Canvas>
    <Story name="playground">
        {Template.bind({})}
    </Story>
</Canvas>

<ArgsTable story="playground"/>