@bootstrap-styled/rsg-components
Version:
Create documentation layouts for your react-styleguidist using Bootstrap-Styled rsg-component. Boostrap Styled rsg-components use the @bootstrap-styled/v4 for recreating the original rsg-components.
175 lines (144 loc) • 10 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.propTypes = exports.defaultProps = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _A = _interopRequireDefault(require("@bootstrap-styled/v4/lib/A"));
var _reactFontawesome = require("@fortawesome/react-fontawesome");
var _hover = require("@bootstrap-styled/css-mixins/lib/hover");
var _breakpoints = _interopRequireDefault(require("@bootstrap-styled/css-mixins/lib/breakpoints"));
var _classnames = _interopRequireDefault(require("classnames"));
var _lodash = _interopRequireDefault(require("lodash.omit"));
var _lib = _interopRequireDefault(require("map-to-css-modules/lib"));
var _Heading = _interopRequireDefault(require("../Heading"));
var defaultProps = {
href: '#',
theme: {
styleguide: {
'$rsg-section-heading-display': 'flex',
'$rsg-section-heading-flex-direction': 'row',
'$rsg-section-heading-align-items': 'center',
'$rsg-section-heading-margin-bottom': '8px',
'$rsg-section-heading-section-name-isolation': 'false',
'$rsg-section-heading-section-name-text-decoration': 'underline',
'$rsg-section-heading-section-name-cursor': 'pointer',
'$rsg-section-heading-section-name-color': '#B31255',
'$rsg-section-heading-anchor-font-size': '0.8em',
'$rsg-section-heading-anchor-font-weight': 'normal',
'$rsg-section-heading-anchor-transform': 'rotate(-5deg)',
'$rsg-section-heading-anchor-color': '#CCCCCC',
'$rsg-section-heading-anchor-padding': '6px 5px 0 0',
'$rsg-section-heading-anchor-display': 'table-cell',
'$rsg-section-heading-anchor-vertical-align': 'middle',
'$rsg-section-heading-deprecated-text-decoration': 'line-through',
'$rsg-section-heading-deprecated-cursor': '#767676',
'$rsg-section-heading-toolbar-margin-left': 'auto',
'$rsg-section-heading-1-link-color': '#292b2c',
'$rsg-section-heading-2-link-color': '#767676'
}
}
};
exports.defaultProps = defaultProps;
var propTypes = {
/**
* @ignore
*/
className: _propTypes.default.string,
// eslint-disable-line react/require-default-props
/** Specified node element will be passed as children of `<SectionHeadingRenderer />` component. */
children: _propTypes.default.node,
// eslint-disable-line react/require-default-props
/** Toolbar element to be rendered. */
toolbar: _propTypes.default.node,
// eslint-disable-line react/require-default-props
/** Set id used by `<Heading />` component. */
id: _propTypes.default.string.isRequired,
/** Set anchor link href used by `<A />` component. */
href: _propTypes.default.string,
/** Set level used in `<Heading />` component. */
depth: _propTypes.default.number.isRequired,
/** Toggle deprecated style. */
deprecated: _propTypes.default.bool,
// eslint-disable-line react/require-default-props
/** Theme variables. Can be: */
theme: _propTypes.default.shape({
styleguide: _propTypes.default.shape({
'$rsg-section-heading-display': _propTypes.default.string,
'$rsg-section-heading-flex-direction': _propTypes.default.string,
'$rsg-section-heading-align-items': _propTypes.default.string,
'$rsg-section-heading-margin-bottom': _propTypes.default.string,
'$rsg-section-heading-section-name-isolation': _propTypes.default.string,
'$rsg-section-heading-section-name-text-decoration': _propTypes.default.string,
'$rsg-section-heading-section-name-cursor': _propTypes.default.string,
'$rsg-section-heading-section-name-color': _propTypes.default.string,
'$rsg-section-heading-anchor-font-size': _propTypes.default.string,
'$rsg-section-heading-anchor-font-weight': _propTypes.default.string,
'$rsg-section-heading-anchor-transform': _propTypes.default.string,
'$rsg-section-heading-anchor-color': _propTypes.default.string,
'$rsg-section-heading-anchor-padding': _propTypes.default.string,
'$rsg-section-heading-anchor-display': _propTypes.default.string,
'$rsg-section-heading-anchor-vertical-align': _propTypes.default.string,
'$rsg-section-heading-deprecated-text-decoration': _propTypes.default.string,
'$rsg-section-heading-deprecated-cursor': _propTypes.default.string,
'$rsg-section-heading-toolbar-margin-left': _propTypes.default.string,
'$rsg-section-heading-1-link-color': _propTypes.default.string,
'$rsg-section-heading-2-link-color': _propTypes.default.string
})
}),
/**
* Replace or remove a className from the component.
* See example <a href="https://www.npmjs.com/package/map-to-css-modules" target="_blank">here</a>.
*/
cssModule: _propTypes.default.object // eslint-disable-line react/require-default-props
};
exports.propTypes = propTypes;
var SectionHeadingRendererUnstyled = function SectionHeadingRendererUnstyled(props) {
var _omit = (0, _lodash.default)(props, ['theme', 'slotProps', 'pagePerSection', 'slotName']),
className = _omit.className,
cssModule = _omit.cssModule,
children = _omit.children,
toolbar = _omit.toolbar,
id = _omit.id,
href = _omit.href,
depth = _omit.depth,
deprecated = _omit.deprecated,
theme = _omit.theme,
attributes = (0, _objectWithoutProperties2.default)(_omit, ["className", "cssModule", "children", "toolbar", "id", "href", "depth", "deprecated", "theme"]);
var headingLevel = Math.min(6, depth);
return _react.default.createElement("div", (0, _extends2.default)({
className: (0, _lib.default)((0, _classnames.default)(className, 'rsg-section-heading position-relative'), cssModule)
}, attributes), _react.default.createElement(_Heading.default, {
level: headingLevel,
id: id
}, _react.default.createElement(_A.default, {
className: "section-name level-".concat(headingLevel, " ").concat(deprecated ? 'deprecated' : '', " d-flex justify-content-between"),
href: href
}, _react.default.createElement("div", {
className: "no-print"
}, _react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
className: "anchor position-absolute",
icon: ['fas', 'link']
})), children)), _react.default.createElement("div", {
className: "toolbar"
}, toolbar));
};
SectionHeadingRendererUnstyled.defaultProps = defaultProps;
SectionHeadingRendererUnstyled.propTypes = propTypes;
var SectionHeadingRenderer = (0, _styledComponents.default)(SectionHeadingRendererUnstyled).withConfig({
displayName: "SectionHeadingRenderer",
componentId: "vtbiqf-0"
})([" ", ""], function (props) {
return "\n &.rsg-section-heading {\n display: ".concat(props.theme.styleguide['$rsg-section-heading-display'], ";\n flex-direction: ").concat(props.theme.styleguide['$rsg-section-heading-flex-direction'], ";\n align-items: ").concat(props.theme.styleguide['$rsg-section-heading-align-items'], ";\n margin-bottom: ").concat(props.theme.styleguide['$rsg-section-heading-margin-bottom'], ";\n & .section-name {\n ").concat((0, _hover.hoverFocusActive)(props.theme['$enable-hover-media-query'], "\n isolation: ".concat(props.theme.styleguide['$rsg-section-heading-section-name-isolation'], ";\n text-decoration: ").concat(props.theme.styleguide['$rsg-section-heading-section-name-text-decoration'], ";\n cursor: ").concat(props.theme.styleguide['$rsg-section-heading-section-name-cursor'], ";\n color: ").concat(props.theme.styleguide['$rsg-section-heading-section-name-color'], ";\n .anchor {\n color: ").concat(props.theme.styleguide['$rsg-section-heading-section-name-color'], ";\n }\n ")), "\n .anchor {\n font-size: ").concat(props.theme.styleguide['$rsg-section-heading-anchor-font-size'], ";\n font-weight: ").concat(props.theme.styleguide['$rsg-section-heading-anchor-font-weight'], ";\n transform: ").concat(props.theme.styleguide['$rsg-section-heading-anchor-transform'], ";\n color: ").concat(props.theme.styleguide['$rsg-section-heading-anchor-color'], ";\n padding: ").concat(props.theme.styleguide['$rsg-section-heading-anchor-padding'], ";\n display: ").concat(props.theme.styleguide['$rsg-section-heading-anchor-display'], ";\n vertical-align: ").concat(props.theme.styleguide['$rsg-section-heading-anchor-vertical-align'], ";\n right: 1em;\n ").concat(_breakpoints.default.up('md', props.theme['$grid-breakpoints'], "\n left: -1.5em;\n right: auto;\n "), "\n }\n }\n & .deprecated {\n cursor: ").concat(props.theme.styleguide['$rsg-section-heading-deprecated-cursor'], ";\n &, &:hover {\n text-decoration: ").concat(props.theme.styleguide['$rsg-section-heading-deprecated-text-decoration'], ";\n\n }\n }\n & .toolbar {\n margin-left: ").concat(props.theme.styleguide['$rsg-section-heading-toolbar-margin-left'], ";\n }\n {}\n & .level-1 {\n color: ").concat(props.theme.styleguide['$rsg-section-heading-1-color'], ";\n }\n & .level-2 {\n color: ").concat(props.theme.styleguide['$rsg-section-heading-2-color'], ";\n }\n }\n ");
});
SectionHeadingRenderer.defaultProps = defaultProps;
SectionHeadingRenderer.propTypes = propTypes;
/** @component */
var _default = (0, _styledComponents.withTheme)(SectionHeadingRenderer);
exports.default = _default;