blob: 358f641c48d6d780ee483e96aa5cfcad6eaebfd7 (
plain)
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
|
import React from 'react';
import { Helmet } from 'react-helmet';
import brand from 'ba-api/brand';
import { SourceReader, PapperBlock } from 'ba-components';
import {
HorizontalLinear,
HorizontalNonLinear,
StepperError,
VerticalStepper,
MobileSteppers,
StepperCarousel
} from './demos';
class Steppers extends React.Component {
render() {
const title = brand.name + ' - UI Elements';
const description = brand.desc;
const docSrc = 'containers/UiElements/demos/Steppers/';
return (
<div>
<Helmet>
<title>{title}</title>
<meta name="description" content={description} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
</Helmet>
<PapperBlock title="Horizontal Linear" desc="The Stepper can be controlled by passing the current step index (zero-based) as the activeStep property.">
<div>
<HorizontalLinear />
<SourceReader componentName={docSrc + 'HorizontalLinear.js'} />
</div>
</PapperBlock>
<PapperBlock title="Horizontal Non-linear" desc="Non-linear steppers allow users to enter a multi-step flow at any point.">
<div>
<HorizontalNonLinear />
<SourceReader componentName={docSrc + 'HorizontalNonLinear.js'} />
</div>
</PapperBlock>
<PapperBlock title="Horizontal Non Linear - Error Step" desc="">
<div>
<StepperError />
<SourceReader componentName={docSrc + 'StepperError.js'} />
</div>
</PapperBlock>
<PapperBlock title="Vertical Stepper" desc="">
<div>
<VerticalStepper />
<SourceReader componentName={docSrc + 'VerticalStepper.js'} />
</div>
</PapperBlock>
<PapperBlock title="Mobile Stepper" desc="Use a progress bar or dots when there are many steps, or if there are steps that need to be inserted during the process (based on responses to earlier steps).">
<div>
<MobileSteppers />
<SourceReader componentName={docSrc + 'MobileSteppers.js'} />
</div>
</PapperBlock>
<PapperBlock title="Carousel Stepper" desc="This is essentially a back/next button positioned correctly. You must implement the textual description yourself, however, an example is provided below for reference.">
<div>
<StepperCarousel />
<SourceReader componentName={docSrc + 'StepperCarousel.js'} />
</div>
</PapperBlock>
</div>
);
}
}
export default Steppers;
|
