wix-storybook-utils
Version:
Utilities for automated component documentation within Storybook
46 lines • 2.88 kB
JavaScript
import { __assign } from "tslib";
import React from 'react';
import Text from '../Text';
import { st, classes } from './DoDont.st.css';
import { SkeletonRectangle } from '../SkeletonRectangle/SkeletonRectangle';
import { DismissSmall, StatusCompleteFilledSmall, } from '@wix/wix-ui-icons-common';
var DismisIcon = function () { return (React.createElement("div", { className: classes.dismissContainer },
React.createElement(DismissSmall, { className: classes.dismissIcon }))); };
var CompleteIcon = function () { return (React.createElement("div", { className: classes.completeIcon },
React.createElement(StatusCompleteFilledSmall, null))); };
var List = function (_a) {
var skin = _a.skin, list = _a.list;
return (React.createElement("div", { className: classes.list }, list.map(function (item, id) { return (React.createElement(Text, { as: "span", key: id, weight: "normal", className: classes.listItem },
skin === 'red' ? React.createElement(DismisIcon, null) : React.createElement(CompleteIcon, null),
item)); })));
};
var Block = function (_a) {
var skin = _a.skin, full = _a.full, children = _a.children, dataHook = _a.dataHook;
return (React.createElement("div", { "data-hook": dataHook, className: st(classes.block, { skin: skin, full: full }) }, children));
};
var Loading = function () { return (React.createElement("div", { style: { display: 'flex', gap: '24px', marginBottom: '54px' } },
React.createElement(SkeletonRectangle, { height: "100px", width: "100%" }),
React.createElement(SkeletonRectangle, { height: "100px" }))); };
var DoDontContent = function (props) { return (React.createElement("div", { className: classes.root },
props.do && (React.createElement(Block, { dataHook: "dodont-do", skin: "green", full: !props.do || !props.dont },
React.createElement(Text, { weight: "bold", className: st(classes.title, { skin: 'green' }) }, props.do.title ? props.do.title : 'Do'),
React.createElement(List, { list: props.do.list, skin: "green" }))),
props.dont && (React.createElement(Block, { dataHook: "dodont-dont", skin: "red", full: !props.do || !props.dont },
React.createElement(Text, { weight: "bold", className: st(classes.title, { skin: 'red' }) }, props.dont.title ? props.dont.title : "Don't"),
React.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.createElement(Loading, null);
}
if (isContentExists(props)) {
return React.createElement(DoDontContent, __assign({}, props));
}
return null;
};
export default DoDont;
//# sourceMappingURL=DoDont.js.map