lozenge.js

/* lozenge.tsx generated by @compiled/babel-plugin v0.38.1 */
import "./lozenge.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { memo, useMemo } from 'react';
import { fg } from '@atlaskit/platform-feature-flags';
import { Box } from '@atlaskit/primitives/compiled';
var stylesOld = {
  container: "_2rko12b0 _1reo15vq _18m915vq _18zr1b66 _1e0c116y _1kz6184x _kqswpfqs _vchhusvi",
  'text.bold.default': "_syaz15cr",
  'text.bold.inprogress': "_syaz15cr",
  'text.bold.moved': "_syazal3n",
  'text.bold.new': "_syaz15cr",
  'text.bold.removed': "_syaz15cr",
  'text.bold.success': "_syaz15cr",
  'text.subtle.default': "_syazjjyb",
  'text.subtle.inprogress': "_syaz1lpn",
  'text.subtle.moved': "_syaz1tm6",
  'text.subtle.new': "_syaz1mvf",
  'text.subtle.removed': "_syaz1ick",
  'text.subtle.success': "_syaz17fi"
};

// NOTE: This is isolated to avoid breaking the bounded `stylesOld` interface as they do not fall within the Design System.
var stylesOldUnbounded = {
  text: "_1reo15vq _18m915vq _ect41gqc _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
  customLetterspacing: "_1dyz9vsi"
};
var backgroundColorsOld = {
  bold: {
    default: 'color.background.neutral.bold',
    inprogress: 'color.background.information.bold',
    moved: 'color.background.warning.bold',
    new: 'color.background.discovery.bold',
    removed: 'color.background.danger.bold',
    success: 'color.background.success.bold'
  },
  subtle: {
    default: 'color.background.neutral',
    inprogress: 'color.background.information',
    moved: 'color.background.warning',
    new: 'color.background.discovery',
    removed: 'color.background.danger',
    success: 'color.background.success'
  }
};

/**
 * TODO: We should be using our bounded `cssMap` here, but most of
 * these styles from the visual refresh are not in the Design System.
 */
var stylesNew = {
  container: "_2rkofajl _1reo15vq _18m915vq _1e0c116y _vchhusvi _kqswpfqs _1kz6184x _bozg1b66 _y4ti1b66",
  containerSubtle: "_1cwg1n1a",
  text: "_1reo15vq _18m915vq _ect41gqc _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
  customLetterspacing: "_1dyz9vsi",
  'bg.bold.default': "_bfhk1fkg",
  'bg.bold.inprogress': "_bfhk1ymo",
  'bg.bold.moved': "_bfhkxmjf",
  'bg.bold.new': "_bfhkshej",
  'bg.bold.removed': "_bfhk1366",
  'bg.bold.success': "_bfhk3uhp",
  'bg.subtle.default': "_bfhksm61",
  'bg.subtle.inprogress': "_bfhksm61",
  'bg.subtle.moved': "_bfhksm61",
  'bg.subtle.new': "_bfhksm61",
  'bg.subtle.removed': "_bfhksm61",
  'bg.subtle.success': "_bfhksm61",
  'border.subtle.default': "_19it13mh",
  'border.subtle.inprogress': "_19itd8v8",
  'border.subtle.moved': "_19it1y5u",
  'border.subtle.new': "_19it1pib",
  'border.subtle.removed': "_19itv8s6",
  'border.subtle.success': "_19itmiw9",
  'outline.subtle.default': "_1a3713mh",
  'outline.subtle.inprogress': "_1a37d8v8",
  'outline.subtle.moved': "_1a371y5u",
  'outline.subtle.new': "_1a371pib",
  'outline.subtle.removed': "_1a37v8s6",
  'outline.subtle.success': "_1a37miw9",
  'text.subtle': "_syaz1fxt",
  'text.bold': "_syazwwip"
};
var appearanceTypes = ['default', 'inprogress', 'moved', 'new', 'removed', 'success'];
/**
 * __Lozenge__
 *
 * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
 *
 * - [Examples](https://atlassian.design/components/lozenge/examples)
 * - [Code](https://atlassian.design/components/lozenge/code)
 * - [Usage](https://atlassian.design/components/lozenge/usage)
 */
var Lozenge = /*#__PURE__*/memo(function (_ref) {
  var children = _ref.children,
    testId = _ref.testId,
    _ref$isBold = _ref.isBold,
    isBold = _ref$isBold === void 0 ? false : _ref$isBold,
    _ref$appearance = _ref.appearance,
    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
    _ref$maxWidth = _ref.maxWidth,
    maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
    style = _ref.style;
  var appearanceStyle = isBold ? 'bold' : 'subtle';
  var appearanceType = useMemo(function () {
    return appearanceTypes.includes(appearance) ? appearance : 'default';
  }, [appearance]);
  var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
  var maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);
  if (fg('platform-component-visual-refresh')) {
    return /*#__PURE__*/React.createElement("span", {
      style: {
        backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
        maxWidth: maxWidthIsPc ? maxWidth : '100%'
      },
      "data-testid": testId,
      className: ax([stylesNew.container, stylesNew["bg.".concat(appearanceStyle, ".").concat(appearanceType)], appearanceStyle === 'subtle' && !fg('visual-refresh_drop_5') && stylesNew["border.subtle.".concat(appearanceType)], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && stylesNew["outline.subtle.".concat(appearanceType)], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && stylesNew.containerSubtle])
    }, /*#__PURE__*/React.createElement("span", {
      style: {
        color: style === null || style === void 0 ? void 0 : style.color,
        // to negate paddingInline specified on Box above
        maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
      },
      "data-testid": testId && "".concat(testId, "--text"),
      className: ax([stylesNew.text, fg('platform-lozenge-custom-letterspacing') && stylesNew.customLetterspacing, stylesNew["text.".concat(appearanceStyle)]])
    }, children));
  }
  return /*#__PURE__*/React.createElement(Box, {
    as: "span",
    backgroundColor: backgroundColorsOld[appearanceStyle][appearanceType],
    style: {
      backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
      maxWidth: maxWidthIsPc ? maxWidth : '100%'
    },
    paddingInline: "space.050",
    xcss: stylesOld.container,
    testId: testId
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      color: style === null || style === void 0 ? void 0 : style.color,
      // to negate paddingInline specified on Box above
      maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
    },
    "data-testid": testId && "".concat(testId, "--text"),
    className: ax([stylesOldUnbounded.text, fg('platform-lozenge-custom-letterspacing') && stylesOldUnbounded.customLetterspacing, stylesOld["text.".concat(appearanceStyle, ".").concat(appearanceType)]])
  }, children));
});
Lozenge.displayName = 'Lozenge';
export default Lozenge;