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

package/dist/vendor.bundle.js

@@ -17296,7 +17296,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
   }
 }.call(this));
 
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(35), __webpack_require__(49)(module)))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(35), __webpack_require__(50)(module)))
 
 /***/ }),
 
@@ -28217,7 +28217,7 @@ return jQuery;
 
 /***/ }),
 
-/***/ 49:
+/***/ 50:
 /***/ (function(module, exports) {
 
 module.exports = function(module) {

package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx

@@ -72,7 +72,7 @@ export class CoreLayout extends React.Component<IProps, IState> {
             active={this.state.mainMenuOpen}
             ariaControls='main-menu'
             menuId='main-menu'
-            editorFullWidth={true}
+            editorFullWidth={false}
             slideInMenu={(
                 <Layout.MainMenu
                 headerTitle='Main Menu'

package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx

@@ -1,11 +1,8 @@
 import * as React from 'react';
-import * as Components from './components/Index';
-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';
+import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, Divider, Tooltip, Select, Option, Text, SlidingToolbar, Container, Label, IconLabel } from '../../../../app-typescript/index';
 import * as Layout from '../../../../app-typescript/components/Layouts';
 import * as Form from '../../../../app-typescript/components/Form';
 import * as Nav from '../../../../app-typescript/components/Navigation';
-import { BoxedList, BoxedListItem, BoxedListContentRow } from '../../../../app-typescript/components/Lists';
-import { SimpleList, SimpleListItem } from '../../../../app-typescript/components/Lists';
 import { TableList } from '../../../../app-typescript/components/Lists/TableList';
 
 interface IProps {
@@ -115,7 +112,6 @@ export class RundownEditor extends React.Component<IProps, IState> {
                     onClick: () => { this.setState({rightPanelOpen: !this.state.rightPanelOpen})}
                 },
             ]
-            
         }
         this.handleTheme = this.handleTheme.bind(this);
     }
@@ -319,31 +315,30 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                 <Text color='light' size='medium' className='sd-margin--0'>OF</Text>
                                 <IconLabel style='translucent' innerLabel='Planned:'text='00:45' size='large' />
                             </ButtonGroup>
-
                             <TableList
                                 className='sd-margin-y--4'
                                 dragAndDrop
                                 addItem
                                 array={this.state.array}
-                                itemsDropdown={[
+                                itemsDropdown={() => [
                                     { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
                                     { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
                                     { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
                                 ]}
-                                onClick={() => false}
-                            />   
+                            />
 
                     </Layout.AuthoringMain>
                 </Layout.MainPanel>
 
                 <Layout.RightPanel open={this.state.rightPanelOpen}>
-                    <Layout.Panel size='full' side='right'>
+                    <Layout.Panel size='x-large' side='right'>
                         <Layout.PanelContent>
                             <Layout.AuthoringFrame
                                 main={
                                 <Layout.AuthoringMain
                                     headerPadding='medium'
                                     toolbarCustom={true}
+                                    headerCollapsed={true}
                                     toolBar={(
                                         <React.Fragment>
                                             <SubNav className='sd-shadow--z0'>

package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx

@@ -1,14 +1,9 @@
 import * as React from 'react';
-import * as Components from './components/Index';
 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';
 import * as Layout from '../../../../app-typescript/components/Layouts';
 import * as Form from '../../../../app-typescript/components/Form';
 import {RundownEditor} from './RundownEditor';
 import * as Nav from '../../../../app-typescript/components/Navigation';
-import * as GridElements from '../../../../app-typescript/components/GridItem';
-
-
-import dummy_items from '../dummy-data/items';
 import { ContentList } from '../../../../app-typescript/components/Lists/ContentList';
 import { TableList } from '../../../../app-typescript/components/Lists/TableList';
 
@@ -137,6 +132,10 @@ export class Rundowns extends React.Component<IProps, IState> {
         })
     }
 
+    componentDidUpdate() {
+        console.log(this.state);
+    }
+
     changeStatus(item: any, status: string) {
         if (item.status.includes(status)) {
             item.status.splice(item.status.indexOf(status), 1);
@@ -487,7 +486,7 @@ export class Rundowns extends React.Component<IProps, IState> {
                                         <Container direction='row' gap='small'><Text color='light'>Updated 3 hours ago by </Text><Text weight='medium'>John Doe</Text></Container>
                                     </Container>
                                     <Container className='sd-margin-s--auto sd-flex--items-center'>
-                                        <Dropdown
+                                        {/* <Dropdown
                                             align = 'right'
                                             append = {true}
                                             items={[
@@ -500,7 +499,7 @@ export class Rundowns extends React.Component<IProps, IState> {
                                                     ]
                                                 }]}>
                                             <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
-                                        </Dropdown>
+                                        </Dropdown> */}
                                     </Container>
                                 </Layout.PanelContentBlock>
 
@@ -524,15 +523,14 @@ export class Rundowns extends React.Component<IProps, IState> {
                                         <IconLabel style='translucent' innerLabel='Planned:'text='01:00' />
                                     </ButtonGroup>
                                     <TableList
-                                className='sd-margin-y--4'
-                                array={this.state.array}
-                                itemsDropdown={[
-                                    { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
-                                    { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
-                                    { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
-                                ]}
-                                onClick={() => false}
-                                />   
+                                        className='sd-margin-y--4'
+                                        array={this.state.array}
+                                        itemsDropdown={() => [
+                                            { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
+                                            { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
+                                            { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                                        ]}
+                                    />   
                                 </Layout.PanelContentBlock>
                             </Layout.PanelContent>
                         </Layout.Panel>
@@ -553,6 +551,7 @@ export class Rundowns extends React.Component<IProps, IState> {
             {/* Manage Templates Modal */}
             <Modal headerTemplate="Manage Templates"
                 visible={this.state.modalManageTemplate}
+                zIndex={1000}
                 contentBg='medium'
                 contentPadding='none'
                 size='x-large' onHide={() => {this.setState({modalManageTemplate: false})}}>
@@ -632,8 +631,6 @@ export class Rundowns extends React.Component<IProps, IState> {
                                             </Container>
                                         </BoxedListItem>
                                     </BoxedList> */}
-
-
                             </Layout.PanelContent>
                         </Layout.Panel>
                     </Layout.LeftPanel>
@@ -652,6 +649,7 @@ export class Rundowns extends React.Component<IProps, IState> {
             {/* New Show Modal */}
             <Modal headerTemplate="Create new Show"
                 visible={this.state.modalNewShow}
+                zIndex={1000}
                 footerTemplate={newShowFooter}
                 contentBg='medium'
                 size='medium' onHide={() => {this.setState({modalNewShow: false})}}>
@@ -683,6 +681,7 @@ export class Rundowns extends React.Component<IProps, IState> {
             {/* New Show Modal Success */}
             <Modal headerTemplate="Create new Show"
                 visible={this.state.modalNewShowSuccess}
+                zIndex={1000}
                 footerTemplate={newShowFooter2}
                 contentBg='medium'
                 size='medium' onHide={() => {this.setState({modalNewShowSuccess: false})}}>
@@ -692,14 +691,13 @@ export class Rundowns extends React.Component<IProps, IState> {
                         The show <strong>Marker</strong> has been successfully created.<br />
                         Do you want to cretate a template for this show right away?
                     </Text>
-
-
                 </Container>
             </Modal>
 
             {/* New Template Modal */}
             <Modal headerTemplate="Create new Template"
                 visible={this.state.modalNewTemplate}
+                zIndex={1000}
                 contentBg='medium'
                 contentPadding='none'
                 size='x-large' onHide={() => {this.setState({modalNewTemplate: false})}}>
@@ -733,7 +731,7 @@ export class Rundowns extends React.Component<IProps, IState> {
                                         </ButtonGroup>
                                     </Container>
                                     <BoxedList>
-                                    <BoxedListItem
+                                        <BoxedListItem
                                             alignVertical='center'
                                             clickable={true}
                                             density='compact'
@@ -805,6 +803,7 @@ export class Rundowns extends React.Component<IProps, IState> {
             {/* Manage Shows Modal */}
             <Modal headerTemplate="Manage Shows"
                 visible={this.state.modalManageShow}
+                zIndex={1000}
                 contentBg='medium'
                 contentPadding='none'
                 size='x-large' onHide={() => {this.setState({modalManageShow: false})}}>

package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import * as Components from './components/Index';
-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';
+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';
 import { Carousel } from '../../../../app-typescript/index';
-import * as GridElements from '../../../../app-typescript/components/GridItem';
+import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
+
 
 import dummy_items from '../dummy-data/items';
 
@@ -62,6 +63,35 @@ export class TestGround extends React.Component<IProps, IState> {
             <Components.Layout header='Testing Ground'>
                 <Components.LayoutContainer>
                     <Components.MainPanel>
+
+                        
+                        <h3 className="docs-page__h3 sd-margin-y--0">Form test</h3>
+                        <hr />
+                        <div className="input-wrap">
+                            <FormLabel invalid required={true} state='focused' text="Form Label" forId="input1" />
+                            <IconButton size='small' icon="settings" ariaValue="Screen-reader text" onClick={()=> false} />
+                            <InputBase placeholder='Test placeholder' boxedStyle invalid type='text' id="input1" value='' onChange={(value) => {}} />
+                            <div className="input-wrap__message-box">
+                                <div className="sd-input__hint">Error message</div>
+                            </div>
+                            <span className="sd-input__char-count">0 / 40</span>
+                        </div>
+
+                        <hr />
+
+                        <div className="input-wrap input-wrap--boxed">
+                            <FormLabel style='boxed' text="Form Label" required={true} forId="input2" />
+                            <IconButton size='small' icon="settings" ariaValue="Screen-reader text" onClick={()=> false} />
+                            <InputBase disabled size='medium' placeholder='Test placeholder' boxedStyle type='text' id="input2" value='' onChange={(value) => {}} />
+                            <div className="input-wrap__message-box">
+                                <div className="sd-input__hint">Error message</div>
+                            </div>
+                            <span className="sd-input__char-count">0 / 40</span>
+                        </div>
+
+                        <hr />
+                        <hr />
+
                         <InputNew
                             label='test'
                             value=''
@@ -220,17 +250,114 @@ export class TestGround extends React.Component<IProps, IState> {
                         </FormRowNew>
 
                         <hr />
-                        <h3 className="docs-page__h3 sd-margin-y--0">Table list</h3>
+                        <h3 className="docs-page__h3 sd-margin-y--0">Table list (draggable)</h3>
                         <hr />
-                        <ul className='table-list'>
-                            <li className='table-list__item table-list__item--clickable table-list__item--draggable'>
+                        <h4 className="docs-page__h4 sd-margin-y--1">Handles visible</h4>
+                        <ul className='table-list table-list--gap-s'>
+                            <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always'>
+                                <div className='table-list__item-border'></div>
+                                <div className='table-list__item-content'>
+                                    <div className='table-list__item-content-block'>
+                                        <Label text='Uvod' />
+                                        <Label type='primary' text='prlg' />
+                                    </div>
+                                    <div className='table-list__item-content-block table-list__item-content-block--center'>
+                                        <span>Handle visible. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
+                                    </div>
+                                    <div className='table-list__item-content-block'>
+                                        <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                    </div>
+                                </div>
+                                <div className='table-list__slide-in-actions'>
+                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                                </div>
+                            </li>
+                            <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always'>
+                                <div className='table-list__item-border'></div>
+                                <div className='table-list__item-content'>
+                                    <div className='table-list__item-content-block'>
+                                        <Label text='Gost' />
+                                        <Label type='primary' text='prlg' />
+                                    </div>
+                                    <div className='table-list__item-content-block table-list__item-content-block--center'>
+                                        <span>Handle visible. Duis mollis, est non commodo luctus, nisi erat porttitor ligula..</span>
+                                    </div>
+                                    <div className='table-list__item-content-block'>
+                                        <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                    </div>
+                                </div>
+                                <div className='table-list__slide-in-actions'>
+                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                                </div>
+                            </li>
+                            <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always'>
+                                <div style={{background:'#83cf7e',}} className='table-list__item-border'></div>
+                                <div className='table-list__item-content'>
+                                    <div className='table-list__item-content-block'>
+                                        <Label text='Podatak' />
+                                        <Label type='primary' text='Gost' />
+                                    </div>
+                                    <div className='table-list__item-content-block table-list__item-content-block--center'>
+                                        <span>Handle visible. Mollis est non commodo luctus, nisi erat porttitor ligula.</span>
+                                    </div>
+                                    <div className='table-list__item-content-block'>
+                                        <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                    </div>
+                                </div>
+                                <div className='table-list__slide-in-actions'>
+                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                                </div>
+                            </li>
+                            <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always table-list__item--selected'>
+                                <div className='table-list__item-border'></div>
+                                <div className='table-list__item-content'>
+                                    <div className='table-list__item-content-block'>
+                                        <Label text='Odjava' />
+                                        <Label type='warning' text='Slika' />
+                                    </div>
+                                    <div className='table-list__item-content-block table-list__item-content-block--center'>
+                                        <span>Handle visible. Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
+                                    </div>
+                                    <div className='table-list__item-content-block'>
+                                        <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                    </div>
+                                </div>
+                                <div className='table-list__slide-in-actions'>
+                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                                </div>
+                            </li>
+                        </ul>
+
+                        <hr />
+                        <h4 className="docs-page__h4 sd-margin-y--1">Handles hidden</h4>
+                        <ul className='table-list table-list--gap-s'>
+                            <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none'>
+                                <div className='table-list__item-border'></div>
+                                <div className='table-list__item-content'>
+                                    <div className='table-list__item-content-block'>
+                                        <Label text='Uvod' />
+                                        <Label type='primary' text='prlg' />
+                                    </div>
+                                    <div className='table-list__item-content-block table-list__item-content-block--center'>
+                                        <span>Handle hidden. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
+                                    </div>
+                                    <div className='table-list__item-content-block'>
+                                        <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                    </div>
+                                </div>
+                                <div className='table-list__slide-in-actions'>
+                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                                </div>
+                            </li>
+                            <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none'>
+                                <div className='table-list__item-border'></div>
                                 <div className='table-list__item-content'>
                                     <div className='table-list__item-content-block'>
-                                        <Label style='translucent' text='aacc' />
-                                        <Label style='translucent' type='primary' text='prlg' />
+                                        <Label text='Gost' />
+                                        <Label type='primary' text='prlg' />
                                     </div>
                                     <div className='table-list__item-content-block table-list__item-content-block--center'>
-                                        <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
+                                        <span>Handle hidden. Duis mollis, est non commodo luctus, nisi erat porttitor ligula..</span>
                                     </div>
                                     <div className='table-list__item-content-block'>
                                         <IconLabel style='translucent' text='Label success' type='success' icon='time' />
@@ -240,14 +367,56 @@ export class TestGround extends React.Component<IProps, IState> {
                                     <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
                                 </div>
                             </li>
+                            <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none'>
+                                <div style={{background:'#83cf7e',}} className='table-list__item-border'></div>
+                                <div className='table-list__item-content'>
+                                    <div className='table-list__item-content-block'>
+                                        <Label text='Podatak' />
+                                        <Label type='primary' text='Gost' />
+                                    </div>
+                                    <div className='table-list__item-content-block table-list__item-content-block--center'>
+                                        <span>Handle hidden. Mollis est non commodo luctus, nisi erat porttitor ligula.</span>
+                                    </div>
+                                    <div className='table-list__item-content-block'>
+                                        <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                    </div>
+                                </div>
+                                <div className='table-list__slide-in-actions'>
+                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                                </div>
+                            </li>
+                            <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none table-list__item--selected'>
+                                <div className='table-list__item-border'></div>
+                                <div className='table-list__item-content'>
+                                    <div className='table-list__item-content-block'>
+                                        <Label text='Odjava' />
+                                        <Label type='warning' text='Slika' />
+                                    </div>
+                                    <div className='table-list__item-content-block table-list__item-content-block--center'>
+                                        <span>Handle hidden. Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
+                                    </div>
+                                    <div className='table-list__item-content-block'>
+                                        <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                    </div>
+                                </div>
+                                <div className='table-list__slide-in-actions'>
+                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                                </div>
+                            </li>
+                        </ul>
+
+                        <hr />
+                        <h4 className="docs-page__h4 sd-margin-y--1">Handles on hover</h4>
+                        <ul className='table-list table-list--gap-s'>
                             <li className='table-list__item table-list__item--clickable table-list__item--draggable'>
+                                <div className='table-list__item-border'></div>
                                 <div className='table-list__item-content'>
                                     <div className='table-list__item-content-block'>
-                                        <Label style='translucent' type='warning' text='pokr' />
-                                        <Label style='translucent' text='slika' />
+                                        <Label text='Uvod' />
+                                        <Label type='primary' text='prlg' />
                                     </div>
                                     <div className='table-list__item-content-block table-list__item-content-block--center'>
-                                        <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
+                                        <span>Handle on hover. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
                                     </div>
                                     <div className='table-list__item-content-block'>
                                         <IconLabel style='translucent' text='Label success' type='success' icon='time' />
@@ -257,32 +426,33 @@ export class TestGround extends React.Component<IProps, IState> {
                                     <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
                                 </div>
                             </li>
-                            <li className='table-list__item table-list__item--clickable'>
+                            <li className='table-list__item table-list__item--clickable table-list__item--draggable'>
+                                <div className='table-list__item-border'></div>
                                 <div className='table-list__item-content'>
                                     <div className='table-list__item-content-block'>
-                                        <Label style='translucent' type='warning' text='pokr' />
-                                        <Label style='translucent' text='slika' />
+                                        <Label text='Gost' />
+                                        <Label type='primary' text='prlg' />
                                     </div>
                                     <div className='table-list__item-content-block table-list__item-content-block--center'>
-                                        <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
+                                        <span>Handle on hover. Duis mollis, est non commodo luctus, nisi erat porttitor ligula..</span>
                                     </div>
                                     <div className='table-list__item-content-block'>
                                         <IconLabel style='translucent' text='Label success' type='success' icon='time' />
                                     </div>
                                 </div>
                                 <div className='table-list__slide-in-actions'>
-                                    <IconButton icon='pencil' size='small' ariaValue='More actions' onClick={()=> false} />
-                                    <IconButton icon='trash' size='small' ariaValue='More actions' onClick={()=> false} />
+                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
                                 </div>
                             </li>
-                            <li className='table-list__item table-list__item--clickable table-list__item--selected'>
+                            <li className='table-list__item table-list__item--clickable table-list__item--draggable'>
+                                <div style={{background:'#83cf7e',}} className='table-list__item-border'></div>
                                 <div className='table-list__item-content'>
                                     <div className='table-list__item-content-block'>
-                                        <Label style='translucent' type='warning' text='pokr' />
-                                        <Label style='translucent' text='slika' />
+                                        <Label text='Podatak' />
+                                        <Label type='primary' text='Gost' />
                                     </div>
                                     <div className='table-list__item-content-block table-list__item-content-block--center'>
-                                        <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
+                                        <span>Handle on hover. Mollis est non commodo luctus, nisi erat porttitor ligula.</span>
                                     </div>
                                     <div className='table-list__item-content-block'>
                                         <IconLabel style='translucent' text='Label success' type='success' icon='time' />
@@ -292,14 +462,15 @@ export class TestGround extends React.Component<IProps, IState> {
                                     <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
                                 </div>
                             </li>
-                            <li className='table-list__item table-list__item--clickable'>
+                            <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--selected'>
+                                <div className='table-list__item-border'></div>
                                 <div className='table-list__item-content'>
                                     <div className='table-list__item-content-block'>
-                                        <Label style='translucent' type='warning' text='pokr' />
-                                        <Label style='translucent' text='slika' />
+                                        <Label text='Odjava' />
+                                        <Label type='warning' text='Slika' />
                                     </div>
                                     <div className='table-list__item-content-block table-list__item-content-block--center'>
-                                        <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
+                                        <span>Handle on hover. Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
                                     </div>
                                     <div className='table-list__item-content-block'>
                                         <IconLabel style='translucent' text='Label success' type='success' icon='time' />
@@ -310,6 +481,8 @@ export class TestGround extends React.Component<IProps, IState> {
                                 </div>
                             </li>
                         </ul>
+                        <hr />
+                        <hr />
 
                         <h3 className="docs-page__h3 sd-margin-y--0 sd-margin-t--3">Table list with items between</h3>
                         <hr />

package/examples/pages/react/ContentDivider.tsx

@@ -167,10 +167,10 @@ export default class ContentDividerDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='type' isRequered={false} type='dashed | dotted | solid' default='solid' description='Border style of the divider.'/>
-                    <Prop name='orientation' isRequered={false} type='horizontal | vertical' default='horizontal' description='Defines if the divider is horizontal or vertical. Default is horizontal.'/>
-                    <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.'/>
-                    <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.'/>
+                    <Prop name='type' isRequired={false} type='dashed | dotted | solid' default='solid' description='Border style of the divider.'/>
+                    <Prop name='orientation' isRequired={false} type='horizontal | vertical' default='horizontal' description='Defines if the divider is horizontal or vertical. Default is horizontal.'/>
+                    <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.'/>
+                    <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.'/>
                 </PropsList>
             </section>
         )

package/examples/pages/react/ContentList.tsx

@@ -1,28 +1,23 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
-import { BoxedList, BoxedListItem, BoxedListContentRow, Prop, PropsList, Icon, IconButton, AvatarWrapper, AvatarContentText, ButtonGroup, Button, Heading, Text, Label, Container, IconLabel } from '../../../app-typescript';
-import { TableList, TableListItem } from '../../../app-typescript/components/Lists/TableList';
-import { ContentList, ContentListItem } from '../../../app-typescript/components/Lists/ContentList';
+import { Prop, PropsList, Icon, IconButton, Label, Container, IconLabel } from '../../../app-typescript';
+import { ContentList } from '../../../app-typescript/components/Lists/ContentList';
 
 export default class ContentListDoc extends React.Component {
     render() {
         return (
             <section className='docs-page__container'>
                 <h2 className='docs-page__h2'>ContentList</h2>
-                
                 <Markup.ReactMarkupCodePreview>{`
                     <ContentList 
                     items: [...]
                     />
                 `}
                 </Markup.ReactMarkupCodePreview>
-
                 <p className="docs-page__paragraph">...</p>
-
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// basic</p>
-
                         <ContentList
                         items={[
                             {
@@ -140,7 +135,6 @@ export default class ContentListDoc extends React.Component {
                                 action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
                             },
                         ]} />
-
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <ContentList
@@ -261,7 +255,6 @@ export default class ContentListDoc extends React.Component {
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
-
                 <h3 className="docs-page__h3">Props</h3>
                 <p className="docs-page__paragraph">ContentList</p>
                 <PropsList>
@@ -279,7 +272,6 @@ export default class ContentListDoc extends React.Component {
                     <Prop name='onClick' isRequired={false} type='function' default='/' description='onClick functionality.'/>
                     <Prop name='onDoubleClick' isRequired={false} type='function' default='/' description='onDoubleClick functionality.'/>
                 </PropsList>
-    
             </section>
         )
     }