@atlaskit/icon
Version:
An icon is a symbol representing a command, device, directory, or common action.
80 lines (77 loc) • 3.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = IconTile;
var _react = _interopRequireDefault(require("react"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _iconTileNew = _interopRequireDefault(require("./icon-tile-new"));
var _iconTileOld = _interopRequireDefault(require("./icon-tile-old"));
// Import both versions
// Color mapping for size 16 standalone icons that will no longer be tiles
var appearanceToIconColorMap = {
blue: "var(--ds-icon-accent-blue, #357DE8)",
blueBold: "var(--ds-icon-accent-blue, #357DE8)",
gray: "var(--ds-icon-accent-gray, #7D818A)",
grayBold: "var(--ds-icon-accent-gray, #7D818A)",
green: "var(--ds-icon-accent-green, #22A06B)",
greenBold: "var(--ds-icon-accent-green, #22A06B)",
lime: "var(--ds-icon-accent-lime, #6A9A23)",
limeBold: "var(--ds-icon-accent-lime, #6A9A23)",
magenta: "var(--ds-icon-accent-magenta, #CD519D)",
magentaBold: "var(--ds-icon-accent-magenta, #CD519D)",
orange: "var(--ds-icon-accent-orange, #E06C00)",
orangeBold: "var(--ds-icon-accent-orange, #E06C00)",
purple: "var(--ds-icon-accent-purple, #AF59E1)",
purpleBold: "var(--ds-icon-accent-purple, #AF59E1)",
red: "var(--ds-icon-accent-red, #C9372C)",
redBold: "var(--ds-icon-accent-red, #C9372C)",
teal: "var(--ds-icon-accent-teal, #2898BD)",
tealBold: "var(--ds-icon-accent-teal, #2898BD)",
yellow: "var(--ds-icon-accent-yellow, #B38600)",
yellowBold: "var(--ds-icon-accent-yellow, #B38600)"
};
/**
* __IconTile__
*
* An icon with background shape, color, and size properties determined by Tile.
*/
function IconTile(_ref) {
var appearance = _ref.appearance,
Icon = _ref.icon,
label = _ref.label,
size = _ref.size,
testId = _ref.testId,
shape = _ref.shape,
UNSAFE_circleReplacementComponent = _ref.UNSAFE_circleReplacementComponent;
if (UNSAFE_circleReplacementComponent && shape === 'circle' && ((0, _platformFeatureFlags.fg)('platform_dst_icon_tile_circle_replacement') || (0, _platformFeatureFlags.fg)('platform_dst_icon_tile_circle_replacement_stage2'))) {
return UNSAFE_circleReplacementComponent;
}
if (shape !== 'circle' && ((0, _platformFeatureFlags.fg)('platform_dst_new_icon_tile') || (0, _platformFeatureFlags.fg)('platform_dst_new_icon_tile_stage2'))) {
// Handle size 16 - render icon directly without Tile
if (size === '16') {
return /*#__PURE__*/_react.default.createElement(Icon, {
color: appearanceToIconColorMap[appearance],
label: label,
testId: testId
});
}
return /*#__PURE__*/_react.default.createElement(_iconTileNew.default, {
appearance: appearance,
icon: Icon,
label: label,
shape: shape,
size: size,
testId: testId
});
}
return /*#__PURE__*/_react.default.createElement(_iconTileOld.default, {
appearance: appearance,
icon: Icon,
label: label,
shape: shape,
size: size,
testId: testId
});
}