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
@@ -17296,7 +17296,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
17296
17296
  }
17297
17297
  }.call(this));
17298
17298
 
17299
- /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(35), __webpack_require__(49)(module)))
17299
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(35), __webpack_require__(50)(module)))
17300
17300
 
17301
17301
  /***/ }),
17302
17302
 
@@ -28217,7 +28217,7 @@ return jQuery;
28217
28217
 
28218
28218
  /***/ }),
28219
28219
 
28220
- /***/ 49:
28220
+ /***/ 50:
28221
28221
  /***/ (function(module, exports) {
28222
28222
 
28223
28223
  module.exports = function(module) {
@@ -72,7 +72,7 @@ export class CoreLayout extends React.Component<IProps, IState> {
72
72
  active={this.state.mainMenuOpen}
73
73
  ariaControls='main-menu'
74
74
  menuId='main-menu'
75
- editorFullWidth={true}
75
+ editorFullWidth={false}
76
76
  slideInMenu={(
77
77
  <Layout.MainMenu
78
78
  headerTitle='Main Menu'
@@ -1,11 +1,8 @@
1
1
  import * as React from 'react';
2
- import * as Components from './components/Index';
3
- import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, Divider, Tooltip, Select, Option, Switch, Icon, AvatarWrapper, AvatarContentImage, AvatarContentText, Text, EmptyState, Alert, SlidingToolbar, TabLabel, Tabs, Heading, RadioButtonGroup, Container, Label, IconLabel } from '../../../../app-typescript/index';
2
+ import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, Divider, Tooltip, Select, Option, Text, SlidingToolbar, Container, Label, IconLabel } from '../../../../app-typescript/index';
4
3
  import * as Layout from '../../../../app-typescript/components/Layouts';
5
4
  import * as Form from '../../../../app-typescript/components/Form';
6
5
  import * as Nav from '../../../../app-typescript/components/Navigation';
7
- import { BoxedList, BoxedListItem, BoxedListContentRow } from '../../../../app-typescript/components/Lists';
8
- import { SimpleList, SimpleListItem } from '../../../../app-typescript/components/Lists';
9
6
  import { TableList } from '../../../../app-typescript/components/Lists/TableList';
10
7
 
11
8
  interface IProps {
@@ -115,7 +112,6 @@ export class RundownEditor extends React.Component<IProps, IState> {
115
112
  onClick: () => { this.setState({rightPanelOpen: !this.state.rightPanelOpen})}
116
113
  },
117
114
  ]
118
-
119
115
  }
120
116
  this.handleTheme = this.handleTheme.bind(this);
121
117
  }
@@ -319,31 +315,30 @@ export class RundownEditor extends React.Component<IProps, IState> {
319
315
  <Text color='light' size='medium' className='sd-margin--0'>OF</Text>
320
316
  <IconLabel style='translucent' innerLabel='Planned:'text='00:45' size='large' />
321
317
  </ButtonGroup>
322
-
323
318
  <TableList
324
319
  className='sd-margin-y--4'
325
320
  dragAndDrop
326
321
  addItem
327
322
  array={this.state.array}
328
- itemsDropdown={[
323
+ itemsDropdown={() => [
329
324
  { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
330
325
  { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
331
326
  { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
332
327
  ]}
333
- onClick={() => false}
334
- />
328
+ />
335
329
 
336
330
  </Layout.AuthoringMain>
337
331
  </Layout.MainPanel>
338
332
 
339
333
  <Layout.RightPanel open={this.state.rightPanelOpen}>
340
- <Layout.Panel size='full' side='right'>
334
+ <Layout.Panel size='x-large' side='right'>
341
335
  <Layout.PanelContent>
342
336
  <Layout.AuthoringFrame
343
337
  main={
344
338
  <Layout.AuthoringMain
345
339
  headerPadding='medium'
346
340
  toolbarCustom={true}
341
+ headerCollapsed={true}
347
342
  toolBar={(
348
343
  <React.Fragment>
349
344
  <SubNav className='sd-shadow--z0'>
@@ -1,14 +1,9 @@
1
1
  import * as React from 'react';
2
- import * as Components from './components/Index';
3
2
  import { ButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, RadioGroup, RadioButtonGroup, Input, Select, Option, Label, IconLabel, Icon, IconButton, Checkbox, GridList, Badge, Tooltip, CreateButton, Modal, EmptyState, Container, BoxedList, BoxedListItem, BoxedListContentRow, Text, Heading, FormLabel, SlidingToolbar, Switch, SwitchGroup, SearchBar } from '../../../../app-typescript/index';
4
3
  import * as Layout from '../../../../app-typescript/components/Layouts';
5
4
  import * as Form from '../../../../app-typescript/components/Form';
6
5
  import {RundownEditor} from './RundownEditor';
7
6
  import * as Nav from '../../../../app-typescript/components/Navigation';
8
- import * as GridElements from '../../../../app-typescript/components/GridItem';
9
-
10
-
11
- import dummy_items from '../dummy-data/items';
12
7
  import { ContentList } from '../../../../app-typescript/components/Lists/ContentList';
13
8
  import { TableList } from '../../../../app-typescript/components/Lists/TableList';
14
9
 
@@ -137,6 +132,10 @@ export class Rundowns extends React.Component<IProps, IState> {
137
132
  })
138
133
  }
139
134
 
135
+ componentDidUpdate() {
136
+ console.log(this.state);
137
+ }
138
+
140
139
  changeStatus(item: any, status: string) {
141
140
  if (item.status.includes(status)) {
142
141
  item.status.splice(item.status.indexOf(status), 1);
@@ -487,7 +486,7 @@ export class Rundowns extends React.Component<IProps, IState> {
487
486
  <Container direction='row' gap='small'><Text color='light'>Updated 3 hours ago by </Text><Text weight='medium'>John Doe</Text></Container>
488
487
  </Container>
489
488
  <Container className='sd-margin-s--auto sd-flex--items-center'>
490
- <Dropdown
489
+ {/* <Dropdown
491
490
  align = 'right'
492
491
  append = {true}
493
492
  items={[
@@ -500,7 +499,7 @@ export class Rundowns extends React.Component<IProps, IState> {
500
499
  ]
501
500
  }]}>
502
501
  <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
503
- </Dropdown>
502
+ </Dropdown> */}
504
503
  </Container>
505
504
  </Layout.PanelContentBlock>
506
505
 
@@ -524,15 +523,14 @@ export class Rundowns extends React.Component<IProps, IState> {
524
523
  <IconLabel style='translucent' innerLabel='Planned:'text='01:00' />
525
524
  </ButtonGroup>
526
525
  <TableList
527
- className='sd-margin-y--4'
528
- array={this.state.array}
529
- itemsDropdown={[
530
- { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
531
- { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
532
- { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
533
- ]}
534
- onClick={() => false}
535
- />
526
+ className='sd-margin-y--4'
527
+ array={this.state.array}
528
+ itemsDropdown={() => [
529
+ { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
530
+ { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
531
+ { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
532
+ ]}
533
+ />
536
534
  </Layout.PanelContentBlock>
537
535
  </Layout.PanelContent>
538
536
  </Layout.Panel>
@@ -553,6 +551,7 @@ export class Rundowns extends React.Component<IProps, IState> {
553
551
  {/* Manage Templates Modal */}
554
552
  <Modal headerTemplate="Manage Templates"
555
553
  visible={this.state.modalManageTemplate}
554
+ zIndex={1000}
556
555
  contentBg='medium'
557
556
  contentPadding='none'
558
557
  size='x-large' onHide={() => {this.setState({modalManageTemplate: false})}}>
@@ -632,8 +631,6 @@ export class Rundowns extends React.Component<IProps, IState> {
632
631
  </Container>
633
632
  </BoxedListItem>
634
633
  </BoxedList> */}
635
-
636
-
637
634
  </Layout.PanelContent>
638
635
  </Layout.Panel>
639
636
  </Layout.LeftPanel>
@@ -652,6 +649,7 @@ export class Rundowns extends React.Component<IProps, IState> {
652
649
  {/* New Show Modal */}
653
650
  <Modal headerTemplate="Create new Show"
654
651
  visible={this.state.modalNewShow}
652
+ zIndex={1000}
655
653
  footerTemplate={newShowFooter}
656
654
  contentBg='medium'
657
655
  size='medium' onHide={() => {this.setState({modalNewShow: false})}}>
@@ -683,6 +681,7 @@ export class Rundowns extends React.Component<IProps, IState> {
683
681
  {/* New Show Modal Success */}
684
682
  <Modal headerTemplate="Create new Show"
685
683
  visible={this.state.modalNewShowSuccess}
684
+ zIndex={1000}
686
685
  footerTemplate={newShowFooter2}
687
686
  contentBg='medium'
688
687
  size='medium' onHide={() => {this.setState({modalNewShowSuccess: false})}}>
@@ -692,14 +691,13 @@ export class Rundowns extends React.Component<IProps, IState> {
692
691
  The show <strong>Marker</strong> has been successfully created.<br />
693
692
  Do you want to cretate a template for this show right away?
694
693
  </Text>
695
-
696
-
697
694
  </Container>
698
695
  </Modal>
699
696
 
700
697
  {/* New Template Modal */}
701
698
  <Modal headerTemplate="Create new Template"
702
699
  visible={this.state.modalNewTemplate}
700
+ zIndex={1000}
703
701
  contentBg='medium'
704
702
  contentPadding='none'
705
703
  size='x-large' onHide={() => {this.setState({modalNewTemplate: false})}}>
@@ -733,7 +731,7 @@ export class Rundowns extends React.Component<IProps, IState> {
733
731
  </ButtonGroup>
734
732
  </Container>
735
733
  <BoxedList>
736
- <BoxedListItem
734
+ <BoxedListItem
737
735
  alignVertical='center'
738
736
  clickable={true}
739
737
  density='compact'
@@ -805,6 +803,7 @@ export class Rundowns extends React.Component<IProps, IState> {
805
803
  {/* Manage Shows Modal */}
806
804
  <Modal headerTemplate="Manage Shows"
807
805
  visible={this.state.modalManageShow}
806
+ zIndex={1000}
808
807
  contentBg='medium'
809
808
  contentPadding='none'
810
809
  size='x-large' onHide={() => {this.setState({modalManageShow: false})}}>
@@ -1,8 +1,9 @@
1
1
  import * as React from 'react';
2
2
  import * as Components from './components/Index';
3
- import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, Input, Select, Option, Label, Icon, IconButton, CheckGroup, GridList, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, DatePicker, TimePicker, InputNew, InputBase, Text, FormRowNew } from '../../../../app-typescript/index';
3
+ import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, Input, Select, Option, Label, Icon, IconButton, CheckGroup, GridList, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, DatePicker, TimePicker, InputNew, InputBase, Text, FormRowNew} from '../../../../app-typescript/index';
4
4
  import { Carousel } from '../../../../app-typescript/index';
5
- import * as GridElements from '../../../../app-typescript/components/GridItem';
5
+ import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
6
+
6
7
 
7
8
  import dummy_items from '../dummy-data/items';
8
9
 
@@ -62,6 +63,35 @@ export class TestGround extends React.Component<IProps, IState> {
62
63
  <Components.Layout header='Testing Ground'>
63
64
  <Components.LayoutContainer>
64
65
  <Components.MainPanel>
66
+
67
+
68
+ <h3 className="docs-page__h3 sd-margin-y--0">Form test</h3>
69
+ <hr />
70
+ <div className="input-wrap">
71
+ <FormLabel invalid required={true} state='focused' text="Form Label" forId="input1" />
72
+ <IconButton size='small' icon="settings" ariaValue="Screen-reader text" onClick={()=> false} />
73
+ <InputBase placeholder='Test placeholder' boxedStyle invalid type='text' id="input1" value='' onChange={(value) => {}} />
74
+ <div className="input-wrap__message-box">
75
+ <div className="sd-input__hint">Error message</div>
76
+ </div>
77
+ <span className="sd-input__char-count">0 / 40</span>
78
+ </div>
79
+
80
+ <hr />
81
+
82
+ <div className="input-wrap input-wrap--boxed">
83
+ <FormLabel style='boxed' text="Form Label" required={true} forId="input2" />
84
+ <IconButton size='small' icon="settings" ariaValue="Screen-reader text" onClick={()=> false} />
85
+ <InputBase disabled size='medium' placeholder='Test placeholder' boxedStyle type='text' id="input2" value='' onChange={(value) => {}} />
86
+ <div className="input-wrap__message-box">
87
+ <div className="sd-input__hint">Error message</div>
88
+ </div>
89
+ <span className="sd-input__char-count">0 / 40</span>
90
+ </div>
91
+
92
+ <hr />
93
+ <hr />
94
+
65
95
  <InputNew
66
96
  label='test'
67
97
  value=''
@@ -220,17 +250,114 @@ export class TestGround extends React.Component<IProps, IState> {
220
250
  </FormRowNew>
221
251
 
222
252
  <hr />
223
- <h3 className="docs-page__h3 sd-margin-y--0">Table list</h3>
253
+ <h3 className="docs-page__h3 sd-margin-y--0">Table list (draggable)</h3>
224
254
  <hr />
225
- <ul className='table-list'>
226
- <li className='table-list__item table-list__item--clickable table-list__item--draggable'>
255
+ <h4 className="docs-page__h4 sd-margin-y--1">Handles visible</h4>
256
+ <ul className='table-list table-list--gap-s'>
257
+ <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always'>
258
+ <div className='table-list__item-border'></div>
259
+ <div className='table-list__item-content'>
260
+ <div className='table-list__item-content-block'>
261
+ <Label text='Uvod' />
262
+ <Label type='primary' text='prlg' />
263
+ </div>
264
+ <div className='table-list__item-content-block table-list__item-content-block--center'>
265
+ <span>Handle visible. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
266
+ </div>
267
+ <div className='table-list__item-content-block'>
268
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
269
+ </div>
270
+ </div>
271
+ <div className='table-list__slide-in-actions'>
272
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
273
+ </div>
274
+ </li>
275
+ <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always'>
276
+ <div className='table-list__item-border'></div>
277
+ <div className='table-list__item-content'>
278
+ <div className='table-list__item-content-block'>
279
+ <Label text='Gost' />
280
+ <Label type='primary' text='prlg' />
281
+ </div>
282
+ <div className='table-list__item-content-block table-list__item-content-block--center'>
283
+ <span>Handle visible. Duis mollis, est non commodo luctus, nisi erat porttitor ligula..</span>
284
+ </div>
285
+ <div className='table-list__item-content-block'>
286
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
287
+ </div>
288
+ </div>
289
+ <div className='table-list__slide-in-actions'>
290
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
291
+ </div>
292
+ </li>
293
+ <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always'>
294
+ <div style={{background:'#83cf7e',}} className='table-list__item-border'></div>
295
+ <div className='table-list__item-content'>
296
+ <div className='table-list__item-content-block'>
297
+ <Label text='Podatak' />
298
+ <Label type='primary' text='Gost' />
299
+ </div>
300
+ <div className='table-list__item-content-block table-list__item-content-block--center'>
301
+ <span>Handle visible. Mollis est non commodo luctus, nisi erat porttitor ligula.</span>
302
+ </div>
303
+ <div className='table-list__item-content-block'>
304
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
305
+ </div>
306
+ </div>
307
+ <div className='table-list__slide-in-actions'>
308
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
309
+ </div>
310
+ </li>
311
+ <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always table-list__item--selected'>
312
+ <div className='table-list__item-border'></div>
313
+ <div className='table-list__item-content'>
314
+ <div className='table-list__item-content-block'>
315
+ <Label text='Odjava' />
316
+ <Label type='warning' text='Slika' />
317
+ </div>
318
+ <div className='table-list__item-content-block table-list__item-content-block--center'>
319
+ <span>Handle visible. Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
320
+ </div>
321
+ <div className='table-list__item-content-block'>
322
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
323
+ </div>
324
+ </div>
325
+ <div className='table-list__slide-in-actions'>
326
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
327
+ </div>
328
+ </li>
329
+ </ul>
330
+
331
+ <hr />
332
+ <h4 className="docs-page__h4 sd-margin-y--1">Handles hidden</h4>
333
+ <ul className='table-list table-list--gap-s'>
334
+ <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none'>
335
+ <div className='table-list__item-border'></div>
336
+ <div className='table-list__item-content'>
337
+ <div className='table-list__item-content-block'>
338
+ <Label text='Uvod' />
339
+ <Label type='primary' text='prlg' />
340
+ </div>
341
+ <div className='table-list__item-content-block table-list__item-content-block--center'>
342
+ <span>Handle hidden. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
343
+ </div>
344
+ <div className='table-list__item-content-block'>
345
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
346
+ </div>
347
+ </div>
348
+ <div className='table-list__slide-in-actions'>
349
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
350
+ </div>
351
+ </li>
352
+ <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none'>
353
+ <div className='table-list__item-border'></div>
227
354
  <div className='table-list__item-content'>
228
355
  <div className='table-list__item-content-block'>
229
- <Label style='translucent' text='aacc' />
230
- <Label style='translucent' type='primary' text='prlg' />
356
+ <Label text='Gost' />
357
+ <Label type='primary' text='prlg' />
231
358
  </div>
232
359
  <div className='table-list__item-content-block table-list__item-content-block--center'>
233
- <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
360
+ <span>Handle hidden. Duis mollis, est non commodo luctus, nisi erat porttitor ligula..</span>
234
361
  </div>
235
362
  <div className='table-list__item-content-block'>
236
363
  <IconLabel style='translucent' text='Label success' type='success' icon='time' />
@@ -240,14 +367,56 @@ export class TestGround extends React.Component<IProps, IState> {
240
367
  <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
241
368
  </div>
242
369
  </li>
370
+ <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none'>
371
+ <div style={{background:'#83cf7e',}} className='table-list__item-border'></div>
372
+ <div className='table-list__item-content'>
373
+ <div className='table-list__item-content-block'>
374
+ <Label text='Podatak' />
375
+ <Label type='primary' text='Gost' />
376
+ </div>
377
+ <div className='table-list__item-content-block table-list__item-content-block--center'>
378
+ <span>Handle hidden. Mollis est non commodo luctus, nisi erat porttitor ligula.</span>
379
+ </div>
380
+ <div className='table-list__item-content-block'>
381
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
382
+ </div>
383
+ </div>
384
+ <div className='table-list__slide-in-actions'>
385
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
386
+ </div>
387
+ </li>
388
+ <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none table-list__item--selected'>
389
+ <div className='table-list__item-border'></div>
390
+ <div className='table-list__item-content'>
391
+ <div className='table-list__item-content-block'>
392
+ <Label text='Odjava' />
393
+ <Label type='warning' text='Slika' />
394
+ </div>
395
+ <div className='table-list__item-content-block table-list__item-content-block--center'>
396
+ <span>Handle hidden. Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
397
+ </div>
398
+ <div className='table-list__item-content-block'>
399
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
400
+ </div>
401
+ </div>
402
+ <div className='table-list__slide-in-actions'>
403
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
404
+ </div>
405
+ </li>
406
+ </ul>
407
+
408
+ <hr />
409
+ <h4 className="docs-page__h4 sd-margin-y--1">Handles on hover</h4>
410
+ <ul className='table-list table-list--gap-s'>
243
411
  <li className='table-list__item table-list__item--clickable table-list__item--draggable'>
412
+ <div className='table-list__item-border'></div>
244
413
  <div className='table-list__item-content'>
245
414
  <div className='table-list__item-content-block'>
246
- <Label style='translucent' type='warning' text='pokr' />
247
- <Label style='translucent' text='slika' />
415
+ <Label text='Uvod' />
416
+ <Label type='primary' text='prlg' />
248
417
  </div>
249
418
  <div className='table-list__item-content-block table-list__item-content-block--center'>
250
- <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
419
+ <span>Handle on hover. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
251
420
  </div>
252
421
  <div className='table-list__item-content-block'>
253
422
  <IconLabel style='translucent' text='Label success' type='success' icon='time' />
@@ -257,32 +426,33 @@ export class TestGround extends React.Component<IProps, IState> {
257
426
  <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
258
427
  </div>
259
428
  </li>
260
- <li className='table-list__item table-list__item--clickable'>
429
+ <li className='table-list__item table-list__item--clickable table-list__item--draggable'>
430
+ <div className='table-list__item-border'></div>
261
431
  <div className='table-list__item-content'>
262
432
  <div className='table-list__item-content-block'>
263
- <Label style='translucent' type='warning' text='pokr' />
264
- <Label style='translucent' text='slika' />
433
+ <Label text='Gost' />
434
+ <Label type='primary' text='prlg' />
265
435
  </div>
266
436
  <div className='table-list__item-content-block table-list__item-content-block--center'>
267
- <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
437
+ <span>Handle on hover. Duis mollis, est non commodo luctus, nisi erat porttitor ligula..</span>
268
438
  </div>
269
439
  <div className='table-list__item-content-block'>
270
440
  <IconLabel style='translucent' text='Label success' type='success' icon='time' />
271
441
  </div>
272
442
  </div>
273
443
  <div className='table-list__slide-in-actions'>
274
- <IconButton icon='pencil' size='small' ariaValue='More actions' onClick={()=> false} />
275
- <IconButton icon='trash' size='small' ariaValue='More actions' onClick={()=> false} />
444
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
276
445
  </div>
277
446
  </li>
278
- <li className='table-list__item table-list__item--clickable table-list__item--selected'>
447
+ <li className='table-list__item table-list__item--clickable table-list__item--draggable'>
448
+ <div style={{background:'#83cf7e',}} className='table-list__item-border'></div>
279
449
  <div className='table-list__item-content'>
280
450
  <div className='table-list__item-content-block'>
281
- <Label style='translucent' type='warning' text='pokr' />
282
- <Label style='translucent' text='slika' />
451
+ <Label text='Podatak' />
452
+ <Label type='primary' text='Gost' />
283
453
  </div>
284
454
  <div className='table-list__item-content-block table-list__item-content-block--center'>
285
- <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
455
+ <span>Handle on hover. Mollis est non commodo luctus, nisi erat porttitor ligula.</span>
286
456
  </div>
287
457
  <div className='table-list__item-content-block'>
288
458
  <IconLabel style='translucent' text='Label success' type='success' icon='time' />
@@ -292,14 +462,15 @@ export class TestGround extends React.Component<IProps, IState> {
292
462
  <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
293
463
  </div>
294
464
  </li>
295
- <li className='table-list__item table-list__item--clickable'>
465
+ <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--selected'>
466
+ <div className='table-list__item-border'></div>
296
467
  <div className='table-list__item-content'>
297
468
  <div className='table-list__item-content-block'>
298
- <Label style='translucent' type='warning' text='pokr' />
299
- <Label style='translucent' text='slika' />
469
+ <Label text='Odjava' />
470
+ <Label type='warning' text='Slika' />
300
471
  </div>
301
472
  <div className='table-list__item-content-block table-list__item-content-block--center'>
302
- <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
473
+ <span>Handle on hover. Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
303
474
  </div>
304
475
  <div className='table-list__item-content-block'>
305
476
  <IconLabel style='translucent' text='Label success' type='success' icon='time' />
@@ -310,6 +481,8 @@ export class TestGround extends React.Component<IProps, IState> {
310
481
  </div>
311
482
  </li>
312
483
  </ul>
484
+ <hr />
485
+ <hr />
313
486
 
314
487
  <h3 className="docs-page__h3 sd-margin-y--0 sd-margin-t--3">Table list with items between</h3>
315
488
  <hr />
@@ -167,10 +167,10 @@ export default class ContentDividerDoc extends React.Component {
167
167
 
168
168
  <h3 className="docs-page__h3">Props</h3>
169
169
  <PropsList>
170
- <Prop name='type' isRequered={false} type='dashed | dotted | solid' default='solid' description='Border style of the divider.'/>
171
- <Prop name='orientation' isRequered={false} type='horizontal | vertical' default='horizontal' description='Defines if the divider is horizontal or vertical. Default is horizontal.'/>
172
- <Prop name='align' isRequered={false} type='center | left | right' default='right' description='Text alignment inside the divider. Should not be used without any text inside the divider. The vertical divider has no alignment options.'/>
173
- <Prop name='border' isRequered={false} type='boolean' default='true' description='Removes the border if set to true. Should be generally avoided especially if there is textual content. It can be used to add space between elements if there is no other option.'/>
170
+ <Prop name='type' isRequired={false} type='dashed | dotted | solid' default='solid' description='Border style of the divider.'/>
171
+ <Prop name='orientation' isRequired={false} type='horizontal | vertical' default='horizontal' description='Defines if the divider is horizontal or vertical. Default is horizontal.'/>
172
+ <Prop name='align' isRequired={false} type='center | left | right' default='right' description='Text alignment inside the divider. Should not be used without any text inside the divider. The vertical divider has no alignment options.'/>
173
+ <Prop name='border' isRequired={false} type='boolean' default='true' description='Removes the border if set to true. Should be generally avoided especially if there is textual content. It can be used to add space between elements if there is no other option.'/>
174
174
  </PropsList>
175
175
  </section>
176
176
  )
@@ -1,28 +1,23 @@
1
1
  import * as React from 'react';
2
2
  import * as Markup from '../../js/react';
3
- import { BoxedList, BoxedListItem, BoxedListContentRow, Prop, PropsList, Icon, IconButton, AvatarWrapper, AvatarContentText, ButtonGroup, Button, Heading, Text, Label, Container, IconLabel } from '../../../app-typescript';
4
- import { TableList, TableListItem } from '../../../app-typescript/components/Lists/TableList';
5
- import { ContentList, ContentListItem } from '../../../app-typescript/components/Lists/ContentList';
3
+ import { Prop, PropsList, Icon, IconButton, Label, Container, IconLabel } from '../../../app-typescript';
4
+ import { ContentList } from '../../../app-typescript/components/Lists/ContentList';
6
5
 
7
6
  export default class ContentListDoc extends React.Component {
8
7
  render() {
9
8
  return (
10
9
  <section className='docs-page__container'>
11
10
  <h2 className='docs-page__h2'>ContentList</h2>
12
-
13
11
  <Markup.ReactMarkupCodePreview>{`
14
12
  <ContentList
15
13
  items: [...]
16
14
  />
17
15
  `}
18
16
  </Markup.ReactMarkupCodePreview>
19
-
20
17
  <p className="docs-page__paragraph">...</p>
21
-
22
18
  <Markup.ReactMarkup>
23
19
  <Markup.ReactMarkupPreview>
24
20
  <p className="docs-page__paragraph">// basic</p>
25
-
26
21
  <ContentList
27
22
  items={[
28
23
  {
@@ -140,7 +135,6 @@ export default class ContentListDoc extends React.Component {
140
135
  action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
141
136
  },
142
137
  ]} />
143
-
144
138
  </Markup.ReactMarkupPreview>
145
139
  <Markup.ReactMarkupCode>{`
146
140
  <ContentList
@@ -261,7 +255,6 @@ export default class ContentListDoc extends React.Component {
261
255
  `}
262
256
  </Markup.ReactMarkupCode>
263
257
  </Markup.ReactMarkup>
264
-
265
258
  <h3 className="docs-page__h3">Props</h3>
266
259
  <p className="docs-page__paragraph">ContentList</p>
267
260
  <PropsList>
@@ -279,7 +272,6 @@ export default class ContentListDoc extends React.Component {
279
272
  <Prop name='onClick' isRequired={false} type='function' default='/' description='onClick functionality.'/>
280
273
  <Prop name='onDoubleClick' isRequired={false} type='function' default='/' description='onDoubleClick functionality.'/>
281
274
  </PropsList>
282
-
283
275
  </section>
284
276
  )
285
277
  }