@atlaskit/atlassian-navigation/dist/esm/components/ProductHome/custom-product-home.js

A horizontal navigation component for Atlassian products.

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["iconAlt", "iconUrl", "logoAlt", "logoUrl", "href", "onClick", "siteTitle", "onMouseDown", "testId", "logoMaxWidth"];
var _css3;
/** @jsx jsx */
import { Fragment } from 'react';
import { css, jsx } from '@emotion/react';
import { gridSize, PRODUCT_HOME_BREAKPOINT } from '../../common/constants';
import { useTheme } from '../../theme';
import { getTag } from './utils';
var VAR_PRODUCT_HOME_COLOR_ACTIVE = '--product-home-color-active';
var VAR_PRODUCT_HOME_BACKGROUND_COLOR_ACTIVE = '--product-home-bg-color-active';
var VAR_PRODUCT_HOME_BOX_SHADOW_ACTIVE = '--product-home-box-shadow-active';
var VAR_PRODUCT_HOME_COLOR_FOCUS = '--product-home-color-focus';
var VAR_PRODUCT_HOME_BACKGROUND_COLOR_FOCUS = '--product-home-bg-color-focus';
var VAR_PRODUCT_HOME_BOX_SHADOW_FOCUS = '--product-home-box-shadow-focus';
var VAR_PRODUCT_HOME_COLOR_HOVER = '--product-home-color-hover';
var VAR_PRODUCT_HOME_BACKGROUND_COLOR_HOVER = '--product-home-bg-color-hover';
var VAR_PRODUCT_HOME_BOX_SHADOW_HOVER = '--product-home-box-shadow-hover';
var productLogoStyles = css(_defineProperty({
  // Ensure anything passed into
  // productHome is aligned correctly
  display: 'flex'
}, "@media (max-width: ".concat(PRODUCT_HOME_BREAKPOINT - 0.1, "px)"), {
  display: 'none'
}));
var customMaxHeightStyles = css({
  maxHeight: 28
});
var productIconStyles = css(_defineProperty({
  // Ensure anything passed into
  // productHome is aligned correctly
  display: 'flex'
}, "@media (min-width: ".concat(PRODUCT_HOME_BREAKPOINT, "px)"), {
  display: 'none'
}));
var productHomeButtonStyles = css((_css3 = {
  display: 'flex',
  padding: gridSize / 2,
  alignItems: 'center',
  background: 'none',
  border: 0,
  borderRadius: 3,
  color: 'inherit',
  cursor: 'pointer',
  '&::-moz-focus-inner': {
    border: 0
  },
  '&:first-of-type': {
    marginLeft: 0
  },
  '&:hover': {
    backgroundColor: "var(".concat(VAR_PRODUCT_HOME_BACKGROUND_COLOR_HOVER, ")"),
    boxShadow: "var(".concat(VAR_PRODUCT_HOME_BOX_SHADOW_HOVER, ")"),
    color: "var(".concat(VAR_PRODUCT_HOME_COLOR_HOVER, ")")
  },
  '&:active': {
    backgroundColor: "var(".concat(VAR_PRODUCT_HOME_BACKGROUND_COLOR_ACTIVE, ")"),
    boxShadow: "var(".concat(VAR_PRODUCT_HOME_BOX_SHADOW_ACTIVE, ")"),
    color: "var(".concat(VAR_PRODUCT_HOME_COLOR_ACTIVE, ")")
  },
  '&:focus': {
    backgroundColor: "var(".concat(VAR_PRODUCT_HOME_BACKGROUND_COLOR_FOCUS, ")"),
    boxShadow: "var(".concat(VAR_PRODUCT_HOME_BOX_SHADOW_FOCUS, ")"),
    color: "var(".concat(VAR_PRODUCT_HOME_COLOR_FOCUS, ")"),
    outline: 0
  },
  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
  'div&': {
    pointerEvents: 'none'
  }
}, _defineProperty(_css3, "@media (max-width: ".concat(PRODUCT_HOME_BREAKPOINT - 0.1, "px)"), {
  margin: "0 ".concat(gridSize, "px")
}), _defineProperty(_css3, "@media (min-width: ".concat(PRODUCT_HOME_BREAKPOINT, "px)"), {
  margin: "0 ".concat(gridSize * 2, "px")
}), _css3));
var siteTitleStyles = css({
  display: 'flex',
  marginRight: gridSize / 2,
  marginLeft: gridSize * 0.5,
  paddingRight: gridSize * 2,
  alignItems: 'center'
});

