Skip to content

Commit c30a90f

Browse files
Artur-claude
Artur-
and
claude
committed
feat: add stepper component
Import and adapt stepper component from reindeerplus project. Includes vaadin-stepper and vaadin-step components with: - Vertical and horizontal orientations - Small size variant - Multiple states (active, completed, error, inactive) - Step navigation with href support - Descriptions and labels - Numbered step indicators - Connector lines between steps - Full accessibility support - RTL support 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent 2198726 commit c30a90f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+2754
-0
lines changed

‎dev/stepper.html‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>vaadin-stepper</title>
7+
<script type="module" src="./common.js"></script>
8+
<script type="module">
9+
import '../packages/vaadin-lumo-styles/all-imports.js';
10+
import '../packages/stepper/vaadin-stepper.js';
11+
import '../packages/stepper/vaadin-step.js';
12+
</script>
13+
<style>
14+
.demo-section {
15+
margin: 2em 0;
16+
padding: 1em;
17+
border: 1px solid #e0e0e0;
18+
border-radius: 8px;
19+
}
20+
21+
.demo-section h3 {
22+
margin-top: 0;
23+
margin-bottom: 1em;
24+
}
25+
26+
.controls {
27+
margin-top: 2em;
28+
padding-top: 1em;
29+
border-top: 1px solid #e0e0e0;
30+
}
31+
32+
.controls button {
33+
margin-right: 0.5em;
34+
padding: 0.5em 1em;
35+
border: 1px solid #ccc;
36+
border-radius: 4px;
37+
background: white;
38+
cursor: pointer;
39+
}
40+
41+
.controls button:hover {
42+
background: #f5f5f5;
43+
}
44+
</style>
45+
</head>
46+
47+
<body>
48+
<h2>Stepper Examples</h2>
49+
50+
<div class="demo-section">
51+
<h3>Vertical Stepper (Default)</h3>
52+
<vaadin-stepper id="vertical-stepper">
53+
<vaadin-step label="Shopping cart" description="Review items in your cart" href="#/cart" state="completed"></vaadin-step>
54+
<vaadin-step label="Shipping & billing" description="Enter shipping and billing information" href="#/shipping" state="active"></vaadin-step>
55+
<vaadin-step label="Payment method" description="Select payment method" href="#/payment"></vaadin-step>
56+
<vaadin-step label="Confirmation" description="Review and confirm order" href="#/confirm"></vaadin-step>
57+
</vaadin-stepper>
58+
</div>
59+
60+
<div class="demo-section">
61+
<h3>Horizontal Stepper</h3>
62+
<vaadin-stepper orientation="horizontal">
63+
<vaadin-step label="Step 1" href="#/step1" state="completed"></vaadin-step>
64+
<vaadin-step label="Step 2" href="#/step2" state="completed"></vaadin-step>
65+
<vaadin-step label="Step 3" href="#/step3" state="active"></vaadin-step>
66+
<vaadin-step label="Step 4" href="#/step4"></vaadin-step>
67+
</vaadin-stepper>
68+
</div>
69+
70+
<div class="demo-section">
71+
<h3>Small Stepper</h3>
72+
<vaadin-stepper theme="small">
73+
<vaadin-step label="Account setup" description="Create your account" state="completed"></vaadin-step>
74+
<vaadin-step label="Profile information" description="Add your details" state="active"></vaadin-step>
75+
<vaadin-step label="Preferences" description="Customize your experience"></vaadin-step>
76+
<vaadin-step label="Review" description="Review and finish"></vaadin-step>
77+
</vaadin-stepper>
78+
</div>
79+
80+
<div class="demo-section">
81+
<h3>Horizontal Small Stepper</h3>
82+
<vaadin-stepper orientation="horizontal" theme="small">
83+
<vaadin-step label="Upload" state="completed"></vaadin-step>
84+
<vaadin-step label="Process" state="completed"></vaadin-step>
85+
<vaadin-step label="Review" state="active"></vaadin-step>
86+
<vaadin-step label="Complete"></vaadin-step>
87+
</vaadin-stepper>
88+
</div>
89+
90+
<div class="demo-section">
91+
<h3>Stepper with Error State</h3>
92+
<vaadin-stepper>
93+
<vaadin-step label="Data validation" description="Validate input data" state="completed"></vaadin-step>
94+
<vaadin-step label="Processing" description="Process the validated data" state="error"></vaadin-step>
95+
<vaadin-step label="Generate report" description="Create summary report"></vaadin-step>
96+
<vaadin-step label="Send notification" description="Notify stakeholders"></vaadin-step>
97+
</vaadin-stepper>
98+
</div>
99+
100+
<div class="demo-section">
101+
<h3>Disabled Steps</h3>
102+
<vaadin-stepper>
103+
<vaadin-step label="Step 1" href="#/step1" state="completed"></vaadin-step>
104+
<vaadin-step label="Step 2 (Disabled)" href="#/step2" disabled state="active"></vaadin-step>
105+
<vaadin-step label="Step 3" href="#/step3"></vaadin-step>
106+
</vaadin-stepper>
107+
</div>
108+
109+
<div class="demo-section">
110+
<h3>Steps without Links</h3>
111+
<vaadin-stepper>
112+
<vaadin-step label="Initialize" description="System initialization" state="completed"></vaadin-step>
113+
<vaadin-step label="Configure" description="Apply configuration" state="completed"></vaadin-step>
114+
<vaadin-step label="Deploy" description="Deploy to production" state="active"></vaadin-step>
115+
<vaadin-step label="Monitor" description="Monitor system health"></vaadin-step>
116+
</vaadin-stepper>
117+
</div>
118+
119+
<div class="demo-section">
120+
<h3>Interactive Stepper</h3>
121+
<vaadin-stepper id="interactive-stepper">
122+
<vaadin-step label="Step 1" description="First step"></vaadin-step>
123+
<vaadin-step label="Step 2" description="Second step"></vaadin-step>
124+
<vaadin-step label="Step 3" description="Third step"></vaadin-step>
125+
<vaadin-step label="Step 4" description="Fourth step"></vaadin-step>
126+
</vaadin-stepper>
127+
128+
<div class="controls">
129+
<button onclick="setActiveStep(0)">Activate Step 1</button>
130+
<button onclick="setActiveStep(1)">Activate Step 2</button>
131+
<button onclick="setActiveStep(2)">Activate Step 3</button>
132+
<button onclick="setActiveStep(3)">Activate Step 4</button>
133+
<button onclick="completeUpTo(2)">Complete up to Step 2</button>
134+
<button onclick="setError(1)">Set Step 2 Error</button>
135+
<button onclick="resetStepper()">Reset All</button>
136+
</div>
137+
</div>
138+
139+
<script>
140+
const interactiveStepper = document.getElementById('interactive-stepper');
141+
142+
function setActiveStep(index) {
143+
interactiveStepper.reset();
144+
interactiveStepper.setStepState('active', index);
145+
if (index > 0) {
146+
interactiveStepper.completeStepsUntil(index);
147+
}
148+
}
149+
150+
function completeUpTo(index) {
151+
interactiveStepper.completeStepsUntil(index);
152+
}
153+
154+
function setError(index) {
155+
interactiveStepper.setStepState('error', index);
156+
}
157+
158+
function resetStepper() {
159+
interactiveStepper.reset();
160+
}
161+
162+
// Set initial state
163+
setActiveStep(0);
164+
</script>
165+
</body>
166+
</html>

