@redocly/theme/src/components/Panel/PanelHeader.ts

Shared UI components lib

import styled from 'styled-components';

import type { BaseSyntheticEvent } from 'react';

export type PanelHeaderProps = {
  isExpandable?: boolean;
  expanded?: boolean;
  disabled?: boolean;
  toggle?: (e: BaseSyntheticEvent) => void;
};

export const PanelHeader = styled.div.attrs<{ className?: string }>(({ className }) => ({
  'data-component-name': 'Panel/PanelHeader',
  className,
}))<PanelHeaderProps>`
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-unit);
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  white-space: var(--panel-heading-white-space-local);
  color: var(--panel-heading-text-color);

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

  line-height: var(--panel-heading-line-height-local);
  font-size: var(--panel-heading-font-size-local);
  font-family: var(--panel-heading-font-family-local);
  padding: var(--panel-heading-padding-local);
  border: var(--panel-heading-border);
  border-bottom: ${({ isExpandable = true }) =>
    isExpandable ? 'none' : 'var(--panel-heading-border-bottom)'};
  background-color: var(--panel-heading-bg-color);

  border-top-left-radius: var(--panel-border-radius);
  border-top-right-radius: var(--panel-border-radius);
  border-bottom-right-radius: ${({ expanded, isExpandable = true }) =>
    expanded || !isExpandable ? '0' : 'var(--panel-border-radius)'};
  border-bottom-left-radius: ${({ expanded, isExpandable = true }) =>
    expanded || !isExpandable ? '0' : 'var(--panel-border-radius)'};

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