@atlaskit/logo/dist/esm/statuspage-logo/logo.js

A logo is a visual representation of a brand or product. It can be a word or an image, or a combination of both.

/* 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 fill=\"none\" height=\"32\" viewBox=\"0 0 188 32\" focusable=\"false\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill=\"".concat(colors.iconColor, "\" d=\"M13 12.604c-3.032 0-5.98 1.37-8.39 3.489q-.373.373-.747.373c-.208 0-.416-.124-.582-.332L.25 12.562c-.167-.207-.25-.415-.25-.581 0-.25.125-.457.374-.706C4.029 8.035 8.473 6.208 13 6.208s8.971 1.827 12.626 5.067c.25.249.374.457.374.706 0 .166-.083.374-.25.581l-3.031 3.572c-.166.208-.374.332-.582.332q-.373 0-.747-.374c-2.41-2.118-5.358-3.488-8.39-3.488m0 13.374c-3.364 0-6.105-2.742-6.105-6.064S9.635 13.85 13 13.85c3.364 0 6.105 2.7 6.105 6.064s-2.74 6.063-6.105 6.063\" />\n      <path fill=\"").concat(colors.textColor, "\" d=\"M180.293 12.293c-2.79 0-4.201 1.81-4.477 4.477h8.556c-.153-2.852-1.441-4.477-4.079-4.477m5.888 12.635c-1.257.674-3.189.92-4.753.92-5.735 0-8.249-3.312-8.249-8.004 0-4.631 2.576-7.943 7.237-7.943 4.723 0 6.624 3.281 6.624 7.943v1.196h-11.193c.368 2.606 2.054 4.293 5.673 4.293 1.779 0 3.281-.337 4.661-.828zm-18.638-.614v-1.533c-.981 2.024-2.821 3.067-5.183 3.067-4.048 0-6.072-3.466-6.072-7.974 0-4.324 2.116-7.973 6.379-7.973 2.239 0 3.956 1.012 4.876 3.005v-2.698h2.576V24.16c0 4.508-2.116 7.544-7.605 7.544-2.576 0-3.987-.337-5.459-.828V28.3c1.687.552 3.435.92 5.336.92 3.833 0 5.152-2.055 5.152-4.907m-8.679-6.44c0 3.68 1.472 5.52 4.202 5.52 2.361 0 4.477-1.503 4.477-4.906V17.26c0-3.404-1.932-4.907-4.171-4.907-2.974 0-4.508 1.963-4.508 5.52m-16.949.001c0 3.68 1.472 5.52 4.201 5.52 2.362 0 4.478-1.503 4.478-4.906V17.26c0-3.404-1.932-4.907-4.171-4.907-2.975 0-4.508 1.963-4.508 5.52m8.679 7.667v-2.76c-.982 2.024-2.822 3.066-5.183 3.066-4.079 0-6.133-3.465-6.133-7.973 0-4.324 2.146-7.973 6.44-7.973 2.238 0 3.956 1.012 4.876 3.005v-2.699h2.637V25.54zm-16.091-7.666c0-3.68-1.472-5.52-4.201-5.52-2.361 0-4.477 1.503-4.477 4.907v1.227c0 3.404 1.932 4.906 4.17 4.906 2.975 0 4.508-1.962 4.508-5.52m-3.802 7.974c-2.239 0-3.956-1.013-4.876-3.006v8.679h-2.638V10.207h2.638v2.76c.981-2.024 2.821-3.066 5.182-3.066 4.079 0 6.134 3.465 6.134 7.973 0 4.324-2.147 7.973-6.44 7.973m-10.56-4.477c0 2.545-1.656 4.477-5.765 4.477-2.3 0-4.171-.52-5.336-1.134v-2.79c1.318.766 3.526 1.502 5.458 1.502 2.024 0 3.067-.828 3.067-2.024 0-1.165-.889-1.84-3.803-2.545-3.404-.829-4.845-2.147-4.845-4.662 0-2.668 2.055-4.293 5.551-4.293 1.993 0 3.802.49 4.937 1.104v2.73c-1.84-.92-3.343-1.411-4.968-1.411-1.932 0-2.975.674-2.975 1.87 0 1.073.736 1.748 3.558 2.423 3.404.828 5.121 2.085 5.121 4.753m-27.598-2.177v-8.985h2.638v9.26c0 2.76 1.104 3.988 3.618 3.988 2.454 0 4.14-1.626 4.14-4.723v-8.525h2.638V25.54h-2.638v-2.515c-.981 1.81-2.79 2.821-4.845 2.821-3.527 0-5.55-2.422-5.55-6.654m-7.155 1.596c0 1.349.797 2.269 2.422 2.269.614 0 1.196-.123 1.656-.215v2.546a6.3 6.3 0 0 1-1.778.245c-3.282 0-4.876-1.932-4.876-4.784v-8.188h-2.484v-2.453h2.484V6.957h2.576v3.25h4.078v2.454H85.39zm-18.943-2.914c0 3.68 1.472 5.52 4.202 5.52 2.361 0 4.477-1.503 4.477-4.906V17.26c0-3.404-1.932-4.907-4.17-4.907-2.975 0-4.509 1.963-4.509 5.52m8.679 7.667v-2.76c-.981 2.024-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.005v-2.699h2.637V25.54zm-17.258-4.752c0 1.349.797 2.269 2.422 2.269.614 0 1.196-.123 1.656-.215v2.546a6.3 6.3 0 0 1-1.778.245c-3.282 0-4.876-1.932-4.876-4.784v-8.188h-2.484v-2.453h2.484V6.957h2.576v3.25h4.078v2.454h-4.078zm-6.894-.798c0 3.496-2.085 5.858-7.084 5.858-3.894 0-5.704-.767-7.268-1.564v-2.822c1.871.982 4.754 1.687 7.422 1.687 3.036 0 4.17-1.196 4.17-2.975 0-1.778-1.104-2.729-4.937-3.649-4.539-1.104-6.563-2.668-6.563-5.98 0-3.128 2.392-5.459 7.084-5.459 2.914 0 4.784.706 6.164 1.472v2.76c-2.024-1.165-4.201-1.533-6.286-1.533-2.638 0-4.202.92-4.202 2.76 0 1.656 1.288 2.484 4.846 3.373 4.262 1.074 6.654 2.454 6.654 6.072\" />\n    </svg>");
};

/**
 * __Statuspage logo__
 *
 * The Statuspage 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 StatuspageLogo = function StatuspageLogo(_ref2) {
  var appearance = _ref2.appearance,
    _ref2$label = _ref2.label,
    label = _ref2$label === void 0 ? 'Statuspage' : _ref2$label,
    _ref2$size = _ref2.size,
    size = _ref2$size === void 0 ? defaultLogoParams.size : _ref2$size,
    testId = _ref2.testId,
    _ref2$iconColor = _ref2.iconColor,
    iconColor = _ref2$iconColor === void 0 ? defaultLogoParams.iconColor : _ref2$iconColor,
    _ref2$textColor = _ref2.textColor,
    textColor = _ref2$textColor === void 0 ? defaultLogoParams.textColor : _ref2$textColor;
  var _useThemeObserver = useThemeObserver(),
    colorMode = _useThemeObserver.colorMode;
  return /*#__PURE__*/React.createElement(Wrapper, {
    appearance: appearance,
    label: label,
    iconColor: iconColor,
    size: size,
    svg: svg({
      appearance: appearance,
      iconColor: iconColor,
      textColor: textColor
    }, colorMode),
    testId: testId,
    textColor: textColor
  });
};