Skip to content

Commit f1d686a

Browse files
prabhuignotoprabhuignoto
authored
Support for customizing icons (#11)
1 parent 08e3663 commit f1d686a

File tree

18 files changed

+739
-577
lines changed

18 files changed

+739
-577
lines changed

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,5 @@ dist-ssr
2323
*.sln
2424
*.sw?
2525
coverage/
26-
cache/
26+
cache/
27+
.dccache

‎.stylelintrc.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
"extends": "stylelint-config-standard"
2+
"extends": "stylelint-config-standard",
3+
"plugin:security/recommended"
34
}

‎README.md‎

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
- [Form field types](#form-field-types)
3838
- [Accessing the wizard data](#accessing-the-wizard-data)
3939
- [Custom validation messages](#custom-validation-messages)
40+
- [Custom icons](#custom-icons)
4041
- [🎨 Theme](#-theme)
4142
- [CodeSandbox examples](#codesandbox-examples)
4243
- [⛏️ Built With](#️-built-with)
@@ -90,15 +91,15 @@ The example shows a simple wizard with two pages.
9091

9192
## ⚙️ Properties
9293

93-
| Name | Description | Default |
94-
| :---------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
95-
| `bodyHeight` | Sets the height of the form body. | 500 |
96-
| `strict` | Validation rules are applied to all inputs that have been marked for validation or that are required. The component prevents the user from moving on until the current step's errors have been fixed. | false |
97-
| `theme` | [Theme](#🎨-theme) object for customized styling | |
98-
| `highlightFieldsOnValidation` | Highlights the fields when the validation fails or succeeds | false |
99-
| `pages` | Collection of [Page](#Page) object | |
100-
| `onFinish` | Callback executed on final step | |
101-
| `RTL` | Enables right to left mode | false |
94+
| Name | Description | Default |
95+
| :---------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
96+
| `bodyHeight` | Sets the height of the form body. | 500 |
97+
| `strict` | Validation rules are applied to all inputs that have been marked for validation or that are required.<br>The component prevents the user from moving on until the current step's errors have been fixed. | false |
98+
| `theme` | [Theme](#🎨-theme) object for customized styling | |
99+
| `highlightFieldsOnValidation` | Highlights the fields when the validation fails or succeeds | false |
100+
| `pages` | Collection of [Page](#Page) object | |
101+
| `onFinish` | Callback executed on final step | |
102+
| `RTL` | Enables right to left mode | false |
102103

103104
## Page
104105

@@ -260,6 +261,22 @@ Validation messages are enabled by default for all fields. However, the `validat
260261
]}
261262
```
262263

264+
## Custom icons
265+
266+
You can change the icons on the stepper head by giving the `icons` prop an array of icons as react components.
267+
268+
```jsx
269+
<Wizard
270+
...
271+
icons={[
272+
<User key="usr" />,
273+
<Box key="box" />,
274+
<Twitter key="twitter" />,
275+
<Dollar key="dollar" />,
276+
]}
277+
/>
278+
```
279+
263280
## 🎨 Theme
264281

265282
Customize the look and feel of the Wizard through the `theme` object.

‎coverage/coverage-final.json‎

Lines changed: 11 additions & 9 deletions
Large diffs are not rendered by default.

‎coverage/index.html‎

Lines changed: 61 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -23,30 +23,30 @@ <h1>All files</h1>
2323
<div class='clearfix'>
2424

2525
<div class='fl pad1y space-right2'>
26-
<span class="strong">71.37% </span>
26+
<span class="strong">72.27% </span>
2727
<span class="quiet">Statements</span>
28-
<span class='fraction'>743/1041</span>
28+
<span class='fraction'>842/1165</span>
2929
</div>
3030

3131

3232
<div class='fl pad1y space-right2'>
33-
<span class="strong">77.55% </span>
33+
<span class="strong">75.29% </span>
3434
<span class="quiet">Branches</span>
35-
<span class='fraction'>114/147</span>
35+
<span class='fraction'>128/170</span>
3636
</div>
3737

3838

3939
<div class='fl pad1y space-right2'>
40-
<span class="strong">53.48% </span>
40+
<span class="strong">58.33% </span>
4141
<span class="quiet">Functions</span>
42-
<span class='fraction'>23/43</span>
42+
<span class='fraction'>28/48</span>
4343
</div>
4444

4545

4646
<div class='fl pad1y space-right2'>
47-
<span class="strong">71.37% </span>
47+
<span class="strong">72.27% </span>
4848
<span class="quiet">Lines</span>
49-
<span class='fraction'>743/1041</span>
49+
<span class='fraction'>842/1165</span>
5050
</div>
5151

5252

@@ -95,62 +95,62 @@ <h1>All files</h1>
9595

9696
<tr>
9797
<td class="file low" data-value="react-wizardly/src/components"><a href="react-wizardly/src/components/index.html">react-wizardly/src/components</a></td>
98-
<td data-value="18.68" class="pic low">
98+
<td data-value="18.54" class="pic low">
9999
<div class="chart"><div class="cover-fill" style="width: 18%"></div><div class="cover-empty" style="width: 82%"></div></div>
100100
</td>
101-
<td data-value="18.68" class="pct low">18.68%</td>
102-
<td data-value="289" class="abs low">54/289</td>
101+
<td data-value="18.54" class="pct low">18.54%</td>
102+
<td data-value="302" class="abs low">56/302</td>
103103
<td data-value="100" class="pct high">100%</td>
104104
<td data-value="1" class="abs high">1/1</td>
105105
<td data-value="16.66" class="pct low">16.66%</td>
106106
<td data-value="6" class="abs low">1/6</td>
107-
<td data-value="18.68" class="pct low">18.68%</td>
108-
<td data-value="289" class="abs low">54/289</td>
107+
<td data-value="18.54" class="pct low">18.54%</td>
108+
<td data-value="302" class="abs low">56/302</td>
109109
</tr>
110110

111111
<tr>
112112
<td class="file high" data-value="react-wizardly/src/components/form-field"><a href="react-wizardly/src/components/form-field/index.html">react-wizardly/src/components/form-field</a></td>
113-
<td data-value="90.63" class="pic high">
114-
<div class="chart"><div class="cover-fill" style="width: 90%"></div><div class="cover-empty" style="width: 10%"></div></div>
113+
<td data-value="91.48" class="pic high">
114+
<div class="chart"><div class="cover-fill" style="width: 91%"></div><div class="cover-empty" style="width: 9%"></div></div>
115115
</td>
116-
<td data-value="90.63" class="pct high">90.63%</td>
117-
<td data-value="235" class="abs high">213/235</td>
118-
<td data-value="82.97" class="pct high">82.97%</td>
119-
<td data-value="47" class="abs high">39/47</td>
116+
<td data-value="91.48" class="pct high">91.48%</td>
117+
<td data-value="282" class="abs high">258/282</td>
118+
<td data-value="83.63" class="pct high">83.63%</td>
119+
<td data-value="55" class="abs high">46/55</td>
120120
<td data-value="100" class="pct high">100%</td>
121-
<td data-value="4" class="abs high">4/4</td>
122-
<td data-value="90.63" class="pct high">90.63%</td>
123-
<td data-value="235" class="abs high">213/235</td>
121+
<td data-value="6" class="abs high">6/6</td>
122+
<td data-value="91.48" class="pct high">91.48%</td>
123+
<td data-value="282" class="abs high">258/282</td>
124124
</tr>
125125

126126
<tr>
127127
<td class="file high" data-value="react-wizardly/src/components/page"><a href="react-wizardly/src/components/page/index.html">react-wizardly/src/components/page</a></td>
128-
<td data-value="96.96" class="pic high">
129-
<div class="chart"><div class="cover-fill" style="width: 96%"></div><div class="cover-empty" style="width: 4%"></div></div>
128+
<td data-value="97.95" class="pic high">
129+
<div class="chart"><div class="cover-fill" style="width: 97%"></div><div class="cover-empty" style="width: 3%"></div></div>
130130
</td>
131-
<td data-value="96.96" class="pct high">96.96%</td>
132-
<td data-value="132" class="abs high">128/132</td>
133-
<td data-value="83.33" class="pct high">83.33%</td>
134-
<td data-value="30" class="abs high">25/30</td>
131+
<td data-value="97.95" class="pct high">97.95%</td>
132+
<td data-value="147" class="abs high">144/147</td>
133+
<td data-value="79.31" class="pct medium">79.31%</td>
134+
<td data-value="29" class="abs medium">23/29</td>
135135
<td data-value="100" class="pct high">100%</td>
136136
<td data-value="2" class="abs high">2/2</td>
137-
<td data-value="96.96" class="pct high">96.96%</td>
138-
<td data-value="132" class="abs high">128/132</td>
137+
<td data-value="97.95" class="pct high">97.95%</td>
138+
<td data-value="147" class="abs high">144/147</td>
139139
</tr>
140140

141141
<tr>
142142
<td class="file high" data-value="react-wizardly/src/components/wizard-footer"><a href="react-wizardly/src/components/wizard-footer/index.html">react-wizardly/src/components/wizard-footer</a></td>
143-
<td data-value="98.43" class="pic high">
144-
<div class="chart"><div class="cover-fill" style="width: 98%"></div><div class="cover-empty" style="width: 2%"></div></div>
143+
<td data-value="97.77" class="pic high">
144+
<div class="chart"><div class="cover-fill" style="width: 97%"></div><div class="cover-empty" style="width: 3%"></div></div>
145145
</td>
146-
<td data-value="98.43" class="pct high">98.43%</td>
147-
<td data-value="128" class="abs high">126/128</td>
148-
<td data-value="84.37" class="pct high">84.37%</td>
149-
<td data-value="32" class="abs high">27/32</td>
146+
<td data-value="97.77" class="pct high">97.77%</td>
147+
<td data-value="135" class="abs high">132/135</td>
148+
<td data-value="87.5" class="pct high">87.5%</td>
149+
<td data-value="32" class="abs high">28/32</td>
150150
<td data-value="100" class="pct high">100%</td>
151151
<td data-value="3" class="abs high">3/3</td>
152-
<td data-value="98.43" class="pct high">98.43%</td>
153-
<td data-value="128" class="abs high">126/128</td>
152+
<td data-value="97.77" class="pct high">97.77%</td>
153+
<td data-value="135" class="abs high">132/135</td>
154154
</tr>
155155

156156
<tr>
@@ -159,43 +159,43 @@ <h1>All files</h1>
159159
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
160160
</td>
161161
<td data-value="100" class="pct high">100%</td>
162-
<td data-value="98" class="abs high">98/98</td>
163-
<td data-value="62.5" class="pct medium">62.5%</td>
164-
<td data-value="16" class="abs medium">10/16</td>
162+
<td data-value="101" class="abs high">101/101</td>
163+
<td data-value="61.9" class="pct medium">61.9%</td>
164+
<td data-value="21" class="abs medium">13/21</td>
165165
<td data-value="60" class="pct medium">60%</td>
166166
<td data-value="5" class="abs medium">3/5</td>
167167
<td data-value="100" class="pct high">100%</td>
168-
<td data-value="98" class="abs high">98/98</td>
168+
<td data-value="101" class="abs high">101/101</td>
169169
</tr>
170170

171171
<tr>
172172
<td class="file high" data-value="react-wizardly/src/icons"><a href="react-wizardly/src/icons/index.html">react-wizardly/src/icons</a></td>
173-
<td data-value="96.9" class="pic high">
174-
<div class="chart"><div class="cover-fill" style="width: 96%"></div><div class="cover-empty" style="width: 4%"></div></div>
173+
<td data-value="97.39" class="pic high">
174+
<div class="chart"><div class="cover-fill" style="width: 97%"></div><div class="cover-empty" style="width: 3%"></div></div>
175175
</td>
176-
<td data-value="96.9" class="pct high">96.9%</td>
177-
<td data-value="97" class="abs high">94/97</td>
176+
<td data-value="97.39" class="pct high">97.39%</td>
177+
<td data-value="115" class="abs high">112/115</td>
178178
<td data-value="100" class="pct high">100%</td>
179-
<td data-value="6" class="abs high">6/6</td>
180-
<td data-value="85.71" class="pct high">85.71%</td>
181-
<td data-value="7" class="abs high">6/7</td>
182-
<td data-value="96.9" class="pct high">96.9%</td>
183-
<td data-value="97" class="abs high">94/97</td>
179+
<td data-value="7" class="abs high">7/7</td>
180+
<td data-value="87.5" class="pct high">87.5%</td>
181+
<td data-value="8" class="abs high">7/8</td>
182+
<td data-value="97.39" class="pct high">97.39%</td>
183+
<td data-value="115" class="abs high">112/115</td>
184184
</tr>
185185

186186
<tr>
187187
<td class="file low" data-value="react-wizardly/src/utils"><a href="react-wizardly/src/utils/index.html">react-wizardly/src/utils</a></td>
188-
<td data-value="47.54" class="pic low">
189-
<div class="chart"><div class="cover-fill" style="width: 47%"></div><div class="cover-empty" style="width: 53%"></div></div>
188+
<td data-value="46.34" class="pic low">
189+
<div class="chart"><div class="cover-fill" style="width: 46%"></div><div class="cover-empty" style="width: 54%"></div></div>
190190
</td>
191-
<td data-value="47.54" class="pct low">47.54%</td>
192-
<td data-value="61" class="abs low">29/61</td>
191+
<td data-value="46.34" class="pct low">46.34%</td>
192+
<td data-value="82" class="abs low">38/82</td>
193193
<td data-value="40" class="pct low">40%</td>
194-
<td data-value="15" class="abs low">6/15</td>
195-
<td data-value="25" class="pct low">25%</td>
196-
<td data-value="16" class="abs low">4/16</td>
197-
<td data-value="47.54" class="pct low">47.54%</td>
198-
<td data-value="61" class="abs low">29/61</td>
194+
<td data-value="25" class="abs low">10/25</td>
195+
<td data-value="33.33" class="pct low">33.33%</td>
196+
<td data-value="18" class="abs low">6/18</td>
197+
<td data-value="46.34" class="pct low">46.34%</td>
198+
<td data-value="82" class="abs low">38/82</td>
199199
</tr>
200200

201201
</tbody>
@@ -206,7 +206,7 @@ <h1>All files</h1>
206206
<div class='footer quiet pad2 space-top1 center small'>
207207
Code coverage generated by
208208
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
209-
at Wed May 04 2022 13:08:22 GMT+0530 (India Standard Time)
209+
at Wed Jun 08 2022 13:43:18 GMT+0530 (India Standard Time)
210210
</div>
211211
<script src="prettify.js"></script>
212212
<script>

‎package.json‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "react-wizardry",
33
"version": "0.9.0",
4-
"description": "Data driven smart wizard",
4+
"description": "Multi-step form wizard component for React",
55
"keywords": [
66
"wizard",
77
"react-wizard",
@@ -90,17 +90,17 @@
9090
},
9191
"main": "dist/react-wizardry.js",
9292
"devDependencies": {
93-
"@babel/core": "^7.18.0",
94-
"@babel/plugin-transform-runtime": "^7.18.0",
95-
"@babel/preset-env": "^7.18.0",
93+
"@babel/core": "^7.18.2",
94+
"@babel/plugin-transform-runtime": "^7.18.2",
95+
"@babel/preset-env": "^7.18.2",
9696
"@babel/preset-react": "^7.17.12",
97-
"@babel/runtime": "^7.18.0",
97+
"@babel/runtime": "^7.18.3",
9898
"@testing-library/jest-dom": "^5.16.4",
99-
"@testing-library/react": "^13.2.0",
99+
"@testing-library/react": "^13.3.0",
100100
"@types/react": "^18.0.9",
101-
"@types/react-dom": "^18.0.4",
102-
"@typescript-eslint/eslint-plugin": "^5.25.0",
103-
"@typescript-eslint/parser": "^5.25.0",
101+
"@types/react-dom": "^18.0.5",
102+
"@typescript-eslint/eslint-plugin": "^5.27.0",
103+
"@typescript-eslint/parser": "^5.27.0",
104104
"@vitejs/plugin-react": "^1.3.2",
105105
"@webpack-cli/generators": "^2.4.2",
106106
"autoprefixer": "^10.4.7",
@@ -117,6 +117,7 @@
117117
"eslint-plugin-node": "^11.1.0",
118118
"eslint-plugin-promise": "^6.0.0",
119119
"eslint-plugin-react": "^7.30.0",
120+
"eslint-plugin-security": "^1.5.0",
120121
"husky": "^8.0.1",
121122
"jsdom": "^19.0.0",
122123
"mini-css-extract-plugin": "^2.6.0",
@@ -130,13 +131,13 @@
130131
"sass": "^1.52.1",
131132
"sass-loader": "^13.0.0",
132133
"style-loader": "^3.3.1",
133-
"stylelint": "^14.8.3",
134+
"stylelint": "^14.8.5",
134135
"stylelint-config-standard": "^25.0.0",
135136
"terser-webpack-plugin": "^5.3.1",
136137
"ts-loader": "^9.3.0",
137-
"typescript": "^4.6.4",
138+
"typescript": "^4.7.2",
138139
"vite": "^2.9.9",
139-
"vitest": "^0.12.8",
140+
"vitest": "^0.13.0",
140141
"webpack": "^5.72.1",
141142
"webpack-bundle-analyzer": "^4.5.0",
142143
"webpack-cli": "^4.9.2",

0 commit comments

Comments
 (0)