@salesforce/design-system-react
Version:
Salesforce Lightning Design System for React
125 lines (124 loc) • 3.54 kB
JavaScript
import React from 'react';
import createReactClass from 'create-react-class';
import { storiesOf } from '@storybook/react';
import IconSettings from '../../icon-settings';
import ProgressIndicator from '../../../components/progress-indicator';
import { PROGRESS_INDICATOR } from '../../../utilities/constants';
import Default from '../__examples__/default';
import Modal from '../__examples__/modal';
import StepError from '../__examples__/step-error';
var steps = [{
id: 0,
label: React.createElement("i", null, "tooltip label #1"),
assistiveText: 'This is custom text in the assistive text key'
}, {
id: 1,
label: 'tooltip label #2'
}, {
id: 2,
label: React.createElement("strong", null, "tooltip label #3")
}, {
id: 3,
label: 'tooltip label #4'
}, {
id: 4,
label: 'tooltip label #5'
}];
var stepsDisabled = [{
id: 3,
label: 'tooltip label #4'
}, {
id: 4,
label: 'tooltip label #5'
}];
var manySteps = [{
id: 'a',
label: 'tooltip label #1'
}, {
id: 'b',
label: 'tooltip label #2'
}, {
id: 'c',
label: 'tooltip label #3'
}, {
id: 'd',
label: 'tooltip label #4'
}, {
id: 'e',
label: 'tooltip label #5'
}, {
id: 'f',
label: 'tooltip label #6'
}, {
id: 'g',
label: 'tooltip label #7'
}, {
id: 'h',
label: 'tooltip label #8'
}, {
id: 'i',
label: 'tooltip label #9'
}];
var ExampleProgressIndicator = createReactClass({
displayName: 'ProgressIndicatorDefault',
render: function render() {
return React.createElement("div", {
style: {
padding: '4rem 1rem 0px'
}
}, React.createElement(ProgressIndicator, {
id: "example-progress-indicator",
steps: this.props.steps,
selectedStep: this.props.selectedStep,
disabledSteps: this.props.disabledSteps,
completedSteps: this.props.completedSteps,
assistiveText: this.props.assistiveText,
onStepClick: function onStepClick(event, data) {
console.log(data);
}
}));
}
});
storiesOf(PROGRESS_INDICATOR, module).addDecorator(function (getStory) {
return React.createElement("div", {
className: "slds-p-around--medium"
}, React.createElement(IconSettings, {
iconPath: "/assets/icons"
}, getStory()));
}).add('Base', function () {
return React.createElement(Default, null);
}).add('Base With Many Steps', function () {
return React.createElement(ExampleProgressIndicator, {
steps: manySteps,
selectedStep: manySteps[4],
completedSteps: manySteps.slice(0, 4) // tooltipIsOpenSteps={stepsBasic.slice(0, 2)}
});
}).add('Base With Disabled Steps', function () {
return React.createElement(ExampleProgressIndicator, {
steps: steps,
disabledSteps: stepsDisabled,
selectedStep: steps[2],
completedSteps: steps.slice(0, 2)
});
}).add('Step Error', function () {
return React.createElement(StepError, {
id: "example-progress-indicator",
steps: steps,
selectedStep: steps[1],
completedSteps: steps.slice(0, 1),
errorSteps: steps.slice(1, 2)
});
}).add('In A Modal (With Step Error) - Needs DOM', function () {
return typeof document !== 'undefined' ? React.createElement(Modal, null) : null;
}).add('Completed Progress', function () {
return React.createElement(ExampleProgressIndicator, {
steps: steps,
selectedStep: steps[steps.length - 2],
completedSteps: steps.slice(0, steps.length - 2),
assistiveText: {
completedStep: 'Finished this step.',
disabledStep: 'Unable to proceed on this step.'
}
});
});
//# sourceMappingURL=storybook-stories.js.map