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 | 1x 3x 1x 2x 1x 1x 1x 3x 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 classNames from 'classnames';
import PropTypes from 'prop-types';
import { Button } from '../buttons/base/example';
import { CheckboxToggle } from '../checkbox-toggle/base/example';
import {
Step as VerticalStep,
Progress as VerticalProgress
} from '../progress-indicator/vertical/example';
import { ScopedNotificationThemed } from '../scoped-notifications/base/example';
const sampleSubSteps = [
{
complete: true,
title: 'Turn on Lightning for all users.',
action: {
type: 'toggle',
title: 'Turn on Lightning for all users',
checked: true
}
},
{
active: true,
title:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
action: {
type: 'link',
title: 'View in Trailhead'
}
},
{
title: 'Lorem ipsum dolor sit amet, lorem ipsum dolor.',
action: {
type: 'button',
title: 'Add Users'
}
}
];
const renderStepAction = action => {
if (action && action.type === 'button')
return <Button isOutlineBrand>{action.title}</Button>;
else if (action.type === 'toggle')
return (
<CheckboxToggle
title={action.title}
isBare
checked={action.checked}
labelTextOn="On"
labelTextOff="Off"
/>
);
else
return (
<a href="#" onClick={e => e.preventDefault()}>
{action.title}
</a>
);
};
const renderProgressIndicatorSteps = steps => {
return steps.map((step, index) => (
<VerticalStep
key={`progress-step-${index}`}
done={step.complete}
hasSuccessMarker={step.complete}
active={step.active}
assistiveText={step.title}
>
<div className="slds-size_3-of-4">{step.title}</div>
<div className="slds-grid slds-grid_align-end slds-size_1-of-4">
{renderStepAction(step.action)}
</div>
</VerticalStep>
));
};
class SetupAssistantStepDetail extends React.Component {
render() {
const className = classNames(
'slds-setup-assistant__step-detail',
this.props.className
);
return (
<div className={className}>
<VerticalProgress value="50" hasBorders hasSuccessBar>
{renderProgressIndicatorSteps(sampleSubSteps)}
</VerticalProgress>
<ScopedNotificationThemed theme="light">
<p>
It looks as if duplicates exist for this lead.{' '}
<a href="#" onClick={e => e.preventDefault()}>
View Duplicates
</a>
</p>
</ScopedNotificationThemed>
</div>
);
}
}
SetupAssistantStepDetail.propTypes = {
className: PropTypes.string
};
export default SetupAssistantStepDetail;
|