@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.
65 lines (62 loc) • 3.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.AtlassianAnalyticsIcon = void 0;
var _react = _interopRequireDefault(require("react"));
var _useId = require("@atlaskit/ds-lib/use-id");
var _tokens = require("@atlaskit/tokens");
var _constants = require("../constants");
var _utils = require("../utils");
var _wrapper = _interopRequireDefault(require("../wrapper"));
/* eslint-disable max-len */
var svg = function svg(_ref, colorMode, id) {
var appearance = _ref.appearance,
iconColor = _ref.iconColor;
var colors = {
iconGradientStart: iconColor,
iconGradientStop: iconColor,
iconColor: iconColor
};
if (appearance) {
colors = (0, _utils.getColorsFromAppearanceOldLogos)(appearance, colorMode);
}
return "<svg height=\"32\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <linearGradient id=\"".concat(id, "-a\" x1=\"12.595\" x2=\"12.595\" y1=\"40\" y2=\"30\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0\" stop-color=\"").concat(colors.iconGradientStart, "\"/>\n <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\"/>\n </linearGradient>\n <linearGradient id=\"").concat(id, "-b\" x1=\"28.595\" x2=\"28.595\" y1=\"40\" y2=\"27\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0\" stop-color=\"").concat(colors.iconGradientStart, "\"/>\n <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\"/>\n </linearGradient>\n <linearGradient xlink:href=\"#").concat(id, "-b\" id=\"").concat(id, "-c\" x1=\"20.595\" x2=\"20.595\" y2=\"22\"/>\n <linearGradient xlink:href=\"#").concat(id, "-b\" id=\"").concat(id, "-d\" x1=\"36.595\" x2=\"36.595\" y2=\"20\"/>\n </defs>\n <path d=\"M10.595 30h4v10h-4z\" fill=\"url(#").concat(id, "-a)\"/>\n <path d=\"M26.595 27h4v13h-4z\" fill=\"url(#").concat(id, "-b)\"/>\n <path d=\"M18.595 22h4v18h-4z\" fill=\"url(#").concat(id, "-c)\"/>\n <path d=\"M34.595 20h4v20h-4z\" fill=\"url(#").concat(id, "-d)\"/>\n <path fill=\"").concat(colors.iconColor, "\" d=\"m9.009 25.414-2.828-2.828 10.127-10.128a5 5 0 0 1 6.605-.411l4.471 3.477a1.5 1.5 0 0 0 1.982-.123l9.815-9.815 2.828 2.828-10.127 10.128a5 5 0 0 1-6.605.411l-4.471-3.477a1.5 1.5 0 0 0-1.982.123l-9.815 9.815Z\" />\n</svg>");
};
/**
* __Atlassian Analytics icon__
*
* The Atlassian Analytics icon without an accompanying wordmark.
*
* - [Examples](https://atlassian.design/components/logo/examples)
* - [Code](https://atlassian.design/components/logo/code)
* - [Usage](https://atlassian.design/components/logo/usage)
*/
var AtlassianAnalyticsIcon = exports.AtlassianAnalyticsIcon = function AtlassianAnalyticsIcon(_ref2) {
var appearance = _ref2.appearance,
_ref2$label = _ref2.label,
label = _ref2$label === void 0 ? 'Atlassian Analytics' : _ref2$label,
_ref2$size = _ref2.size,
size = _ref2$size === void 0 ? _constants.defaultLogoParams.size : _ref2$size,
_ref2$iconColor = _ref2.iconColor,
iconColor = _ref2$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref2$iconColor,
_ref2$textColor = _ref2.textColor,
textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor,
testId = _ref2.testId;
var _useThemeObserver = (0, _tokens.useThemeObserver)(),
colorMode = _useThemeObserver.colorMode;
var id = (0, _useId.useId)();
return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
appearance: appearance,
label: label,
svg: svg({
appearance: appearance,
iconColor: iconColor
}, colorMode, id),
iconColor: iconColor,
textColor: textColor,
size: size,
testId: testId
});
};