@salesforce/design-system-react
Version:
Salesforce Lightning Design System for React
47 lines (44 loc) • 1.45 kB
JSX
import React from 'react';
import TrialBar from '~/components/trial-bar';
import TrialBarDropdown from '~/components/trial-bar/dropdown';
import TrialBarButton from '~/components/trial-bar/button';
import IconSettings from '~/components/icon-settings';
import Button from '~/components/button';
class Example extends React.Component {
render() {
return (
<IconSettings iconPath="/assets/icons">
<div>
<TrialBar
labels={{ timeLeft: '30', timeLeftUnit: 'days' }}
onRenderActions={() => (
<Button variant="success" label="Subscribe Now" />
)}
>
<TrialBarButton label="Take the salesforce tour" />
<TrialBarDropdown
assistiveText={{ icon: 'Dropdown' }}
id="dropdown"
label="Choose your tour"
options={[
{ label: 'Conquer Your Cases', value: 'item1' },
{ label: 'Automate For Speed', value: 'item2' },
{ label: 'Share Your Knowledge', value: 'item3' },
{ label: 'Finish it up in a Flash', value: 'item4' },
{ type: 'divider' },
{
label: 'Import Contacts and Accounts',
value: 'item5',
leftIcon: { name: 'upload', category: 'utility' },
},
]}
value={['item1']}
/>
</TrialBar>
</div>
</IconSettings>
);
}
}
Example.displayName = 'TrialBarDefault';
export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime