UNPKG

@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.97 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.ConfluenceIcon = 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 fill=\"none\" height=\"32\" viewBox=\"0 0 32 32\" focusable=\"false\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill=\"".concat(colors.iconColor, "\" d=\"M25.769 20.234c-6.584-3.183-8.507-3.66-11.282-3.66-3.254 0-6.028 1.355-8.507 5.16l-.406.622c-.333.513-.407.696-.407.915s.11.403.517.659l4.18 2.598c.222.146.407.22.592.22.222 0 .37-.11.592-.44l.665-1.024c1.036-1.574 1.96-2.086 3.144-2.086 1.036 0 2.257.293 3.773 1.025l4.365 2.049c.443.22.924.11 1.146-.403l2.071-4.537c.222-.512.074-.842-.444-1.098M6.572 12.22c6.584 3.184 8.507 3.66 11.281 3.66 3.255 0 6.03-1.354 8.507-5.16l.407-.622c.333-.512.407-.695.407-.915s-.11-.402-.518-.658l-4.18-2.598c-.221-.147-.406-.22-.591-.22-.222 0-.37.11-.592.44l-.666 1.024c-1.035 1.573-1.96 2.086-3.144 2.086-1.035 0-2.256-.293-3.772-1.025L9.346 6.183c-.444-.22-.924-.11-1.146.402l-2.072 4.538c-.222.512-.074.841.444 1.098\"/>\n </svg>"); }; /** * __Confluence icon__ * * The Confluence 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 ConfluenceIcon = exports.ConfluenceIcon = function ConfluenceIcon(_ref2) { var appearance = _ref2.appearance, _ref2$label = _ref2.label, label = _ref2$label === void 0 ? 'Confluence' : _ref2$label, _ref2$size = _ref2.size, size = _ref2$size === void 0 ? _constants.defaultLogoParams.size : _ref2$size, testId = _ref2.testId, _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; var _useThemeObserver = (0, _tokens.useThemeObserver)(), colorMode = _useThemeObserver.colorMode; return /*#__PURE__*/_react.default.createElement(_wrapper.default, { appearance: appearance, label: label, svg: svg({ appearance: appearance, iconColor: iconColor }, colorMode), iconColor: iconColor, size: size, testId: testId, textColor: textColor }); };