@wix/design-system
Version:
@wix/design-system
21 lines • 1.29 kB
JavaScript
import React from 'react';
import { classes } from './Section.st.css.js';
import { useId } from '../../../utils/useId';
import SectionHeader from '../../../SectionHeader';
import { dataHooks } from '../../constants';
const Section = ({ title, titleVisible = true, suffix, children, ariaLabel, dataHook, as, 'aria-describedby': ariaDescribedBy, id, }) => {
const generatedId = useId('title_');
const titleId = id || generatedId;
const getAriaLabel = () => {
if (typeof title !== 'string') {
return ariaLabel;
}
return ariaLabel || title;
};
return (React.createElement("div", { "data-hook": dataHook, "data-title": typeof title === 'string' ? title : undefined, className: classes.section },
titleVisible && (React.createElement(SectionHeader, { id: titleId, skin: "neutral", divider: "bottom", align: "start", size: "small", horizontalPadding: "large", title: title, suffix: suffix, dataHook: dataHooks.sidePanelSectionHeader, as: as, "aria-describedby": ariaDescribedBy })),
React.createElement("div", { role: "group", "aria-label": getAriaLabel(), "aria-labelledby": titleVisible ? titleId : undefined }, children)));
};
Section.displayName = 'Section';
export default Section;
//# sourceMappingURL=Section.js.map