wix-storybook-utils
Version:
Utilities for automated component documentation within Storybook
52 lines • 2.52 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var prop_types_1 = tslib_1.__importDefault(require("prop-types"));
var react_collapse_1 = tslib_1.__importDefault(require("react-collapse"));
var styles_scss_1 = tslib_1.__importDefault(require("./styles.scss"));
var CodeBlock_1 = tslib_1.__importDefault(require("../CodeBlock"));
var TextButton_1 = tslib_1.__importDefault(require("../TextButton"));
var CodeExample = /** @class */ (function (_super) {
tslib_1.__extends(CodeExample, _super);
function CodeExample(props) {
var _this = _super.call(this, props) || this;
_this.state = {
isOpened: !!props.autoExpand,
};
_this.toggleCode = _this.toggleCode.bind(_this);
return _this;
}
CodeExample.prototype.toggleCode = function () {
this.setState({
isOpened: !this.state.isOpened,
});
};
CodeExample.prototype.render = function () {
var _a = this.props, dataHook = _a.dataHook, title = _a.title, code = _a.code, codeType = _a.codeType, children = _a.children;
return (react_1.default.createElement("div", { "data-hook": dataHook },
react_1.default.createElement("div", { className: styles_scss_1.default.panelControl, style: { display: 'flex' } },
react_1.default.createElement("h2", null, title),
react_1.default.createElement("div", { style: { margin: '22px 24px 0' } },
react_1.default.createElement(TextButton_1.default, { onClick: this.toggleCode },
this.state.isOpened ? 'Hide' : 'Show',
" code"))),
react_1.default.createElement(react_collapse_1.default, { isOpened: this.state.isOpened },
react_1.default.createElement(CodeBlock_1.default, { source: code, type: codeType })),
react_1.default.createElement("div", null, children)));
};
CodeExample.propTypes = {
code: prop_types_1.default.string,
codeType: prop_types_1.default.string,
children: prop_types_1.default.node,
title: prop_types_1.default.string,
autoExpand: prop_types_1.default.bool,
dataHook: prop_types_1.default.string,
};
CodeExample.defaultProps = {
codeType: 'js',
};
return CodeExample;
}(react_1.Component));
exports.default = CodeExample;
//# sourceMappingURL=index.js.map