wix-storybook-utils
Version:
Utilities for automated component documentation within Storybook
67 lines • 3.59 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var prop_types_1 = require("prop-types");
var prism_light_1 = tslib_1.__importStar(require("react-syntax-highlighter/prism-light"));
var jsx_1 = tslib_1.__importDefault(require("react-syntax-highlighter/languages/prism/jsx"));
var vs_1 = tslib_1.__importDefault(require("react-syntax-highlighter/styles/prism/vs"));
var classnames_1 = tslib_1.__importDefault(require("classnames"));
var CodeShowcase_scss_1 = tslib_1.__importDefault(require("./CodeShowcase.scss"));
var List_1 = tslib_1.__importDefault(require("./components/List"));
var Show_1 = require("./components/Show");
var Hide_1 = require("./components/Hide");
(0, prism_light_1.registerLanguage)('jsx', jsx_1.default);
var customHighlighterStyle = {
padding: '16px 0',
border: 'none',
fontFamily: "\"HelveticaNeueW01-45Ligh\",\"sans-serif\"",
fontSize: '1.2em',
};
var CodeShowcase = /** @class */ (function (_super) {
tslib_1.__extends(CodeShowcase, _super);
function CodeShowcase() {
var _this = _super.call(this) || this;
_this.toggleCodeShow = function () {
_this.setState({ show: !_this.state.show });
};
_this.state = {
show: false,
};
return _this;
}
CodeShowcase.prototype.render = function () {
var _a = this.props, code = _a.code, title = _a.title, description = _a.description, link = _a.link, inverted = _a.inverted, theme = _a.theme, style = _a.style, children = _a.children;
var show = this.state.show;
return (react_1.default.createElement("div", { style: style, className: (0, classnames_1.default)(CodeShowcase_scss_1.default.root, theme) },
react_1.default.createElement("section", { className: CodeShowcase_scss_1.default.demo },
react_1.default.createElement(List_1.default, { inverted: inverted }, children)),
react_1.default.createElement("section", { className: CodeShowcase_scss_1.default.meta },
react_1.default.createElement("a", { href: link, className: CodeShowcase_scss_1.default.title }, title),
react_1.default.createElement("div", { className: CodeShowcase_scss_1.default.description }, description),
react_1.default.createElement("span", { className: show ? CodeShowcase_scss_1.default.iconHide : CodeShowcase_scss_1.default.iconShow, onClick: this.toggleCodeShow }, show ? Hide_1.iconHide : Show_1.iconShow)),
react_1.default.createElement("section", { className: show ? CodeShowcase_scss_1.default.code : CodeShowcase_scss_1.default.codeHide },
react_1.default.createElement(prism_light_1.default, { customStyle: customHighlighterStyle, language: "jsx", codeTagProps: {
style: { fontFamily: "monospace" },
}, style: vs_1.default }, code))));
};
return CodeShowcase;
}(react_1.default.Component));
CodeShowcase.propTypes = {
title: prop_types_1.string,
children: prop_types_1.node,
code: prop_types_1.string,
inverted: prop_types_1.bool,
description: (0, prop_types_1.oneOfType)([prop_types_1.string, prop_types_1.object]),
link: prop_types_1.string,
theme: prop_types_1.string,
style: prop_types_1.object,
className: prop_types_1.string,
};
CodeShowcase.defaultProps = {
title: 'Example',
inverted: false,
code: '',
};
exports.default = CodeShowcase;
//# sourceMappingURL=index.js.map