UNPKG

@atlaskit/icon

Version:

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

95 lines (92 loc) 2.54 kB
/* icon-tile-new.tsx generated by @compiled/babel-plugin v0.39.1 */ import "./icon-tile-new.compiled.css"; import * as React from 'react'; import { ax, ix } from "@compiled/react/runtime"; import Tile from '@atlaskit/tile'; const 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 const 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 const 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. */ export default function IconTileNew(props) { const { icon: Icon, label, appearance, size = 'small', testId } = props; const ExpandedIcon = Icon; return /*#__PURE__*/React.createElement(Tile, { size: sizeCrossCompatibleMap[size], backgroundColor: backgroundColorMap[appearance], label: label, testId: testId }, /*#__PURE__*/React.createElement("span", { className: ax([iconColorMap[appearance]]) }, /*#__PURE__*/React.createElement(ExpandedIcon, { color: "currentColor", label: "", shouldScale: true }))); }