@spaceone/design-system/src/layouts/sidebar/PSidebar.stories.mdx

SpaceONE Design System

import {Meta, Canvas, Story, ArgsTable} from '@storybook/addon-docs/blocks';
import PSidebar from '@/layouts/sidebar/PSidebar.vue';
import PButton from '@/inputs/buttons/button/PButton.vue';
import { reactive, toRefs, watch, computed } from '@vue/composition-api';
import faker from 'faker'


<Meta title='Layouts/Sidebar' parameters={{
    design: {
        type: 'figma',
        url: 'https://www.figma.com/file/wq4wSowBcADBuUrMEZLz6i/SpaceONE-Console-Design?node-id=6980%3A163443'
    }
}} component={PSidebar} argTypes={{
    visible: {
        name: 'visible',
        type: {name: 'boolean', required: true},
        description: 'Switch props for show or hide a sidebar.',
        defaultValue: false,
        table: {
            type: {
                summary: 'boolean'
            },
            category: 'props',
            defaultValue: {
                summary: false
            },
        },
        control: {
            type: 'boolean'
        }
    },
    title: {
        name: 'title',
        type: {name: 'string'},
        description: 'Sidebar title',
        defaultValue: 'Title',
        table: {
            type: {
                summary: 'string'
            },
            category: 'props',
            defaultValue: {
                summary: ''
            },
        },
        control: {
            type: 'text'
        }
    },
    'v-model': {
        name: 'v-model',
        type: {name: 'boolean', required: false},
        description: 'Two way binding for `visible` props with `update:visible` event.',
        defaultValue: false,
        table: {
            type: {
                summary: 'boolean'
            },
            category: 'model',
            defaultValue: {
                summary: false
            },
        },
        control: null
    },
    titleSlot: {
        name: 'title',
        description: 'Slot for title with HTML',
        defaultValue: null,
        table: {
            type: {
                summary: null
            },
            defaultValue: {
                summary: null
            },
            category: 'slots'
        },
    },
    default: {
        name: 'default',
        description: 'Slot for non-sidebar contents',
        defaultValue: null,
        table: {
            type: {
                summary: null
            },
            defaultValue: {
                summary: null
            },
            category: 'slots'
        },
    },
    sidebar: {
        name: 'sidebar',
        description: 'Slot for contents of side bar body',
        defaultValue: null,
        table: {
            type: {
                summary: null
            },
            defaultValue: {
                summary: null
            },
            category: 'slots'
        },
    },
    onClose: {
        name: 'close',
        description: `Event emitted when the close button is clicked`,
        defaultValue: null,
        table: {
            type: {
                summary: null,
            },
            defaultValue: {
                summary: null,
            },
            category: 'events'
        }
    }
}} />


export const Template = (args, {argTypes}) => {
    return {
        props: Object.keys(argTypes).filter(d => d !== 'visible'),
        components: { PSidebar, PButton },
        template: `
            <div class="flex flex-col" style="height: 500px;">
                <p-button :style-type="visible ? 'primary' : 'secondary'"
                          @click="visible = !visible;">
                    {{visible ? 'close' : 'open' }}
                </p-button>
                <p-sidebar :title="title"
                            v-model="visible"
                            class="mt-4 flex-grow"
                            @close="onClose"
                >
                    <div class="bg-primary3 p-4 min-h-full flex justify-center items-center">
                        {{contents || 'Non-sidebar area'}}
                    </div>
                    <template #sidebar>{{sidebarContents || 'Sidebar contents'}}</template>
                </p-sidebar>
            </div>
        `,
        setup(props) {
            const state = reactive({
                visible: true,
            })
            return {
                ...toRefs(state),
            }
        }
    }
};

export const Playground = (args, {argTypes}) => {
    return {
        props: Object.keys(argTypes),
        components: { PSidebar },
        template: `
            <div class="flex flex-col" style="height: 500px;">
                <p-sidebar :title="title"
                            :visible="visible"
                            class="mt-4 flex-grow"
                >
                    <div class="bg-primary3 h-full flex justify-center items-center">
                        Non-sidebar area
                    </div>
                    <template #sidebar>Sidebar contents</template>
                </p-sidebar>
            </div>
        `,
        setup(props) {
            return {
            }
        }
    }
};


# Sidebar
<br/>
<br/>
<br/>

## Basic

<Canvas>
    <Story name="basic" argTypes={{
        contents: {
            defaultValue: ''
        },
        sidebarContents: {
            defaultValue: ''
        }
    }}>
        {Template.bind({})}
    </Story>
</Canvas>

<br/>
<br/>

## Long Contents

<Canvas>
    <Story name="long contents" argTypes={{
        contents: {
            defaultValue: faker.lorem.lines(100)
        },
        sidebarContents: {
            defaultValue: faker.lorem.lines(50)
        }
    }}>
        {Template.bind({})}
    </Story>
</Canvas>

<br/>
<br/>

## Long Title

<Canvas>
    <Story name="long title" argTypes={{
        contents: {
            defaultValue: ''
        },
        sidebarContents: {
            defaultValue: faker.lorem.lines(50)
        }
    }} args={{
        title: faker.lorem.lines(2)
    }}>
        {Template.bind({})}
    </Story>
</Canvas>

<br/>
<br/>

## No Title

<Canvas>
    <Story name="no title" argTypes={{
        contents: {
            defaultValue: ''
        },
        sidebarContents: {
            defaultValue: faker.lorem.lines(50)
        },
    }} args={{
        title: undefined
    }}>
        {Template.bind({})}
    </Story>
</Canvas>

<br/>
<br/>

## Custom Title

<Canvas>
    <Story name="custom title" argTypes={{
        contents: {
            defaultValue: ''
        },
        sidebarContents: {
            defaultValue: ''
        }
    }}>
        {{
            components: { PSidebar },
            template: `
            <div style="height: 500px;">
                <p-sidebar :visible="true"
                            class="mt-4"
                >
                    <div class="bg-primary3 h-full flex justify-center items-center">
                        Non-sidebar area
                    </div>
                    <template #title>
                        <strong class="text-coral">This is Custom Title</strong> with title slot.
                    </template>
                    <template #sidebar>Sidebar Contents</template>
                </p-sidebar>
            </div>
            `,
            setup(props) {
                return {
                }
            }
        }}
    </Story>
</Canvas>

<br/>
<br/>

## Playground

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

<ArgsTable story="playground" />