@spaceone/design-system/src/inputs/buttons/button/PButton.stories.mdx

SpaceONE Design System

import {Meta, Canvas, Story, ArgsTable} from '@storybook/addon-docs/blocks';
import PButton from '@/inputs/buttons/button/PButton';
import PLottie from '@/foundation/lottie/PLottie.vue';
import {BUTTON_STYLE} from "@/inputs/buttons/button/type";

<Meta title='Inputs/Buttons/Button' parameters={{
    design: {
        type: 'figma',
        url: 'https://www.figma.com/file/wq4wSowBcADBuUrMEZLz6i/SpaceONE-Console-Design?node-id=5152%3A122457'
    }
}} component={PButton} argTypes={{
    styleType: {
        name: 'styleType',
        type: {name: 'string'},
        description: 'Button style',
        defaultValue: BUTTON_STYLE.primary,
        table: {
            type: {
                summary: 'string'
            },
            category: 'props',
            defaultValue: {
                summary: BUTTON_STYLE.primary
            }
        },
        control: {
            type: 'select',
            options: Object.values(BUTTON_STYLE)
        },
    },
    size: {
        name: 'size',
        type: {name:' string'},
        description: 'Button size',
        defaultValue: 'md',
        table: {
            type: {
                summary: 'string'
            },
            category: 'props',
            defaultValue: {
                summary: 'md',
            }
        },
        control: {
            type: 'select',
            options: ['md', 'sm', 'lg']
        }
    },
    default: {
        name: 'default',
        type: {name: 'string'},
        description: 'Slot for contents of button',
        defaultValue: 'button',
        table: {
            type: {
                summary: null
            },
            category: 'slots',
        },
        control: {
            type: 'text'
        }
    },
    href: {
        name: 'href',
        type: {name: 'string'},
        description: 'Href of button',
        defaultValue: 'https://www.google.com/',
        table: {
            type: {
                summary: 'string'
            },
            category: 'props',
            defaultValue: {
                summary: 'null',
            }
        },
        control: {
            type: 'text'
        }
    },
    disabled: {
        name: 'disabled',
        type: {name: 'boolean'},
        description: 'Disabled when true',
        defaultValue: false,
        table: {
            type: {
                summary: 'boolean'
            },
            category: 'props',
            defaultValue: {
                summary: false,
            }
        },
        control: {
            type: 'boolean',
        }
    },
    loading: {
        name: 'loading',
        type: {name: 'boolean'},
        description: 'Loading when true',
        defaultValue: false,
        table: {
            type: {
                summary: 'boolean'
            },
            category: 'props',
            defaultValue: {
                summary: false,
            }
        },
        control: {
            type: 'boolean',
        }
    },
    outline: {
        name: 'outline',
        type: {name: 'boolean'},
        description: 'Outlined when true',
        defaultValue: false,
        table: {
            type: {
                summary: 'boolean'
            },
            category: 'props',
            defaultValue: {
                summary: false,
            }
        },
        control: {
            type: 'boolean',
        }
    },
    block: {
        name: 'block',
        type: {name: 'boolean'},
        description: 'Width became 100% when true',
        defaultValue: false,
        table: {
            type: {
                summary: 'boolean'
            },
            category: 'props',
            defaultValue: {
                summary: false,
            }
        },
        control: {
            type: 'boolean',
        }
    },
    onClick: {
        name:'click',
        type: {name: 'function'},
        description: 'Click function',
        defaultValue: "()=>{console.log('click')}",
        table: {
            type: {
                summary: null
            },
            category: 'event',
        },
        control: {
            type: 'text'
        }
    }
}}/>

export const Template = (args, {argTypes})=>({
    props: Object.keys(argTypes),
    components: {PButton, PLottie},
    template: `
        <div style="display:flex; align-items:center; justify-content:center; height:150px;">
            <p-button
                @click="onClick"
                :href="href"
                :styleType="styleType"
                :size="size"
                :disabled="disabled"
                :loading="loading"
                :outline="outline"
                :block="block"
            >
                <div v-if="loading" class="loading-btn">
                    <p-lottie v-if="loading" class="spinner"
                        name="thin-spinner" auto
                        :size="1.5"
                    />
                </div>
                {{$props.default}}
            </p-button>
        </div>`
})

# Button

<br/>
<br/>
<br/>

## Size
<Canvas>
    <Story name='size' height='150px'>
        {{
            components:{ PButton, PLottie },
            template: `
                <div style="display:flex; align-items:center; justify-content:center; margin-top: 50px; background-color: white">
                    <p-button styleType="primary" style="margin-right: 20px" size="sm">
                        <div>small</div>
                    </p-button>
                    <p-button styleType="primary" style="margin-right: 20px">
                        <div>default</div>
                    </p-button>
                    <p-button styleType="primary" style="margin-right: 20px" size="lg">
                        <div>large</div>
                    </p-button>
                </div>`,
        }}
    </Story>
