wix-storybook-utils
Version:
Utilities for automated component documentation within Storybook
53 lines • 3.92 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.header = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var Promote_1 = tslib_1.__importDefault(require("../../../icons/Promote"));
var Code_1 = tslib_1.__importDefault(require("../../../icons/Code"));
var Layout_1 = require("../../../ui/Layout");
var styles_scss_1 = tslib_1.__importDefault(require("./styles.scss"));
var classnames_1 = tslib_1.__importDefault(require("classnames"));
var badge_1 = tslib_1.__importDefault(require("../../../ui/badge"));
var header = function (section, storyConfig) {
var _a, _b, _c;
var title = section.title, component = section.component, sourceUrl = section.sourceUrl, issueUrl = section.issueUrl, _d = section.source, source = _d === void 0 ? true : _d;
var issueURL = ((_a = storyConfig.config) === null || _a === void 0 ? void 0 : _a.issueURL) || issueUrl;
var status = (_c = (_b = storyConfig === null || storyConfig === void 0 ? void 0 : storyConfig.story) === null || _b === void 0 ? void 0 : _b.config) === null || _c === void 0 ? void 0 : _c.status;
var renderStatus = function () {
return (React.createElement(badge_1.default, { className: styles_scss_1.default.badge, type: status === 'wip' ? 'warning' : 'error' }, status === 'wip' ? 'WORK IN PROGRESS' : 'DEPRECATED'));
};
var renderStatusMessage = function () {
var _a, _b;
var statusToMessageMap = {
wip: "This component is under development. API is not stable yet and can change anytime. Please don't use this component unless you were instructed otherwise.",
deprecated: 'This component deprecated and will not be supported moving forward.',
};
return (React.createElement("div", { className: styles_scss_1.default.statusMessage }, ((_b = (_a = storyConfig === null || storyConfig === void 0 ? void 0 : storyConfig.story) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.statusMessage) ||
statusToMessageMap[status]));
};
var renderHeader = function () {
return (React.createElement(React.Fragment, null,
React.createElement(Layout_1.Layout, { className: styles_scss_1.default.titleLayout },
React.createElement(Layout_1.Cell, { span: 6 },
React.createElement(React.Fragment, null,
React.createElement("div", { className: styles_scss_1.default.title },
title || storyConfig.storyName,
status && renderStatus()),
status && renderStatusMessage())),
React.createElement(Layout_1.Cell, { span: 6, className: styles_scss_1.default.links, "data-hook": true },
issueURL && (React.createElement("div", { className: styles_scss_1.default.link, "data-hook": "section-header-issueUrl" },
React.createElement(Promote_1.default, { size: "24px" }),
" ",
React.createElement("a", { href: issueURL }, "Report an issue"))),
source && (React.createElement("div", { className: styles_scss_1.default.link, "data-hook": "section-header-sourceUrl" },
React.createElement(Code_1.default, { size: "24px" }),
" ",
React.createElement("a", { href: sourceUrl }, "Source"))))),
component && React.createElement("div", { className: styles_scss_1.default.component }, component)));
};
return (React.createElement("div", { className: (0, classnames_1.default)(styles_scss_1.default.rootWrapper, styles_scss_1.default[status]) },
React.createElement("div", { className: styles_scss_1.default.root }, renderHeader())));
};
exports.header = header;
//# sourceMappingURL=index.js.map