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

The React implementation of the Equinor Design System

import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { typographyTemplate, outlineTemplate } from '@equinor/eds-utils';
import { link, quickVariants, typography, colors } from './Typography.tokens.js';
import { jsx } from 'react/jsx-runtime';

const getElementType = (variant, link) => {
  if (link) {
    return 'a';
  }
  switch (variant) {
    case 'h1':
    case 'h2':
    case 'h3':
    case 'h4':
    case 'h5':
    case 'h6':
      return variant;
    case 'caption':
    case 'overline':
    case 'ingress':
    case 'meta':
    case 'body_short':
    case 'body_long':
    default:
      return 'p';
  }
};
const findTypography = (variantName, group) => {
  // For quick use when using paragraphs and headings we can skip group
  if (!group && quickVariants[variantName]) {
    return quickVariants[variantName];
  }
  return typography[group][variantName];
};

//@TODO: fix typescript here
// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
const findColor = (inputColor = null) => typeof colors[inputColor] === 'undefined' ? inputColor : colors[inputColor];
const toVariantName = (variant, bold = false, italic = false, link = false) => `${variant}${bold ? '_bold' : ''}${italic ? '_italic' : ''}${link ? '_link' : ''}`;
const StyledTypography = styled.p.withConfig({
  displayName: "Typography__StyledTypography",
  componentId: "sc-179guof-0"
})(["", " ", " ", " ", ""], ({
  $typography,
  $link
}) => typographyTemplate($typography, $link), ({
  $color
}) => css({
  color: findColor($color)
}), ({
  $lines
}) => $lines && css(["display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;"], $lines), ({
  $link
}) => $link && css(["&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], outlineTemplate(link.states.focus.outline), outlineTemplate(link.states.focus.outline)));
const Typography = /*#__PURE__*/forwardRef(function Typography({
  variant = 'body_short',
  children,
  bold,
  italic,
  link,
  lines,
  color,
  group,
  token,
  as: providedAs,
  ...other
}, ref) {
  const as = providedAs ? providedAs : getElementType(variant, link);
  const variantName = toVariantName(variant, bold, italic, link);
  const typography = findTypography(variantName, group);
  if (typeof typography === 'undefined') {
    throw new Error(`Typography variant not found for variant "${variantName}" ("${variant}") & group "${group || ''}"`);
  }
  return /*#__PURE__*/jsx(StyledTypography, {
    as: as,
    $typography: {
      ...typography,
      ...token
    },
    $link: link,
    $lines: lines,
    ref: ref,
    $color: color,
    ...other,
    children: children
  });
});

// Typography.displayName = 'EdsTypography'

export { Typography };