@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.
56 lines (55 loc) • 5.61 kB
JavaScript
/* eslint-disable max-len */
import React from 'react';
import { useThemeObserver } from '@atlaskit/tokens';
import { defaultLogoParams } from '../constants';
import { getColorsFromAppearance } from '../utils';
import Wrapper from '../wrapper';
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 = getColorsFromAppearance(appearance, colorMode);
}
return "<svg\n fill=\"none\"\n height=\"32\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 295 32\"\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M294.31 16.348v8.985h-2.637v-9.261c0-2.76-1.104-3.987-3.619-3.987-2.453 0-4.14 1.626-4.14 4.723v8.525h-2.637V10h2.637v2.515c.982-1.81 2.791-2.822 4.846-2.822 3.526 0 5.55 2.423 5.55 6.655M274.168 5.952c0-1.165.766-1.84 1.84-1.84 1.073 0 1.84.675 1.84 1.84s-.767 1.84-1.84 1.84c-1.074 0-1.84-.675-1.84-1.84m.49 19.381V10h2.638v15.333zm-14.069-8.525v8.525h-2.637v-9.261c0-2.76-1.104-3.987-3.619-3.987-2.453 0-4.14 1.626-4.14 4.723v8.525h-2.637V10h2.637v2.515c.981-1.81 2.791-2.822 4.845-2.822 2.607 0 4.386 1.319 5.152 3.742.859-2.362 2.914-3.742 5.459-3.742 3.435 0 5.336 2.331 5.336 6.655v8.985h-2.637v-8.525c0-3.159-1.104-4.723-3.619-4.723-2.453 0-4.14 1.626-4.14 4.723m-28.327.859c0 3.68 1.472 5.52 4.202 5.52 2.361 0 4.477-1.503 4.477-4.907v-1.227c0-3.404-1.932-4.906-4.171-4.906-2.974 0-4.508 1.962-4.508 5.52m8.679 7.666v-2.76c-.981 2.024-2.821 3.067-5.183 3.067-4.078 0-6.133-3.465-6.133-7.973 0-4.324 2.147-7.974 6.44-7.974 2.239 0 3.956 1.012 4.876 3.006V3.59h2.637v21.742zm-22.021-4.017c-1.533 0-3.097-.184-4.814-.521l-1.687 4.538h-3.097l7.942-20.148h3.496l7.943 20.148h-3.097l-1.687-4.569c-1.809.368-3.373.552-4.999.552m0-2.453c1.288 0 2.607-.154 4.171-.399l-4.079-11.04-4.078 11.07c1.502.246 2.76.369 3.986.369\"\n fill=\"".concat(colors.textColor, "\"\n />\n <path\n d=\"M107.447 10.828c0 2.972 1.345 5.308 6.795 6.37 3.185.707 3.893 1.203 3.893 2.264 0 1.062-.708 1.699-2.973 1.699-2.619 0-5.733-.92-7.785-2.123v4.812c1.627.779 3.751 1.699 7.785 1.699 5.662 0 7.856-2.548 7.856-6.228m0 .07c0-3.538-1.84-5.166-7.148-6.299-2.902-.637-3.61-1.274-3.61-2.194 0-1.132 1.062-1.628 2.973-1.628 2.335 0 4.6.708 6.794 1.7V6.368c-1.557-.779-3.892-1.345-6.653-1.345-5.237 0-7.927 2.265-7.927 5.945m72.475-5.803v20.172h4.318V9.978l1.769 4.034 6.087 11.325h5.379V5.165h-4.247v13.023l-1.628-3.822-4.883-9.2zm-27.319 0h-4.671v20.172h4.671zm-10.05 14.155c0-3.538-1.841-5.166-7.149-6.298-2.902-.637-3.609-1.274-3.609-2.194 0-1.133 1.061-1.628 2.972-1.628 2.336 0 4.601.707 6.795 1.698v-4.6c-1.557-.779-3.893-1.345-6.653-1.345-5.238 0-7.927 2.265-7.927 5.945 0 2.973 1.345 5.309 6.794 6.37 3.185.708 3.893 1.203 3.893 2.265s-.708 1.699-2.973 1.699c-2.618 0-5.733-.92-7.785-2.124v4.813c1.628.779 3.751 1.699 7.785 1.699 5.592 0 7.857-2.548 7.857-6.3M71.069 5.165v20.172h9.625l1.486-4.389h-6.44V5.165zm-19.039 0v4.318h5.167v15.854h4.741V9.483h5.592V5.165zm-6.866 0h-6.157L32 25.336h5.379l.99-3.397c1.204.354 2.478.566 3.752.566s2.548-.212 3.751-.566l.991 3.397h5.379c-.07 0-7.078-20.17-7.078-20.17zM42.05 18.26c-.92 0-1.77-.142-2.548-.354L42.05 9.13l2.548 8.776a9.6 9.6 0 0 1-2.548.354M97.326 5.165H91.17l-7.08 20.171h5.38l.99-3.397c1.203.354 2.477.566 3.751.566s2.548-.212 3.751-.566l.991 3.397h5.379zM94.212 18.26c-.92 0-1.77-.142-2.548-.354l2.548-8.776 2.548 8.776a9.6 9.6 0 0 1-2.548.354m75.306-13.095h-6.157l-7.007 20.171h5.379l.991-3.397c1.203.354 2.477.566 3.751.566s2.548-.212 3.751-.566l.991 3.397h5.379zm-3.043 13.094c-.92 0-1.77-.142-2.548-.354l2.548-8.776 2.548 8.776a10 10 0 0 1-2.548.354M22.878 24.378 12.293 3.208c-.208-.458-.416-.541-.666-.541-.209 0-.459.083-.709.5-1.5 2.375-2.167 5.125-2.167 8 0 4.001 2.042 7.752 5.043 13.794.333.667.583.792 1.166.792h7.335c.542 0 .833-.208.833-.625 0-.208-.041-.333-.25-.75M7.501 14.377c-.833-1.25-1.083-1.334-1.292-1.334s-.333.083-.708.834L.208 24.46c-.166.334-.208.459-.208.625 0 .334.292.667.917.667h7.46c.5 0 .874-.416 1.083-1.208.25-1 .333-1.876.333-2.917 0-2.917-1.292-5.751-2.292-7.251z\"\n fill=\"").concat(colors.iconColor, "\"\n />\n </svg>");
};
/**
* __Atlassian Admin logo__
*
* The Atlassian Admin 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)
*/
export var AtlassianAdminLogo = function AtlassianAdminLogo(_ref2) {
var appearance = _ref2.appearance,
_ref2$label = _ref2.label,
label = _ref2$label === void 0 ? 'Atlassian Admin' : _ref2$label,
_ref2$size = _ref2.size,
size = _ref2$size === void 0 ? defaultLogoParams.size : _ref2$size,
testId = _ref2.testId,
_ref2$textColor = _ref2.textColor,
textColor = _ref2$textColor === void 0 ? defaultLogoParams.textColor : _ref2$textColor,
_ref2$iconColor = _ref2.iconColor,
iconColor = _ref2$iconColor === void 0 ? defaultLogoParams.iconColor : _ref2$iconColor;
var _useThemeObserver = useThemeObserver(),
colorMode = _useThemeObserver.colorMode;
return /*#__PURE__*/React.createElement(Wrapper, {
appearance: appearance,
iconColor: iconColor,
label: label,
size: size,
svg: svg({
appearance: appearance,
iconColor: iconColor,
textColor: textColor
}, colorMode),
testId: testId,
textColor: textColor
});
};