@atlaskit/logo/dist/es2019/utils/icon-wrapper.js

A logo is a visual representation of a brand or app. It can be a word, an image, or a combination of both.

/* icon-wrapper.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./icon-wrapper.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { useThemeObserver } from '@atlaskit/tokens/use-theme-observer';
const styles = {
  root: "_1e0c1o8l",
  TEMP_assets: "_9aea1fkg"
};

/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
const cloudLightAppearanceMap = {
  brand: "_1b3i18uv _9aea18uv",
  neutral: "_1b3i1e01 _9aea1fkg",
  inverse: "_1b3i5a6q _9aeau67f",
  legacy: "_1b3iu67f _9aeadoyu"
};

/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
const cloudDarkAppearanceMap = {
  brand: "_1b3i18uv _9aea18uv",
  neutral: "_1b3i1gvk _9aea8hz0",
  inverse: "_1b3iu67f _9aea5a6q",
  legacy: "_1b3iu67f _9aeadoyu"
};

/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
const dataCenterLightAppearanceMap = {
  brand: "_1b3idoyu _9aeau67f _3wu01fkg",
  neutral: "_1b3i1e01 _9aea1fkg _3wu01e01",
  inverse: "_1b3iu67f _9aeaqlpt _3wu0u67f",
  legacy: "_1b3idoyu _9aeau67f _3wu01fkg"
};

/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
const dataCenterDarkAppearanceMap = {
  brand: "_1b3idoyu _9aeaqlpt _3wu08hz0",
  neutral: "_1b3i1gvk _9aea8hz0 _3wu01gvk",
  inverse: "_1b3i1501 _9aeau67f _3wu01501",
  legacy: "_1b3idoyu _9aeaqlpt _3wu08hz0"
};
const rovoDarkAppearanceMap = {
  brand: "_170318uv _1evo18uv _epb518uv _1osd18uv",
  neutral: "_17031gvk _1evo1gvk _epb51gvk _1osd1gvk",
  inverse: "_1703qlpt _1evoqlpt _epb5qlpt _1osdqlpt",
  legacy: "_1703doyu _1evodoyu _epb5doyu _1osddoyu"
};
const rovoLightAppearanceMap = {
  brand: "_170318uv _1evo18uv _epb518uv _1osd18uv",
  neutral: "_17031e01 _1evo1e01 _epb51e01 _1osd1e01",
  inverse: "_1703u67f _1evou67f _epb5u67f _1osdu67f",
  legacy: "_1703doyu _1evodoyu _epb5doyu _1osddoyu"
};

/* eslint-enable @atlaskit/ui-styling-standard/no-imported-style-values */
/* eslint-enable @atlaskit/ui-styling-standard/no-unsafe-values */
const sizeMap = {
  xxsmall: "_4t3i7vkz",
  xsmall: "_4t3igktf",
  small: "_4t3i1tcg",
  medium: "_4t3izwfg",
  large: "_4t3i1ylp",
  xlarge: "_4t3ickbl",
  '12': "_4t3i1crf",
  '16': "_4t3i7vkz",
  '20': "_4t3igktf",
  '24': "_4t3i1tcg",
  '32': "_4t3izwfg"
};
export function IconWrapper({
  size = '20',
  label,
  svg,
  customThemeSvg,
  testId: userDefinedTestId,
  appearance = 'brand',
  iconColor: customIconColor,
  isAssets = false,
  type = 'tile'
}) {
  const testId = userDefinedTestId && `${userDefinedTestId}--wrapper`;
  const isCustomThemed = customThemeSvg && customIconColor;
  const {
    colorMode
  } = useThemeObserver();
  return /*#__PURE__*/React.createElement("span", {
    "data-testid": testId,
    style: {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
      '--themed-icon-color': customIconColor || 'initial'
    }
    // If the label is provided an empty string, we want to remove the element from the accessibility tree.
    ,
    "aria-label": label ? label : undefined,
    role: label ? 'img' : undefined,
    "aria-hidden": label === '' ? true : undefined
    // We are using dangerouslySetInnerHTML here to tell React not to track changes to the SVG elements.
    // This is because the SVG elements are static and will not change, so we get a little performance benefit by
    // bypassing React.
    ,
    dangerouslySetInnerHTML: {
      __html: isCustomThemed ? customThemeSvg : svg
    },
    className: ax([styles.root, sizeMap[size], colorMode === 'dark' ? dataCenterDarkAppearanceMap[appearance] : dataCenterLightAppearanceMap[appearance], type === 'rovo' ? colorMode === 'dark' ? rovoDarkAppearanceMap[appearance] : rovoLightAppearanceMap[appearance] : colorMode === 'dark' ? cloudDarkAppearanceMap[appearance] : cloudLightAppearanceMap[appearance], isAssets && appearance === 'brand' && (fg('assets-platform-branding') || fg('assets-platform-branding-v2')) && styles.TEMP_assets])
  });
}