@progress/kendo-themes-html 7.2.0 → 7.2.1-dev.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (178) hide show
  1. package/dist/cjs/autocomplete/tests/autocomplete-prefix-suffix.js +1416 -910
  2. package/dist/cjs/combobox/tests/combobox-prefix-suffix.js +1416 -910
  3. package/dist/cjs/filemanager/file-info.js +1238 -1239
  4. package/dist/cjs/filemanager/filemanager-toolbar.spec.js +1 -1
  5. package/dist/cjs/filemanager/filemanager.spec.js +3481 -2163
  6. package/dist/cjs/filemanager/templates/filemanager-grid-preview.js +1238 -1239
  7. package/dist/cjs/filemanager/templates/filemanager-grid.js +1238 -1239
  8. package/dist/cjs/filemanager/templates/filemanager-normal.js +1238 -1239
  9. package/dist/cjs/filemanager/templates/filemanager-preview.js +1238 -1239
  10. package/dist/cjs/filemanager/tests/filemanager-contextmenu.js +1238 -1239
  11. package/dist/cjs/filemanager/tests/filemanager-drag-hint.js +1238 -1239
  12. package/dist/cjs/filemanager/tests/filemanager-gridview-preview.js +2540 -2034
  13. package/dist/cjs/filemanager/tests/filemanager-gridview.js +1238 -1239
  14. package/dist/cjs/filemanager/tests/filemanager-listview-preview.js +2494 -1988
  15. package/dist/cjs/filemanager/tests/filemanager-listview.js +1238 -1239
  16. package/dist/cjs/form/tests/form-field-dropdowns.js +1373 -909
  17. package/dist/cjs/grid/tests/grid-editing-custom-editor.js +1504 -998
  18. package/dist/cjs/index.js +3002 -2407
  19. package/dist/cjs/multiselect/templates/multiselect-prefix.js +1391 -885
  20. package/dist/cjs/multiselect/templates/multiselect-suffix.js +1391 -885
  21. package/dist/cjs/multiselect/tests/multiselect-adaptive.js +1397 -891
  22. package/dist/cjs/multiselect/tests/multiselect-flat.js +1421 -915
  23. package/dist/cjs/multiselect/tests/multiselect-grouping.js +1397 -891
  24. package/dist/cjs/multiselect/tests/multiselect-opened.js +1399 -893
  25. package/dist/cjs/multiselect/tests/multiselect-outline.js +1421 -915
  26. package/dist/cjs/multiselect/tests/multiselect-prefix-suffix.js +1428 -922
  27. package/dist/cjs/multiselect/tests/multiselect-size-rounded.js +1400 -894
  28. package/dist/cjs/multiselect/tests/multiselect-solid.js +1421 -915
  29. package/dist/cjs/scheduler/tests/scheduler-edit-dialog.js +1388 -924
  30. package/dist/cjs/scheduler/tests/scheduler-editing-weekly.js +1402 -938
  31. package/dist/cjs/stepper/index.js +4669 -0
  32. package/dist/cjs/stepper/step-list.js +68 -0
  33. package/dist/cjs/stepper/step.js +4426 -0
  34. package/dist/cjs/stepper/stepper.spec.js +62 -0
  35. package/dist/cjs/stepper/templates/stepper-normal.js +4650 -0
  36. package/dist/cjs/stepper/templates/stepper-vertical.js +4650 -0
  37. package/dist/cjs/stepper/tests/stepper-horizontal-rtl.js +262 -150
  38. package/dist/cjs/stepper/tests/stepper-states.js +247 -228
  39. package/dist/cjs/stepper/tests/stepper-vertical-rtl.js +255 -122
  40. package/dist/cjs/stepper/tests/stepper-vertical.js +369 -238
  41. package/dist/cjs/stepper/tests/stepper.js +275 -187
  42. package/dist/cjs/taskboard/taskboard-card.js +4675 -0
  43. package/dist/cjs/taskboard/taskboard-column.js +4524 -0
  44. package/dist/cjs/taskboard/taskboard-pane.js +17117 -0
  45. package/dist/cjs/taskboard/taskboard-toolbar.js +7892 -0
  46. package/dist/cjs/taskboard/taskboard.spec.js +17117 -0
  47. package/dist/cjs/taskboard/templates/taskboard-normal.js +17168 -0
  48. package/dist/cjs/taskboard/tests/taskboard-card.js +12075 -3113
  49. package/dist/cjs/taskboard/tests/taskboard-column.js +12575 -742
  50. package/dist/cjs/taskboard/tests/taskboard-pane.js +10350 -1770
  51. package/dist/cjs/taskboard/tests/taskboard-resources.js +12673 -323
  52. package/dist/cjs/taskboard/tests/taskboard-rtl.js +10165 -1191
  53. package/dist/cjs/taskboard/tests/taskboard.js +10165 -1182
  54. package/dist/cjs/wizard/templates/wizard-normal.js +4899 -0
  55. package/dist/cjs/wizard/templates/wizard-vertical.js +4900 -0
  56. package/dist/cjs/wizard/tests/wizard-horizontal.js +394 -321
  57. package/dist/cjs/wizard/tests/wizard-vertical.js +413 -445
  58. package/dist/cjs/wizard/wizard-step.js +4524 -0
  59. package/dist/cjs/wizard/wizard-steps.js +56 -0
  60. package/dist/cjs/wizard/wizard.spec.js +110 -0
  61. package/dist/esm/autocomplete/tests/autocomplete-prefix-suffix.js +1416 -910
  62. package/dist/esm/combobox/tests/combobox-prefix-suffix.js +1416 -910
  63. package/dist/esm/filemanager/file-info.js +1240 -1241
  64. package/dist/esm/filemanager/filemanager-toolbar.spec.js +1 -1
  65. package/dist/esm/filemanager/filemanager.spec.js +2923 -1605
  66. package/dist/esm/filemanager/templates/filemanager-grid-preview.js +1240 -1241
  67. package/dist/esm/filemanager/templates/filemanager-grid.js +1240 -1241
  68. package/dist/esm/filemanager/templates/filemanager-normal.js +1240 -1241
  69. package/dist/esm/filemanager/templates/filemanager-preview.js +1240 -1241
  70. package/dist/esm/filemanager/tests/filemanager-contextmenu.js +1240 -1241
  71. package/dist/esm/filemanager/tests/filemanager-drag-hint.js +1240 -1241
  72. package/dist/esm/filemanager/tests/filemanager-gridview-preview.js +2560 -2054
  73. package/dist/esm/filemanager/tests/filemanager-gridview.js +1240 -1241
  74. package/dist/esm/filemanager/tests/filemanager-listview-preview.js +2514 -2008
  75. package/dist/esm/filemanager/tests/filemanager-listview.js +1240 -1241
  76. package/dist/esm/form/tests/form-field-dropdowns.js +1373 -909
  77. package/dist/esm/grid/tests/grid-editing-custom-editor.js +1504 -998
  78. package/dist/esm/index.js +2988 -2393
  79. package/dist/esm/multiselect/templates/multiselect-prefix.js +1391 -885
  80. package/dist/esm/multiselect/templates/multiselect-suffix.js +1391 -885
  81. package/dist/esm/multiselect/tests/multiselect-adaptive.js +1397 -891
  82. package/dist/esm/multiselect/tests/multiselect-flat.js +1421 -915
  83. package/dist/esm/multiselect/tests/multiselect-grouping.js +1397 -891
  84. package/dist/esm/multiselect/tests/multiselect-opened.js +1399 -893
  85. package/dist/esm/multiselect/tests/multiselect-outline.js +1421 -915
  86. package/dist/esm/multiselect/tests/multiselect-prefix-suffix.js +1428 -922
  87. package/dist/esm/multiselect/tests/multiselect-size-rounded.js +1400 -894
  88. package/dist/esm/multiselect/tests/multiselect-solid.js +1421 -915
  89. package/dist/esm/scheduler/tests/scheduler-edit-dialog.js +1388 -924
  90. package/dist/esm/scheduler/tests/scheduler-editing-weekly.js +1402 -938
  91. package/dist/esm/stepper/index.js +4653 -0
  92. package/dist/esm/stepper/step-list.js +46 -0
  93. package/dist/esm/stepper/step.js +4410 -0
  94. package/dist/esm/stepper/stepper.spec.js +40 -0
  95. package/dist/esm/stepper/templates/stepper-normal.js +4634 -0
  96. package/dist/esm/stepper/templates/stepper-vertical.js +4634 -0
  97. package/dist/esm/stepper/tests/stepper-horizontal-rtl.js +262 -150
  98. package/dist/esm/stepper/tests/stepper-states.js +247 -228
  99. package/dist/esm/stepper/tests/stepper-vertical-rtl.js +255 -122
  100. package/dist/esm/stepper/tests/stepper-vertical.js +366 -235
  101. package/dist/esm/stepper/tests/stepper.js +275 -187
  102. package/dist/esm/taskboard/taskboard-card.js +4659 -0
  103. package/dist/esm/taskboard/taskboard-column.js +4508 -0
  104. package/dist/esm/taskboard/taskboard-pane.js +17091 -0
  105. package/dist/esm/taskboard/taskboard-toolbar.js +7876 -0
  106. package/dist/esm/taskboard/taskboard.spec.js +17091 -0
  107. package/dist/esm/taskboard/templates/taskboard-normal.js +17142 -0
  108. package/dist/esm/taskboard/tests/taskboard-card.js +11799 -2847
  109. package/dist/esm/taskboard/tests/taskboard-column.js +12548 -725
  110. package/dist/esm/taskboard/tests/taskboard-pane.js +10334 -1764
  111. package/dist/esm/taskboard/tests/taskboard-resources.js +12665 -325
  112. package/dist/esm/taskboard/tests/taskboard-rtl.js +10170 -1206
  113. package/dist/esm/taskboard/tests/taskboard.js +10170 -1197
  114. package/dist/esm/wizard/templates/wizard-normal.js +4883 -0
  115. package/dist/esm/wizard/templates/wizard-vertical.js +4884 -0
  116. package/dist/esm/wizard/tests/wizard-horizontal.js +392 -319
  117. package/dist/esm/wizard/tests/wizard-vertical.js +411 -443
  118. package/dist/esm/wizard/wizard-step.js +4508 -0
  119. package/dist/esm/wizard/wizard-steps.js +34 -0
  120. package/dist/esm/wizard/wizard.spec.js +88 -0
  121. package/dist/types/filemanager/index.d.ts +1 -1
  122. package/dist/types/index.d.ts +3 -0
  123. package/dist/types/stepper/index.d.ts +5 -0
  124. package/dist/types/stepper/step-list.d.ts +15 -0
  125. package/dist/types/stepper/step.d.ts +25 -0
  126. package/dist/types/stepper/stepper.spec.d.ts +13 -0
  127. package/dist/types/stepper/templates/stepper-normal.d.ts +1 -0
  128. package/dist/types/stepper/templates/stepper-vertical.d.ts +1 -0
  129. package/dist/types/taskboard/index.d.ts +6 -0
  130. package/dist/types/taskboard/taskboard-card.d.ts +13 -0
  131. package/dist/types/taskboard/taskboard-column.d.ts +20 -0
  132. package/dist/types/taskboard/taskboard-pane.d.ts +19 -0
  133. package/dist/types/taskboard/taskboard-toolbar.d.ts +10 -0
  134. package/dist/types/taskboard/taskboard.spec.d.ts +23 -0
  135. package/dist/types/taskboard/templates/taskboard-normal.d.ts +1 -0
  136. package/dist/types/wizard/index.d.ts +5 -0
  137. package/dist/types/wizard/templates/wizard-normal.d.ts +1 -0
  138. package/dist/types/wizard/templates/wizard-vertical.d.ts +1 -0
  139. package/dist/types/wizard/wizard-step.d.ts +19 -0
  140. package/dist/types/wizard/wizard-steps.d.ts +9 -0
  141. package/dist/types/wizard/wizard.spec.d.ts +20 -0
  142. package/package.json +2 -2
  143. package/src/filemanager/filemanager-toolbar.spec.tsx +1 -1
  144. package/src/filemanager/filemanager.spec.tsx +2 -2
  145. package/src/filemanager/index.ts +1 -1
  146. package/src/index.ts +3 -3
  147. package/src/stepper/index.tsx +5 -0
  148. package/src/stepper/step-list.tsx +49 -0
  149. package/src/stepper/step.tsx +129 -0
  150. package/src/stepper/stepper.spec.tsx +42 -0
  151. package/src/stepper/templates/stepper-normal.tsx +19 -0
  152. package/src/stepper/templates/stepper-vertical.tsx +19 -0
  153. package/src/stepper/tests/stepper-horizontal-rtl.tsx +30 -156
  154. package/src/stepper/tests/stepper-states.tsx +31 -411
  155. package/src/stepper/tests/stepper-vertical-rtl.tsx +28 -120
  156. package/src/stepper/tests/stepper-vertical.tsx +41 -157
  157. package/src/stepper/tests/stepper.tsx +42 -241
  158. package/src/taskboard/index.ts +6 -0
  159. package/src/taskboard/taskboard-card.tsx +48 -0
  160. package/src/taskboard/taskboard-column.tsx +70 -0
  161. package/src/taskboard/taskboard-pane.tsx +68 -0
  162. package/src/taskboard/taskboard-toolbar.tsx +39 -0
  163. package/src/taskboard/taskboard.spec.tsx +94 -0
  164. package/src/taskboard/templates/taskboard-normal.tsx +70 -0
  165. package/src/taskboard/tests/taskboard-card.tsx +55 -130
  166. package/src/taskboard/tests/taskboard-column.tsx +93 -164
  167. package/src/taskboard/tests/taskboard-pane.tsx +3 -235
  168. package/src/taskboard/tests/taskboard-resources.tsx +22 -42
  169. package/src/taskboard/tests/taskboard-rtl.tsx +3 -126
  170. package/src/taskboard/tests/taskboard.tsx +2 -116
  171. package/src/wizard/index.ts +5 -0
  172. package/src/wizard/templates/wizard-normal.tsx +19 -0
  173. package/src/wizard/templates/wizard-vertical.tsx +20 -0
  174. package/src/wizard/tests/wizard-horizontal.tsx +20 -304
  175. package/src/wizard/tests/wizard-vertical.tsx +38 -472
  176. package/src/wizard/wizard-step.tsx +69 -0
  177. package/src/wizard/wizard-steps.tsx +29 -0
  178. package/src/wizard/wizard.spec.tsx +55 -0
