superdesk-ui-framework 3.0.0-beta.0 → 3.0.1-beta.3

package/examples/pages/react/Selects.tsx

@@ -56,6 +56,62 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                     required={this.state.required}
                                     disabled={this.state.disabled}
                                     invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => { console.log(value) }}>
+                                    <Option>Option 1</Option>
+                                    <Option>Option 2</Option>
+                                </Select>
+                            </div>
+
+                            <p className="docs-page__paragraph">// Boxed with hidden label</p>
+                            <div className='form__row'>
+                                <Select label='Select label'
+                                    value='Option 2'
+                                    boxedStyle
+                                    labelHidden
+                                    error='This is error message'
+                                    info='This is some hint message'
+                                    inlineLabel={this.state.inlineLabel}
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => { console.log(value) }}>
+                                    <Option>Option 1</Option>
+                                    <Option>Option 2</Option>
+                                </Select>
+                            </div>
+                            <div className='form__row'>
+                                <Select label='Select label'
+                                    value='Option 2'
+                                    boxedStyle
+                                    labelHidden
+                                    size='large'
+                                    error='This is error message'
+                                    info='This is some hint message'
+                                    inlineLabel={this.state.inlineLabel}
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => { console.log(value) }}>
+                                    <Option>Option 1</Option>
+                                    <Option>Option 2</Option>
+                                </Select>
+                            </div>
+                            <div className='form__row'>
+                                <Select label='Select label'
+                                    value='Option 2'
+                                    boxedStyle
+                                    labelHidden
+                                    size='x-large'
+                                    error='This is error message'
+                                    info='This is some hint message'
+                                    inlineLabel={this.state.inlineLabel}
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
                                     onChange={(value) => { console.log(value) }}>
                                     <Option>Option 1</Option>
                                     <Option>Option 2</Option>
@@ -90,6 +146,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
                     <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required' />
                     <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled' />
                     <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid' />
+                    <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.' />
                 </PropsList>
             </section>
         )

package/examples/pages/react/SimpleList.tsx

