@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.
58 lines (57 loc) • 6.23 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';
const svg = ({
appearance,
iconColor,
textColor
}, colorMode) => {
let colors = {
iconColor,
textColor
};
if (appearance) {
colors = getColorsFromAppearance(appearance, colorMode);
}
return `<svg fill="none" height="32" viewBox="0 0 318 32" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<path fill="${colors.iconColor}" d="M12.655 5.218a15.3 15.3 0 0 0 8.75 0c.257-.057.428.114.37.37-.826 2.984-.826 5.742 0 8.727.058.227-.113.426-.37.341a16.33 16.33 0 0 0-8.75 0c-.228.085-.428-.114-.342-.341.77-2.985.77-5.743 0-8.727-.086-.256.114-.427.342-.37m1.169 10.575v.483c0 2.246-1.568 3.895-3.506 3.895a3.474 3.474 0 0 1-3.478-3.497c0-1.933 1.568-3.468 3.763-3.468h.57V6.412c-.285-.028-.57-.028-.855-.028C4.618 6.384 0 10.989 0 16.703s4.617 10.29 10.318 10.29 10.346-4.605 10.346-10.29v-.91z" />
<path fill="${colors.textColor}" d="M308.551 24.559h-1.718l-5.55-14.352h2.821l4.907 13.125 4.906-13.125h2.822l-5.796 14.843c-1.718 4.385-2.699 6.654-6.594 6.654-1.318 0-2.054-.122-2.821-.429v-2.27c.889.277 1.901.369 2.668.369 2.147 0 3.097-1.472 4.355-4.815m-13.247-8.065v9.047h-2.576V10.207h2.576v2.699c.889-1.81 2.422-3.097 5.428-2.913v2.576c-3.374-.338-5.428.674-5.428 3.925m-12.464-4.202c-2.79 0-4.201 1.81-4.477 4.478h8.556c-.153-2.852-1.441-4.478-4.079-4.478m5.888 12.635c-1.257.675-3.189.92-4.753.92-5.735 0-8.249-3.312-8.249-8.004 0-4.63 2.576-7.943 7.237-7.943 4.723 0 6.624 3.282 6.624 7.943v1.196h-11.193c.368 2.607 2.054 4.293 5.673 4.293 1.779 0 3.281-.337 4.661-.828zm-19.717.613h-3.527l-5.949-15.333h2.76l4.968 13.095 4.937-13.095h2.76zm-17.462.307c-4.6 0-7.299-3.404-7.299-8.004s2.699-7.943 7.299-7.943c4.569 0 7.237 3.343 7.237 7.943s-2.668 8.004-7.237 8.004m0-13.493c-3.281 0-4.723 2.576-4.723 5.49 0 2.912 1.442 5.55 4.723 5.55 3.251 0 4.661-2.638 4.661-5.55 0-2.914-1.41-5.49-4.661-5.49M242.16 22.78v2.362c-.92.49-2.331.705-3.742.705-5.458 0-8.004-3.312-8.004-8.004 0-4.63 2.546-7.943 8.004-7.943 1.38 0 2.454.184 3.65.736v2.454c-.982-.46-2.024-.736-3.466-.736-3.986 0-5.612 2.514-5.612 5.49 0 2.974 1.656 5.488 5.674 5.488 1.564 0 2.545-.214 3.496-.552m-13.872-1.41c0 2.545-1.656 4.477-5.765 4.477-2.3 0-4.171-.521-5.336-1.135v-2.79c1.319.766 3.527 1.502 5.459 1.502 2.024 0 3.066-.828 3.066-2.024 0-1.165-.889-1.84-3.802-2.545-3.404-.828-4.846-2.147-4.846-4.661 0-2.668 2.055-4.294 5.551-4.294 1.993 0 3.803.491 4.937 1.104v2.73c-1.84-.92-3.342-1.41-4.968-1.41-1.932 0-2.974.674-2.974 1.87 0 1.073.736 1.748 3.557 2.422 3.404.828 5.121 2.086 5.121 4.754M210.599 6.16c0-1.166.767-1.84 1.84-1.84s1.84.674 1.84 1.84-.767 1.84-1.84 1.84-1.84-.675-1.84-1.84m.491 19.38V10.208h2.637v15.334zM198.344 8.03h-4.539v14.873h4.692c4.6 0 6.9-2.422 6.9-7.298 0-4.907-2.177-7.575-7.053-7.575m-7.299 17.51V5.394h7.422c6.532 0 9.69 4.078 9.69 10.12 0 6.102-3.189 10.028-9.69 10.028zm-13.411-4.753c0 1.35.797 2.27 2.422 2.27.614 0 1.196-.123 1.656-.215v2.545c-.46.123-.981.245-1.778.245-3.282 0-4.876-1.932-4.876-4.784v-8.187h-2.484v-2.454h2.484v-3.25h2.576v3.25h4.078v2.453h-4.078zm-6.66 1.993v2.362c-.92.49-2.331.705-3.742.705-5.458 0-8.004-3.312-8.004-8.004 0-4.63 2.546-7.943 8.004-7.943 1.38 0 2.454.184 3.65.736v2.454c-.982-.46-2.024-.736-3.466-.736-3.986 0-5.612 2.514-5.612 5.49 0 2.974 1.656 5.488 5.674 5.488 1.564 0 2.545-.214 3.496-.552m-27.843-3.588v-8.985h2.637v9.261c0 2.76 1.104 3.987 3.619 3.987 2.453 0 4.14-1.625 4.14-4.723v-8.525h2.637V25.54h-2.637v-2.514c-.982 1.809-2.791 2.821-4.846 2.821-3.526 0-5.55-2.423-5.55-6.655m-14.987-1.318c0 3.68 1.472 5.52 4.202 5.52 2.361 0 4.477-1.503 4.477-4.907V17.26c0-3.404-1.932-4.906-4.171-4.906-2.974 0-4.508 1.962-4.508 5.52m8.679 7.667v-2.76c-.981 2.023-2.821 3.066-5.183 3.066-4.078 0-6.133-3.465-6.133-7.973 0-4.324 2.147-7.973 6.44-7.973 2.239 0 3.956 1.012 4.876 3.005V3.798h2.637V25.54zm-20.698.306c-4.6 0-7.299-3.404-7.299-8.004s2.699-7.943 7.299-7.943c4.569 0 7.237 3.343 7.237 7.943s-2.668 8.004-7.237 8.004m0-13.493c-3.282 0-4.723 2.576-4.723 5.49 0 2.912 1.441 5.55 4.723 5.55 3.25 0 4.661-2.638 4.661-5.55 0-2.914-1.411-5.49-4.661-5.49m-13.776 4.14v9.047h-2.576V10.207h2.576v2.699c.89-1.81 2.423-3.097 5.428-2.913v2.576c-3.373-.338-5.428.674-5.428 3.925m-5.002-4.385c0 4.385-2.454 6.838-7.483 6.838h-4.017v6.594h-2.76V5.393h6.777c5.03 0 7.483 2.576 7.483 6.716m-7.79 4.2c3.558.124 4.938-1.563 4.938-4.14 0-2.452-1.38-4.14-4.938-4.14h-3.71v8.28zM61.69 17.874c0 3.68 1.472 5.52 4.201 5.52 2.361 0 4.477-1.503 4.477-4.907V17.26c0-3.404-1.931-4.906-4.17-4.906-2.975 0-4.508 1.962-4.508 5.52m8.679 7.666v-2.76c-.982 2.024-2.822 3.067-5.183 3.067-4.079 0-6.134-3.465-6.134-7.973 0-4.324 2.147-7.974 6.44-7.974 2.24 0 3.957 1.012 4.877 3.006v-2.699h2.637V25.54zm-17.793-9.046v9.047H50V10.207h2.576v2.699c.89-1.81 2.423-3.097 5.428-2.913v2.576c-3.373-.338-5.428.674-5.428 3.925M42.89 6.16c0-1.166.767-1.84 1.84-1.84s1.84.674 1.84 1.84S45.805 8 44.73 8s-1.84-.675-1.84-1.84m.491 19.38V10.208h2.638v15.334zm-6.428-5.949V5.393h2.76v14.014c0 3.71-1.625 6.256-5.428 6.256-1.441 0-2.545-.245-3.312-.521v-2.668c.828.337 1.84.521 2.852.521 2.331 0 3.128-1.41 3.128-3.404" />
</svg>`;
};
/**
* __Jira Product Discovery logo__
*
* The Jira Product Discovery 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 const JiraProductDiscoveryLogo = ({
appearance,
label = 'Jira Product Discovery',
size = defaultLogoParams.size,
testId,
iconColor = defaultLogoParams.iconColor,
textColor = defaultLogoParams.textColor
}) => {
const {
colorMode
} = useThemeObserver();
return /*#__PURE__*/React.createElement(Wrapper, {
appearance: appearance,
label: label,
iconColor: iconColor,
size: size,
svg: svg({
appearance,
iconColor,
textColor
}, colorMode),
testId: testId,
textColor: textColor
});
};