@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-vertical.tsx CHANGED
@@ -1,5 +1,5 @@
1
+ import { Step, StepList, StepperVertical } from '..';
1
2
  import { Button } from '../../button';
2
- import { Icon } from '../../icon';
3
3
  import { ProgressBarNormal } from '../../progressbar';
4
4
 
5
5
 
@@ -27,128 +27,37 @@ export default () =>(
27
27
  <span>Label</span>
28
28
 
29
29
  <section>
30
- <nav 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"></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" reverse={true} label={false} value="40" />
55
- </nav>
30
+ <StepperVertical />
56
31
  </section>
57
32
  <section>
58
- <nav 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>
33
+ <StepperVertical>
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>
94
39
  <ProgressBarNormal orientation="vertical" reverse={true} label={false} value="40" />
95
- </nav>
40
+ </StepperVertical>
96
41
  </section>
97
42
  <section>
98
- <nav 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>
43
+ <StepperVertical>
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>
122
49
  <ProgressBarNormal orientation="vertical" reverse={true} label={false} value="40" />
123
- </nav>
50
+ </StepperVertical>
124
51
  </section>
125
52
  <section>
126
- <nav 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>
53
+ <StepperVertical>
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>
150
59
  <ProgressBarNormal orientation="vertical" reverse={true} label={false} value="40" />
151
- </nav>
60
+ </StepperVertical>
152
61
  </section>
153
62
 
154
63
  <hr />
@@ -156,51 +65,26 @@ export default () =>(
156
65
  <span className="col-4">Content Between Steps</span>
157
66
 
158
67
  <section className="col-4">
159
- <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateRows: "repeat(3, 1fr)" }}>
160
- <ol className="k-step-list k-step-list-vertical" style={{ gridRowStart: "1", gridRowEnd: "-1" }}>
161
- <li className="k-step k-step-first k-step-done k-step-success" style={{ maxHeight: "33.333%" }}>
162
- <a href="#" className="k-step-link">
163
- <span className="k-step-indicator">
164
- <span className="k-step-indicator-text">1</span>
165
- </span>
166
- <span className="k-step-label">
167
- <span className="k-step-text">Account Info</span>
168
- </span>
169
- </a>
170
- </li>
171
- <li className="k-step k-step-current k-focus" style={{ height: 'auto' }}>
172
- <a href="#" className="k-step-link">
173
- <span className="k-step-indicator">
174
- <span className="k-step-indicator-text">2</span>
175
- </span>
176
- <span className="k-step-label">
177
- <span className="k-step-text">Personal Info</span>
178
- </span>
179
- </a>
180
- <div className="k-step-content" style={{ height: "140px" }}>
181
- <div className="content">
68
+ <StepperVertical>
69
+ <StepList orientation="vertical" style={{ gridRowStart: "1", gridRowEnd: "-1" }}>
70
+ <Step done first text="1" label="Account Info" style={{ maxHeight: "33.333%" }}/>
71
+ <Step current focus text="2" label="Personal Info" style={{ height: "auto" }}
72
+ stepContent={
73
+ <>
74
+ <div className="content">
182
75
  This is the first step of your wizard with inline content.
183
- </div>
184
- <div className="navigation">
185
- <Button>Close</Button>
186
- {" "}<span>Step 2 of 3</span>{" "}
187
- <Button>Next</Button>
188
- </div>
189
- </div>
190
- </li>
191
- <li className="k-step k-step-last" style={{ maxHeight: "33.333%" }}>
192
- <a href="#" className="k-step-link">
193
- <span className="k-step-indicator">
194
- <span className="k-step-indicator-text">3</span>
195
- </span>
196
- <span className="k-step-label">
197
- <span className="k-step-text">Payment Details</span>
198
- </span>
199
- </a>
200
- </li>
201
- </ol>
76
+ </div>
77
+ <div className="navigation">
78
+ <Button>Close</Button>
79
+ {" "}<span>Step 2 of 3</span>{" "}
80
+ <Button>Next</Button>
81
+ </div>
82
+ </>
83
+ }/>
84
+ <Step last text="3" label="Payment Details" style={{ maxHeight: "33.333%" }}/>
85
+ </StepList>
202
86
  <ProgressBarNormal orientation="vertical" reverse={true} label={false} value="30" />
