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 | 9x 9x 9x 9x 9x 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 { UtilityIcon } from '../icons/base/example';
import { Button } from '../buttons/base/example';
import { CheckboxToggle } from '../checkbox-toggle/base/example';
import ProgressRing from '../progress-ring';
class SetupAssistantStepSummary extends React.Component {
render() {
const {
title,
description,
action,
duration,
stepProgress,
isActiveStep,
referenceId,
isOpen
} = this.props;
const stepAction =
action &&
(action.type === 'button' ? (
<Button isOutlineBrand>{action.title}</Button>
) : action.type === 'toggle' ? (
<CheckboxToggle
title={action.title}
isBare
checked={action.checked}
labelTextOn="On"
labelTextOff="Off"
/>
) : (
<a href="#" onClick={e => e.preventDefault()}>
{action.title}
</a>
));
const stepProgressRing =
stepProgress &&
(stepProgress.isComplete ? (
<ProgressRing
className="slds-progress-ring_large"
percent={100}
isComplete
>
<UtilityIcon
symbol="check"
title="Complete"
assistiveText="Complete"
/>
</ProgressRing>
) : (
<ProgressRing
className="slds-progress-ring_large"
percent={isActiveStep ? stepProgress.percentage : 0}
isActiveStep={isActiveStep}
isFilling
>
{stepProgress.number}
</ProgressRing>
));
const baseStepContent = (
<div className="slds-media">
<div className="slds-setup-assistant__step-summary-content slds-media__body">
<h3 className="slds-setup-assistant__step-summary-title slds-text-heading_small">
{referenceId ? (
<Button
className="slds-button_reset"
aria-controls={referenceId}
aria-expanded={isOpen ? 'true' : 'false'}
>
{title}
</Button>
) : (
title
)}
</h3>
<p>{description}</p>
</div>
<div className="slds-media__figure slds-media__figure_reverse">
{stepAction}
{duration && (
<p
className={classNames(
'slds-text-align_right',
'slds-text-color_weak',
{
'slds-p-top_medium': action
}
)}
>
{duration}
</p>
)}
</div>
</div>
);
return (
<div className="slds-setup-assistant__step-summary">
{stepProgress ? (
<div className="slds-media">
<div className="slds-media__figure">{stepProgressRing}</div>
<div className="slds-media__body slds-m-top_x-small">
{baseStepContent}
</div>
</div>
) : (
baseStepContent
)}
</div>
);
}
}
SetupAssistantStepSummary.propTypes = {
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
action: PropTypes.object,
duration: PropTypes.string,
stepProgress: PropTypes.object,
isActiveStep: PropTypes.bool
};
SetupAssistantStepSummary.defaultProps = {
title: 'Configure user settings for this org',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
};
export default SetupAssistantStepSummary;
|