@atlaskit/logo
Version:
A logo is a visual representation of a brand or product. It can be a word or an image, or a combination of both.
54 lines (53 loc) • 1.69 kB
JavaScript
/* wrapper.tsx generated by @compiled/babel-plugin v0.36.1 */
import _extends from "@babel/runtime/helpers/extends";
import "./wrapper.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
const CSS_VAR_COLOR = '--logo-color';
const CSS_VAR_FILL = '--logo-fill';
const styles = {
root: "_1e0c1o8l _kqswh2mm _syaz1vry _lswu1xf6 _vwz4kb7n _uiztglyw _o5724jg8 _zbji1osq _3se11kw7",
stop: "_vc881r31",
xsmall: "_4t3i7vkz",
small: "_4t3i1tcg",
medium: "_4t3izwfg",
large: "_4t3i1ylp",
xlarge: "_4t3ickbl"
};
/**
* __Wrapper__
*
* An internal component used by `@atlaskit/logo` to render logo SVGs with correct styles.
*/
const Wrapper = ({
label,
svg,
size,
appearance,
iconColor,
textColor,
testId: userDefinedTestId,
...rest
}) => {
// Only required for old logos with gradients, which set gradient values to `inherit` when no appearance is provided
const shouldApplyStopColor = appearance === undefined;
const testId = userDefinedTestId && `${userDefinedTestId}--wrapper`;
return /*#__PURE__*/React.createElement("span", _extends({
"data-testid": testId
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: {
[CSS_VAR_COLOR]: iconColor,
[CSS_VAR_FILL]: textColor
},
"aria-label": label ? label : undefined,
role: label ? 'img' : undefined,
dangerouslySetInnerHTML: {
__html: svg
}
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
}, rest, {
className: ax([styles.root, shouldApplyStopColor && styles.stop, size && styles[size]])
}));
};
export default Wrapper;