@fluentui/react-northstar
Version:
A themable React component library.
97 lines (96 loc) • 3.86 kB
JavaScript
import * as customPropTypes from '@fluentui/react-proptypes';
import * as React from 'react';
import { childrenExist, createShorthandFactory, commonPropTypes, rtlTextContainer } from '../../utils';
import { HeaderDescription } from './HeaderDescription';
import { useTelemetry, useAccessibility, useFluentContext, getElementType, useUnhandledProps, useStyles } from '@fluentui/react-bindings';
export var headerClassName = 'ui-header';
/**
* A Header organises the content by declaring a content's topic.
*
* @accessibility
* Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation.
* Nest headings by their rank (or level). The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.
*
* Other considerations:
* - when the description property is used in header, readers will narrate both header content and description within the element. In addition to that, both will be displayed in the list of headings.
*/
export var Header = /*#__PURE__*/function () {
var Header = /*#__PURE__*/React.forwardRef(function (props, ref) {
var context = useFluentContext();
var _useTelemetry = useTelemetry(Header.displayName, context.telemetry),
setStart = _useTelemetry.setStart,
setEnd = _useTelemetry.setEnd;
setStart();
var children = props.children,
content = props.content,
variables = props.variables,
align = props.align,
className = props.className,
design = props.design,
styles = props.styles,
description = props.description,
color = props.color;
var ElementType = getElementType(props);
var unhandledProps = useUnhandledProps(Header.handledProps, props);
var hasChildren = childrenExist(children);
var contentElement = hasChildren ? children : content;
var getA11yProps = useAccessibility(props.accessibility, {
debugName: Header.displayName,
rtl: context.rtl
});
var _useStyles = useStyles(Header.displayName, {
className: headerClassName,
mapPropsToStyles: function mapPropsToStyles() {
return {
align: align,
hasDescription: !!description,
color: color
};
},
mapPropsToInlineStyles: function mapPropsToInlineStyles() {
return {
className: className,
design: design,
styles: styles,
variables: variables
};
},
rtl: context.rtl
}),
classes = _useStyles.classes;
var element = /*#__PURE__*/React.createElement(ElementType, getA11yProps('root', Object.assign({
className: classes.root,
ref: ref
}, unhandledProps, rtlTextContainer.getAttributes({
forElements: [children, content],
condition: !description
}))), rtlTextContainer.createFor({
element: contentElement,
condition: !!description
}), !hasChildren && HeaderDescription.create(description, {
defaultProps: function defaultProps() {
return getA11yProps('description', {});
}
}));
setEnd();
return element;
});
Header.displayName = 'Header';
Header.propTypes = Object.assign({}, commonPropTypes.createCommon({
color: true
}), {
description: customPropTypes.itemShorthand,
align: customPropTypes.align
});
Header.defaultProps = {
as: 'h1'
};
Header.handledProps = Object.keys(Header.propTypes);
Header.Description = HeaderDescription;
Header.create = createShorthandFactory({
Component: Header,
mappedProp: 'content'
});
return Header;
}();
//# sourceMappingURL=Header.js.map