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 | // 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 { Menu, MenuList, MenuItem } from '../menus/dropdown/example';
import classNames from 'classnames';
const Header = props => (
<div className="slds-trial-header slds-grid">
<div className="slds-grid">
<button className="slds-button slds-m-right_small">
Take the salesforce tour
</button>
<div
className={classNames(
'slds-grid slds-dropdown-trigger slds-dropdown-trigger_click',
props.tourMenuOpen ? 'slds-is-open' : null
)}
>
<button className="slds-button" aria-haspopup="true">
<SvgIcon
className="slds-button__icon slds-button__icon_left"
sprite="utility"
symbol="right"
/>
Choose your tour
</button>
<Menu className="slds-dropdown_inverse slds-dropdown_left">
<MenuList>
<MenuItem
tabIndex="0"
className="slds-is-selected"
title="Completed: Conquer Your Cases"
>
<SvgIcon
className="slds-icon slds-icon_selected slds-icon_x-small slds-m-right_x-small"
sprite="utility"
symbol="check"
/>
<span className="slds-assistive-text">Completed:</span> Conquer
Your Cases
</MenuItem>
<MenuItem title="Automate For Speed">
<SvgIcon
className="slds-icon slds-icon_selected slds-icon_x-small slds-m-right_x-small"
sprite="utility"
symbol="check"
/>
Automate For Speed
</MenuItem>
<MenuItem title="Share Your Knowledge">
<SvgIcon
className="slds-icon slds-icon_selected slds-icon_x-small slds-m-right_x-small"
sprite="utility"
symbol="check"
/>
Share Your Knowledge
</MenuItem>
<MenuItem title="Finish it up in a Flash">
<SvgIcon
className="slds-icon slds-icon_selected slds-icon_x-small slds-m-right_x-small"
sprite="utility"
symbol="check"
/>
Finish it up in a Flash
</MenuItem>
<li className="slds-has-divider_top-space" role="separator" />
<MenuItem title="Import Contacts and Accounts">
<SvgIcon
className="slds-icon slds-icon_x-small slds-m-right_x-small"
sprite="utility"
symbol="upload"
/>
Import Contacts and Accounts
</MenuItem>
</MenuList>
</Menu>
</div>
</div>
<div className="slds-grid slds-grid_vertical-align-center slds-col_bump-left">
<span className="slds-box slds-box_xx-small slds-theme_default">30</span>
<span className="slds-m-horizontal_x-small">Days left in trial</span>
<a
href="#"
onClick={e => e.preventDefault()}
className="slds-button slds-button_success"
>
Subscribe Now
</a>
</div>
</div>
);
export default Header;
|