@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.
64 lines (61 loc) • 3.92 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.RovoLogo = 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,
textColor = _ref.textColor;
var colors = {
iconColor: iconColor,
textColor: textColor
};
if (appearance) {
colors = (0, _utils.getColorsFromAppearance)(appearance, colorMode);
}
return "<svg fill=\"none\" height=\"32\" viewBox=\"0 0 100 32\" focusable=\"false\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12.393 4.246a2.79 2.79 0 0 0-2.735-.026.4.4 0 0 1-.05.033l-.001.001c-.606.35-1.048.91-1.257 1.558q-.129.404-.13.842v3.675l4.603 2.656a3.64 3.64 0 0 1 1.824 3.155v9.487a3.6 3.6 0 0 1-.214 1.23l6.175-3.566A2.77 2.77 0 0 0 22 20.884v-9.487c0-.991-.532-1.912-1.392-2.408z\"\n fill=\"".concat(colors.iconColor, "\"\n fillRule=\"evenodd\"\n />\n <path\n d=\"m1.391 9 6.176-3.566a3.6 3.6 0 0 0-.214 1.23v9.486c0 1.303.693 2.505 1.823 3.155h.001l4.603 2.657v3.674c0 .29-.045.575-.13.843a2.8 2.8 0 0 1-1.258 1.558.4.4 0 0 0-.05.033c-.85.47-1.89.461-2.734-.026l-8.216-4.743A2.78 2.78 0 0 1 0 20.893v-9.486c0-.996.529-1.912 1.391-2.408z\"\n fill=\"").concat(colors.iconColor, "\"\n fillRule=\"evenodd\"\n />\n <path\n d=\"M91.688 25.848c-4.6 0-7.298-3.404-7.298-8.004S87.088 9.9 91.688 9.9c4.57 0 7.238 3.342 7.238 7.942s-2.668 8.004-7.238 8.004zm0-13.494c-3.28 0-4.722 2.576-4.722 5.49 0 2.913 1.441 5.55 4.722 5.55 3.251 0 4.662-2.637 4.662-5.55 0-2.914-1.41-5.49-4.662-5.49M77.675 25.54H74.15L68.2 10.208h2.76l4.968 13.094 4.938-13.095h2.76zm-17.462.308c-4.6 0-7.299-3.404-7.299-8.004s2.7-7.943 7.3-7.943c4.568 0 7.236 3.342 7.236 7.942s-2.668 8.004-7.237 8.004zm0-13.494c-3.281 0-4.723 2.576-4.723 5.49 0 2.913 1.442 5.55 4.723 5.55 3.25 0 4.661-2.637 4.661-5.55 0-2.914-1.41-5.49-4.66-5.49zM43.177 8.03H39.13v7.36h4.048c3.588 0 4.692-1.38 4.692-3.68 0-2.177-1.134-3.68-4.692-3.68zm7.452 3.619c0 3.036-1.288 5.09-3.956 5.949l4.938 7.943H48.36l-4.447-7.514H39.13v7.514h-2.76V5.393h7.115c4.815 0 7.145 2.392 7.145 6.256z\"\n fill=\"").concat(colors.textColor, "\"\n />\n </svg>");
};
/**
* __Rovo logo__
*
* The Rovo logo with both the wordmark and the icon combined.
*
* - [Examples](https://atlassian.design/components/logo/examples)
* - [Code](https://atlassian.design/components/logo/code)
* - [Usage](https://atlassian.design/components/logo/usage)
*/
var RovoLogo = exports.RovoLogo = function RovoLogo(_ref2) {
var appearance = _ref2.appearance,
_ref2$label = _ref2.label,
label = _ref2$label === void 0 ? 'Rovo' : _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,
iconColor: iconColor,
label: label,
size: size,
svg: svg({
appearance: appearance,
iconColor: iconColor,
textColor: textColor
}, colorMode),
testId: testId,
textColor: textColor
});
};