@equinor/eds-core-react/dist/esm/components/Typography/Heading.js

The React implementation of the Equinor Design System

import { forwardRef } from 'react';
import { TypographyNext } from './Typography.new.js';
import { jsx } from 'react/jsx-runtime';

const getHeadingSize = as => {
  switch (as) {
    case 'h1':
      return '6xl';
    case 'h2':
      return '5xl';
    case 'h3':
      return '4xl';
    case 'h4':
      return '3xl';
    case 'h5':
      return '2xl';
    case 'h6':
      return 'xl';
    default:
      return '6xl';
  }
};

/**
 * Heading component for semantic headings (h1-h6).
 * Uses the design system's typography styles for headings.
 */
const Heading = /*#__PURE__*/forwardRef(({
  lineHeight = 'squished',
  weight = 'normal',
  tracking = 'normal',
  debug,
  as,
  ...rest
}, ref) => {
  return /*#__PURE__*/jsx(TypographyNext, {
    ref: ref,
    as: as,
    family: "header",
    baseline: "grid",
    size: getHeadingSize(as),
    lineHeight: lineHeight,
    weight: weight,
    tracking: tracking,
    debug: debug,
    ...rest
  });
});
Heading.displayName = 'Heading';

export { Heading };