superdesk-ui-framework 3.0.1-beta.13 → 3.0.1-beta.15

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 (63) hide show
  1. package/app/scripts/toggleBoxNext.js +1 -1
  2. package/app/styles/_buttons.scss +1 -1
  3. package/app/styles/_content-divider.scss +5 -5
  4. package/app/styles/_helpers.scss +24 -1
  5. package/app/styles/_icon-font.scss +9 -9
  6. package/app/styles/_modals.scss +3 -0
  7. package/app/styles/_normalize.scss +4 -0
  8. package/app/styles/_simple-list.scss +1 -0
  9. package/app/styles/_table-list.scss +11 -1
  10. package/app/styles/app.scss +1 -0
  11. package/app/styles/components/_list-item.scss +23 -16
  12. package/app/styles/components/_sd-collapse-box.scss +6 -6
  13. package/app/styles/design-tokens/_new-colors.scss +10 -5
  14. package/app/styles/dropdowns/_basic-dropdown.scss +6 -0
  15. package/app/styles/form-elements/_input-wrap.scss +138 -0
  16. package/app/styles/form-elements/_inputs.scss +230 -61
  17. package/app/styles/interface-elements/_side-panel.scss +1 -1
  18. package/app/styles/primereact/_pr-dialog.scss +1 -0
  19. package/app/styles/primereact/_pr-menu.scss +6 -5
  20. package/app-typescript/components/Dropdown.tsx +65 -65
  21. package/app-typescript/components/DurationInput.tsx +10 -6
  22. package/app-typescript/components/Form/FormLabel.tsx +8 -1
  23. package/app-typescript/components/Form/InputBase.tsx +12 -2
  24. package/app-typescript/components/Lists/ContentList.tsx +28 -4
  25. package/app-typescript/components/Lists/TableList.tsx +11 -9
  26. package/dist/examples.bundle.css +8 -8
  27. package/dist/examples.bundle.js +1075 -640
  28. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
  29. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +5 -10
  30. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +20 -21
  31. package/dist/playgrounds/react-playgrounds/TestGround.tsx +198 -25
  32. package/dist/react/ContentDivider.tsx +4 -4
  33. package/dist/react/ContentList.tsx +2 -10
  34. package/dist/react/Dropdowns.tsx +357 -5
  35. package/dist/react/Inputs.tsx +1 -7
  36. package/dist/react/TableList.tsx +28 -30
  37. package/dist/react/Togglebox.tsx +1 -1
  38. package/dist/superdesk-ui.bundle.css +463 -176
  39. package/dist/superdesk-ui.bundle.js +591 -539
  40. package/dist/vendor.bundle.js +2 -2
  41. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
  42. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +5 -10
  43. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +20 -21
  44. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +198 -25
  45. package/examples/pages/react/ContentDivider.tsx +4 -4
  46. package/examples/pages/react/ContentList.tsx +2 -10
  47. package/examples/pages/react/Dropdowns.tsx +357 -5
  48. package/examples/pages/react/Inputs.tsx +1 -7
  49. package/examples/pages/react/TableList.tsx +28 -30
  50. package/examples/pages/react/Togglebox.tsx +1 -1
  51. package/package.json +1 -1
  52. package/react/components/Dropdown.d.ts +4 -4
  53. package/react/components/Dropdown.js +19 -15
  54. package/react/components/DurationInput.d.ts +1 -1
  55. package/react/components/DurationInput.js +12 -7
  56. package/react/components/Form/FormLabel.d.ts +4 -1
  57. package/react/components/Form/FormLabel.js +9 -3
  58. package/react/components/Form/InputBase.d.ts +0 -1
  59. package/react/components/Form/InputBase.js +15 -1
  60. package/react/components/Lists/ContentList.d.ts +5 -0
  61. package/react/components/Lists/ContentList.js +36 -15
  62. package/react/components/Lists/TableList.d.ts +5 -5
  63. package/react/components/Lists/TableList.js +6 -4
