@wordpress/components/build-module/heading/hook.js

UI components for WordPress.

/**
 * Internal dependencies
 */
import { useContextSystem } from '../ui/context'; // eslint-disable-next-line no-duplicate-imports

import { useText } from '../text';
import { getHeadingFontSize } from '../ui/utils/font-size';
import { CONFIG, COLORS } from '../utils';
export function useHeading(props) {
  const {
    as: asProp,
    level = 2,
    ...otherProps
  } = useContextSystem(props, 'Heading');
  const as = asProp || `h${level}`;
  const a11yProps = {};

  if (typeof as === 'string' && as[0] !== 'h') {
    // if not a semantic `h` element, add a11y props:
    a11yProps.role = 'heading';
    a11yProps['aria-level'] = level;
  }

  const textProps = useText({
    color: COLORS.darkGray.heading,
    size: getHeadingFontSize(level),
    isBlock: true,
    weight: CONFIG.fontWeightHeading,
    ...otherProps
  });
  return { ...textProps,
    ...a11yProps,
    as
  };
}
//# sourceMappingURL=hook.js.map