All files / packages/design-system/ui/components/page-headers/related-list deprecated.jsx

60% Statements 3/5
100% Branches 0/0
33.33% Functions 1/3
60% Lines 3/5

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      1x   1x 1x                                                                                                                                                        
import React from 'react';
import BreadCrumbs from '../../breadcrumbs/index.react';
import ButtonIcon from '../../button-icons/';
const { Crumb } = BreadCrumbs;
 
export const RelatedListDeprecated = () => (
  <div className="slds-page-header slds-page-header_related-list">
    <div className="slds-grid">
      <div className="slds-col slds-has-flexi-truncate">
        <BreadCrumbs className="slds-m-bottom_xx-small">
          <Crumb href="#" onClick={e => e.preventDefault()}>
            Accounts
          </Crumb>
          <Crumb href="#" onClick={e => e.preventDefault()}>
            Company One
          </Crumb>
        </BreadCrumbs>
        <h1
          className="slds-page-header__title slds-truncate"
          title="Contacts (will truncate)"
        >
          Contacts (will truncate)
        </h1>
      </div>
      <div className="slds-col slds-no-flex slds-grid slds-align-top">
        <div className="slds-button-group" role="group">
          <button className="slds-button slds-button_neutral">
            Add Contact
          </button>
          <div className="slds-dropdown-trigger slds-dropdown-trigger_click slds-button_last">
            <ButtonIcon
              className="slds-button_icon-border-filled"
              symbol="down"
              aria-haspopup="true"
              assistiveText="More Actions"
              title="More Actions"
            />
          </div>
        </div>
      </div>
    </div>
    <div className="slds-grid">
      <div className="slds-col slds-align-bottom">
        <p className="slds-text-body_small">10 items &bull; sorted by name</p>
      </div>
      <div className="slds-col slds-no-flex slds-grid slds-align-bottom">
        <div className="slds-dropdown-trigger slds-dropdown-trigger_click">
          <ButtonIcon
            className="slds-button_icon-more"
            symbol="table"
            hasDropdown
            assistiveText="Change view"
            title="Change view"
          />
        </div>
        <div className="slds-button-group slds-m-left_xx-small" role="group">
          <ButtonIcon
            className="slds-button_icon-border"
            symbol="chart"
            assistiveText="Chart"
            title="Chart"
          />
          <ButtonIcon
            className="slds-button_icon-border"
            symbol="filterList"
            assistiveText="Filter List"
            title="Filter List"
          />
          <div className="slds-dropdown-trigger slds-dropdown-trigger_click slds-button_last">
            <ButtonIcon
              className="slds-button_icon-more"
              symbol="sort"
              hasDropdown
              assistiveText="Sort"
              title="Sort"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
);