wix-storybook-utils/dist/src/DoDont/DoDont.js

Utilities for automated component documentation within Storybook

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var Text_1 = tslib_1.__importDefault(require("../Text"));
var DoDont_st_css_1 = require("./DoDont.st.css");
var SkeletonRectangle_1 = require("../SkeletonRectangle/SkeletonRectangle");
var wix_ui_icons_common_1 = require("@wix/wix-ui-icons-common");
var DismisIcon = function () { return (react_1.default.createElement("div", { className: DoDont_st_css_1.classes.dismissContainer },
    react_1.default.createElement(wix_ui_icons_common_1.DismissSmall, { className: DoDont_st_css_1.classes.dismissIcon }))); };
var CompleteIcon = function () { return (react_1.default.createElement("div", { className: DoDont_st_css_1.classes.completeIcon },
    react_1.default.createElement(wix_ui_icons_common_1.StatusCompleteFilledSmall, null))); };
var List = function (_a) {
    var skin = _a.skin, list = _a.list;
    return (react_1.default.createElement("div", { className: DoDont_st_css_1.classes.list }, list.map(function (item, id) { return (react_1.default.createElement(Text_1.default, { as: "span", key: id, weight: "normal", className: DoDont_st_css_1.classes.listItem },
        skin === 'red' ? react_1.default.createElement(DismisIcon, null) : react_1.default.createElement(CompleteIcon, null),
        item)); })));
};
var Block = function (_a) {
    var skin = _a.skin, full = _a.full, children = _a.children, dataHook = _a.dataHook;
    return (react_1.default.createElement("div", { "data-hook": dataHook, className: (0, DoDont_st_css_1.st)(DoDont_st_css_1.classes.block, { skin: skin, full: full }) }, children));
};
var Loading = function () { return (react_1.default.createElement("div", { style: { display: 'flex', gap: '24px', marginBottom: '54px' } },
    react_1.default.createElement(SkeletonRectangle_1.SkeletonRectangle, { height: "100px", width: "100%" }),
    react_1.default.createElement(SkeletonRectangle_1.SkeletonRectangle, { height: "100px" }))); };
var DoDontContent = function (props) { return (react_1.default.createElement("div", { className: DoDont_st_css_1.classes.root },
    props.do && (react_1.default.createElement(Block, { dataHook: "dodont-do", skin: "green", full: !props.do || !props.dont },
        react_1.default.createElement(Text_1.default, { weight: "bold", className: (0, DoDont_st_css_1.st)(DoDont_st_css_1.classes.title, { skin: 'green' }) }, props.do.title ? props.do.title : 'Do'),
        react_1.default.createElement(List, { list: props.do.list, skin: "green" }))),
    props.dont && (react_1.default.createElement(Block, { dataHook: "dodont-dont", skin: "red", full: !props.do || !props.dont },
        react_1.default.createElement(Text_1.default, { weight: "bold", className: (0, DoDont_st_css_1.st)(DoDont_st_css_1.classes.title, { skin: 'red' }) }, props.dont.title ? props.dont.title : "Don't"),
        react_1.default.createElement(List, { list: props.dont.list, skin: "red" }))))); };
var isContentExists = function (props) {
    var doExists = props.do && props.do.list.length > 0;
    var dontExists = props.dont && props.dont.list.length > 0;
    return doExists || dontExists;
};
var DoDont = function (props) {
    if (props.loading) {
        return react_1.default.createElement(Loading, null);
    }
    if (isContentExists(props)) {
        return react_1.default.createElement(DoDontContent, tslib_1.__assign({}, props));
    }
    return null;
};
exports.default = DoDont;
//# sourceMappingURL=DoDont.js.map