203
- </nav>
87
+ </StepperVertical>
204
88
  </section>
205
89
  </div>
206
90
  </>
package/src/stepper/tests/stepper.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
 
@@ -32,274 +32,75 @@ export default () =>(
32
32
 
33
33
  <span>Indicator</span>
34
34
  <section>
35
- <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
36
- <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
37
- <li className="k-step k-step-first k-step-done" style={{ maxWidth: "33.333%" }}>
38
- <a href="#" className="k-step-link">
39
- <span className="k-step-indicator">
40
- <Icon className="k-step-indicator-icon" icon="check"></Icon>
41
- </span>
42
- </a>
43
- </li>
44
- <li className="k-step k-step-current k-focus" style={{ maxWidth: "33.333%" }}>
45
- <a href="#" className="k-step-link">
46
- <span className="k-step-indicator">
47
- <span className="k-step-indicator-text">2</span>
48
- </span>
49
- </a>
50
- </li>
51
- <li className="k-step k-step-last k-step-optional" style={{ maxWidth: "33.333%" }}>
52
- <a href="#" className="k-step-link">
53
- <span className="k-step-indicator">
54
- <span className="k-step-indicator-text">3</span>
55
- </span>
56
- <span className="k-step-label">
57
- <span className="k-step-label-optional">(Optional)</span>
58
- </span>
59
- </a>
60
- </li>
61
- </ol>
62
- <ProgressBarNormal label={false} value="50" />
63
- </nav>
35
+ <StepperNormal />
64
36
  </section>
65
37
 
66
38
  <span>^ + label</span>
67
39
  <section>
68
- <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
69
- <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
70
- <li className="k-step k-step-first k-step-done k-step-success" style={{ maxWidth: "33.333%" }}>
71
- <a href="#" className="k-step-link">
72
- <span className="k-step-indicator">
73
- <span className="k-step-indicator-text">1</span>
74
- </span>
75
- <span className="k-step-label">
76
- <span className="k-step-text">Account Info with too long label</span>
77
- <Icon icon="check-circle"></Icon>
78
- </span>
79
- </a>
80
- </li>
81
- <li className="k-step k-step-current k-focus k-step-error" style={{ maxWidth: "33.333%" }}>
82
- <a href="#" className="k-step-link">
83
- <span className="k-step-indicator">
84
- <span className="k-step-indicator-text">2</span>
85
- </span>
86
- <span className="k-step-label">
87
- <span className="k-step-text">Personal Info</span>
88
- <Icon className="k-validation-icon" icon="warning-circle"></Icon>
89
- </span>
90
- </a>
91
- </li>
92
- <li className="k-step k-step-last k-step-optional" style={{ maxWidth: "33.333%" }}>
93
- <a href="#" className="k-step-link">
94
- <span className="k-step-indicator">
95
- <span className="k-step-indicator-text">3</span>
96
- </span>
97
- <span className="k-step-label">
98
- <span className="k-step-text">Payment Details</span>
99
- <span className="k-step-label-optional">(Optional)</span>
100
- </span>
101
- </a>
102
- </li>
103
- </ol>
40
+ <StepperNormal>
41
+ <StepList style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
42
+ <Step first done valid text="1" label="Account Info with too long label" style={{ maxWidth: "33.333%" }}/>
43
+ <Step current focus invalid text="2" label="Personal Info" style={{ maxWidth: "33.333%" }}/>
44
+ <Step last optional text="3" label="Payment Details" style={{ maxWidth: "33.333%" }}/>
45
+ </StepList>
104
46
  <ProgressBarNormal label={false} value="50" />
105
- </nav>
47
+ </StepperNormal>
106
48
  </section>
107
49
 
108
50
  <span>Icons</span>
109
51
  <section>
110
- <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
111
- <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
112
- <li className="k-step k-step-first k-step-done" style={{ maxWidth: "33.333%" }}>
113
- <a href="#" className="k-step-link">
114
- <span className="k-step-indicator">
115
- <Icon className="k-step-indicator-icon" icon="lock"></Icon>
116
- </span>
117
- </a>
118
- </li>
119
- <li className="k-step k-step-current k-focus" style={{ maxWidth: "33.333%" }}>
120
- <a href="#" className="k-step-link">
121
- <span className="k-step-indicator">
122
- <Icon className="k-step-indicator-icon" icon="user"></Icon>
123
- </span>
124
- </a>
125
- </li>
126
- <li className="k-step k-step-last k-step-optional" style={{ maxWidth: "33.333%" }}>
127
- <a href="#" className="k-step-link">
128
- <span className="k-step-indicator">
129
- <Icon className="k-step-indicator-icon" icon="track-changes"></Icon>
130
- </span>
131
- <span className="k-step-label">
132
- <span className="k-step-label-optional">(Optional)</span>
133
- </span>
134
- </a>
135
- </li>
136
- </ol>
52
+ <StepperNormal>
53
+ <StepList style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
54
+ <Step first done icon="lock" style={{ maxWidth: "33.333%" }}/>
55
+ <Step current focus icon="user" style={{ maxWidth: "33.333%" }}/>
56
+ <Step last optional icon="track-changes" style={{ maxWidth: "33.333%" }}/>
57
+ </StepList>
137
58
  <ProgressBarNormal label={false} value="50" />
138
- </nav>
59
+ </StepperNormal>
139
60
  </section>
140
61
 
141
62
  <span>^ + label</span>
142
63
  <section>
143
- <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
144
- <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
145
- <li className="k-step k-step-first k-step-done" style={{ maxWidth: "33.333%" }}>
146
- <a href="#" className="k-step-link">
147
- <span className="k-step-indicator">
148
- <Icon className="k-step-indicator-icon" icon="lock"></Icon>
149
- </span>
150
- <span className="k-step-label">
151
- <span className="k-step-text">Account Info</span>
152
- </span>
153
- </a>
154
- </li>
155
- <li className="k-step k-step-current k-focus" style={{ maxWidth: "33.333%" }}>
156
- <a href="#" className="k-step-link">
157
- <span className="k-step-indicator">
158
- <Icon className="k-step-indicator-icon" icon="user"></Icon>
159
- </span>
160
- <span className="k-step-label">
161
- <span className="k-step-text">Personal Info</span>
162
- </span>
163
- </a>
164
- </li>
165
- <li className="k-step k-step-last k-step-optional" style={{ maxWidth: "33.333%" }}>
166
- <a href="#" className="k-step-link">
167
- <span className="k-step-indicator">
168
- <Icon className="k-step-indicator-icon" icon="track-changes"></Icon>
169
- </span>
170
- <span className="k-step-label">
171
- <span className="k-step-text">Payment Details</span>
172
- <span className="k-step-label-optional">(Optional)</span>
173
- </span>
174
- </a>
175
- </li>
176
- </ol>
64
+ <StepperNormal>
65
+ <StepList style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
66
+ <Step first done icon="lock" label="Account Info" style={{ maxWidth: "33.333%" }}/>
67
+ <Step current focus icon="user" label="Personal Info" style={{ maxWidth: "33.333%" }}/>
68
+ <Step last optional icon="track-changes" label="Payment Details" style={{ maxWidth: "33.333%" }}/>
69
+ </StepList>
177
70
  <ProgressBarNormal label={false} value="50" />
178
- </nav>
71
+ </StepperNormal>
179
72
  </section>
180
73
 
181
74
  <span>Labels</span>
182
75
  <section>
183
- <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
184
- <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
185
- <li className="k-step k-step-first k-step-done" style={{ maxWidth: "33.333%" }}>
186
- <a href="#" className="k-step-link">
187
- <span className="k-step-label">
188
- <span className="k-step-text">Account Info</span>
189
- </span>
190
- </a>
191
- </li>
192
- <li className="k-step k-step-current k-focus" style={{ maxWidth: "33.333%" }}>
193
- <a href="#" className="k-step-link">
194
- <span className="k-step-label">
195
- <span className="k-step-text">Personal Info</span>
196
- </span>
197
- </a>
198
- </li>
199
- <li className="k-step k-step-last k-step-optional" style={{ maxWidth: "33.333%" }}>
200
- <a href="#" className="k-step-link">
201
- <span className="k-step-label">
202
- <span className="k-step-text">Payment Details</span>
203
- <span className="k-step-label-optional">(Optional)</span>
204
- </span>
205
- </a>
206
- </li>
207
- </ol>
76
+ <StepperNormal>
77
+ <StepList style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
78
+ <Step first done label="Account Info" style={{ maxWidth: "33.333%" }}/>
79
+ <Step current focus label="Personal Info" style={{ maxWidth: "33.333%" }}/>
80
+ <Step last optional label="Payment Details" style={{ maxWidth: "33.333%" }}/>
81
+ </StepList>
208
82
  <ProgressBarNormal label={false} value="50" />
209
- </nav>
83
+ </StepperNormal>
210
84
  </section>
211
85
 
212
86
  <hr />
213
87
 
214
88
  <span>Many steps</span>
215
89
  <section className="col-2">
216
- <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(16, 1fr)" }}>
217
- <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
218
- <li className="k-step k-step-done k-step-first" style={{ maxWidth: "12.5%" }}>
219
- <a href="#" className="k-step-link">
220
- <span className="k-step-indicator">
221
- <span className="k-step-indicator-text">1</span>
222
- </span>
223
- <span className="k-step-label">
224
- <span className="k-step-text">Step one</span>
225
- </span>
226
- </a>
227
- </li>
228
- <li className="k-step k-step-done" style={{ maxWidth: "12.5%" }}>
229
- <a href="#" className="k-step-link">
230
- <span className="k-step-indicator">
231
- <span className="k-step-indicator-text">2</span>
232
- </span>
233
- <span className="k-step-label">
234
- <span className="k-step-text">Step two</span>
235
- </span>
236
- </a>
237
- </li>
238
- <li className="k-step k-step-done" style={{ maxWidth: "12.5%" }}>
239
- <a href="#" className="k-step-link">
240
- <span className="k-step-indicator">
241
- <span className="k-step-indicator-text">3</span>
242
- </span>
243
- <span className="k-step-label">
244
- <span className="k-step-text">Step three with extremely long label</span>
245
- </span>
246
- </a>
247
- </li>
248
- <li className="k-step k-step-done" style={{ maxWidth: "12.5%" }}>
249
- <a href="#" className="k-step-link">
250
- <span className="k-step-indicator">
251
- <span className="k-step-indicator-text">4</span>
252
- </span>
253
- <span className="k-step-label">
254
- <span className="k-step-text">Step four</span>
255
- </span>
256
- </a>
257
- </li>
258
- <li className="k-step k-step-current k-focus" style={{ maxWidth: "12.5%" }}>
259
- <a href="#" className="k-step-link">
260
- <span className="k-step-indicator">
261
- <span className="k-step-indicator-text">5</span>
262
- </span>
263
- <span className="k-step-label">
264
- <span className="k-step-text">Step five</span>
265
- </span>
266
- </a>
267
- </li>
268
- <li className="k-step" style={{ maxWidth: "12.5%" }}>
269
- <a href="#" className="k-step-link">
270
- <span className="k-step-indicator">
271
- <span className="k-step-indicator-text">6</span>
272
- </span>
273
- <span className="k-step-label">
274
- <span className="k-step-text">Step six</span>
275
- </span>
276
- </a>
277
- </li>
278
- <li className="k-step" style={{ maxWidth: "12.5%" }}>
279
- <a href="#" className="k-step-link">
280
- <span className="k-step-indicator">
281
- <span className="k-step-indicator-text">7</span>
282
- </span>
283
- <span className="k-step-label">
284
- <span className="k-step-text">Step seven</span>
285
- </span>
286
- </a>
287
- </li>
288
- <li className="k-step k-step-last" style={{ maxWidth: "12.5%" }}>
289
- <a href="#" className="k-step-link">
290
- <span className="k-step-indicator">
291
- <span className="k-step-indicator-text">8</span>
292
- </span>
293
- <span className="k-step-label">
294
- <span className="k-step-text">Step eight</span>
295
- </span>
296
- </a>
297
- </li>
298
- </ol>
90
+ <StepperNormal gridTemplateColumns="repeat(16, 1fr)">
91
+ <StepList style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
92
+ <Step done first text="1" label="Step one" style={{ maxWidth: "12.5%" }}/>
93
+ <Step done text="2" label="Step two" style={{ maxWidth: "12.5%" }}/>
94
+ <Step done text="3" label="Step three with extremely long label" style={{ maxWidth: "12.5%" }}/>
95
+ <Step done text="4" label="Step four" style={{ maxWidth: "12.5%" }}/>
96
+ <Step current focus text="5" label="Step five" style={{ maxWidth: "12.5%" }}/>
97
+ <Step text="6" label="Step six" style={{ maxWidth: "12.5%" }}/>
98
+ <Step text="7" label="Step seven" style={{ maxWidth: "12.5%" }}/>
99
+ <Step last text="8" label="Step eight" style={{ maxWidth: "12.5%" }}/>
100
+ </StepList>
299
101
  <ProgressBarNormal label={false} value="60" />
300
- </nav>
102
+ </StepperNormal>
301
103
  </section>
302
-
303
104
  </div>
304
105
  </>
305
106
  );
