@shopify/polaris/dist/esm/components/Badge/Badge.js

Shopify’s product component library

import React$1, { useContext } from 'react';
import { useI18n } from '../../utilities/i18n/hooks.js';
import { classNames, variationName } from '../../utilities/css.js';
import { VisuallyHidden as VisuallyHidden$1 } from '../VisuallyHidden/VisuallyHidden.js';
import { WithinFilterContext } from '../../utilities/within-filter-context.js';
import styles from './Badge.scss.js';

var PROGRESS_LABELS = {
  incomplete: 'incomplete',
  partiallyComplete: 'partiallyComplete',
  complete: 'complete'
};
var STATUS_LABELS = {
  info: 'info',
  success: 'success',
  warning: 'warning',
  critical: 'critical',
  attention: 'attention',
  new: 'new'
};
var DEFAULT_SIZE = 'medium';
function Badge({
  children,
  status,
  progress,
  size = DEFAULT_SIZE
}) {
  var i18n = useI18n();
  var withinFilter = useContext(WithinFilterContext);
  var className = classNames(styles.Badge, status && styles[variationName('status', status)], progress && styles[variationName('progress', progress)], size && size !== DEFAULT_SIZE && styles[variationName('size', size)], withinFilter && styles.withinFilter);
  var progressMarkup;

  switch (progress) {
    case PROGRESS_LABELS.incomplete:
      progressMarkup = i18n.translate('Polaris.Badge.PROGRESS_LABELS.incomplete');
      break;

    case PROGRESS_LABELS.partiallyComplete:
      progressMarkup = i18n.translate('Polaris.Badge.PROGRESS_LABELS.partiallyComplete');
      break;

    case PROGRESS_LABELS.complete:
      progressMarkup = i18n.translate('Polaris.Badge.PROGRESS_LABELS.complete');
      break;
  }

  var pipMarkup = progress ? /*#__PURE__*/React$1.createElement("span", {
    className: styles.Pip
  }, /*#__PURE__*/React$1.createElement(VisuallyHidden$1, null, progressMarkup)) : null;
  var statusMarkup;

  switch (status) {
    case STATUS_LABELS.info:
      statusMarkup = i18n.translate('Polaris.Badge.STATUS_LABELS.info');
      break;

    case STATUS_LABELS.success:
      statusMarkup = i18n.translate('Polaris.Badge.STATUS_LABELS.success');
      break;

    case STATUS_LABELS.warning:
      statusMarkup = i18n.translate('Polaris.Badge.STATUS_LABELS.warning');
      break;

    case STATUS_LABELS.critical:
      statusMarkup = i18n.translate('Polaris.Badge.STATUS_LABELS.critical');
      break;

    case STATUS_LABELS.attention:
      statusMarkup = i18n.translate('Polaris.Badge.STATUS_LABELS.attention');
      break;

    case STATUS_LABELS.new:
      statusMarkup = i18n.translate('Polaris.Badge.STATUS_LABELS.new');
      break;
  }

  var statusLabelMarkup = status ? /*#__PURE__*/React$1.createElement(VisuallyHidden$1, null, statusMarkup) : null;
  return /*#__PURE__*/React$1.createElement("span", {
    className: className
  }, statusLabelMarkup, pipMarkup, children);
}

export { Badge };