Skip to content

Commit 8ae930e

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 8ae930e

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

+2751
-0
lines changed

‎dev/stepper.html‎

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