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 157 158 159 160 161 162 163 164 | // 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 {
SummaryDetail,
SummaryDetailTitle,
SummaryDetailContent,
SummaryDetailAction,
} from '../summary-detail/base/example';
import SetupAssistantStepSummary from './SetupAssistantStepSummary';
import SetupAssistantStepDetail from './SetupAssistantStepDetail';
import { ProgressBarDescriptive } from '../progress-bar/base/example';
const sampleBaseSteps = [
{
title: 'Add Users to Your Org',
description: 'Lorem ipsum dolor sit amet, lorem ipsum dolor.',
action: {
type: 'button',
title: 'Add Users',
},
duration: '4 mins',
stepProgress: {
isComplete: true,
number: '1',
},
},
{
title: 'Create Profiles for Your Users',
description: 'Lorem ipsum dolor sit amet, lorem ipsum dolor.',
action: {
type: 'button',
title: 'Add Profiles',
},
stepProgress: {
isComplete: false,
number: '2',
percentage: 33,
},
isActiveStep: true,
isOpen: true,
},
{
title: 'Learn How to Use Profiles to Control Visibility',
description: 'Lorem ipsum dolor sit amet, lorem ipsum dolor.',
action: {
type: 'link',
title: 'View on Trailhead',
},
duration: '15 mins',
stepProgress: {
isComplete: true,
number: '3',
percentage: '0',
},
},
{
title: 'Turn On Tracking for Profiles',
description: 'Lorem ipsum dolor sit amet, lorem ipsum dolor.',
action: {
type: 'toggle',
title: 'Turn on tracking for profiles',
},
stepProgress: {
isComplete: false,
number: '4',
percentage: '0',
},
},
{
title: 'Setup Einstein Visibility for Admins',
description: 'Lorem ipsum dolor sit amet, lorem ipsum dolor.',
action: {
type: 'link',
title: 'Watch Video',
},
stepProgress: {
isComplete: false,
number: '5',
percentage: '0',
},
},
];
const renderBaseSteps = (steps, stepsHaveProgress) => {
return steps.map((step, index) => (
<SetupAssistantStep key={`base-step-${step.title}-${stepsHaveProgress}-${index}`}>
<SetupAssistantStepSummary
title={step.title}
stepProgress={stepsHaveProgress && step.stepProgress}
action={step.action}
duration={step.duration}
/>
</SetupAssistantStep>
));
};
const renderExpandableSteps = (steps) => {
return steps.map((step, index) => (
<SetupAssistantStep key={`expand-step-${step.title}-${index}`}>
<SummaryDetail className={classNames({ 'slds-is-open': step.isOpen })}>
<SummaryDetailAction
className="slds-m-top_x-small"
referenceId={`step-${index}-summary-action`}
isOpen={step.isOpen}
summaryTitle={step.title}
/>
<div className="slds-container_fluid">
<SummaryDetailTitle>
<SetupAssistantStepSummary
title={step.title}
isActiveStep={step.isActiveStep}
stepProgress={step.stepProgress}
duration={step.duration || '10 mins'}
referenceId={`step-${index}-summary-action`}
isOpen={step.isOpen}
/>
</SummaryDetailTitle>
<SummaryDetailContent referenceId={`step-${index}-summary-action`} isOpen={step.isOpen}>
<SetupAssistantStepDetail />
</SummaryDetailContent>
</div>
</SummaryDetail>
</SetupAssistantStep>
));
};
export const SetupAssistantStep = (props) => (
<li className="slds-setup-assistant__item">
<article className="slds-setup-assistant__step">{props.children}</article>
</li>
);
export const SetupAssistantList = (props) => <ol className="slds-setup-assistant">{props.children}</ol>;
export default (props) => {
const { isBase, stepsHaveProgress, stepsAreExpandable } = props;
return (
<SetupAssistantList>
{isBase && renderBaseSteps(sampleBaseSteps, stepsHaveProgress)}
{stepsAreExpandable && renderExpandableSteps(sampleBaseSteps)}
</SetupAssistantList>
);
};
export const FullSetupAssistantCard = (props) => {
return (
<section className="slds-card">
<header className="slds-theme_shade slds-p-around_medium slds-m-bottom_small">
<ProgressBarDescriptive
barClassName="slds-progress-bar_circular"
label="Complete all the steps below to finish setting up Einstein Visibility"
value="50"
/>
</header>
<React.Fragment>{props.children}</React.Fragment>
</section>
);
};
|