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 93 94 95 96 97 98 99 100 101 | 2x 2x 2x 5x | // 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 SvgIcon from '../../../shared/svg-icon';
import ButtonIcon from '../../button-icons/';
import { ButtonGroup } from '../../button-groups/base/example';
import classNames from 'classnames';
/// ////////////////////////////////////////
// Partial(s)
/// ////////////////////////////////////////
const HeaderAction = props => (
<div className="slds-einstein-header__actions">
<ButtonGroup>
<ButtonIcon
className="slds-button_icon-border-filled"
symbol="email"
assistiveText="Email"
title="Email"
aria-pressed="false"
/>
<ButtonIcon
className="slds-button_icon-border-filled"
symbol="edit"
assistiveText="Edit"
title="Edit"
aria-pressed="false"
/>
</ButtonGroup>
</div>
);
export const EinsteinHeader = props => (
<div
className={classNames('slds-grid slds-einstein-header', props.className)}
>
{props.closeButton ? (
<ButtonIcon
className={classNames(
'slds-button_icon-small slds-float_right slds-popover__close',
props.inverse ? 'slds-button_icon-inverse' : 'slds-button_icon'
)}
symbol="close"
assistiveText="Close dialog"
title="Close dialog"
/>
) : null}
<header
className={classNames(
'slds-media slds-media_center slds-has-flexi-truncate'
)}
>
<div className="slds-grid slds-grid_vertical-align-center slds-size_3-of-4 slds-medium-size_2-of-3">
{props.symbol ? (
<div className="slds-media__figure">
<span
className={
'slds-icon_container slds-icon-utility-' + props.symbol
}
>
<SvgIcon
className="slds-icon slds-icon_small slds-icon-text-default"
sprite="utility"
symbol={props.symbol}
/>
</span>
</div>
) : null}
<div className="slds-media__body">
<h2
className="slds-truncate"
id={props.headingId}
title={props.headerTitle || 'Einstein'}
>
{props.hasLink ? (
<a
href="#"
className="slds-card__header-link"
title={props.headerTitle || 'Einstein'}
onClick={e => e.preventDefault()}
>
<span className="slds-text-heading_small">
{props.headerTitle || 'Einstein'}
</span>
</a>
) : (
<span className="slds-text-heading_small">
{props.headerTitle || 'Einstein'}
</span>
)}
</h2>
</div>
</div>
<div className="slds-einstein-header__figure slds-size_1-of-4 slds-medium-size_1-of-3" />
</header>
{props.actions && <HeaderAction />}
</div>
);
|