wix-storybook-utils

Version:
Utilities for automated component documentation within Storybook
48 lines • 3.36 kB
JavaScript
import * as React from 'react';
import Promote from '../../../icons/Promote';
import Code from '../../../icons/Code';
import { Layout, Cell } from '../../../ui/Layout';
import styles from './styles.scss';
import classNames from 'classnames';
import Badge from '../../../ui/badge';
export 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, { className: styles.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.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, { className: styles.titleLayout },
                React.createElement(Cell, { span: 6 },
                    React.createElement(React.Fragment, null,
                        React.createElement("div", { className: styles.title },
                            title || storyConfig.storyName,
                            status && renderStatus()),
                        status && renderStatusMessage())),
                React.createElement(Cell, { span: 6, className: styles.links, "data-hook": true },
                    issueURL && (React.createElement("div", { className: styles.link, "data-hook": "section-header-issueUrl" },
                        React.createElement(Promote, { size: "24px" }),
                        " ",
                        React.createElement("a", { href: issueURL }, "Report an issue"))),
                    source && (React.createElement("div", { className: styles.link, "data-hook": "section-header-sourceUrl" },
                        React.createElement(Code, { size: "24px" }),
                        " ",
                        React.createElement("a", { href: sourceUrl }, "Source"))))),
            component && React.createElement("div", { className: styles.component }, component)));
    };
    return (React.createElement("div", { className: classNames(styles.rootWrapper, styles[status]) },
        React.createElement("div", { className: styles.root }, renderHeader())));
};
//# sourceMappingURL=index.js.map