@primer/react/lib-esm/experimental/Skeleton/SkeletonText.js

An implementation of GitHub's Primer Design System using React

import React from 'react';
import Box from '../../Box/Box.js';
import { SkeletonBox } from './SkeletonBox.js';
import classes from './SkeletonText.module.css.js';
import '../../FeatureFlags/FeatureFlags.js';
import { useFeatureFlag } from '../../FeatureFlags/useFeatureFlag.js';
import '../../FeatureFlags/DefaultFeatureFlags.js';
import { clsx } from 'clsx';
import '@styled-system/css';
import merge from 'deepmerge';
import { CSS_MODULE_FLAG } from './FeatureFlag.js';

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const skeletonTextStyles = {
  '&[data-component="SkeletonText"]': {
    '--font-size': 'var(--text-body-size-medium, 0.875rem)',
    '--line-height': 'var(--text-body-lineHeight-medium, 1.4285)',
    '--leading': 'calc(var(--font-size) * var(--line-height) - var(--font-size))',
    borderRadius: 'var(--borderRadius-small, 0.1875rem)',
    height: 'var(--font-size)',
    marginBlock: 'calc(var(--leading) / 2)'
  },
  '&[data-in-multiline="true"]': {
    marginBlockEnd: 'calc(var(--leading) * 2)'
  },
  '&[data-in-multiline="true"]:last-child': {
    maxWidth: '65%',
    minWidth: '50px',
    marginBottom: 0
  },
  '@supports (margin-block: mod(1px, 1px))': {
    '&[data-component="SkeletonText"]': {
      '--leading': 'mod(var(--font-size) * var(--line-height), var(--font-size))'
    }
  },
  '&[data-text-skeleton-size="display"], &[data-text-skeleton-size="titleLarge"]': {
    borderRadius: 'var(--borderRadius-medium, 0.375rem)'
  },
  '&[data-text-skeleton-size="display"]': {
    '--font-size': 'var(--text-display-size, 2.5rem)',
    '--line-height': 'var(--text-display-lineHeight, 1.4)'
  },
  '&[data-text-skeleton-size="titleLarge"]': {
    '--font-size': 'var(--text-title-size-large, 2.5rem)',
    '--line-height': 'var(--text-title-lineHeight-large, 1.5)'
  },
  '&[data-text-skeleton-size="titleMedium"]': {
    '--font-size': 'var(--text-title-size-medium, 1.25rem)',
    '--line-height': 'var(--text-title-lineHeight-medium, 1.6)'
  },
  '&[data-text-skeleton-size="titleSmall"]': {
    '--font-size': 'var(--text-title-size-small, 1rem)',
    '--line-height': 'var(--text-title-lineHeight-small, 1.5)'
  },
  '&[data-text-skeleton-size="subtitle"]': {
    '--font-size': 'var(--text-subtitle-size, 1.25rem)',
    '--line-height': 'var(--text-subtitle-lineHeight, 1.6)'
  },
  '&[data-text-skeleton-size="bodyLarge"]': {
    '--font-size': 'var(--text-body-size-large, 1rem)',
    '--line-height': 'var(--text-body-lineHeight-large, 1.5)'
  },
  '&[data-text-skeleton-size="bodySmall"]': {
    '--font-size': 'var(--text-body-size-small, 0.75rem)',
    '--line-height': 'var(--text-body-lineHeight-small, 1.6666)'
  }
};
const SkeletonText = ({
  lines = 1,
  maxWidth,
  size = 'bodyMedium',
  className,
  style,
  ...rest
}) => {
  const enabled = useFeatureFlag(CSS_MODULE_FLAG);
  if (lines < 2) {
    return /*#__PURE__*/React.createElement(SkeletonBox, _extends({
      "data-component": "SkeletonText",
      "data-text-skeleton-size": size,
      width: "100%",
      className: clsx(className, {
        [classes.SkeletonText]: enabled
      }),
      sx: enabled ? {} : {
        maxWidth,
        ...skeletonTextStyles
      },
      style: enabled ? merge(style, {
        maxWidth
      }) : style
    }, rest));
  } else {
    return /*#__PURE__*/React.createElement(Box, {
      "data-component": "multilineContainer",
      sx: {
        maxWidth,
        /* The tiny `paddingBlock` prevents margin collapse between the first skeleton line
         * and a bottom margin above it.
         */
        paddingBlock: '0.1px'
      },
      style: enabled ? merge(style, {
        maxWidth,
        paddingBlock: '0.1px'
      }) : style
    }, Array.from({
      length: lines
    }, (_, index) => /*#__PURE__*/React.createElement(SkeletonBox, _extends({
      key: index,
      "data-component": "SkeletonText",
      "data-in-multiline": "true",
      "data-text-skeleton-size": size,
      sx: enabled ? {} : skeletonTextStyles,
      className: clsx(className, {
        [classes.SkeletonText]: enabled
      })
    }, rest))));
  }
};

export { SkeletonText };