@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.
61 lines (58 loc) • 2.83 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.AtlassianAccessIcon = void 0;
var _react = _interopRequireDefault(require("react"));
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) {
var appearance = _ref.appearance,
iconColor = _ref.iconColor;
var colors = {
iconColor: iconColor
};
if (appearance) {
colors = (0, _utils.getColorsFromAppearance)(appearance, colorMode);
}
return "<svg\n fill=\"none\"\n height=\"32\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 32 32\"\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M27.545 24.378 16.96 3.208c-.208-.458-.417-.541-.667-.541-.208 0-.458.083-.708.5-1.5 2.375-2.167 5.126-2.167 8.001 0 4 2.042 7.751 5.042 13.794.334.666.584.791 1.167.791h7.335c.541 0 .833-.208.833-.625 0-.208-.042-.333-.25-.75M12.168 14.377c-.834-1.25-1.084-1.334-1.292-1.334s-.333.084-.708.834L4.875 24.462c-.167.333-.208.458-.208.625 0 .333.291.666.916.666h7.46c.5 0 .875-.416 1.083-1.208.25-1 .334-1.875.334-2.917 0-2.917-1.292-5.751-2.292-7.251\"\n fill=\"".concat(colors.iconColor, "\"\n />\n </svg>");
};
/**
* __Atlassian Access icon__
*
* The Atlassian Access 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 AtlassianAccessIcon = exports.AtlassianAccessIcon = function AtlassianAccessIcon(_ref2) {
var appearance = _ref2.appearance,
_ref2$label = _ref2.label,
label = _ref2$label === void 0 ? 'Atlassian Access' : _ref2$label,
_ref2$size = _ref2.size,
size = _ref2$size === void 0 ? _constants.defaultLogoParams.size : _ref2$size,
testId = _ref2.testId,
_ref2$textColor = _ref2.textColor,
textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor,
_ref2$iconColor = _ref2.iconColor,
iconColor = _ref2$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref2$iconColor;
var _useThemeObserver = (0, _tokens.useThemeObserver)(),
colorMode = _useThemeObserver.colorMode;
return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
appearance: appearance,
svg: svg({
appearance: appearance,
iconColor: iconColor
}, colorMode),
iconColor: iconColor,
label: label,
size: size,
testId: testId,
textColor: textColor
});
};