package/src/taskboard/index.ts ADDED
@@ -0,0 +1,6 @@
1
+ export * from './taskboard-toolbar';
2
+ export * from './taskboard-pane';
3
+ export * from './taskboard.spec';
4
+ export * from './taskboard-column';
5
+ export * from './taskboard-card';
6
+ export * from './templates/taskboard-normal';
package/src/taskboard/taskboard-card.tsx ADDED
@@ -0,0 +1,48 @@
1
+ import { KendoCardProps, Card, KendoCardOptions, KendoCardState } from '../card';
2
+ import { classNames } from '../misc';
3
+
4
+ export const TASKBOARDCARD_CLASSNAME = `k-taskboard-card`;
5
+
6
+ const states = [];
7
+
8
+ const options = {};
9
+
10
+ export type KendoTaskBoardCardProps = {
11
+ category?: boolean;
12
+ };
13
+
14
+ const defaultProps = {};
15
+
16
+ export const TaskBoardCard = (
17
+ props: KendoTaskBoardCardProps &
18
+ KendoCardProps & KendoCardOptions & KendoCardState &
19
+ React.HTMLAttributes<HTMLDivElement>
20
+ ) => {
21
+ const {
22
+ children,
23
+ category,
24
+ ...other
25
+ } = props;
26
+
27
+ return (
28
+ <Card
29
+ {...other}
30
+ className={classNames(
31
+ props.className,
32
+ TASKBOARDCARD_CLASSNAME,
33
+ {
34
+ [`${TASKBOARDCARD_CLASSNAME}-category`]: category,
35
+ }
36
+ )}
37
+ >
38
+ {children}
39
+ </Card>
40
+ );
41
+ };
42
+
43
+ TaskBoardCard.states = states;
44
+ TaskBoardCard.options = options;
45
+ TaskBoardCard.className = TASKBOARDCARD_CLASSNAME;
46
+ TaskBoardCard.defaultProps = defaultProps;
47
+
48
+ export default TaskBoardCard;