All files / packages/design-system/ui/components/global-navigation index.jsx

100% Statements 20/20
100% Branches 6/6
100% Functions 5/5
100% Lines 20/20

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92                    2x 12x                 2x       2x 13x               2x 79x     2x       2x 56x                 2x 2x     2x       2x 13x                   2x 2x         64x                   2x 2x        
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
import React from 'react';
import PropTypes from 'prop-types';
import SvgIcon from '../../shared/svg-icon';
import { UtilityIcon } from '../icons/base/example';
import _ from '../../shared/helpers';
 
// Shared components for Global Nav and Tabs -> Subtabs
export const IndicatorUnsaved = props => (
  <abbr
    className="slds-indicator_unsaved"
    title={props.title || 'Tab Not Saved'}
    aria-label={props.title || 'Tab Not Saved'}
  >
    *
  </abbr>
);
 
IndicatorUnsaved.propTypes = {
  title: PropTypes.string
};
 
export const IndicatorUnread = props => (
  <span
    aria-label="New Activity"
    className="slds-indicator_unread"
    title="New Activity"
    role="img"
  />
);
 
export const IndicatorContainer = props => (
  <span className="slds-indicator-container">{props.children}</span>
);
 
IndicatorContainer.propTypes = {
  children: PropTypes.node
};
 
export const TabObjectIcon = props => (
  <span className="slds-icon_container" title={_.startCase(props.symbol)}>
    <SvgIcon
      className="slds-icon slds-icon_small slds-icon-text-default"
      sprite="standard"
      symbol={props.symbol}
    />
    <span className="slds-assistive-text">{_.startCase(props.symbol)}</span>
  </span>
);
TabObjectIcon.displayName = 'TabObjectIcon';
TabObjectIcon.propTypes = {
  symbol: PropTypes.string
};
TabObjectIcon.defaultProps = {
  symbol: 'case'
};
 
export const TabStatusLevelIcon = props => (
  <span className="slds-m-horizontal_xx-small">
    <UtilityIcon
      assistiveText={props.level}
      size="x-small"
      symbol={props.level}
      title={props.level}
      useCurrentColor={props.level === 'warning'}
    />
  </span>
);
TabStatusLevelIcon.displayName = 'TabWarningIcon';
TabStatusLevelIcon.propTypes = {
  level: PropTypes.oneOf(['error', 'success', 'warning']).isRequired
};
 
export const TabItemIconContainer = props => {
  return (
    <React.Fragment>
      {props.statusLevel ? (
        <TabStatusLevelIcon level={props.statusLevel} />
      ) : (
        <TabObjectIcon symbol={props.symbol} />
      )}
    </React.Fragment>
  );
};
TabItemIconContainer.displayName = 'TabItemIconContainer';
TabItemIconContainer.propTypes = {
  statusLevel: PropTypes.oneOf(['error', 'success', 'warning']),
  symbol: PropTypes.string
};