@atlaskit/icon
Version:
An icon is a symbol representing a command, device, directory, or common action.
103 lines (99 loc) • 3.6 kB
JavaScript
/* icon-tile-new.tsx generated by @compiled/babel-plugin v0.39.1 */
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = IconTileNew;
require("./icon-tile-new.compiled.css");
var React = _interopRequireWildcard(require("react"));
var _runtime = require("@compiled/react/runtime");
var _tile = _interopRequireDefault(require("@atlaskit/tile"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var sizeCrossCompatibleMap = {
// Size mapping from old pixel sizes to new t-shirt sizes
'16': 'xsmall',
// Not used
'24': 'small',
'32': 'medium',
'40': 'large',
'48': 'xlarge',
xsmall: 'xsmall',
small: 'small',
medium: 'medium',
large: 'large',
xlarge: 'xlarge'
};
// Icon color mapping for Tile-based icons
var iconColorMap = {
blue: "_syaz6txe",
blueBold: "_syaz1q3r",
gray: "_syazdgkc",
grayBold: "_syaz5w2r",
green: "_syaz17hp",
greenBold: "_syaz1q3r",
lime: "_syaz8645",
limeBold: "_syaz1q3r",
magenta: "_syazv8hk",
magentaBold: "_syaz1q3r",
orange: "_syaz1j6y",
orangeBold: "_syaz1q3r",
purple: "_syazuq3u",
purpleBold: "_syaz1q3r",
red: "_syaznbxb",
redBold: "_syaz1q3r",
teal: "_syaz8uof",
tealBold: "_syaz1q3r",
yellow: "_syaz1oqg",
yellowBold: "_syaz1q3r"
};
// Background color mapping for Tile component
var backgroundColorMap = {
blue: undefined,
blueBold: 'color.background.accent.blue.subtle',
gray: undefined,
grayBold: 'color.background.neutral.bold',
green: undefined,
greenBold: 'color.background.accent.green.subtle',
lime: undefined,
limeBold: 'color.background.accent.lime.subtle',
magenta: undefined,
magentaBold: 'color.background.accent.magenta.subtle',
orange: undefined,
orangeBold: 'color.background.accent.orange.subtle',
purple: undefined,
purpleBold: 'color.background.accent.purple.subtle',
red: undefined,
redBold: 'color.background.accent.red.subtle',
teal: undefined,
tealBold: 'color.background.accent.teal.subtle',
yellow: undefined,
yellowBold: 'color.background.accent.yellow.subtle'
};
/**
* __IconTile__
*
* An icon with background shape, color, and size properties determined by Tile.
*/
function IconTileNew(props) {
var Icon = props.icon,
label = props.label,
appearance = props.appearance,
_props$size = props.size,
size = _props$size === void 0 ? 'small' : _props$size,
testId = props.testId;
var ExpandedIcon = Icon;
return /*#__PURE__*/React.createElement(_tile.default, {
size: sizeCrossCompatibleMap[size],
backgroundColor: backgroundColorMap[appearance],
label: label,
testId: testId
}, /*#__PURE__*/React.createElement("span", {
className: (0, _runtime.ax)([iconColorMap[appearance]])
}, /*#__PURE__*/React.createElement(ExpandedIcon, {
color: "currentColor",
label: "",
shouldScale: true
})));
}