"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SubButton = exports.MainButton = void 0;
const react_1 = __importDefault(require("react"));
const _1 = require(".");
/**
 * updated 230523
 *
 * <a href="https://www.notion.so/fdb21779528c4474ba7e5e500388bf3e?pvs=4" target="_blank">노션페이지</a>
 * <br/>
 * **Pattern**
 *
 * 정보 영역에서 선택사항이 한 가지일 경우 사용합니다.
 *
 * **Hierarchy**
 *
 * 컬러 스타일에 따라 두 가지의 스타일로 나누어서 사용합니다. 이 때 반드시 버튼의 중요도에 따른 위계를 구분하여 사용해야 합니다.
 */
const meta = {
    title: 'Component/Button/SingleButton',
    component: _1.SingleButton,
    tags: ['autodocs'],
};
exports.default = meta;
// Props 교체 가능
exports.MainButton = {
    render: (props) => react_1.default.createElement(_1.SingleButton, Object.assign({}, props)),
    args: {
        colorType: 'gray',
        purpose: 'main',
        children: '버튼',
    },
    argTypes: {
        onClick: { action: 'clicked' },
    },
    parameters: {
        docs: {
            description: {
                story: '흰 텍스트가 잘 보이도록 버튼 영역에 색을 채운 버튼입니다.<br/>배경에 강한 컬러를 사용하기 때문에 한 화면에 최대 1개만 사용해야 합니다.',
            },
        },
    },
};
// UI 확인용
exports.SubButton = {
    render: (props) => (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(_1.SingleButton, Object.assign({}, props), "\uBC84\uD2BC"))),
    args: {
        colorType: 'gray',
        purpose: 'sub',
        children: '버튼',
    },
    argTypes: {
        onClick: { action: 'clicked' },
    },
    parameters: {
        docs: {
            description: {
                story: '텍스트와 버튼 영역 모두 색을 사용하고, 텍스트가 잘 보이도록 옅은 배경색을 사용합니다.<br/>한 화면 내에서 여러 개를 사용할 수 있습니다.',
            },
        },
    },
};