@@ -67,7 +67,8 @@ 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
70
+ <Dropdown
71
+ append={true}
71
72
  header={[
72
73
  {
73
74
  type: 'group',
@@ -83,13 +84,19 @@ export default class DropdownDoc extends React.Component {
83
84
  label: 'Show 1',
84
85
  icon: 'plus-sign',
85
86
  items: [
86
-
87
+ {
88
+ type: 'submenu',
89
+ label: 'Show 1',
90
+ icon: 'plus-sign',
91
+ items: []
92
+ }
87
93
  ],
88
94
  },
89
95
  {
90
96
  type: 'submenu',
91
97
  label: 'Show 2',
92
98
  icon: 'plus-sign',
99
+
93
100
  items: [
94
101
 
95
102
  ],
@@ -108,6 +115,295 @@ export default class DropdownDoc extends React.Component {
108
115
  type: 'submenu',
109
116
  label: 'Rundown',
110
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
+
111
407
  items: [
112
408
  {
113
409
  type: 'submenu',
@@ -127,6 +423,58 @@ export default class DropdownDoc extends React.Component {
127
423
  },
128
424
  ],
129
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
+
130
478
  ],
131
479
  },
132
480
  ]}
@@ -137,7 +485,7 @@ export default class DropdownDoc extends React.Component {
137
485
  {
138
486
  icon: 'rundown',
139
487
  label: 'Create new Show',
140
- onSelect: () => false,
488
+ onSelect: () => console.log('aaa'),
141
489
  },
142
490
  ],
143
491
  },
@@ -195,7 +543,7 @@ export default class DropdownDoc extends React.Component {
195
543
  The submenu opens by default on the right side of the parent menu.</p>
196
544
  <Markup.ReactMarkup>
197
545
  <Markup.ReactMarkupPreview>
198
- <Dropdown
546
+ <Dropdown
199
547
  items={[
200
548
  {
201
549
  type: 'group', label: 'actions', items: [
@@ -403,7 +751,11 @@ export default class DropdownDoc extends React.Component {
403
751
  label: 'Show 1',
404
752
  icon: 'plus-sign',
405
753
  items: [
406
-
754
+ {
755
+ type: 'submenu',
756
+ label: 'Show 1',
757
+ items:[]
758
+ }
407
759
  ],
408
760
  },
409
761
  {
@@ -108,12 +108,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
108
108
  tabindex={0}
109
109
  onChange={(value) => this.setState({value2: value})} />
110
110
  </div>
111
- <div className='form__row'>
112
- <DurationInput
113
- onChange={(e) => {
114
- console.log(e)
115
- }}
116
- />
111
+
117
112
  <p className="docs-page__paragraph">// Boxed with hidden label</p>
118
113
  <div className='form__row'>
119
114
  <Input label='Input label'
@@ -214,7 +209,6 @@ export default class InputsDoc extends React.Component<{}, IState> {
214
209
  tabindex={0}
215
210
  onChange={(value) => this.setState({value2: value})} />
216
211
  </div>
217
- </div>
218
212
  </div>
219
213
 
220
214
  </Markup.ReactMarkupPreview>
@@ -14,7 +14,7 @@ interface IProps {
14
14
  export default class TableListDoc extends React.Component<IProps, IState> {
15
15
  constructor(props: IState) {
16
16
  super(props);
17
- this.state = {
17
+ this.state = {
18
18
  array: [
19
19
  {
20
20
  start: <>
@@ -40,9 +40,8 @@ export default class TableListDoc extends React.Component<IProps, IState> {
40
40
  center: <span>Item 2</span>,
41
41
  end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
42
42
  action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
43
- onClick: () => {
44
- return false;
45
- }
43
+ onClick: () => console.log('single'),
44
+ onDoubleClick: () => console.log('double'),
46
45
  },
47
46
  {
48
47
  start: <>
@@ -52,9 +51,9 @@ export default class TableListDoc extends React.Component<IProps, IState> {
52
51
  center: <span>Item 3</span>,
53
52
  end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
54
53
  action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
55
- onClick: () => {
56
- return false;
57
- }
54
+ onClick: () => console.log('single'),
55
+ onDoubleClick: () => console.log('double'),
56
+ hexColor: '#ff9808'
58
57
  },
59
58
  ]
60
59
  }
@@ -71,10 +70,10 @@ export default class TableListDoc extends React.Component<IProps, IState> {
71
70
  dragAndDrop
72
71
  addItem
73
72
  array={this.state.array}
74
- itemsDropdown={[
75
- { label: 'Action 1', onSelect: () => 1 },
76
- { label: 'Action 2', onSelect: () => 1 },
77
- { label: 'Action 3', onSelect: () => 1 },
73
+ itemsDropdown={(index) => [
74
+ { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => console.log(index) },
75
+ { label: <Label style='translucent' text='prlg' />, onSelect: () => console.log(index) },
76
+ { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => console.log(index) },
78
77
  ]} />
79
78
  `}
80
79
  </Markup.ReactMarkupCodePreview>
@@ -82,32 +81,31 @@ export default class TableListDoc extends React.Component<IProps, IState> {
82
81
  <p className="docs-page__paragraph">With drag and drop functionality:</p>
83
82
  <Markup.ReactMarkup>
84
83
  <Markup.ReactMarkupPreview>
85
-
86
84
  <TableList
87
85
  dragAndDrop
88
86
  addItem
89
- onAddItem={(index, item) => console.log(index, item)}
90
87
  array={this.state.array}
91
- itemsDropdown={[
92
- { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1},
93
- { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
94
- { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
95
- ]}
88
+ itemsDropdown={(index) => [
89
+ { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => console.log(index) },
90
+ { label: <Label style='translucent' text='prlg' />, onSelect: () => console.log(index) },
91
+ { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => console.log(index) },
92
+ ]
93
+ }
96
94
  onDrag={(start, end) => console.log(start, end)}
97
95
  />
98
-
99
96
  </Markup.ReactMarkupPreview>
100
97
  <Markup.ReactMarkupCode>{`
101
98
  <TableList
102
99
  dragAndDrop
103
100
  addItem
104
101
  array={this.state.array}
105
- itemsDropdown={[
106
- { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
107
- { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
108
- { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
109
- ]}
110
- onClick={() => false}
102
+ itemsDropdown={(index) => [
103
+ { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => console.log(index) },
104
+ { label: <Label style='translucent' text='prlg' />, onSelect: () => console.log(index) },
105
+ { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => console.log(index) },
106
+ ]
107
+ }
108
+ onDrag={(start, end) => console.log(start, end)}
111
109
  />
112
110
  `}
113
111
  </Markup.ReactMarkupCode>
@@ -116,16 +114,15 @@ export default class TableListDoc extends React.Component<IProps, IState> {
116
114
  <h3 className="docs-page__h3">Props</h3>
117
115
  <p className="docs-page__paragraph">TableList</p>
118
116
  <PropsList>
119
- <Prop name='array' isRequired={false} type='Array' default='false' description='Array of object.' />
120
- <Prop name='children' isRequired={false} type='React.ReactNode' default='false' description='Children of component.' />
117
+ <Prop name='array' isRequired={true} type='Array' default='false' description='Array of object.' />
121
118
  <Prop name='addItem' isRequired={false} type='boolean' default='false' description='Functionality to add items to the list.' />
122
119
  <Prop name='dragAndDrop' isRequired={false} type='boolean' default='false' description='Drag&Drop functionality.' />
123
- <Prop name='itemsDropdown' isRequired={false} type='React.ReactNode | any' default='false' description='Dropdown for functionality to add items to the list.' />
124
120
  <Prop name='className' isRequired={false} type='string' default='false' description='Add class on TableList container.' />
125
- <Prop name='showDragHandle' isRequired={false} type='string' default='always' description='' />
126
- <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
121
+ <Prop name='showDragHandle' isRequired={false} type='string' default='always' description='"always" | "onHover" | "none".' />
122
+ <Prop name='readOnly' isRequired={false} type='boolean' default='false' description='When specified, component changes are not enabled.' />
127
123
  <Prop name='onDrag' isRequired={false} type='function' default='false' description='Returns start and end position of draggable item' />
128
124
  <Prop name='onAddItem' isRequired={false} type='function' default='false' description='Returns index of draggable item.' />
125
+ <Prop name='itemsDropdown' isRequired={false} type='function' default='false' description='Dropdown for adding items in the list. Returns index of draggable item.' />
129
126
  </PropsList>
130
127
  <p className="docs-page__paragraph">array:</p>
131
128
  <PropsList>
@@ -133,6 +130,7 @@ export default class TableListDoc extends React.Component<IProps, IState> {
133
130
  <Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
134
131
  <Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
135
132
  <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.' />
133
+ <Prop name='hexColor' isRequired={false} type='string' default='false' description='' />
136
134
  <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
137
135
  <Prop name='onDoubleClick' isRequired={false} type='function' default='false' description='onDoubleClick functionality.' />
138
136
  </PropsList>
@@ -40,6 +40,7 @@ const ToggleboxDocs = () => {
40
40
  <Prop name='hideUsingCSS' isRequired={false} type='boolean' default='false' description='Usefull when working with forms. Content of togglebox will be hidden but remain rendered.' />
41
41
  <Prop name='initiallyOpen' isRequired={false} type='boolean' default='false' description='Opens togglebox on initial render' />
42
42
  <Prop name='className' isRequired={false} type='string' default='null' description='Style class of the component' />
43
+ <Prop name='margin' isRequired={false} type='none | small | normal | large' default='normal' description='Defines the bottom margin of the toggle box.' />
43
44
  <Prop name='onOpen' isRequired={false} type='function' default='null' description='Callback on open event' />
44
45
  <Prop name='onClose' isRequired={false} type='function' default='null' description='Callback on close event' />
45
46
  </PropsList>
@@ -47,5 +48,4 @@ const ToggleboxDocs = () => {
47
48
  )
48
49
  }
49
50
 
50
-
51
51
  export default ToggleboxDocs;