@atlaskit/icon/dist/esm/components/icon-tile.js

An icon is a symbol representing a command, device, directory, or common action.

/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { fg } from '@atlaskit/platform-feature-flags';
var sizeMap = {
  '16': css({
    width: '16px',
    height: '16px'
  }),
  '24': css({
    width: '24px',
    height: '24px'
  }),
  '32': css({
    width: '32px',
    height: '32px'
  }),
  '40': css({
    width: '40px',
    height: '40px'
  }),
  '48': css({
    width: '48px',
    height: '48px'
  })
};
var appearanceMap = {
  grayBold: css({
    backgroundColor: "var(--ds-background-accent-gray-bolder, #626F86)",
    color: "var(--ds-icon-inverse, #FFFFFF)"
  }),
  limeBold: css({
    backgroundColor: "var(--ds-background-accent-lime-bolder, #5B7F24)",
    color: "var(--ds-icon-inverse, #FFFFFF)"
  }),
  greenBold: css({
    backgroundColor: "var(--ds-background-accent-green-bolder, #1F845A)",
    color: "var(--ds-icon-inverse, #FFFFFF)"
  }),
  blueBold: css({
    backgroundColor: "var(--ds-background-accent-blue-bolder, #0C66E4)",
    color: "var(--ds-icon-inverse, #FFFFFF)"
  }),
  redBold: css({
    backgroundColor: "var(--ds-background-accent-red-bolder, #C9372C)",
    color: "var(--ds-icon-inverse, #FFFFFF)"
  }),
  purpleBold: css({
    backgroundColor: "var(--ds-background-accent-purple-bolder, #6E5DC6)",
    color: "var(--ds-icon-inverse, #FFFFFF)"
  }),
  magentaBold: css({
    backgroundColor: "var(--ds-background-accent-magenta-bolder, #AE4787)",
    color: "var(--ds-icon-inverse, #FFFFFF)"
  }),
  tealBold: css({
    backgroundColor: "var(--ds-background-accent-teal-bolder, #227D9B)",
    color: "var(--ds-icon-inverse, #FFFFFF)"
  }),
  orangeBold: css({
    backgroundColor: "var(--ds-background-accent-orange-bolder, #C25100)",
    color: "var(--ds-icon-inverse, #FFFFFF)"
  }),
  yellowBold: css({
    backgroundColor: "var(--ds-background-accent-yellow-bolder, #946F00)",
    color: "var(--ds-icon-inverse, #FFFFFF)"
  }),
  gray: css({
    backgroundColor: "var(--ds-background-accent-gray-subtler, #DCDFE4)",
    color: "var(--ds-icon-accent-gray, #758195)"
  }),
  lime: css({
    backgroundColor: "var(--ds-background-accent-lime-subtler, #D3F1A7)",
    color: "var(--ds-icon-accent-lime, #6A9A23)"
  }),
  orange: css({
    backgroundColor: "var(--ds-background-accent-orange-subtler, #FEDEC8)",
    color: "var(--ds-icon-accent-orange, #E56910)"
  }),
  magenta: css({
    backgroundColor: "var(--ds-background-accent-magenta-subtler, #FDD0EC)",
    color: "var(--ds-icon-accent-magenta, #CD519D)"
  }),
  green: css({
    backgroundColor: "var(--ds-background-accent-green-subtler, #BAF3DB)",
    color: "var(--ds-icon-accent-green, #22A06B)"
  }),
  blue: css({
    backgroundColor: "var(--ds-background-accent-blue-subtler, #CCE0FF)",
    color: "var(--ds-icon-accent-blue, #1D7AFC)"
  }),
  red: css({
    backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
    color: "var(--ds-icon-accent-red, #C9372C)"
  }),
  purple: css({
    backgroundColor: "var(--ds-background-accent-purple-subtler, #DFD8FD)",
    color: "var(--ds-icon-accent-purple, #8270DB)"
  }),
  teal: css({
    backgroundColor: "var(--ds-background-accent-teal-subtler, #C6EDFB)",
    color: "var(--ds-icon-accent-teal, #2898BD)"
  }),
  yellow: css({
    backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
    color: "var(--ds-icon-accent-yellow, #B38600)"
  })
};
var shapeMap = {
  square: css({
    borderRadius: "var(--ds-border-radius-100, 4px)"
  }),
  circle: css({
    borderRadius: "var(--ds-border-radius-circle, 32032px)"
  })
};
var iconTileStyles = css({
  display: 'inline-flex',
  boxSizing: 'border-box',
  alignItems: 'center',
  justifyContent: 'center',
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
  fontSize: 0 /* Prevents parent font-size from affecting the container */
});

/**
 * __IconTile__ -- ⚠️ Experimental ⚠️
 *
 * An icon tile is used to present an icon with a background color.
 * Icon tiles, unlike standard icons, can scale up and down to provide greater emphasis.
 *
 * This component is currently in an experimental state and is subject to change in minor or patch releases.
 *
 */
export default function IconTile(props) {
  var Icon = props.icon,
    label = props.label,
    appearance = props.appearance,
    _props$size = props.size,
    size = _props$size === void 0 ? '24' : _props$size,
    _props$shape = props.shape,
    shape = _props$shape === void 0 ? 'square' : _props$shape,
    LEGACY_fallbackComponent = props.LEGACY_fallbackComponent,
    testId = props.testId;
  var ExpandedIcon = Icon;
  if (LEGACY_fallbackComponent && !fg('platform-visual-refresh-icons')) {
    return LEGACY_fallbackComponent;
  } else {
    return jsx("span", {
      "data-testid": testId,
      css: [iconTileStyles, appearanceMap[appearance], sizeMap[size], shapeMap[shape]]
    }, jsx(ExpandedIcon, {
      color: "currentColor",
      label: label,
      spacing: "spacious",
      shouldScale: true
    }));
  }
}