@atlaskit/flag/dist/esm/internal/dismiss-button.js

A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.

import _extends from "@babel/runtime/helpers/extends";
import React, { memo } from 'react';
import IconButton from '@atlaskit/button/icon/button';
import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
import ChevronUpIcon from '@atlaskit/icon/core/chevron-up';
import CrossIcon from '@atlaskit/icon/core/cross';
import { flagTextColorToken } from '../flag-text-color-token';
var DismissButtonComponent = function DismissButtonComponent(_ref) {
  var appearance = _ref.appearance,
    onClick = _ref.onClick,
    isBold = _ref.isBold,
    isExpanded = _ref.isExpanded,
    testId = _ref.testId;
  var ButtonIcon = CrossIcon;
  var buttonLabel = 'Dismiss';
  var buttonTestId = testId && "".concat(testId, "-dismiss");
  if (isBold) {
    ButtonIcon = isExpanded ? ChevronUpIcon : ChevronDownIcon;
    buttonLabel = isExpanded ? 'Collapse' : 'Expand';
    buttonTestId = testId && "".concat(testId, "-toggle");
  }
  return /*#__PURE__*/React.createElement(IconButton, {
    icon: function icon(iconProps) {
      return /*#__PURE__*/React.createElement(ButtonIcon, _extends({}, iconProps, {
        size: "small",
        label: "",
        color: flagTextColorToken[appearance]
      }));
    },
    appearance: "subtle",
    spacing: "compact",
    label: buttonLabel,
    onClick: onClick,
    "aria-expanded": isBold ? isExpanded : undefined,
    testId: buttonTestId
  });
};
var DismissButton = /*#__PURE__*/memo(DismissButtonComponent);

// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default DismissButton;