@shopify/polaris/dist/esm/components/Breadcrumbs/Breadcrumbs.js

Shopify’s product component library

import React$1, { PureComponent } from 'react';
import { FeaturesContext } from '../../utilities/features/context.js';
import { classNames } from '../../utilities/css.js';
import { ArrowLeftMinor, ChevronLeftMinor } from '@shopify/polaris-icons';
import { handleMouseUpByBlurring } from '../../utilities/focus.js';
import { Icon as Icon$1 } from '../Icon/Icon.js';
import { VisuallyHidden as VisuallyHidden$1 } from '../VisuallyHidden/VisuallyHidden.js';
import { UnstyledLink as UnstyledLink$1 } from '../UnstyledLink/UnstyledLink.js';
import styles from './Breadcrumbs.scss.js';

class Breadcrumbs extends PureComponent {
  constructor(...args) {
    super(...args);
    this.context = void 0;
  }

  render() {
    var {
      newDesignLanguage
    } = this.context || {};
    var {
      breadcrumbs
    } = this.props;
    var breadcrumb = breadcrumbs[breadcrumbs.length - 1];

    if (breadcrumb == null) {
      return null;
    }

    var {
      content
    } = breadcrumb;
    var contentMarkup = /*#__PURE__*/React$1.createElement("span", {
      className: styles.ContentWrapper
    }, /*#__PURE__*/React$1.createElement("span", {
      className: styles.Icon
    }, /*#__PURE__*/React$1.createElement(Icon$1, {
      source: newDesignLanguage ? ArrowLeftMinor : ChevronLeftMinor
    })), newDesignLanguage ? /*#__PURE__*/React$1.createElement(VisuallyHidden$1, null, content) : /*#__PURE__*/React$1.createElement("span", {
      className: styles.Content
    }, content));
    var breadcrumbClassNames = classNames(styles.Breadcrumb, newDesignLanguage && styles.newDesignLanguage);
    var breadcrumbMarkup = 'url' in breadcrumb ? /*#__PURE__*/React$1.createElement(UnstyledLink$1, {
      key: content,
      url: breadcrumb.url,
      className: breadcrumbClassNames,
      onMouseUp: handleMouseUpByBlurring,
      "aria-label": breadcrumb.accessibilityLabel
    }, contentMarkup) : /*#__PURE__*/React$1.createElement("button", {
      key: content,
      className: breadcrumbClassNames,
      onClick: breadcrumb.onAction,
      onMouseUp: handleMouseUpByBlurring,
      type: "button",
      "aria-label": breadcrumb.accessibilityLabel
    }, contentMarkup);
    return /*#__PURE__*/React$1.createElement("nav", {
      role: "navigation"
    }, breadcrumbMarkup);
  }

}
Breadcrumbs.contextType = FeaturesContext;

export { Breadcrumbs };