@atlaskit/flag/dist/es2019/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';
const DismissButtonComponent = ({
  appearance,
  onClick,
  isBold,
  isExpanded,
  testId
}) => {
  let ButtonIcon = CrossIcon;
  let buttonLabel = 'Dismiss';
  let buttonTestId = testId && `${testId}-dismiss`;
  if (isBold) {
    ButtonIcon = isExpanded ? ChevronUpIcon : ChevronDownIcon;
    buttonLabel = isExpanded ? 'Collapse' : 'Expand';
    buttonTestId = testId && `${testId}-toggle`;
  }
  return /*#__PURE__*/React.createElement(IconButton, {
    icon: iconProps => /*#__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
  });
};
const DismissButton = /*#__PURE__*/memo(DismissButtonComponent);

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