wix-storybook-utils
Version:
Utilities for automated component documentation within Storybook
65 lines • 2.83 kB
JavaScript
import { __extends } from "tslib";
import React from 'react';
import { string, node, bool, object, oneOfType } from 'prop-types';
import SyntaxHighlighter, { registerLanguage, } from 'react-syntax-highlighter/prism-light';
import jsx from 'react-syntax-highlighter/languages/prism/jsx';
import vs from 'react-syntax-highlighter/styles/prism/vs';
import classnames from 'classnames';
import styles from './CodeShowcase.scss';
import List from './components/List';
import { iconShow } from './components/Show';
import { iconHide } from './components/Hide';
registerLanguage('jsx', jsx);
var customHighlighterStyle = {
padding: '16px 0',
border: 'none',
fontFamily: "\"HelveticaNeueW01-45Ligh\",\"sans-serif\"",
fontSize: '1.2em',
};
var CodeShowcase = /** @class */ (function (_super) {
__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.createElement("div", { style: style, className: classnames(styles.root, theme) },
React.createElement("section", { className: styles.demo },
React.createElement(List, { inverted: inverted }, children)),
React.createElement("section", { className: styles.meta },
React.createElement("a", { href: link, className: styles.title }, title),
React.createElement("div", { className: styles.description }, description),
React.createElement("span", { className: show ? styles.iconHide : styles.iconShow, onClick: this.toggleCodeShow }, show ? iconHide : iconShow)),
React.createElement("section", { className: show ? styles.code : styles.codeHide },
React.createElement(SyntaxHighlighter, { customStyle: customHighlighterStyle, language: "jsx", codeTagProps: {
style: { fontFamily: "monospace" },
}, style: vs }, code))));
};
return CodeShowcase;
}(React.Component));
CodeShowcase.propTypes = {
title: string,
children: node,
code: string,
inverted: bool,
description: oneOfType([string, object]),
link: string,
theme: string,
style: object,
className: string,
};
CodeShowcase.defaultProps = {
title: 'Example',
inverted: false,
code: '',
};
export default CodeShowcase;
//# sourceMappingURL=index.js.map