@redocly/theme/lib/components/Accordion/AccordionHeader.js

Shared UI components lib

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AccordionHeader = AccordionHeader;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
function AccordionHeader({ isExpandable, expanded, disabled, children, className, onClick, }) {
    return (react_1.default.createElement(AccordionHeaderWrapper, { className: className, "$isExpandable": isExpandable, "$expanded": expanded, "$disabled": disabled, onClick: onClick, "data-component-name": "Accordion/AccordionHeader" }, children));
}
const AccordionHeaderWrapper = styled_components_1.default.div `
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  color: var(--accordion-header-text-color);

  cursor: ${({ $isExpandable = true }) => ($isExpandable ? 'pointer' : 'default')};

  line-height: var(--accordion-header-line-height);
  font-size: var(--accordion-header-font-size);
  font-family: var(--accordion-header-font-family);
  font-weight: var(--accordion-header-font-weight);
  padding: var(--accordion-header-padding);
  border: var(--accordion-header-border);
  background-color: var(--accordion-header-bg-color);
  border-radius: var(--accordion-border-radius);

  pointer-events: ${({ $disabled }) => ($disabled ? 'none' : 'auto')};

  &:hover {
    color: ${({ $isExpandable = true }) => $isExpandable ? 'var(--text-color-primary)' : 'var(--accordion-header-text-color)'};
  }
`;
//# sourceMappingURL=AccordionHeader.js.map