"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColorSubButton = 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**
 *
 * 더블 버튼은 좌측에 반드시 블루 그레이 틴트 버튼 1개가 함께 사용 되어야 합니다.
 */
const meta = {
    title: 'Component/Button/DoubleButton',
    component: _1.DoubleButton,
    tags: ['autodocs'],
};
exports.default = meta;
// TODO: 스토리북 docs 점검 필요
const commonArgs = {
    colorType: 'pink',
    purpose: 'main',
    left: {
        children: '취소',
    },
    right: {
        children: '확인',
    },
};
// Props 교체 가능
exports.MainButton = {
    render: (props) => react_1.default.createElement(_1.DoubleButton, Object.assign({}, props)),
    args: commonArgs,
    argTypes: {
        left: {
            onClick: { action: 'leftOnClick' },
        },
        right: {
            onClick: { action: 'rightOnClick' },
        },
    },
    parameters: {
        docs: {
            description: {
                story: '비즈니스 전략상 더 중요한 버튼을 강조할 때 우측에 필 버튼을 사용합니다.',
            },
        },
    },
};
// UI 확인용
exports.ColorSubButton = {
    render: (props) => (react_1.default.createElement(_1.DoubleButton, { purpose: "sub", colorType: "pink", left: Object.assign({}, props.left), right: Object.assign({}, props.right) })),
    args: commonArgs,
    parameters: {
        docs: {
            description: {
                story: '중요도가 아주 높진 않지만 약간의 위계를 가진 두 가지 선택에 대해 표현할 때 컬러 틴트 버튼을 사용합니다.',
            },
        },
    },
};
