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 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 | 1x 1x 1x | // 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 ButtonIcon from '../../button-icons/';
import MediaObject from '../../../utilities/media-objects/index.react';
import SvgIcon from '../../../shared/svg-icon';
const image = (
<div className="slds-icon_container slds-icon-standard-lead">
<SvgIcon className="slds-icon" sprite="standard" symbol="lead" />
<span className="slds-assistive-text">Lead</span>
</div>
);
export const RecordHomeVerticalDeprecated = () => (
<div className="demo-only" style={{ width: '300px' }}>
<div className="slds-page-header slds-page-header_vertical">
<div className="slds-grid slds-grid_vertical">
<div>
<MediaObject
flavor="center"
figureLeft={image}
className="slds-no-space slds-has-divider_bottom-space"
>
<h1 className="slds-align-middle">
<span
className="slds-page-header__title slds-truncate slds-show"
title="Record Title"
>
Record Title
</span>
</h1>
</MediaObject>
</div>
<div className="slds-has-divider_bottom-space">
<button
className="slds-button slds-button_stateful slds-button_neutral slds-not-selected"
aria-live="assertive"
>
<span className="slds-text-not-selected">
<SvgIcon
className="slds-button__icon_stateful slds-button__icon_left"
sprite="utility"
symbol="add"
/>
Follow
</span>
<span className="slds-text-selected">
<SvgIcon
className="slds-button__icon_stateful slds-button__icon_left"
sprite="utility"
symbol="check"
/>
Following
</span>
<span className="slds-text-selected-focus">
<SvgIcon
className="slds-button__icon_stateful slds-button__icon_left"
sprite="utility"
symbol="close"
/>
Unfollow
</span>
</button>
<div
className="slds-button-group slds-m-left_none slds-m-top_x-small"
role="group"
>
<button className="slds-button slds-button_neutral">Convert</button>
<button className="slds-button slds-button_neutral">Clone</button>
<button className="slds-button slds-button_neutral">Edit</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>
<ul className="slds-list_vertical-space-medium slds-m-left_xx-small">
<li className="slds-item">
<div className="slds-text-title slds-m-bottom_xx-small">Field 1</div>
<div
className="slds-text-body_regular"
title="Description that demonstrates truncation with a long text field"
>
Description that demonstrates a long text field and will eventually
wrap.
</div>
</li>
<li className="slds-item">
<div className="slds-text-title slds-m-bottom_xx-small">Field 2</div>
<div className="slds-text-body_regular" title="Hyperlink">
<a href="#" onClick={e => e.preventDefault()}>
Hyperlink
</a>
</div>
</li>
<li className="slds-item">
<div className="slds-text-title slds-m-bottom_xx-small">Field 3</div>
<div className="slds-truncate" title="Description">
Description
</div>
</li>
<li className="slds-item">
<div className="slds-text-title slds-m-bottom_xx-small">
<button
className="slds-button slds-text-link_reset"
aria-haspopup="true"
>
Field 4 (3)
<SvgIcon
className="slds-button__icon slds-button__icon_small"
sprite="utility"
symbol="down"
/>
</button>
</div>
<div className="slds-text-body_regular">
<div>1 Market St</div>
<div>San Francisco, CA 94105</div>
</div>
</li>
<li className="slds-item">
<div className="slds-text-title slds-m-bottom_xx-small">Field 5</div>
<div className="slds-text-body_regular" title="Description">
Description
</div>
</li>
<li className="slds-item">
<div className="slds-text-title slds-m-bottom_xx-small">Field 6</div>
<div className="slds-text-body_regular" title="Description">
Description
</div>
</li>
<li className="slds-item">
<div
className="slds-text-title slds-truncate slds-m-bottom_xx-small"
title="Field 7"
>
Field 7
</div>
<div className="slds-text-body_regular" title="Description">
Description
</div>
</li>
</ul>
</div>
</div>
);
|