package/src/stepper/tests/stepper-states.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Icon } from '../../icon';
1
+ import { Step, StepList, StepperNormal } from '..';
2
2
  import { ProgressBarNormal } from '../../progressbar';
3
3
 
4
4
 
@@ -22,417 +22,37 @@ export default () =>(
22
22
  <style>{style}</style>
23
23
  <div id="test-area" className="k-d-grid k-bg-gray-100">
24
24
 
25
- <span>Default</span>
26
- <section className="col-4">
27
- <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
28
- <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
29
- <li className="k-step k-step-first k-step-done" style={{ maxWidth: "33.333%" }}>
30
- <a href="#" className="k-step-link">
31
- <span className="k-step-indicator">
32
- <Icon className="k-step-indicator-icon" icon="check"></Icon>
33
- </span>
34
- </a>
35
- </li>
36
- <li className="k-step k-step-current k-focus" style={{ maxWidth: "33.333%" }}>
37
- <a href="#" className="k-step-link">
38
- <span className="k-step-indicator">
39
- <span className="k-step-indicator-text">2</span>
40
- </span>
41
- </a>
42
- </li>
43
- <li className="k-step k-step-last k-step-optional" style={{ maxWidth: "33.333%" }}>
44
- <a href="#" className="k-step-link">
45
- <span className="k-step-indicator">
46
- <span className="k-step-indicator-text">3</span>
47
- </span>
48
- <span className="k-step-label">
49
- <span className="k-step-label-optional">(Optional)</span>
50
- </span>
51
- </a>
52
- </li>
53
- </ol>
54
- <ProgressBarNormal label={false} value="50" />
55
- </nav>
56
- </section>
25
+ {[ "normal", ...Step.states ].map((state) => (
26
+ <>
27
+ <span>{state}</span>
28
+ <section className="col-4">
29
+ <StepperNormal>
30
+ <StepList style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
31
+ <Step first done icon="check" label="Account Info" { ...{ [state]: true }} style={{ maxWidth: "33.333%" }}/>
32
+ <Step current text="2" label="Personal Info" { ...{ [state]: true }} style={{ maxWidth: "33.333%" }}/>
33
+ <Step last text="3" label="Payment Details" { ...{ [state]: true }} style={{ maxWidth: "33.333%" }}/>
34
+ </StepList>
35
+ <ProgressBarNormal label={false} value="50" />
36
+ </StepperNormal>
37
+ </section>
38
+
39
+ <span></span>
40
+ <section className="col-4">
41
+ <StepperNormal>
42
+ <StepList style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
43
+ <Step first done label="Account Info" { ...{ [state]: true }} style={{ maxWidth: "33.333%" }}/>
44
+ <Step current label="Personal Info" { ...{ [state]: true }} style={{ maxWidth: "33.333%" }}/>
45
+ <Step last label="Payment Details" { ...{ [state]: true }} style={{ maxWidth: "33.333%" }}/>
46
+ </StepList>
47
+ <ProgressBarNormal label={false} value="50" />
48
+ </StepperNormal>
49
+ </section>
50
+
51
+ <hr/>
52
+ </>
53
+ ))
54
+ }
57
55
 
58
- <span>^ + label</span>
59
- <section className="col-4">
60
- <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
61
- <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
62
- <li className="k-step k-step-first k-step-done" style={{ maxWidth: "33.333%" }}>
63
- <a href="#" className="k-step-link">
64
- <span className="k-step-indicator">
65
- <Icon className="k-step-indicator-icon" icon="check"></Icon>
66
- </span>
67
- <span className="k-step-label">
68
- <span className="k-step-text">Account Info</span>
69
- </span>
70
- </a>
71
- </li>
72
- <li className="k-step k-step-current k-focus" style={{ maxWidth: "33.333%" }}>
73
- <a href="#" className="k-step-link">
74
- <span className="k-step-indicator">
75
- <span className="k-step-indicator-text">2</span>
76
- </span>
77
- <span className="k-step-label">
78
- <span className="k-step-text">Personal Info</span>
79
- </span>
80
- </a>
81
- </li>
82
- <li className="k-step k-step-last" style={{ maxWidth: "33.333%" }}>
83
- <a href="#" className="k-step-link">
84
- <span className="k-step-indicator">
85
- <span className="k-step-indicator-text">3</span>
86
- </span>
87
- <span className="k-step-label">
88
- <span className="k-step-text">Payment Details</span>
89
- </span>
90
- </a>
91
- </li>
92
- </ol>
93
- <ProgressBarNormal label={false} value="50" />
94
- </nav>
95
- </section>
96
-
97
- <span>^ only labels</span>
98
- <section className="col-4">
99
- <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
100
- <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
101
- <li className="k-step k-step-first k-step-done" style={{ maxWidth: "33.333%" }}>
102
- <a href="#" className="k-step-link">
103
- <span className="k-step-label">
104
- <span className="k-step-text">Account Info</span>
105
- </span>
106
- </a>
107
- </li>
108
- <li className="k-step k-step-current k-focus" style={{ maxWidth: "33.333%" }}>
109
- <a href="#" className="k-step-link">
110
- <span className="k-step-label">
111
- <span className="k-step-text">Personal Info</span>
112
- </span>
113
- </a>
114
- </li>
115
- <li className="k-step k-step-last" style={{ maxWidth: "33.333%" }}>
116
- <a href="#" className="k-step-link">
117
- <span className="k-step-label">
118
- <span className="k-step-text">Payment Details</span>
119
- </span>
120
- </a>
121
- </li>
122
- </ol>
123
- <ProgressBarNormal label={false} value="50" />
124
- </nav>
125
- </section>
126
-
127
- <hr/>
128
-
129
- <span>Hover</span>
130
- <section className="col-4">
131
- <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
132
- <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
133
- <li className="k-step k-step-first k-step-done k-hover" style={{ maxWidth: "33.333%" }}>
134
- <a href="#" className="k-step-link">
135
- <span className="k-step-indicator">
136
- <Icon className="k-step-indicator-icon" icon="check"></Icon>
137
- </span>
138
- </a>
139
- </li>
140
- <li className="k-step k-step-current k-focus k-hover" style={{ maxWidth: "33.333%" }}>
141
- <a href="#" className="k-step-link">
142
- <span className="k-step-indicator">
143
- <span className="k-step-indicator-text">2</span>
144
- </span>
145
- </a>
146
- </li>
147
- <li className="k-step k-step-last k-step-optional k-hover" style={{ maxWidth: "33.333%" }}>
148
- <a href="#" className="k-step-link">
149
- <span className="k-step-indicator">
150
- <span className="k-step-indicator-text">3</span>
151
- </span>
152
- <span className="k-step-label">
153
- <span className="k-step-label-optional">(Optional)</span>
154
- </span>
155
- </a>
156
- </li>
157
- </ol>
158
- <ProgressBarNormal label={false} value="50" />
159
- </nav>
160
- </section>
161
-
162
- <span>^ + label</span>
163
- <section className="col-4">
164
- <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
165
- <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
166
- <li className="k-step k-step-first k-step-done k-hover" style={{ maxWidth: "33.333%" }}>
167
- <a href="#" className="k-step-link">
168
- <span className="k-step-indicator">
169
- <Icon className="k-step-indicator-icon" icon="check"></Icon>
170
- </span>
171
- <span className="k-step-label">
172
- <span className="k-step-text">Account Info</span>
173
- </span>
174
- </a>
175
- </li>
176
- <li className="k-step k-step-current k-focus k-hover" style={{ maxWidth: "33.333%" }}>
177
- <a href="#" className="k-step-link">
178
- <span className="k-step-indicator">
179
- <span className="k-step-indicator-text">2</span>
180
- </span>
181
- <span className="k-step-label">
182
- <span className="k-step-text">Personal Info</span>
183
- </span>
184
- </a>
185
- </li>
186
- <li className="k-step k-step-last k-hover" style={{ maxWidth: "33.333%" }}>
187
- <a href="#" className="k-step-link">
188
- <span className="k-step-indicator">
189
- <span className="k-step-indicator-text">3</span>
190
- </span>
191
- <span className="k-step-label">
192
- <span className="k-step-text">Payment Details</span>
193
- </span>
194
- </a>
195
- </li>
196
- </ol>
197
- <ProgressBarNormal label={false} value="50" />
198
- </nav>
199
- </section>
200
-
201
- <span>^ only labels</span>
202
- <section className="col-4">
203
- <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
204
- <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
205
- <li className="k-step k-step-first k-step-done k-hover" style={{ maxWidth: "33.333%" }}>
206
- <a href="#" className="k-step-link">
207
- <span className="k-step-label">
208
- <span className="k-step-text">Account Info</span>
209
- </span>
210
- </a>
211
- </li>
212
- <li className="k-step k-step-current k-focus k-hover" style={{ maxWidth: "33.333%" }}>
213
- <a href="#" className="k-step-link">
214
- <span className="k-step-label">
215
- <span className="k-step-text">Personal Info</span>
216
- </span>
217
- </a>
218
- </li>
219
- <li className="k-step k-step-last k-hover" style={{ maxWidth: "33.333%" }}>
220
- <a href="#" className="k-step-link">
221
- <span className="k-step-label">
222
- <span className="k-step-text">Payment Details</span>
223
- </span>
224
- </a>
225
- </li>
226
- </ol>
227
- <ProgressBarNormal label={false} value="50" />
228
- </nav>
229
- </section>
230
-
231
- <span>Focus</span>
232
- <section className="col-4">
233
- <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
234
- <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
235
- <li className="k-step k-step-first k-step-done k-focus" style={{ maxWidth: "33.333%" }}>
236
- <a href="#" className="k-step-link">
237
- <span className="k-step-indicator">
238
- <Icon className="k-step-indicator-icon" icon="check"></Icon>
239
- </span>
240
- </a>
241
- </li>
242
- <li className="k-step k-step-current k-focus" style={{ maxWidth: "33.333%" }}>
243
- <a href="#" className="k-step-link">
244
- <span className="k-step-indicator">
245
- <span className="k-step-indicator-text">2</span>
246
- </span>
247
- </a>
248
- </li>
249
- <li className="k-step k-step-last k-step-optional k-focus" style={{ maxWidth: "33.333%" }}>
250
- <a href="#" className="k-step-link">
251
- <span className="k-step-indicator">
252
- <span className="k-step-indicator-text">3</span>
253
- </span>
254
- <span className="k-step-label">
255
- <span className="k-step-label-optional">(Optional)</span>
256
- </span>
257
- </a>
258
- </li>
259
- </ol>
260
- <ProgressBarNormal label={false} value="50" />
261
- </nav>
262
- </section>
263
-
264
- <span>^ + label</span>
265
- <section className="col-4">
266
- <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
267
- <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
268
- <li className="k-step k-step-first k-step-done k-focus" style={{ maxWidth: "33.333%" }}>
269
- <a href="#" className="k-step-link">
270
- <span className="k-step-indicator">
271
- <Icon className="k-step-indicator-icon" icon="check"></Icon>
272
- </span>
273
- <span className="k-step-label">
274
- <span className="k-step-text">Account Info</span>
275
- </span>
276
- </a>
277
- </li>
278
- <li className="k-step k-step-current k-focus" style={{ maxWidth: "33.333%" }}>
279
- <a href="#" className="k-step-link">
280
- <span className="k-step-indicator">
281
- <span className="k-step-indicator-text">2</span>
282
- </span>
283
- <span className="k-step-label">
284
- <span className="k-step-text">Personal Info</span>
285
- </span>
286
- </a>
287
- </li>
288
- <li className="k-step k-step-last k-focus" style={{ maxWidth: "33.333%" }}>
289
- <a href="#" className="k-step-link">
290
- <span className="k-step-indicator">
291
- <span className="k-step-indicator-text">3</span>
292
- </span>
293
- <span className="k-step-label">
294
- <span className="k-step-text">Payment Details</span>
295
- </span>
296
- </a>
297
- </li>
298
- </ol>
299
- <ProgressBarNormal label={false} value="50" />
300
- </nav>
301
- </section>
302
-
303
- <span>^ only labels</span>
304
- <section className="col-4">
305
- <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
306
- <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
307
- <li className="k-step k-step-first k-step-done k-focus" style={{ maxWidth: "33.333%" }}>
308
- <a href="#" className="k-step-link">
309
- <span className="k-step-label">
310
- <span className="k-step-text">Account Info</span>
311
- </span>
312
- </a>
313
- </li>
314
- <li className="k-step k-step-current k-focus" style={{ maxWidth: "33.333%" }}>
315
- <a href="#" className="k-step-link">
316
- <span className="k-step-label">
317
- <span className="k-step-text">Personal Info</span>
318
- </span>
319
- </a>
320
- </li>
321
- <li className="k-step k-step-last k-focus" style={{ maxWidth: "33.333%" }}>
322
- <a href="#" className="k-step-link">
323
- <span className="k-step-label">
324
- <span className="k-step-text">Payment Details</span>
325
- </span>
326
- </a>
327
- </li>
328
- </ol>
329
- <ProgressBarNormal label={false} value="50" />
330
- </nav>
331
- </section>
332
-
333
- <hr/>
334
-
335
- <span>Disabled</span>
336
- <section className="col-4">
337
- <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
338
- <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
339
- <li className="k-step k-step-first k-step-done k-disabled" style={{ maxWidth: "33.333%" }}>
340
- <a href="#" className="k-step-link">
341
- <span className="k-step-indicator">
342
- <Icon className="k-step-indicator-icon" icon="check"></Icon>
343
- </span>
344
- </a>
345
- </li>
346
- <li className="k-step k-step-current k-focus k-disabled" style={{ maxWidth: "33.333%" }}>
347
- <a href="#" className="k-step-link">
348
- <span className="k-step-indicator">
349
- <span className="k-step-indicator-text">2</span>
350
- </span>
351
- </a>
352
- </li>
353
- <li className="k-step k-step-last k-step-optional k-disabled" style={{ maxWidth: "33.333%" }}>
354
- <a href="#" className="k-step-link">
355
- <span className="k-step-indicator">
356
- <span className="k-step-indicator-text">3</span>
357
- </span>
358
- <span className="k-step-label">
359
- <span className="k-step-label-optional">(Optional)</span>
360
- </span>
361
- </a>
362
- </li>
363
- </ol>
364
- <ProgressBarNormal label={false} disabled={true} value="50" />
365
- </nav>
366
- </section>
367
-
368
- <span>^ + label</span>
369
- <section className="col-4">
370
- <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
371
- <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
372
- <li className="k-step k-step-first k-step-done k-disabled" style={{ maxWidth: "33.333%" }}>
373
- <a href="#" className="k-step-link">
374
- <span className="k-step-indicator">
375
- <Icon className="k-step-indicator-icon" icon="check"></Icon>
376
- </span>
377
- <span className="k-step-label">
378
- <span className="k-step-text">Account Info</span>
379
- </span>
380
- </a>
381
- </li>
382
- <li className="k-step k-step-current k-focus k-disabled" style={{ maxWidth: "33.333%" }}>
383
- <a href="#" className="k-step-link">
384
- <span className="k-step-indicator">
385
- <span className="k-step-indicator-text">2</span>
386
- </span>
387
- <span className="k-step-label">
388
- <span className="k-step-text">Personal Info</span>
389
- </span>
390
- </a>
391
- </li>
392
- <li className="k-step k-step-last k-disabled" style={{ maxWidth: "33.333%" }}>
393
- <a href="#" className="k-step-link">
394
- <span className="k-step-indicator">
395
- <span className="k-step-indicator-text">3</span>
396
- </span>
397
- <span className="k-step-label">
398
- <span className="k-step-text">Payment Details</span>
399
- </span>
400
- </a>
401
- </li>
402
- </ol>
403
- <ProgressBarNormal label={false} disabled={true} value="50" />
404
- </nav>
405
- </section>
406
-
407
- <span>^ only labels</span>
408
- <section className="col-4">
409
- <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
410
- <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
411
- <li className="k-step k-step-first k-step-done k-disabled" style={{ maxWidth: "33.333%" }}>
412
- <a href="#" className="k-step-link">
413
- <span className="k-step-label">
414
- <span className="k-step-text">Account Info</span>
415
- </span>
416
- </a>
417
- </li>
418
- <li className="k-step k-step-current k-focus k-disabled" style={{ maxWidth: "33.333%" }}>
419
- <a href="#" className="k-step-link">
420
- <span className="k-step-label">
421
- <span className="k-step-text">Personal Info</span>
422
- </span>
423
- </a>
424
- </li>
425
- <li className="k-step k-step-last k-disabled" style={{ maxWidth: "33.333%" }}>
426
- <a href="#" className="k-step-link">
427
- <span className="k-step-label">
428
- <span className="k-step-text">Payment Details</span>
429
- </span>
430
- </a>
431
- </li>
432
- </ol>
433
- <ProgressBarNormal label={false} disabled={true} value="50" />
434
- </nav>
435
- </section>
436
56
  </div>
437
57
  </>
438
58
  );
package/src/stepper/tests/stepper-vertical-rtl.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Icon } from '../../icon';
1
+ import { Step, StepList, StepperVertical } from '..';
2
2
  import { ProgressBarNormal } from '../../progressbar';
3
3
 
4
4
 
@@ -23,134 +23,42 @@ export default () =>(
23
23
  <span className="col-4">RTL</span>
24
24
  <span>Indicator</span>
25
25
  <span>Indicator + label</span>
26
- <span>Icons</span>
27
- <span>Labels</span>
26
+ <span>Icon</span>
27
+ <span>Label</span>
28
28
 
29
29
  <section>
30
- <nav dir="rtl" className="k-stepper k-widget" style={{ display: "grid", gridTemplateRows: "repeat(3, 1fr)" }}>
31
- <ol className="k-step-list k-step-list-vertical" style={{ gridRowStart: "1", gridRowEnd: "-1" }}>
32
- <li className="k-step k-step-first k-step-done" style={{ maxHeight: "33.333%" }}>
33
- <a href="#" className="k-step-link">
34
- <span className="k-step-indicator">
35
- <Icon className="k-step-indicator-icon" icon="check-circle"></Icon>
36
- </span>
37
- </a>
38
- </li>
39
- <li className="k-step k-step-current k-focus" style={{ maxHeight: "33.333%" }}>
40
- <a href="#" className="k-step-link">
41
- <span className="k-step-indicator">
42
- <span className="k-step-indicator-text">2</span>
43
- </span>
44
- </a>
45
- </li>
46
- <li className="k-step k-step-last" style={{ maxHeight: "33.333%" }}>
47
- <a href="#" className="k-step-link">
48
- <span className="k-step-indicator">
49
- <span className="k-step-indicator-text">3</span>
50
- </span>
51
- </a>
52
- </li>
53
- </ol>
54
- <ProgressBarNormal orientation="vertical" value="40" label={false} reverse={true} />
55
- </nav>
30
+ <StepperVertical dir="rtl" />
56
31
  </section>
57
32
  <section>
58
- <nav dir="rtl" className="k-stepper k-widget" style={{ display: "grid", gridTemplateRows: "repeat(3, 1fr)" }}>
59
- <ol className="k-step-list k-step-list-vertical" style={{ gridRowStart: "1", gridRowEnd: "-1" }}>
60
- <li className="k-step k-step-first k-step-done k-step-success" style={{ maxHeight: "33.333%" }}>
61
- <a href="#" className="k-step-link">
62
- <span className="k-step-indicator">
63
- <span className="k-step-indicator-text">1</span>
64
- </span>
65
- <span className="k-step-label">
66
- <span className="k-step-text">Account Info with too long text</span>
67
- <Icon icon="check-circle"></Icon>
68
- </span>
69
- </a>
70
- </li>
71
- <li className="k-step k-step-current k-focus k-step-error" style={{ maxHeight: "33.333%" }}>
72
- <a href="#" className="k-step-link">
73
- <span className="k-step-indicator">
74
- <span className="k-step-indicator-text">2</span>
75
- </span>
76
- <span className="k-step-label">
77
- <span className="k-step-text">Personal Info</span>
78
- <Icon className="k-validation-icon" icon="warning-circle"></Icon>
79
- </span>
80
- </a>
81
- </li>
82
- <li className="k-step k-step-last k-step-optional" style={{ maxHeight: "33.333%" }}>
83
- <a href="#" className="k-step-link" >
84
- <span className="k-step-indicator">
85
- <span className="k-step-indicator-text">3</span>
86
- </span>
87
- <span className="k-step-label">
88
- <span className="k-step-text">Payment Details</span>
89
- <span className="k-step-label-optional">(Optional)</span>
90
- </span>
91
- </a>
92
- </li>
93
- </ol>
94
- <ProgressBarNormal orientation="vertical" value="40" label={false} reverse={true} />
95
- </nav>
33
+ <StepperVertical dir="rtl">
34
+ <StepList orientation="vertical" style={{ gridRowStart: "1", gridRowEnd: "-1" }}>
35
+ <Step first done valid text="1" label="Account Info with too long label" style={{ maxHeight: "33.333%" }}/>
36
+ <Step current focus invalid text="2" label="Personal Info" style={{ maxHeight: "33.333%" }}/>
37
+ <Step last optional text="3" label="Payment Details" style={{ maxHeight: "33.333%" }}/>
38
+ </StepList>
39
+ <ProgressBarNormal orientation="vertical" reverse={true} label={false} value="40" />
40
+ </StepperVertical>
96
41
  </section>
97
42
  <section>
98
- <nav dir="rtl" className="k-stepper k-widget" style={{ display: "grid", gridTemplateRows: "repeat(3, 1fr)" }}>
99
- <ol className="k-step-list k-step-list-vertical" style={{ gridRowStart: "1", gridRowEnd: "-1" }}>
100
- <li className="k-step k-step-first k-step-done" style={{ maxHeight: "33.333%" }}>
101
- <a href="#" className="k-step-link">
102
- <span className="k-step-indicator">
103
- <Icon className="k-step-indicator-icon" icon="lock"></Icon>
104
- </span>
105
- </a>
106
- </li>
107
- <li className="k-step k-step-current k-focus" style={{ maxHeight: "33.333%" }}>
108
- <a href="#" className="k-step-link">
109
- <span className="k-step-indicator">
110
- <Icon className="k-step-indicator-icon" icon="user"></Icon>
111
- </span>
112
- </a>
113
- </li>
114
- <li className="k-step k-step-last" style={{ maxHeight: "33.333%" }}>
115
- <a href="#" className="k-step-link">
116
- <span className="k-step-indicator">
117
- <Icon className="k-step-indicator-icon" icon="track-changes"></Icon>
118
- </span>
119
- </a>
120
- </li>
121
- </ol>
122
- <ProgressBarNormal orientation="vertical" value="40" label={false} reverse={true} />
123
- </nav>
43
+ <StepperVertical dir="rtl">
44
+ <StepList orientation="vertical" style={{ gridRowStart: "1", gridRowEnd: "-1" }}>
45
+ <Step first done icon="lock" style={{ maxHeight: "33.333%" }}/>
46
+ <Step current focus icon="user" style={{ maxHeight: "33.333%" }}/>
47
+ <Step last optional icon="track-changes" style={{ maxHeight: "33.333%" }}/>
48
+ </StepList>
49
+ <ProgressBarNormal orientation="vertical" reverse={true} label={false} value="40" />
50
+ </StepperVertical>
124
51
  </section>
125
52
  <section>
126
- <nav dir="rtl" className="k-stepper k-widget" style={{ display: "grid", gridTemplateRows: "repeat(3, 1fr)" }}>
127
- <ol className="k-step-list k-step-list-vertical" style={{ gridRowStart: "1", gridRowEnd: "-1" }}>
128
- <li className="k-step k-step-first k-step-done" style={{ maxHeight: "33.333%" }}>
129
- <a href="#" className="k-step-link">
130
- <span className="k-step-label">
131
- <span className="k-step-text">Account Info</span>
132
- </span>
133
- </a>
134
- </li>
135
- <li className="k-step k-step-current k-focus" style={{ maxHeight: "33.333%" }}>
136
- <a href="#" className="k-step-link">
137
- <span className="k-step-label">
138
- <span className="k-step-text">Personal Info</span>
139
- </span>
140
- </a>
141
- </li>
142
- <li className="k-step k-step-last" style={{ maxHeight: "33.333%" }}>
143
- <a href="#" className="k-step-link">
144
- <span className="k-step-label">
145
- <span className="k-step-text">Payment Details</span>
146
- </span>
147
- </a>
148
- </li>
149
- </ol>
150
- <ProgressBarNormal orientation="vertical" value="40" label={false} reverse={true} />
151
- </nav>
53
+ <StepperVertical dir="rtl">
54
+ <StepList orientation="vertical" style={{ gridRowStart: "1", gridRowEnd: "-1" }}>
55
+ <Step first done label="Account Info" style={{ maxHeight: "33.333%" }}/>
56
+ <Step current focus label="Personal Info" style={{ maxHeight: "33.333%" }}/>
57
+ <Step last optional label="Payment Details" style={{ maxHeight: "33.333%" }}/>
58
+ </StepList>
59
+ <ProgressBarNormal orientation="vertical" reverse={true} label={false} value="40" />
60
+ </StepperVertical>
152
61
  </section>
153
-
154
62
  </div>
155
63
  </>
156
64
  );