‎packages/stepper/package.json‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"name": "@vaadin/stepper",
3+
"version": "25.0.0-dev",
4+
"publishConfig": {
5+
"access": "public"
6+
},
7+
"description": "Web component for step-by-step process",
8+
"license": "Apache-2.0",
9+
"repository": {
10+
"type": "git",
11+
"url": "https://github.com/vaadin/web-components.git",
12+
"directory": "packages/stepper"
13+
},
14+
"author": "Vaadin Ltd",
15+
"homepage": "https://vaadin.com/components",
16+
"bugs": {
17+
"url": "https://github.com/vaadin/web-components/issues"
18+
},
19+
"main": "vaadin-stepper.js",
20+
"module": "vaadin-stepper.js",
21+
"type": "module",
22+
"files": [
23+
"src",
24+
"vaadin-*.d.ts",
25+
"vaadin-*.js"
26+
],
27+
"keywords": [
28+
"Vaadin",
29+
"stepper",
30+
"step",
31+
"progress",
32+
"wizard",
33+
"web-components",
34+
"web-component"
35+
],
36+
"dependencies": {
37+
"@vaadin/a11y-base": "25.0.0-alpha16",
38+
"@vaadin/component-base": "25.0.0-alpha16",
39+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha16",
40+
"lit": "^3.0.0"
41+
},
42+
"devDependencies": {
43+
"@vaadin/chai-plugins": "25.0.0-alpha16",
44+
"@vaadin/testing-helpers": "^2.0.0"
45+
}
46+
}

0 commit comments

Comments
 (0)