superdesk-ui-framework 3.0.1-beta.8 → 3.0.1

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 (160) hide show
  1. package/app/fonts/sd_icons.eot +0 -0
  2. package/app/fonts/sd_icons.svg +1 -0
  3. package/app/fonts/sd_icons.ttf +0 -0
  4. package/app/fonts/sd_icons.woff +0 -0
  5. package/app/scripts/toggleBoxNext.js +1 -1
  6. package/app/styles/_big-icon-font.scss +1 -1
  7. package/app/styles/_buttons.scss +11 -6
  8. package/app/styles/_content-divider.scss +63 -8
  9. package/app/styles/_helpers.scss +24 -1
  10. package/app/styles/_icon-font.scss +11 -10
  11. package/app/styles/_labels.scss +0 -1
  12. package/app/styles/_master-desk.scss +5 -4
  13. package/app/styles/_modals.scss +7 -3
  14. package/app/styles/_normalize.scss +4 -0
  15. package/app/styles/_sd-tag-input.scss +56 -2
  16. package/app/styles/_simple-list.scss +0 -2
  17. package/app/styles/_table-list.scss +116 -12
  18. package/app/styles/app.scss +3 -0
  19. package/app/styles/components/_list-item.scss +23 -16
  20. package/app/styles/components/_sd-collapse-box.scss +6 -6
  21. package/app/styles/components/_sd-comment-box.scss +8 -4
  22. package/app/styles/components/_sd-editor-popup.scss +4 -4
  23. package/app/styles/components/_sd-media-carousel.scss +37 -2
  24. package/app/styles/components/_sd-pagination.scss +41 -0
  25. package/app/styles/components/_sd-photo-preview.scss +2 -2
  26. package/app/styles/components/_subnav.scss +470 -470
  27. package/app/styles/design-tokens/_new-colors.scss +29 -12
  28. package/app/styles/dropdowns/_basic-dropdown.scss +6 -0
  29. package/app/styles/form-elements/_input-wrap.scss +138 -0
  30. package/app/styles/form-elements/_inputs.scss +230 -61
  31. package/app/styles/grids/_grid-layout.scss +13 -14
  32. package/app/styles/interface-elements/_side-panel.scss +1 -1
  33. package/app/styles/layout/_editor.scss +6 -0
  34. package/app/styles/menus/_sd-sidebar-menu.scss +1 -1
  35. package/app/styles/primereact/_pr-datepicker.scss +16 -2
  36. package/app/styles/primereact/_pr-dialog.scss +9 -0
  37. package/app/styles/primereact/_pr-menu.scss +6 -5
  38. package/app/styles/variables/_colors.scss +47 -47
  39. package/app/template/search-handler.html +2 -2
  40. package/app-typescript/components/ContentDivider.tsx +3 -0
  41. package/app-typescript/components/DatePicker.tsx +8 -9
  42. package/app-typescript/components/Dropdown.tsx +127 -82
  43. package/app-typescript/components/DurationInput.tsx +39 -14
  44. package/app-typescript/components/Form/FormLabel.tsx +8 -1
  45. package/app-typescript/components/Form/InputBase.tsx +12 -2
  46. package/app-typescript/components/Input.tsx +4 -4
  47. package/app-typescript/components/Label.tsx +17 -1
  48. package/app-typescript/components/Layouts/AuthoringFrame.tsx +2 -1
  49. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +21 -2
  50. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +1 -1
  51. package/app-typescript/components/Layouts/AuthoringMain.tsx +4 -2
  52. package/app-typescript/components/Layouts/CoreLayout.tsx +3 -1
  53. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +10 -1
  54. package/app-typescript/components/Lists/ContentList.tsx +64 -30
  55. package/app-typescript/components/Lists/TableList.tsx +255 -53
  56. package/app-typescript/components/Menu.tsx +2 -2
  57. package/app-typescript/components/Modal.tsx +6 -2
  58. package/app-typescript/components/MultiSelect.tsx +1 -1
  59. package/app-typescript/components/NavButton.tsx +2 -1
  60. package/app-typescript/components/Navigation/SideBarMenu.tsx +30 -4
  61. package/app-typescript/components/SearchBar.tsx +11 -3
  62. package/app-typescript/components/Spacer.tsx +87 -0
  63. package/app-typescript/components/TimePicker.tsx +2 -13
  64. package/app-typescript/components/TreeSelect.tsx +286 -180
  65. package/app-typescript/index.ts +1 -0
  66. package/dist/examples.bundle.css +110 -71
  67. package/dist/examples.bundle.js +23848 -21661
  68. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +505 -2
  69. package/dist/playgrounds/react-playgrounds/Index.tsx +1 -0
  70. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
  71. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +17 -19
  72. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +22 -23
  73. package/dist/playgrounds/react-playgrounds/TestGround.tsx +226 -25
  74. package/dist/react/ContentDivider.tsx +22 -18
  75. package/dist/react/ContentList.tsx +188 -12
  76. package/dist/react/DatePicker.tsx +50 -2
  77. package/dist/react/Dropdowns.tsx +580 -48
  78. package/dist/react/DurationInput.tsx +7 -3
  79. package/dist/react/Inputs.tsx +1 -7
  80. package/dist/react/Modal.tsx +154 -22
  81. package/dist/react/MultiSelect.tsx +5 -5
  82. package/dist/react/NavButtons.tsx +31 -1
  83. package/dist/react/TableList.tsx +52 -139
  84. package/dist/react/Togglebox.tsx +1 -1
  85. package/dist/react/TreeSelect.tsx +167 -176
  86. package/dist/sd_icons.eot +0 -0
  87. package/dist/sd_icons.svg +1 -0
  88. package/dist/sd_icons.ttf +0 -0
  89. package/dist/sd_icons.woff +0 -0
  90. package/dist/superdesk-ui.bundle.css +1100 -407
  91. package/dist/superdesk-ui.bundle.js +6591 -4035
  92. package/dist/vendor.bundle.js +27 -27
  93. package/examples/css/docs-page.css +4 -4
  94. package/examples/index.js +4 -0
  95. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +505 -2
  96. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +1 -0
  97. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
  98. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +17 -19
  99. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +22 -23
  100. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +226 -25
  101. package/examples/pages/react/ContentDivider.tsx +22 -18
  102. package/examples/pages/react/ContentList.tsx +188 -12
  103. package/examples/pages/react/DatePicker.tsx +50 -2
  104. package/examples/pages/react/Dropdowns.tsx +580 -48
  105. package/examples/pages/react/DurationInput.tsx +7 -3
  106. package/examples/pages/react/Inputs.tsx +1 -7
  107. package/examples/pages/react/Modal.tsx +154 -22
  108. package/examples/pages/react/MultiSelect.tsx +5 -5
  109. package/examples/pages/react/NavButtons.tsx +31 -1
  110. package/examples/pages/react/TableList.tsx +52 -139
  111. package/examples/pages/react/Togglebox.tsx +1 -1
  112. package/examples/pages/react/TreeSelect.tsx +167 -176
  113. package/package.json +3 -5
  114. package/react/components/ContentDivider.d.ts +1 -0
  115. package/react/components/ContentDivider.js +2 -0
  116. package/react/components/DatePicker.d.ts +2 -2
  117. package/react/components/DatePicker.js +3 -3
  118. package/react/components/Dropdown.d.ts +6 -5
  119. package/react/components/Dropdown.js +57 -30
  120. package/react/components/DurationInput.d.ts +1 -1
  121. package/react/components/DurationInput.js +46 -17
  122. package/react/components/Form/FormLabel.d.ts +4 -1
  123. package/react/components/Form/FormLabel.js +9 -3
  124. package/react/components/Form/InputBase.d.ts +0 -1
  125. package/react/components/Form/InputBase.js +15 -1
  126. package/react/components/Input.d.ts +3 -3
  127. package/react/components/Input.js +2 -1
  128. package/react/components/Label.d.ts +1 -0
  129. package/react/components/Label.js +17 -2
  130. package/react/components/Layouts/AuthoringFrame.d.ts +1 -0
  131. package/react/components/Layouts/AuthoringFrame.js +1 -1
  132. package/react/components/Layouts/AuthoringFrameRightBar.d.ts +9 -2
  133. package/react/components/Layouts/AuthoringFrameRightBar.js +14 -3
  134. package/react/components/Layouts/AuthoringInnerHeader.js +1 -1
  135. package/react/components/Layouts/AuthoringMain.js +1 -1
  136. package/react/components/Layouts/CoreLayout.d.ts +2 -0
  137. package/react/components/Layouts/CoreLayout.js +1 -1
  138. package/react/components/Layouts/CoreLayoutMain.d.ts +2 -0
  139. package/react/components/Layouts/CoreLayoutMain.js +8 -1
  140. package/react/components/Lists/ContentList.d.ts +6 -0
  141. package/react/components/Lists/ContentList.js +42 -16
  142. package/react/components/Lists/TableList.d.ts +30 -8
  143. package/react/components/Lists/TableList.js +127 -24
  144. package/react/components/Menu.js +1 -1
  145. package/react/components/Modal.d.ts +2 -0
  146. package/react/components/Modal.js +3 -3
  147. package/react/components/MultiSelect.d.ts +40 -0
  148. package/react/components/MultiSelect.js +70 -0
  149. package/react/components/NavButton.d.ts +1 -1
  150. package/react/components/Navigation/SideBarMenu.d.ts +6 -0
  151. package/react/components/Navigation/SideBarMenu.js +19 -2
  152. package/react/components/SearchBar.d.ts +1 -1
  153. package/react/components/SearchBar.js +15 -7
  154. package/react/components/TimePicker.d.ts +1 -5
  155. package/react/components/TimePicker.js +3 -7
  156. package/react/components/TreeSelect.d.ts +12 -5
  157. package/react/components/TreeSelect.js +189 -116
  158. package/react/index.d.ts +1 -0
  159. package/react/index.js +3 -0
  160. package/patches/@superdesk+primereact+5.0.2-4.patch +0 -66
