@wix/design-system/dist/cjs/SidePanel/components/Section/Section.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _SectionSt = require("./Section.st.css.js");
var _useId = require("../../../utils/useId");
var _SectionHeader = _interopRequireDefault(require("../../../SectionHeader"));
var _constants = require("../../constants");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/SidePanel/components/Section/Section.tsx";
var Section = _ref => {
  var title = _ref.title,
    _ref$titleVisible = _ref.titleVisible,
    titleVisible = _ref$titleVisible === void 0 ? true : _ref$titleVisible,
    suffix = _ref.suffix,
    children = _ref.children,
    ariaLabel = _ref.ariaLabel,
    dataHook = _ref.dataHook,
    as = _ref.as,
    ariaDescribedBy = _ref['aria-describedby'],
    id = _ref.id;
  var generatedId = (0, _useId.useId)('title_');
  var titleId = id || generatedId;
  var getAriaLabel = () => {
    if (typeof title !== 'string') {
      return ariaLabel;
    }
    return ariaLabel || title;
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": dataHook,
    "data-title": typeof title === 'string' ? title : undefined,
    className: _SectionSt.classes.section,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 31,
      columnNumber: 5
    }
  }, titleVisible && /*#__PURE__*/_react.default.createElement(_SectionHeader.default, {
    id: titleId,
    skin: "neutral",
    divider: "bottom",
    align: "start",
    size: "small",
    horizontalPadding: "large",
    title: title,
    suffix: suffix,
    dataHook: _constants.dataHooks.sidePanelSectionHeader,
    as: as,
    "aria-describedby": ariaDescribedBy,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 37,
      columnNumber: 9
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    role: "group",
    "aria-label": getAriaLabel(),
    "aria-labelledby": titleVisible ? titleId : undefined,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 51,
      columnNumber: 7
    }
  }, children));
};
Section.displayName = 'Section';
var _default = exports.default = Section;
//# sourceMappingURL=Section.js.map