@@ -0,0 +1,148 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import { SimpleList, SimpleListItem, Label, Badge, Icon, IconButton, ButtonGroup, Text, Heading, Prop, PropsList } from '../../../app-typescript';
+
+export default class SimpleListDoc extends React.Component {
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>SimpleList</h2>
+                
+                <Markup.ReactMarkupCodePreview>{`
+                    <SimpleList>
+                        <SimpleListItem>...</SimpleListItem> 
+                    </SimpleList>
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <p className="docs-page__paragraph">...</p>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// no border / compact (default)</p>
+                        <SimpleList>
+                            <SimpleListItem>Maecenas sed diam eget risus varius blandit sit amet non magna.</SimpleListItem>
+                            <SimpleListItem>Donec sed odio dui.</SimpleListItem>
+                            <SimpleListItem>Etiam porta sem malesuada magna mollis euismod.</SimpleListItem>
+                            <SimpleListItem>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</SimpleListItem>
+                        </SimpleList>
+                        <p className="docs-page__paragraph">// border / space-between</p>
+                        <SimpleList border={true}>
+                            <SimpleListItem justify="space-between">
+                                Vehicula Ridiculus <Label text='Active' type='success' style='translucent'/>
+                            </SimpleListItem>
+                            <SimpleListItem justify="space-between">
+                                Tellus Mollis Aenean <Label text='Pending' type='warning' style='translucent'/>
+                            </SimpleListItem>
+                            <SimpleListItem justify="space-between">
+                                Elit Vestibulum <Label text='Closed' type='alert' style='translucent'/>
+                            </SimpleListItem>
+                        </SimpleList>
+                        <p className="docs-page__paragraph">// border / comfortable</p>
+                        <SimpleList border={true} density='comfortable'>
+                            <SimpleListItem>
+                                <Icon name='photo' />
+                                <Text weight='medium'>Adipiscing</Text>
+                                <Text color='light'>Tellus Dolor Amet</Text>
+                                <ButtonGroup align='end'>
+                                    <IconButton icon='pencil' ariaValue="Edit" onClick={()=> false}  />
+                                    <IconButton icon='trash' ariaValue="Delete" onClick={()=> false}  />
+                                </ButtonGroup>
+                            </SimpleListItem>
+                            <SimpleListItem>
+                                <Icon name='video' />
+                                <Text weight='medium'>Condimentum</Text>
+                                <Text color='light'>Nullam Ridiculus Mattis</Text>
+                                <ButtonGroup align='end'>
+                                    <IconButton icon='pencil' ariaValue="Edit" onClick={()=> false}  />
+                                    <IconButton icon='trash' ariaValue="Delete" onClick={()=> false}  />
+                                </ButtonGroup>
+                            </SimpleListItem>
+                            <SimpleListItem>
+                                <Icon name='slideshow' />
+                                <Text weight='medium'>Magna Bibendum</Text>
+                                <Text color='light'>Vehicula Ornare Cras Aenean</Text>
+                                <ButtonGroup align='end'>
+                                    <IconButton icon='pencil' ariaValue="Edit" onClick={()=> false}  />
+                                    <IconButton icon='trash' ariaValue="Delete" onClick={()=> false}  />
+                                </ButtonGroup>
+                            </SimpleListItem>
+                        </SimpleList>
+
+
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        // no border / compact (default)
+                        <SimpleList>
+                            <SimpleListItem>Maecenas sed diam eget risus varius blandit sit amet non magna.</SimpleListItem>
+                            <SimpleListItem>Donec sed odio dui.</SimpleListItem>
+                            <SimpleListItem>Etiam porta sem malesuada magna mollis euismod.</SimpleListItem>
+                            <SimpleListItem>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</SimpleListItem>
+                        </SimpleList>
+
+                        // border / space-between
+                        <SimpleList border={true}>
+                            <SimpleListItem justify="space-between">
+                                Vehicula Ridiculus <Label text='Active' type='success' style='translucent'/>
+                            </SimpleListItem>
+                            <SimpleListItem justify="space-between">
+                                Tellus Mollis Aenean <Label text='Pending' type='warning' style='translucent'/>
+                            </SimpleListItem>
+                            <SimpleListItem justify="space-between">
+                                Elit Vestibulum <Label text='Closed' type='alert' style='translucent'/>
+                            </SimpleListItem>
+                        </SimpleList>
+
+                        // border / comfortable
+                        <SimpleList border={true} density='comfortable'>
+                            <SimpleListItem>
+                                <Icon name='photo' />
+                                <Text weight='medium'>Adipiscing</Text>
+                                <Text color='light'>Tellus Dolor Amet</Text>
+                                <ButtonGroup align='end'>
+                                    <IconButton icon='pencil' ariaValue="Edit" onClick={()=> false}  />
+                                    <IconButton icon='trash' ariaValue="Delete" onClick={()=> false}  />
+                                </ButtonGroup>
+                            </SimpleListItem>
+                            <SimpleListItem>
+                                <Icon name='video' />
+                                <Text weight='medium'>Condimentum</Text>
+                                <Text color='light'>Nullam Ridiculus Mattis</Text>
+                                <ButtonGroup align='end'>
+                                    <IconButton icon='pencil' ariaValue="Edit" onClick={()=> false}  />
+                                    <IconButton icon='trash' ariaValue="Delete" onClick={()=> false}  />
+                                </ButtonGroup>
+                            </SimpleListItem>
+                            <SimpleListItem>
+                                <Icon name='slideshow' />
+                                <Text weight='medium'>Magna Bibendum</Text>
+                                <Text color='light'>Vehicula Ornare Cras Aenean</Text>
+                                <ButtonGroup align='end'>
+                                    <IconButton icon='pencil' ariaValue="Edit" onClick={()=> false}  />
+                                    <IconButton icon='trash' ariaValue="Delete" onClick={()=> false}  />
+                                </ButtonGroup>
+                            </SimpleListItem>
+                        </SimpleList>     
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+
+                <h3 className="docs-page__h3">Props</h3>
+                <p className="docs-page__paragraph">SimpleList</p>
+                <PropsList>
+                    <Prop name='density' isRequired={false} type='compact | comfortable | loose' default='compact' description='Specifies the vertical padding inside the list items. '/>
+                    <Prop name='width' isRequired={false} type='none | x-small | small | medium | large' default='none' description='Defines the width of the list. If not specified the list will take the full width of the parent container.'/>
+                    <Prop name='border' isRequired={false} type='boolean' default='false' description='Adds a dotted border on top of the list and between list items.'/>
+                    <Prop name='className' isRequired={false} type='string' default='false' description='Add custom or helper classes to the list to modify the behaviour (e.g. top or bootom margins).'/>
+                </PropsList>
+                <p className="docs-page__paragraph">SimpleListItem</p>
+                <PropsList>
+                    <Prop name='stacked' isRequired={false} type='boolean' default='false' description='Changes the flex-direction from row to column.'/>
+                    <Prop name='justify' isRequired={false} type='flex-start | flex-end | center | space-between' default='flex-start' description='Changes the flex justification of the elements inside the list item. '/>
+                </PropsList>
+
+            </section>
+        )
+    }
+}

package/examples/pages/react/SubNav.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
-
 import * as Markup from '../../js/react';
-
-import { SubNav, NavButton, Button, ButtonGroup, Divider} from '../../../app-typescript';
+import { SubNav, NavButton, Button, ButtonGroup, Divider, PropsList, Prop} from '../../../app-typescript';
 
 export default class SubNavDoc extends React.Component {
     render() {
@@ -12,10 +10,10 @@ export default class SubNavDoc extends React.Component {
                 <p></p>
                 <Markup.ReactMarkupCodePreview>{`
                     <SubNav zIndex={2}>
-                        <ButtonGroup align='left'>
+                        <ButtonGroup align='start'>
                             <NavButton icon='search' onClick={()=> false} />
                         </ButtonGroup>
-                        <ButtonGroup align='right'>
+                        <ButtonGroup align='end'>
                             <NavButton icon='dots-vertical' onClick={()=> false} />
                         </ButtonGroup>
                     </SubNav>
@@ -25,18 +23,18 @@ export default class SubNavDoc extends React.Component {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <SubNav zIndex={4}>
-                            <ButtonGroup align='left'>
+                            <ButtonGroup align='start'>
                                 <NavButton icon='search' onClick={()=> false} />
                             </ButtonGroup>
-                            <ButtonGroup align='right'>
+                            <ButtonGroup align='end'>
                                 <NavButton icon='expand-thin' type='highlight' onClick={()=> false} />
                             </ButtonGroup>
                         </SubNav>
                         <SubNav color='darker' zIndex={3}>
-                            <ButtonGroup align='left'>
+                            <ButtonGroup align='start'>
                                 <NavButton icon='filter-large' type='darker' onClick={()=> false} />
                             </ButtonGroup>
-                            <ButtonGroup align='right'>
+                            <ButtonGroup align='end'>
                                 <Button text='Something' onClick={()=> false} />
                                 <Button text='Else' onClick={()=> false} />
                                 <Divider border={true} />
@@ -51,7 +49,7 @@ export default class SubNavDoc extends React.Component {
                         </SubNav>
                         <br />
                         <SubNav color='darker' zIndex={2}>
-                            <ButtonGroup align='left' padded={true}>
+                            <ButtonGroup align='start' padded={true}>
                             <Button text='Something' onClick={()=> false} />
                                 <Button text='Else' onClick={()=> false} />
                                 <Divider border={true} />
@@ -60,7 +58,7 @@ export default class SubNavDoc extends React.Component {
                             </ButtonGroup>
                         </SubNav>
                         <br />
-                        <SubNav color='darker' zIndex={1}>
+                        <SubNav color='blueGreyDarker' zIndex={1}>
                             <ButtonGroup align='center'>
                             <Button text='One' onClick={()=> false} />
                                 <Button text='Two' onClick={()=> false} />
@@ -74,20 +72,69 @@ export default class SubNavDoc extends React.Component {
                         </SubNav>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <SubNav zIndex={2}>
-                            <ButtonGroup align='left'>
-                                <NavButton icon='filter-large' type='darker' onClick={()=> false} />
+                        <SubNav zIndex={4}>
+                            <ButtonGroup align='start'>
                                 <NavButton icon='search' onClick={()=> false} />
                             </ButtonGroup>
-                            <ButtonGroup align='right'>
-                                <NavButton icon='list-plus' onClick={()=> false} />
-                                <NavButton icon='dots-vertical' onClick={()=> false} />
+                            <ButtonGroup align='end'>
                                 <NavButton icon='expand-thin' type='highlight' onClick={()=> false} />
                             </ButtonGroup>
-                        </SubNav>        
+                        </SubNav>
+                        <SubNav color='darker' zIndex={3}>
+                            <ButtonGroup align='start'>
+                                <NavButton icon='filter-large' type='darker' onClick={()=> false} />
+                            </ButtonGroup>
+                            <ButtonGroup align='end'>
+                                <Button text='Something' onClick={()=> false} />
+                                <Button text='Else' onClick={()=> false} />
+                                <Divider border={true} />
+                                <Button text='Cancel' onClick={()=> false} />
+                                <Button text='Save' type='primary' onClick={()=> false} />
+                                <Divider size="mini" />
+                                <ButtonGroup subgroup={true} spaces='no-space'>
+                                    <NavButton icon='list-plus' onClick={()=> false} />
+                                    <NavButton icon='dots-vertical' onClick={()=> false} />
+                                </ButtonGroup>
+                            </ButtonGroup>
+                        </SubNav>
+
+                        <br />
+
+                        <SubNav color='darker' zIndex={2}>
+                            <ButtonGroup align='start' padded={true}>
+                            <Button text='Something' onClick={()=> false} />
+                                <Button text='Else' onClick={()=> false} />
+                                <Divider border={true} />
+                                <Button text='Cancel' onClick={()=> false} />
+                                <Button text='Save' type='primary' onClick={()=> false} />
+                            </ButtonGroup>
+                        </SubNav>
+                        
+                        <br />
+
+                        <SubNav color='blueGreyDarker' zIndex={1}>
+                            <ButtonGroup align='center'>
+                            <Button text='One' onClick={()=> false} />
+                                <Button text='Two' onClick={()=> false} />
+                                <Divider border={true} />
+                                <Button text='Three' onClick={()=> false} />
+                                <Button text='Four' onClick={()=> false} />
+                                <Divider border={true} />
+                                <Button text='Five' onClick={()=> false} />
+                                <Button text='Six' onClick={()=> false} />
+                            </ButtonGroup>
+                        </SubNav>   
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+                    <Prop name='color' isRequired={false} type='light | darker | blueGrey | blueGreyDarker' default='light' description='Background colour of the SubNav component.'/>
+                    <Prop name='theme' isRequired={false} type='light | dark' default='/' description='Choose the UI theme. It will inherit the default theme if not set. All child elements will inherit the theme of the SubNav if it is set.'/>
+                    <Prop name='zIndex' isRequired={true} type='number' default='1000' description='Increase the default z-index value (1000) by the specified amount.'/>
+                    <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles.'/>
+                </PropsList>
             </section>
         );
     }

package/examples/pages/react/TableList.tsx

@@ -0,0 +1,268 @@
+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, SelectGrid, Dropdown } from '../../../app-typescript';
+import { TableList, TableListItem } from '../../../app-typescript/components/Lists/TableList';
+
+interface IState {
+    array: any;
+}
+
+interface IProps {
+    array: any;
+}
+
+export default class TableListDoc extends React.Component<IProps, IState> {
+    constructor(props: IState) {
+        super(props);
+        this.state={
+            array: [
+                {
+                    start: <>
+                                <Label style='translucent' text='aacc' />
+                                <Label style='translucent' type='primary' text='prlg' />
+                            </>,
+                    center: <span>Item 1</span>,
+                    end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
+                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
+                    onClick: () => {
+                        return false;
+                    }
+                },
+                {
+                    start: <>
+                                <Label style='translucent' text='aacc' />
+                                <Label style='translucent' type='primary' text='prlg' />
+                            </>,
+                    center: <span>Item 2</span>,
+                    end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
+                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
+                    onClick: () => {
+                        return false;
+                    }
+                },
+                {
+                    start: <>
+                                <Label style='translucent' text='aacc' />
+                                <Label style='translucent' type='primary' text='prlg' />
+                            </>,
+                    center: <span>Item 3</span>,
+                    end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
+                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
+                    onClick: () => {
+                        return false;
+                    }
+                },
+            ]
+        }
+
+    }
+
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>TableList</h2>
+                
+                <Markup.ReactMarkupCodePreview>{`
+                    <TableList
+                    dragAndDrop
+                    addItem
+                    array={this.state.array}
+                    itemsDropdown={[
+                        { label: 'Action 1', onSelect: () => 1 },
+                        { label: 'Action 2', onSelect: () => 1 },
+                        { label: 'Action 3', onSelect: () => 1 },
+                    ]} />
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <p className="docs-page__paragraph">Basic:</p>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+
+                        <TableList>
+                            <TableListItem
+                            addItem
+                            itemsDropdown={[
+                                { label: <Label style='translucent' text='aacc' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                            ]}
+                            start={
+                                <>
+                                    <Label style='translucent' text='aacc' />
+                                    <Label style='translucent' type='primary' text='prlg' />
+                                </>
+                            }
+                            center={
+                                <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
+                            }
+                            end={
+                                <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                            }
+                            action={
+                                <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                            } />
+                            <TableListItem
+                            addItem
+                            itemsDropdown={[
+                                { label: <Label style='translucent' text='aacc' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                            ]}
+                            start={
+                                <>
+                                    <Label style='hollow' text='aacc' />
+                                    <Label style='filled' type='primary' text='prlg' />
+                                </>
+                            }
+                            center={
+                                <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
+                            }
+                            end={
+                                <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                            } />
+                            <TableListItem
+                            addItem
+                            itemsDropdown={[
+                                { label: <Label style='translucent' text='aacc' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                            ]}
+                            start={
+                                <>
+                                    <Label style='translucent' text='aacc' />
+                                    <Label style='translucent' type='primary' text='prlg' />
+                                </>
+                            }
+                            center={
+                                <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
+                            }
+                            end={
+                                <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                            }
+                            action={
+                                <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                            } />
+                        </TableList>
+
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <TableList>
+                            <TableListItem 
+                            addItem
+                            itemsDropdown={[
+                                { label: <Label style='translucent' text='aacc' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                            ]}
+                            start={
+                                <>
+                                    <Label style='translucent' text='aacc' />
+                                    <Label style='translucent' type='primary' text='prlg' />
+                                </>
+                            }
+                            center={
+                                <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
+                            }
+                            end={
+                                <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                            }
+                            action={
+                                <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                            } />
+                            <TableListItem
+                            addItem
+                            itemsDropdown={[
+                                { label: <Label style='translucent' text='aacc' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                            ]}
+                            start={
+                                <>
+                                    <Label style='hollow' text='aacc' />
+                                    <Label style='filled' type='primary' text='prlg' />
+                                </>
+                            }
+                            center={
+                                <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
+                            }
+                            end={
+                                <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                            } />
+                            <TableListItem
+                            addItem
+                            itemsDropdown={[
+                                { label: <Label style='translucent' text='aacc' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                            ]}
+                            start={
+                                <>
+                                    <Label style='translucent' text='aacc' />
+                                    <Label style='translucent' type='primary' text='prlg' />
+                                </>
+                            }
+                            center={
+                                <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
+                            }
+                            end={
+                                <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                            }
+                            action={
+                                <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                            } />
+                        </TableList>
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+                <p className="docs-page__paragraph">With drag and drop functionality:</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        
+                        <TableList
+                        dragAndDrop
+                        addItem
+                        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}
+                        />
+
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <TableList
+                        dragAndDrop
+                        addItem
+                        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}
+                        />
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <p className="docs-page__paragraph">BoxedList</p>
+                <PropsList>
+                    <Prop name='density' isRequired={false} type='compact | comfortable' default='compact' description='Increase the gap beetween list items.'/>
+                </PropsList>
+                <p className="docs-page__paragraph">BoxedListItem</p>
+                <PropsList>
+                    <Prop name='clickable' isRequired={false} type='boolean' default='false' description='Adds hover effect and changes the cursor to poiter.'/>
+                    <Prop name='selected' isRequired={false} type='boolean' default='false' description='Changes the state to selected and adds apropriate styling for it.'/>
+                    <Prop name='slideInActions' isRequired={false} type='boolean' default='false' description='If set to true, the action buttons will be hidden and slide in from the right on hover.'/>
+                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight' default='/' description='Adds a clour coded border on the right, based on the selected type.'/>
+                </PropsList>
+
+            </section>
+        )
+    }
+}