@spaceone/design-system/src/data-display/badges/PBadge.stories.mdx

SpaceONE Design System

import {Meta, Canvas, Story, ArgsTable} from '@storybook/addon-docs/blocks';
import PBadge from "@/data-display/badges/PBadge";
import {BADGE_SHAPE, BADGE_STYLE} from "@/data-display/badges/type";

<Meta title='Data Display/Badges' parameters={{
    design: {
        type: 'figma',
        url: 'https://www.figma.com/file/wq4wSowBcADBuUrMEZLz6i/SpaceONE-Console-Design?node-id=6132%3A124077',
    }
}} component={PBadge} argTypes={{
    styleType: {
        name: 'styleType',
        type: {name: 'string'},
        description: 'Badge style',
        defaultValue: BADGE_STYLE.primary,
        table: {
            type: {
                summary: 'string'
            },
            category: 'props',
            defaultValue: {
                summary: 'primary'
            }
        },
        control: {
            type: 'select',
            options: Object.values(BADGE_STYLE)
        },
    },
    textColor: {
        name: 'textColor',
        type: {name:' string'},
        description: 'Text color of badge',
        defaultValue: null,
        table: {
            type: {
                summary: 'string'
            },
            category: 'props',
            defaultValue: {
                summary: 'null',
            }
        },
        control: {
            type: 'color',
        }
    },
    backgroundColor: {
        name: 'backgroundColor',
        type: {name: 'string'},
        description: 'Background color of badge',
        defaultValue: null,
        table: {
            type: {
                summary: 'string'
            },
            category: 'props',
            defaultValue: {
                summary: 'null',
            }
        },
        control: {
            type: 'color',
        }
    },
    default: {
        name: 'default',
        type: {name: 'string'},
        description: 'Slot for contents of badge',
        defaultValue: 'badge',
        table: {
            type: {
                summary: null
            },
            category: 'slots',
        },
        control: {
            type: 'text'
        }
    },
    shape: {
        name: 'shape',
        type: {name: 'string'},
        description: 'Shape of badge',
        defaultValue: BADGE_SHAPE.ROUND,
        table: {
            type: {
                summary: 'string'
            },
            category: 'props',
            defaultValue: {
                summary: 'round',
            }
        },
        control: {
            type: 'select',
            options: Object.values(BADGE_SHAPE)
        }
    },
    outline: {
        name: 'outline',
        type: {name: 'boolean'},
        description: 'Outlined when true',
        defaultValue: false,
        table: {
            type: {
                summary: 'boolean'
            },
            category: 'props',
            defaultValue: {
                summary: false,
            }
        },
        control: {
            type: 'boolean',
        }
    },
}}/>

export const Template = (args,{argTypes})=>({
    props: Object.keys(argTypes),
    components: {PBadge},
    template: `
        <div style="display:flex; align-items:center; justify-content:center; height:100px;">
            <PBadge :styleType="styleType"
                    :text-color="textColor"
                    :backgroundColor="backgroundColor"
                    :outline="outline"
                    :shape="shape"
            >{{$props.default}}</PBadge>
        </div>`,
})

# Badge

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

## Style Types

<Canvas>
    <Story name='Style Types' height='250px'>
        {{
            components:{ PBadge },
            template: `
                <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height:250px;">
                    <div style="display:flex">
                        <p-badge styleType="primary" style="margin-right: 20px">
                            <div>primary</div>
                        </p-badge>
                        <p-badge styleType="primary-dark" style="margin-right: 20px">
                            <div>primary-dark</div>
                        </p-badge>
                        <p-badge styleType="primary1" style="margin-right: 20px">
                            <div>primary1</div>
                        </p-badge>
                        <p-badge styleType="primary2" style="margin-right: 20px">
                            <div>primary2</div>
                        </p-badge>
                        <p-badge styleType="secondary" style="margin-right: 20px">
                            <div>secondary</div>
                        </p-badge>
                        <p-badge styleType="secondary1">
                            <div>secondary1</div>
                        </p-badge>
                    </div>
                    <div style="display:flex; margin-top: 20px">
                        <p-badge styleType="alert" style="margin-right: 20px">
                            <div>alert</div>
                        </p-badge>
                        <p-badge styleType="safe" style="margin-right: 20px">
                            <div>safe</div>
                        </p-badge>
                        <p-badge styleType="gray900" style="margin-right: 20px">
                            <div>gray900</div>
                        </p-badge>
                        <p-badge styleType="gray">
                            <div>gray</div>
                        </p-badge>
                    </div>
                    <div style="display:flex; margin-top: 20px">
                        <p-badge styleType="coral600" style="margin-right: 20px">
                            <div>coral600</div>
                        </p-badge>
                        <p-badge styleType="coral500" style="margin-right: 20px">
                            <div>coral500</div>
                        </p-badge>
                        <p-badge styleType="peacock" style="margin-right: 20px">
                            <div>peacock</div>
                        </p-badge>
                        <p-badge styleType="indigo">
                            <div>indigo</div>
                        </p-badge>
                    </div>
                </div>`,
        }}
    </Story>
</Canvas>

## Outlined

<Canvas>
    <Story name='Outlined' height='250px'>
        {{
            components:{ PBadge },
            template: `
                <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height:250px;">
                    <div style="display:flex">
                        <p-badge styleType="primary" outline style="margin-right: 20px">
                            <div>primary</div>
                        </p-badge>
                        <p-badge styleType="primary-dark" outline style="margin-right: 20px">
                            <div>primary-dark</div>
                        </p-badge>
                        <p-badge styleType="primary1" outline style="margin-right: 20px">
                            <div>primary1</div>
                        </p-badge>
                        <p-badge styleType="primary2" outline style="margin-right: 20px">
                            <div>primary2</div>
                        </p-badge>
                        <p-badge styleType="secondary" outline style="margin-right: 20px">
                            <div>secondary</div>
                        </p-badge>
                        <p-badge styleType="secondary1" outline>
                            <div>secondary1</div>
                        </p-badge>
                    </div>
                    <div style="display:flex; margin-top: 20px">
                        <p-badge styleType="alert" outline style="margin-right: 20px">
                            <div>alert</div>
                        </p-badge>
                        <p-badge styleType="safe" outline style="margin-right: 20px">
                            <div>safe</div>
                        </p-badge>
                        <p-badge styleType="gray900" outline style="margin-right: 20px">
                            <div>gray900</div>
                        </p-badge>
                        <p-badge styleType="gray" outline>
                            <div>gray</div>
                        </p-badge>
                    </div>
                    <div style="display:flex; margin-top: 20px">
                        <p-badge styleType="coral600" outline style="margin-right: 20px">
                            <div>coral600</div>
                        </p-badge>
                        <p-badge styleType="coral500" outline style="margin-right: 20px">
                            <div>coral500</div>
                        </p-badge>
                        <p-badge styleType="peacock" outline style="margin-right: 20px">
                            <div>peacock</div>
                        </p-badge>
                        <p-badge styleType="indigo" outline>
                            <div>indigo</div>
                        </p-badge>
                    </div>
                </div>`,
        }}
    </Story>
</Canvas>

## Shapes

<Canvas>
    <Story name="Shapes" height="100px">
        {{
            components: {PBadge},
            template: `
                <div style="display: flex; align-items: center; justify-content: center; height: 100px">
                    <p-badge shape="round">
                        <div>round</div>
                    </p-badge>
                    <p-badge shape="square" style="margin-left: 20px">
                        <div>square</div>
                    </p-badge>
                </div>`
        }}
    </Story>
</Canvas>

## Playground

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

<ArgsTable story="playground" />