/**
 * __Custom product home__
 *
 * Use `CustomProductHome` to provide a custom logo and icon with URLs.
 *
 * - [Examples](https://atlassian.design/components/atlassian-navigation/examples#custom-product-home)
 * - [Code](https://atlassian.design/components/atlassian-navigation/code)
 */
var CustomProductHome = function CustomProductHome(props) {
  var _productHomeButtonDyn;
  var iconAlt = props.iconAlt,
    iconUrl = props.iconUrl,
    logoAlt = props.logoAlt,
    logoUrl = props.logoUrl,
    href = props.href,
    onClick = props.onClick,
    siteTitle = props.siteTitle,
    onMouseDown = props.onMouseDown,
    testId = props.testId,
    _props$logoMaxWidth = props.logoMaxWidth,
    logoMaxWidth = _props$logoMaxWidth === void 0 ? 260 : _props$logoMaxWidth,
    rest = _objectWithoutProperties(props, _excluded);
  var theme = useTheme();
  var primaryButton = theme.mode.primaryButton;
  var Tag = getTag(onClick, href);
  var preventFocusRing = function preventFocusRing(event) {
    event.preventDefault();
    onMouseDown && onMouseDown(event);
  };
  var productHomeButtonDynamicStyles = (_productHomeButtonDyn = {}, _defineProperty(_productHomeButtonDyn, VAR_PRODUCT_HOME_COLOR_ACTIVE, primaryButton.active.color), _defineProperty(_productHomeButtonDyn, VAR_PRODUCT_HOME_BACKGROUND_COLOR_ACTIVE, primaryButton.active.backgroundColor), _defineProperty(_productHomeButtonDyn, VAR_PRODUCT_HOME_BOX_SHADOW_ACTIVE, primaryButton.active.boxShadow), _defineProperty(_productHomeButtonDyn, VAR_PRODUCT_HOME_COLOR_FOCUS, primaryButton.focus.color), _defineProperty(_productHomeButtonDyn, VAR_PRODUCT_HOME_BACKGROUND_COLOR_FOCUS, primaryButton.focus.backgroundColor), _defineProperty(_productHomeButtonDyn, VAR_PRODUCT_HOME_BOX_SHADOW_FOCUS, primaryButton.focus.boxShadow), _defineProperty(_productHomeButtonDyn, VAR_PRODUCT_HOME_COLOR_HOVER, primaryButton.hover.color), _defineProperty(_productHomeButtonDyn, VAR_PRODUCT_HOME_BACKGROUND_COLOR_HOVER, primaryButton.hover.backgroundColor), _defineProperty(_productHomeButtonDyn, VAR_PRODUCT_HOME_BOX_SHADOW_HOVER, primaryButton.hover.boxShadow), _productHomeButtonDyn);
  return jsx(Fragment, null, jsx(Tag, _extends({
    href: href,
    style: productHomeButtonDynamicStyles,
    css: productHomeButtonStyles,
    onClick: onClick,
    onMouseDown: preventFocusRing,
    "data-testid": testId && "".concat(testId, "-container")
    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
  }, rest), logoUrl && jsx("img", {
    style: {
      maxWidth: logoMaxWidth
    },
    css: [customMaxHeightStyles, productLogoStyles],
    src: logoUrl,
    alt: logoAlt,
    "data-testid": testId && "".concat(testId, "-logo")
  }), iconUrl && jsx("img", {
    style: {
      maxWidth: logoMaxWidth
    },
    css: [customMaxHeightStyles, productIconStyles],
    src: iconUrl,
    alt: iconAlt,
    "data-testid": testId && "".concat(testId, "-icon")
  })), siteTitle && jsx("div", {
    style: {
      borderRight: theme.mode.productHome.borderRight
    },
    css: siteTitleStyles,
    "data-testid": testId && "".concat(testId, "-site-title")
  }, siteTitle));
};
export default CustomProductHome;