vue-styleguidist
Version:
Vue components style guide generator
83 lines • 2.5 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from 'react';
import PropTypes from 'prop-types';
import cx from 'clsx';
import Heading from 'rsg-components/Heading';
import Styled from 'rsg-components/Styled';
var styles = function styles(_ref) {
var color = _ref.color,
space = _ref.space,
fontSize = _ref.fontSize;
return {
wrapper: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
marginBottom: space[1]
},
toolbar: {
marginLeft: 'auto'
},
sectionName: {
'a&:hover, a&:active': {
isolate: false,
textDecoration: 'underline',
cursor: 'pointer'
}
},
isDeprecated: {
color: color.light,
'&, &:hover': {
textDecoration: 'line-through'
}
},
parentName: {
cursor: 'pointer',
fontSize: fontSize.h5,
fontStyle: 'italic',
margin: space[1]
}
};
};
var localPropTypes = {
classes: PropTypes.objectOf(PropTypes.string.isRequired).isRequired,
children: PropTypes.node,
toolbar: PropTypes.node,
id: PropTypes.string.isRequired,
href: PropTypes.string,
depth: PropTypes.number.isRequired,
deprecated: PropTypes.bool,
parentName: PropTypes.string,
parentHref: PropTypes.string
};
var SectionHeadingRenderer = function SectionHeadingRenderer(_ref2) {
var classes = _ref2.classes,
children = _ref2.children,
toolbar = _ref2.toolbar,
id = _ref2.id,
href = _ref2.href,
depth = _ref2.depth,
deprecated = _ref2.deprecated,
parentName = _ref2.parentName,
parentHref = _ref2.parentHref;
var headingLevel = Math.min(6, depth);
var sectionNameClasses = cx(classes.sectionName, _defineProperty({}, classes.isDeprecated, deprecated));
return /*#__PURE__*/React.createElement("div", {
className: classes.wrapper
}, /*#__PURE__*/React.createElement(Heading, {
level: headingLevel,
id: id
}, href ? /*#__PURE__*/React.createElement("a", {
href: href,
className: sectionNameClasses
}, children) : /*#__PURE__*/React.createElement("span", {
className: sectionNameClasses
}, children), parentName && parentHref && /*#__PURE__*/React.createElement("a", {
href: parentHref,
className: classes.parentName
}, parentName)), /*#__PURE__*/React.createElement("div", {
className: classes.toolbar
}, toolbar));
};
SectionHeadingRenderer.propTypes = localPropTypes;
export default Styled(styles)(SectionHeadingRenderer);