</Canvas>

## Style Type
<Canvas>
    <Story name='Style Types' height='250px'>
        {{
            components:{ PButton, PLottie },
            template: `
                <div style="display: flex; flex-direction: column; align-items: center; margin-top: 50px; background-color: white">
                    <div style="display:flex">
                        <p-button styleType="primary-dark" style="margin-right: 20px">
                            <div>primary-dark</div>
                        </p-button>
                        <p-button styleType="primary" style="margin-right: 20px">
                            <div>primary</div>
                        </p-button>
                        <p-button styleType="primary1" style="margin-right: 20px">
                            <div>primary1</div>
                        </p-button>
                        <p-button styleType="primary2" style="margin-right: 20px">
                            <div>primary2</div>
                        </p-button>
                    </div>
                    <div style="display:flex; margin-top: 20px">
                        <p-button styleType="secondary" style="margin-right: 20px">
                            <div>secondary</div>
                        </p-button>
                        <p-button styleType="secondary1" style="margin-right: 20px">
                            <div>secondary1</div>
                        </p-button>
                        <p-button styleType="gray" style="margin-right: 20px">
                            <div>gray</div>
                        </p-button>
                        <p-button styleType="gray900" style="margin-right: 20px">
                            <div>gray900</div>
                        </p-button>
                        <p-button styleType="gray900-hover" style="margin-right: 20px">
                            <div>gray900-hover</div>
                        </p-button>
                    </div>
                    <div style="display:flex; margin-top: 20px">
                        <p-button styleType="alert" style="margin-right: 20px">
                            <div>alert</div>
                        </p-button>
                        <p-button styleType="safe" style="margin-right: 20px">
                            <div>safe</div>
                        </p-button>
                        <p-button styleType="gray-border" style="margin-right: 20px">
                            <div>gray-border</div>
                        </p-button>
                        <p-button styleType="transparent">
                            <div>transparent</div>
                        </p-button>
                    </div>
                </div>`,
        }}
    </Story>
</Canvas>

## Outlined
<Canvas>
    <Story name='Outlined' height='150px'>
        {{
            components:{ PButton, PLottie },
            template: `
                <div style="display:flex; align-items:center; justify-content:center; margin-top: 50px; background-color: white">
                    <p-button
                        styleType="primary" style="margin-right: 20px"
                        :outline="true"
                    >
                        <div>primary</div>
                    </p-button>
                    <p-button
                        styleType="secondary" style="margin-right: 20px"
                        :outline="true"
                    >
                        <div>secondary</div>
                    </p-button>
                    <p-button
                        styleType="alert" style="margin-right: 20px"
                        :outline="true"
                    >
                        <div>alert</div>
                    </p-button>
                    <p-button
                        styleType="safe" style="margin-right: 20px"
                        :outline="true"
                    >
                        <div>safe</div>
                    </p-button>
                    <p-button
                        styleType="transparent"
                        :outline="true"
                    >
                        <div>transparent</div>
                    </p-button>
                </div>`,
        }}
    </Story>
</Canvas>

## Disabled
<Canvas>
    <Story name='Disabled' height='150px'>
        {{
            components:{ PButton, PLottie },
            template: `
                <div style="display:flex; align-items:center; justify-content:center; margin-top: 50px; background-color: white">
                    <p-button
                        styleType="primary"
                        :disabled="true"
                    >
                        <div>Disabled</div>
                    </p-button>
                </div>`,
        }}
    </Story>
</Canvas>

## Loading
<Canvas>
    <Story name='Loading' height='150px'>
        {{
            components:{ PButton, PLottie },
            template: `
                <div style="display:flex; align-items:center; justify-content:center; margin-top: 50px; background-color: white">
                    <p-button
                        styleType="primary"
                        :loading="true"
                    >
                        <div class="loading-btn">
                            <p-lottie
                                class="spinner"
                                name="thin-spinner" auto
                                :size="1.5"
                            />
                            <div>Loading</div>
                        </div>
                    </p-button>
                </div>`,
        }}
    </Story>
</Canvas>

## Block
<Canvas>
    <Story name='Block' height='150px'>
        {{
            components:{ PButton, PLottie },
            template: `
                <div style="display:flex; align-items:center; justify-content:center; margin-top: 50px; background-color: white">
                    <p-button
                        styleType="primary"
                        :block="true"
                    >
                        <div>Block</div>
                    </p-button>
                </div>`,
        }}
    </Story>
</Canvas>

## Playground

<Canvas>
    <Story name="Playground" height="150px">
        {Template.bind({})}
    </Story>
</Canvas>

<ArgsTable story="Playground" />