package/examples/pages/react/Dropdowns.tsx CHANGED
@@ -67,27 +67,460 @@ export default class DropdownDoc extends React.Component {
67
67
  <p className='docs-page__paragraph'>Add prop value <code>append = true</code> to the dropdown element to append to the inner dropdown menu to the body. This is useful when the dropdown button is inside a div with overflow: hidden, and the menu would otherwise be hidden.</p>
68
68
  <Markup.ReactMarkup>
69
69
  <Markup.ReactMarkupPreview>
70
- <Dropdown
71
- append={true}
72
- items={[
73
- {
74
- type: 'group', label: 'actions', items: [
75
- 'divider',
76
- { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
77
- { label: 'Copy', icon: 'copy', onSelect: () => 1 },
78
- { label: 'Delete', icon: 'trash', onSelect: () => 1 },
79
- 'divider',
80
- ]
81
- },
82
- {
83
- type: 'group', label: 'actions 2', items: [
84
- { label: 'Download', icon: 'download', onSelect: () => 1 },
85
- { label: 'Print', icon: 'print', onSelect: () => 1 },
86
- ]
87
- }
88
- ]}>
89
- Drop append to body
90
- </Dropdown>
70
+ <Dropdown
71
+ append={true}
72
+ header={[
73
+ {
74
+ type: 'group',
75
+ label: 'Create new',
76
+ items: [
77
+ {
78
+ type: 'submenu',
79
+ label: 'Rundown',
80
+ icon: 'plus-sign',
81
+ items: [
82
+ {
83
+ type: 'submenu',
84
+ label: 'Show 1',
85
+ icon: 'plus-sign',
86
+ items: [
87
+ {
88
+ type: 'submenu',
89
+ label: 'Show 1',
90
+ icon: 'plus-sign',
91
+ items: []
92
+ }
93
+ ],
94
+ },
95
+ {
96
+ type: 'submenu',
97
+ label: 'Show 2',
98
+ icon: 'plus-sign',
99
+
100
+ items: [
101
+
102
+ ],
103
+ },
104
+ ],
105
+ },
106
+ ],
107
+ },
108
+ ]}
109
+ items={[
110
+ {
111
+ type: 'group',
112
+ label: 'Create new',
113
+ items: [
114
+ {
115
+ type: 'submenu',
116
+ label: 'Rundown',
117
+ icon: 'plus-sign',
118
+
119
+ items: [
120
+ {
121
+ type: 'submenu',
122
+ label: 'Show 1',
123
+ icon: 'plus-sign',
124
+ items: [
125
+
126
+ ],
127
+ },
128
+ {
129
+ type: 'submenu',
130
+ label: 'Show 2',
131
+ icon: 'plus-sign',
132
+ items: [
133
+
134
+ ],
135
+ },
136
+ ],
137
+ },
138
+ {
139
+ type: 'submenu',
140
+ label: 'Rundown',
141
+ icon: 'plus-sign',
142
+
143
+ items: [
144
+ {
145
+ type: 'submenu',
146
+ label: 'Show 1',
147
+ icon: 'plus-sign',
148
+ items: [
149
+
150
+ ],
151
+ },
152
+ {
153
+ type: 'submenu',
154
+ label: 'Show 2',
155
+ icon: 'plus-sign',
156
+ items: [
157
+
158
+ ],
159
+ },
160
+ ],
161
+ },
162
+ {
163
+ type: 'submenu',
164
+ label: 'Rundown',
165
+ icon: 'plus-sign',
166
+
167
+ items: [
168
+ {
169
+ type: 'submenu',
170
+ label: 'Show 1',
171
+ icon: 'plus-sign',
172
+ items: [
173
+
174
+ ],
175
+ },
176
+ {
177
+ type: 'submenu',
178
+ label: 'Show 2',
179
+ icon: 'plus-sign',
180
+ items: [
181
+
182
+ ],
183
+ },
184
+ ],
185
+ },
186
+ {
187
+ type: 'submenu',
188
+ label: 'Rundown',
189
+ icon: 'plus-sign',
190
+
191
+ items: [
192
+ {
193
+ type: 'submenu',
194
+ label: 'Show 1',
195
+ icon: 'plus-sign',
196
+ items: [
197
+
198
+ ],
199
+ },
200
+ {
201
+ type: 'submenu',
202
+ label: 'Show 2',
203
+ icon: 'plus-sign',
204
+ items: [
205
+
206
+ ],
207
+ },
208
+ ],
209
+ },
210
+ {
211
+ type: 'submenu',
212
+ label: 'Rundown',
213
+ icon: 'plus-sign',
214
+
215
+ items: [
216
+ {
217
+ type: 'submenu',
218
+ label: 'Show 1',
219
+ icon: 'plus-sign',
220
+ items: [
221
+
222
+ ],
223
+ },
224
+ {
225
+ type: 'submenu',
226
+ label: 'Show 2',
227
+ icon: 'plus-sign',
228
+ items: [
229
+
230
+ ],
231
+ },
232
+ ],
233
+ },
234
+ {
235
+ type: 'submenu',
236
+ label: 'Rundown',
237
+ icon: 'plus-sign',
238
+
239
+ items: [
240
+ {
241
+ type: 'submenu',
242
+ label: 'Show 1',
243
+ icon: 'plus-sign',
244
+ items: [
245
+
246
+ ],
247
+ },
248
+ {
249
+ type: 'submenu',
250
+ label: 'Show 2',
251
+ icon: 'plus-sign',
252
+ items: [
253
+
254
+ ],
255
+ },
256
+ ],
257
+ },
258
+ {
259
+ type: 'submenu',
260
+ label: 'Rundown',
261
+ icon: 'plus-sign',
262
+
263
+ items: [
264
+ {
265
+ type: 'submenu',
266
+ label: 'Show 1',
267
+ icon: 'plus-sign',
268
+ items: [
269
+
270
+ ],
271
+ },
272
+ {
273
+ type: 'submenu',
274
+ label: 'Show 2',
275
+ icon: 'plus-sign',
276
+ items: [
277
+
278
+ ],
279
+ },
280
+ ],
281
+ },
282
+ {
283
+ type: 'submenu',
284
+ label: 'Rundown',
285
+ icon: 'plus-sign',
286
+
287
+ items: [
288
+ {
289
+ type: 'submenu',
290
+ label: 'Show 1',
291
+ icon: 'plus-sign',
292
+ items: [
293
+
294
+ ],
295
+ },
296
+ {
297
+ type: 'submenu',
298
+ label: 'Show 2',
299
+ icon: 'plus-sign',
300
+ items: [
301
+
302
+ ],
303
+ },
304
+ ],
305
+ },
306
+ {
307
+ type: 'submenu',
308
+ label: 'Rundown',
309
+ icon: 'plus-sign',
310
+
311
+ items: [
312
+ {
313
+ type: 'submenu',
314
+ label: 'Show 1',
315
+ icon: 'plus-sign',
316
+ items: [
317
+
318
+ ],
319
+ },
320
+ {
321
+ type: 'submenu',
322
+ label: 'Show 2',
323
+ icon: 'plus-sign',
324
+ items: [
325
+
326
+ ],
327
+ },
328
+ ],
329
+ },
330
+ {
331
+ type: 'submenu',
332
+ label: 'Rundown',
333
+ icon: 'plus-sign',
334
+
335
+ items: [
336
+ {
337
+ type: 'submenu',
338
+ label: 'Show 1',
339
+ icon: 'plus-sign',
340
+ items: [
341
+
342
+ ],
343
+ },
344
+ {
345
+ type: 'submenu',
346
+ label: 'Show 2',
347
+ icon: 'plus-sign',
348
+ items: [
349
+
350
+ ],
351
+ },
352
+ ],
353
+ },
354
+ {
355
+ type: 'submenu',
356
+ label: 'Rundown',
357
+ icon: 'plus-sign',
358
+
359
+ items: [
360
+ {
361
+ type: 'submenu',
362
+ label: 'Show 1',
363
+ icon: 'plus-sign',
364
+ items: [
365
+
366
+ ],
367
+ },
368
+ {
369
+ type: 'submenu',
370
+ label: 'Show 2',
371
+ icon: 'plus-sign',
372
+ items: [
373
+
374
+ ],
375
+ },
376
+ ],
377
+ },
378
+ {
379
+ type: 'submenu',
380
+ label: 'Rundown',
381
+ icon: 'plus-sign',
382
+
383
+ items: [
384
+ {
385
+ type: 'submenu',
386
+ label: 'Show 1',
387
+ icon: 'plus-sign',
388
+ items: [
389
+
390
+ ],
391
+ },
392
+ {
393
+ type: 'submenu',
394
+ label: 'Show 2',
395
+ icon: 'plus-sign',
396
+ items: [
397
+
398
+ ],
399
+ },
400
+ ],
401
+ },
402
+ {
403
+ type: 'submenu',
404
+ label: 'Rundown',
405
+ icon: 'plus-sign',
406
+
407
+ items: [
408
+ {
409
+ type: 'submenu',
410
+ label: 'Show 1',
411
+ icon: 'plus-sign',
412
+ items: [
413
+
414
+ ],
415
+ },
416
+ {
417
+ type: 'submenu',
418
+ label: 'Show 2',
419
+ icon: 'plus-sign',
420
+ items: [
421
+
422
+ ],
423
+ },
424
+ ],
425
+ },
426
+ {
427
+ type: 'submenu',
428
+ label: 'Rundown',
429
+ icon: 'plus-sign',
430
+
431
+ items: [
432
+ {
433
+ type: 'submenu',
434
+ label: 'Show 1',
435
+ icon: 'plus-sign',
436
+
437
+ items: [
438
+
439
+ ],
440
+ },
441
+ {
442
+ type: 'submenu',
443
+ label: 'Show 2',
444
+ icon: 'plus-sign',
445
+ items: [
446
+
447
+ ],
448
+ },
449
+ ],
450
+ },
451
+ {
452
+ type: 'submenu',
453
+ label: 'Rundown',
454
+ icon: 'plus-sign',
455
+
456
+ items: [
457
+ {
458
+ type: 'submenu',
459
+ label: 'Show 1',
460
+ icon: 'plus-sign',
461
+ items: [
462
+
463
+ ],
464
+ },
465
+ {
466
+ type: 'submenu',
467
+ label: 'Show 2',
468
+ icon: 'plus-sign',
469
+ items: [
470
+
471
+ ],
472
+ },
473
+ ],
474
+ },
475
+
476
+
477
+
478
+ ],
479
+ },
480
+ ]}
481
+ footer={[
482
+ {
483
+ type: 'group',
484
+ items: [
485
+ {
486
+ icon: 'rundown',
487
+ label: 'Create new Show',
488
+ onSelect: () => console.log('aaa'),
489
+ },
490
+ ],
491
+ },
492
+ {
493
+ type: 'group',
494
+ label: 'Create new',
495
+ items: [
496
+ {
497
+ type: 'submenu',
498
+ label: 'Rundown',
499
+ icon: 'plus-sign',
500
+ items: [
501
+ {
502
+ type: 'submenu',
503
+ label: 'Show 1',
504
+ icon: 'plus-sign',
505
+ items: [
506
+
507
+ ],
508
+ },
509
+ {
510
+ type: 'submenu',
511
+ label: 'Show 2',
512
+ icon: 'plus-sign',
513
+ items: [
514
+
515
+ ],
516
+ },
517
+ ],
518
+ },
519
+ ],
520
+ },
521
+ ]}
522
+ >
523
+ </Dropdown>
91
524
  </Markup.ReactMarkupPreview>
92
525
  <Markup.ReactMarkupCode>{`
93
526
  <Dropdown
@@ -110,7 +543,7 @@ export default class DropdownDoc extends React.Component {
110
543
  The submenu opens by default on the right side of the parent menu.</p>
111
544
  <Markup.ReactMarkup>
112
545
  <Markup.ReactMarkupPreview>
113
- <Dropdown
546
+ <Dropdown
114
547
  items={[
115
548
  {
116
549
  type: 'group', label: 'actions', items: [
@@ -207,8 +640,8 @@ export default class DropdownDoc extends React.Component {
207
640
  <SubNav zIndex={1} color='darker'>
208
641
  <h3 className="subnav__page-title">Subnav title</h3>
209
642
  <Dropdown
210
- align='right'
211
- items={[
643
+ //align='right'
644
+ header={[
212
645
  {
213
646
  type: 'group', label: 'actions', items: [
214
647
  'divider',
@@ -225,7 +658,39 @@ export default class DropdownDoc extends React.Component {
225
658
  { label: 'Action 3', onSelect: () => 1 },
226
659
  { label: 'Action 4', onSelect: () => 1 },
227
660
  ]
228
- }]}>
661
+ }
662
+ ]}
663
+ items={[
664
+ // {
665
+ // type: 'group', label: 'actions', items: [
666
+ // 'divider',
667
+ // { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
668
+ // { label: 'Copy', icon: 'copy', onSelect: () => 1 },
669
+ // { label: 'Delete', icon: 'trash', onSelect: () => 1 },
670
+ // 'divider',
671
+ // ]
672
+ // },
673
+ // {
674
+ // type: 'submenu', label: 'Second level actions', icon: 'star', items: [
675
+ // { label: 'Action 1', onSelect: () => 1 },
676
+ // { label: 'Action 2', onSelect: () => 1 },
677
+ // { label: 'Action 3', onSelect: () => 1 },
678
+ // { label: 'Action 4', onSelect: () => 1 },
679
+ // ]
680
+ // }
681
+ ]}
682
+ footer={[
683
+
684
+ {
685
+ type: 'submenu', label: 'Second level actions', icon: 'star', items: [
686
+ { label: 'Action 1', onSelect: () => 1 },
687
+ { label: 'Action 2', onSelect: () => 1 },
688
+ { label: 'Action 3', onSelect: () => 1 },
689
+ { label: 'Action 4', onSelect: () => 1 },
690
+ ]
691
+ }
692
+ ]}
693
+ >
229
694
  <button className='sd-navbtn'>
230
695
  <i className="icon-dots-vertical"></i>
231
696
  </button>
@@ -270,42 +735,109 @@ export default class DropdownDoc extends React.Component {
270
735
  <SubNav zIndex={1} color='darker'>
271
736
  <h3 className="subnav__page-title">Subnav title</h3>
272
737
  <Dropdown
273
- align='right'
738
+ append={true}
274
739
  header={[
275
740
  {
276
- type: 'group', label: 'header actions', items: [
277
- { label: 'Header action one', icon: 'download', onSelect: () => 1 },
278
- { label: 'Header action two', icon: 'trash', onSelect: () => 1 },
279
- ]
741
+ type: 'group',
742
+ label: 'Create new',
743
+ items: [
744
+ {
745
+ type: 'submenu',
746
+ label: 'Rundown',
747
+ icon: 'plus-sign',
748
+ items: [
749
+ {
750
+ type: 'submenu',
751
+ label: 'Show 1',
752
+ icon: 'plus-sign',
753
+ items: [
754
+ {
755
+ type: 'submenu',
756
+ label: 'Show 1',
757
+ items:[]
758
+ }
759
+ ],
760
+ },
761
+ {
762
+ type: 'submenu',
763
+ label: 'Show 2',
764
+ icon: 'plus-sign',
765
+ items: [
766
+
767
+ ],
768
+ },
769
+ ],
770
+ },
771
+ ],
280
772
  },
281
773
  ]}
282
774
  items={[
283
775
  {
284
776
  type: 'group', label: 'body actions', items: [
285
- { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
286
- { label: 'Copy', icon: 'copy', onSelect: () => 1 },
287
- { label: 'Action 2', icon: 'envelope', onSelect: () => 1 },
288
- { label: 'Action 3', icon: 'heart', onSelect: () => 1 },
289
- { label: 'Action 4', icon: 'print', onSelect: () => 1 },
290
- { label: 'Action 5', icon: 'plus-sign', onSelect: () => 1 },
291
- { label: 'Action 6', icon: 'minus-sign', onSelect: () => 1 },
292
- { label: 'Action 7', icon: 'refresh', onSelect: () => 1 },
293
- { label: 'Action 8', icon: 'pick', onSelect: () => 1 },
294
- { label: 'Action 9', icon: 'bell', onSelect: () => 1 },
295
- { label: 'Action 10', icon: 'kill', onSelect: () => 1 },
296
- { label: 'Action 11', icon: 'settings', onSelect: () => 1 },
297
- { label: 'Action 12', icon: 'cut', onSelect: () => 1 },
777
+ {
778
+ type: 'group',
779
+ label: 'Create new',
780
+ items: [
781
+ {
782
+ type: 'submenu',
783
+ label: 'Rundown',
784
+ icon: 'plus-sign',
785
+ items: [
786
+ {
787
+ type: 'submenu',
788
+ label: 'Show 1',
789
+ icon: 'plus-sign',
790
+ items: [
791
+
792
+ ],
793
+ },
794
+ {
795
+ type: 'submenu',
796
+ label: 'Show 2',
797
+ icon: 'plus-sign',
798
+ items: [
799
+
800
+ ],
801
+ },
802
+ ],
803
+ },
804
+ ],
805
+ },
298
806
  ]
299
807
  },
300
808
  ]}
301
809
  footer={[
302
810
  {
303
- type: 'group', label: 'footer actions', items: [
304
- { label: 'Create gallery', icon: 'slideshow', onSelect: () => 1 },
305
- { label: 'Create package', icon: 'composite', onSelect: () => 1 },
306
- ]
811
+ type: 'group',
812
+ label: 'Create new',
813
+ items: [
814
+ {
815
+ type: 'submenu',
816
+ label: 'Rundown',
817
+ icon: 'plus-sign',
818
+ items: [
819
+ {
820
+ type: 'submenu',
821
+ label: 'Show 1',
822
+ icon: 'plus-sign',
823
+ items: [
824
+
825
+ ],
826
+ },
827
+ {
828
+ type: 'submenu',
829
+ label: 'Show 2',
830
+ icon: 'plus-sign',
831
+ items: [
832
+
833
+ ],
834
+ },
835
+ ],
836
+ },
837
+ ],
307
838
  },
308
- ]}>
839
+ ]}
840
+ >
309
841
  <button className='sd-navbtn'>
310
842
  <i className="icon-dots-vertical"></i>
311
843
  </button>