"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 _1 = require(".");
const ProgressBar_1 = require("./ProgressBar");
/**
 * updated 230523
 *
 * <a href="https://www.notion.so/Loading-c210da0d1c0b408f9cb6c5925baa9fb7?pvs=4" target="_blank">노션페이지</a>
 * <br/>
 * 사용자에게 진행 상황을 안내하거나 UI를 불러올 때 사용합니다.
 */
const meta = {
    title: 'Component/Loading',
    component: _1.Skeleton,
    tags: ['autodocs'],
};
exports.default = meta;
exports.Story1 = {
    render: (props) => react_1.default.createElement(_1.Spinner, Object.assign({}, props)),
    args: {
        colorType: 'white',
    },
    parameters: {
        docs: {
            description: {
                story: '진행 상황을 예측할 수 없을 때 사용합니다.',
            },
        },
    },
};
exports.Story1.storyName = '스피너 로딩';
exports.Story2 = {
    render: (props) => (react_1.default.createElement("div", { style: { position: 'relative' } },
        react_1.default.createElement(ProgressBar_1.ProgressBar, Object.assign({}, props)))),
    args: {
        progress: 20,
        colorType: 'pink',
    },
    parameters: {
        docs: {
            description: {
                story: '진행 상황을 예측할 수 있을 때 사용합니다.',
            },
        },
    },
};
exports.Story2.storyName = '프로그레스바';
exports.Story3 = {
    render: (props) => (react_1.default.createElement("div", { style: { background: 'white', width: '500px', height: '300px', padding: '20px' } },
        react_1.default.createElement(_1.Skeleton.Layout, null,
            react_1.default.createElement(_1.Skeleton, Object.assign({}, props)),
            react_1.default.createElement("br", null),
            react_1.default.createElement(_1.Skeleton, { variant: "text", width: 150, height: 50 }),
            react_1.default.createElement("br", null),
            react_1.default.createElement(_1.Skeleton, { variant: "rect", height: 100 })))),
    args: {
        variant: 'circle',
    },
    parameters: {
        docs: {
            description: {
                story: '표시될 정보의 대략적인 형태를 미리 보여주어 사용자가 다음 화면을 예상할 수 있도록 합니다.',
            },
        },
    },
};
exports.Story3.storyName = '스켈레톤';
