wix-style-react
Version:
wix-style-react
30 lines • 1.81 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './SidebarHeaderNext.st.css';
import { dataHooks } from './constants';
import Text from '../Text';
import { SidebarNextContext } from '../SidebarNext/SidebarNextContext';
import { sidebarSkins } from '../SidebarNext/constants';
/** A header within the sidebar with title, subtitle and custom content at the bottom. */
const SidebarHeaderNext = ({ dataHook, className, title, subtitle, children, }) => (React.createElement(SidebarNextContext.Consumer, null, context => {
const skin = (context && context.skin) || sidebarSkins.dark;
return (React.createElement("div", { "data-hook": dataHook, "data-skin": skin, className: st(classes.root, { skin }, className) },
title && (React.createElement(Text, { dataHook: dataHooks.title, className: classes.title, size: "medium", weight: "bold", ellipsis: typeof title === 'string', light: skin === sidebarSkins.dark }, title)),
subtitle && (React.createElement(Text, { dataHook: dataHooks.subtitle, size: "tiny", weight: "thin", ellipsis: typeof subtitle === 'string', light: skin === sidebarSkins.dark }, subtitle)),
children));
}));
SidebarHeaderNext.displayName = 'SidebarHeaderNext';
SidebarHeaderNext.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** A css class to be applied to the component's root element */
className: PropTypes.string,
/** A text to show as the header title */
title: PropTypes.node,
/** A text to show as the header subtitle */
subtitle: PropTypes.node,
/** A custom node to render from the bottom */
children: PropTypes.node,
};
export default SidebarHeaderNext;
//# sourceMappingURL=SidebarHeaderNext.js.map