"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Story3 = exports.Story2 = exports.Story1 = void 0;
const react_1 = __importDefault(require("react"));
const styled_1 = __importDefault(require("@emotion/styled"));
const _1 = __importDefault(require("."));
const TooltipBase_1 = require("../TooltipBase");
const Icon_1 = require("../../../Icon");
const __1 = require("../..");
const library_1 = require("../../../library");
/**
 * updated 230523
 *
 * <a href="https://www.notion.so/Tooltip-3517bfdc827244d3a8cc91ec2b5c54c3" target="_blank">노션페이지</a>
 * <br/>
 * 콘텐츠의 이해를 돕기 위한 보충 설명을 제공합니다. 사용자의 행동에 방해되지 않도록 선택적으로 열고 닫을 수 있으며 아이콘, 텍스트 등 버튼의 기능을 가진 컴포넌트에 종속되어 단독으로 사용할 수 없습니다.
 *
 */
const meta = {
    title: 'Component/Tooltip/BasicTooltip',
    component: _1.default,
    tags: ['autodocs'],
};
exports.default = meta;
const commonArgTypes = {
    placement: {
        options: TooltipBase_1.PlacementArray,
        control: { type: 'radio' },
    },
};
const ContainerForStorybook = styled_1.default.div `
	width: 100%;
	padding: 100px 0;
`;
const Component1 = (props) => {
    return (react_1.default.createElement(ContainerForStorybook, null,
        react_1.default.createElement(_1.default, Object.assign({}, props),
            react_1.default.createElement(Icon_1.QuestionIcon, null))));
};
// Props 교체 가능
exports.Story1 = {
    render: (props) => react_1.default.createElement(Component1, Object.assign({}, props)),
    args: {
        content: '툴팁 문구를 입력해주세요',
    },
    argTypes: commonArgTypes,
    parameters: {
        docs: {
            description: {
                story: '종속된 컴포넌트 위치에 따라 말풍선 꼬리의 위치를 결정합니다. 화면을 가로로 3등분 하여 콘텐츠의 위치에 따라 왼쪽, 중앙, 오른쪽에 꼬리를 표시하고, 화면을 세로로 2등분 하여 위쪽, 아래쪽으로 말풍선 꼬리를 표시합니다.',
            },
        },
    },
};
exports.Story1.storyName = 'w. QuestionIcon';
const Component2 = (props) => {
    return (react_1.default.createElement(ContainerForStorybook, null,
        react_1.default.createElement(_1.default, Object.assign({}, props),
            react_1.default.createElement(__1.BoxMiniButton, { colorType: "gray" }, "\uC0C1\uD488 \uD544\uD130")),
        react_1.default.createElement(library_1.Spacing, { spaceNumber: 30 }),
        react_1.default.createElement(_1.default, Object.assign({}, props, { isChildrenFullWidth: true }),
            react_1.default.createElement(__1.SingleButton, { colorType: "gray", purpose: "main" }, "SingleButton")),
        react_1.default.createElement(library_1.Spacing, { spaceNumber: 30 }),
        react_1.default.createElement(_1.default, Object.assign({}, props),
            react_1.default.createElement(__1.IconMiniButton, { colorType: "gray", size: "s", icon: react_1.default.createElement(Icon_1.ChevronRightSIcon, null) }, "\uC0C1\uD488 \uAC00\uC774\uB4DC"))));
};
// Props 교체 가능
exports.Story2 = {
    render: (props) => react_1.default.createElement(Component2, Object.assign({}, props)),
    args: {
        content: '툴팁 문구를 입력해주세요',
    },
    argTypes: commonArgTypes,
};
exports.Story2.storyName = 'w. Buttons';
const Component3 = (props) => {
    return (react_1.default.createElement(ContainerForStorybook, null,
        react_1.default.createElement(_1.default, Object.assign({}, props),
            react_1.default.createElement(__1.IconMiniButton, { colorType: "gray", size: "s", icon: react_1.default.createElement(Icon_1.ChevronRightSIcon, null) }, "\uC0C1\uD488 \uAC00\uC774\uB4DC"))));
};
// Props 교체 가능
exports.Story3 = {
    render: (props) => react_1.default.createElement(Component3, Object.assign({}, props)),
    args: {
        content: '툴팁 문구를 입력해주세요',
    },
    argTypes: commonArgTypes,
};
exports.Story3.storyName = 'w. IconMiniButton';
