superdesk-ui-framework 3.0.1-beta.1 → 3.0.1-beta.10

package/examples/pages/react/LeftNavigations.tsx

@@ -13,11 +13,17 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
                     <LeftMenu 
                         activeItemId='1' 
                         groups={[
-                                { label: 'SYSTEM SETTINGS', items: [{id: '1', label: 'General'}, {id: '2', label: 'Email settings'}, {id: '3', label: 'Spell checking'}]},
-                                { label: 'WORKFLOW', items: [{ id: '4', label: 'Desk' }, { id: '5', label: 'User Roles & Privileges'}]},
-                                { label: 'CONTENT CONFIG', items: [{id: '6', label: 'Image renditions'}, {id: '7', label: 'Controlled Vocabularies'}]}
+                                { label: 'SYSTEM SETTINGS', items: [
+                                    {id: '1', label: 'General'},
+                                    {id: '2', label: 'Email settings'},
+                                ]},
+                                { label: 'WORKFLOW', items: [
+                                    { id: '4', label: 'Desk' },
+                                    { id: '5', label: 'User Roles & Privileges'},
+                                ]}
                             ]}
-                        onSelect={() => false} />
+                        onSelect={() => false}
+                    />
                 `}
                 </Markup.ReactMarkupCodePreview>
 
@@ -32,25 +38,41 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
                                         <p className="sd-top-menu__header">Top menu</p>
                                     </div>
                                 </div>
-                                    <LeftMenu ariaLabel={'Left navigation'} className={'docs-page__grid-page-example__side'} activeItemId='1' 
-                                        groups={[
-                                                {label: 'SYSTEM SETTINGS', items: [{id: '1', label: 'General'}, {id: '2', label: 'Email settings'}, {id: '3', label: 'Spell checking'}]},
-                                                {label: 'WORKFLOW', items: [{id: '4', label: 'Desk'}, {id: '5', label: 'User Roles & Privileges'}]},
-                                                {label: 'CONTENT CONFIG', items: [{id: '6', label: 'Image renditions'}, {id: '7', label: 'Controlled Vocabularies'}]}
-                                            ]}
-                                        onSelect={() => false} />
+                                    <LeftMenu ariaLabel={'Left navigation'}
+                                    className={'docs-page__grid-page-example__side'}
+                                    activeItemId='3' 
+                                    groups={[
+                                            {label: 'SYSTEM SETTINGS', items: [{id: '1', label: 'General'}, {id: '2', label: 'Email settings'}, {id: '3', label: 'Spell checking'}]},
+                                            {label: 'WORKFLOW', items: [{id: '4', label: 'Desk'}, {id: '5', label: 'User Roles & Privileges'}]},
+                                            {label: 'CONTENT CONFIG', items: [{id: '6', label: 'Image renditions'}, {id: '7', label: 'Controlled Vocabularies'}]}
+                                        ]}
+                                    onSelect={() => false} />
                                 <div className='docs-page__grid-page-example__main'></div>
                             </div>
                         </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <LeftMenu ariaLabel={'Left navigation'} className={'docs-page__grid-page-example__side'} activeItemId='1' 
+                        <LeftMenu 
+                            ariaLabel={'Left navigation'}
+                            className={'docs-page__grid-page-example__side'}
+                            activeItemId='1' 
                             groups={[
-                                    {label: 'SYSTEM SETTINGS', items: [{id: '1', label: 'General'}, {id: '2', label: 'Email settings'}, {id: '3', label: 'Spell checking'}]},
-                                    {label: 'WORKFLOW', items: [{id: '4', label: 'Desk'}, {id: '5', label: 'User Roles & Privileges'}]},
-                                    {label: 'CONTENT CONFIG', items: [{id: '6', label: 'Image renditions'}, {id: '7', label: 'Controlled Vocabularies'}]}
+                                {label: 'SYSTEM SETTINGS', items: [
+                                    {id: '1', label: 'General'},
+                                    {id: '2', label: 'Email settings'},
+                                    {id: '3', label: 'Spell checking'},
+                                ]},
+                                {label: 'WORKFLOW', items: [
+                                    {id: '4', label: 'Desk'},
+                                    {id: '5', label: 'User Roles & Privileges'},
+                                ]},
+                                {label: 'CONTENT CONFIG', items: [
+                                    {id: '6', label: 'Image renditions'},
+                                    {id: '7', label: 'Controlled Vocabularies'},
                                 ]}
-                            onSelect={() => false} />
+                            ]}
+                            onSelect={() => false}
+                        />
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -67,26 +89,26 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
                                     </div>
                                 </div>
                                     <LeftMenu ariaLabel={'Left navigation'}
-                                        className={'docs-page__grid-page-example__side'}     
-                                        scrollSpy='#scrollContainer'
-                                        offset={-300}
-                                        activeItemId='1'
-                                        groups={[
-                                            { label: 'MAIN SECTIONS', items: [
-                                                { id: '1', label: 'Section 1', ref:'section1'},
-                                                { id: '2', label: 'Section 2', ref: 'section2' },
-                                                { id: '3', label: 'Section 3', ref: 'section3' },
-                                            
-                                            ]},
-                                            { label:'OTHER SECTIONS', items: [
-                                                { id: '4', label: 'Section 4', ref: 'section4' },
-                                                { id: '5', label: 'Section 5', ref: 'section5' }
-                                            ]},
-                                            { label:'OTHER SECTIONS', items: [
-                                                { id: '6', label: 'Section 6', ref: 'section6' },
-                                                { id: '7', label: 'Section 7', ref: 'section7' }
-                                            ]}
+                                    className={'docs-page__grid-page-example__side'}     
+                                    scrollSpy='#scrollContainer'
+                                    offset={-300}
+                                    //scrollTo={'section4'}
+                                    groups={[
+                                        { label: 'MAIN SECTIONS', items: [
+                                            { id: '1', label: 'Section 1', ref:'section1'},
+                                            { id: '2', label: 'Section 2', ref: 'section2' },
+                                            { id: '3', label: 'Section 3', ref: 'section3' },
+                                        
+                                        ]},
+                                        { label:'OTHER SECTIONS', items: [
+                                            { id: '4', label: 'Section 4', ref: 'section4' },
+                                            { id: '5', label: 'Section 5', ref: 'section5' }
+                                        ]},
+                                        { label:'OTHER SECTIONS', items: [
+                                            { id: '6', label: 'Section 6', ref: 'section6' },
+                                            { id: '7', label: 'Section 7', ref: 'section7' }
                                         ]}
+                                    ]}
                                     onSelect={() => false} />
                                 <div className='docs-page__grid-page-example__main sd-padding--4' id='scrollContainer' style={{height:600}}>
                                         <SimpleList density='comfortable'>
@@ -160,16 +182,17 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
                     </Markup.ReactMarkupPreview> 
                     <Markup.ReactMarkupCode>
                         {`
-                            <LeftMenu ariaLabel={'Left navigation'}
+                            <LeftMenu
+                                ariaLabel={'Left navigation'}
                                 className={'docs-page__grid-page-example__side'}     
                                 scrollSpy='#scrollContainer'
+                                offset={-300}
                                 activeItemId='1' 
                                 groups={[
                                     { label: 'MAIN SECTIONS', items: [
                                         { id: '1', label: 'Section 1', ref:'section1'},
                                         { id: '2', label: 'Section 2', ref: 'section2' },
-                                        { id: '3', label: 'Section 3', ref: 'section3' },
-                                    
+                                        { id: '3', label: 'Section 3', ref: 'section3' }
                                     ]},
                                     {label:'OTHER SECTIONS', items: [
                                         { id: '4', label: 'Section 4', ref: 'section4' },
@@ -180,7 +203,8 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
                                         { id: '5', label: 'Section 7', ref: 'section7' }
                                     ]}
                                 ]}
-                                onSelect={() => false} />
+                                onSelect={() => false}
+                            />
                                 
                             <div id='#scrollContainer'>...</div>
                         `}  
@@ -189,16 +213,19 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='groups' isRequired={true} type='Array<menugroup>' default='/' description='Array of groups'/>
-                    <Prop name='activeItemId' isRequired={true} type='string' default='/' description='Id of active item'/>
+                    <Prop name='groups' isRequired={true} type='Array<menugroup>' default='/' description='Array of groups.'/>
                     <Prop name='menugroup label' isRequired={true} type='string' default='/' description='Menugroup label text value.'/>
-                    <Prop name='menugroup items' isRequired={true} type='Array<menuitem>' default='/' description='Array of items'/>
-                    <Prop name='menuitem id' isRequired={true} type='string' default='/' description='Menugroup id value'/>
+                    <Prop name='menugroup items' isRequired={true} type='Array<menuitem>' default='/' description='Array of items.'/>
+                    <Prop name='menuitem id' isRequired={true} type='string' default='/' description='Menugroup id value.'/>
                     <Prop name='menuitem label' isRequired={true} type='string' default='/' description='Menugroup label text value.'/>
+                    <Prop name='menuitem ref' isRequired={false} type='string' default='/' description='Menugroup ref.'/>
+                    <Prop name='menuitem route' isRequired={false} type='string' default='/' description='Menugroup route value.'/>
+                    <Prop name='menuitem onCLick' isRequired={true} type='string' default='/' description='On click function.'/>
                     <Prop name='scrollSpy' isRequired={false} type='string' default='HTML' description='Name of the element of scrollable container.'/>
                     <Prop name='offset' isRequired={false} type='number' default='-300' description='Offset value that adjusts to determine the elements are in the viewport.'/>
+                    <Prop name='activeItemId' isRequired={false} type='string' default='/' description='Id of active item'/>
+                    <Prop name='scrollTo' isRequired={false} type='string' default='/' description='Ref of active item.'/>
                 </PropsList>
-
             </section>
         )
     }

package/examples/pages/react/Modal.tsx

@@ -187,6 +187,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
                                visible={this.state.modalFull} 
                                theme='dark'
                                maximized={true}
+                               className='testClass'
                                onHide={() => {this.setState({modalFull: false})}}>
                             <p className="sd-margin-b--3">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes,
                             nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.

package/examples/pages/react/MultiSelect.tsx

@@ -69,6 +69,10 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                                     showSelectAll
                                     placeholder='Select a color'
                                     optionLabel='name'
+                                    required
+                                    tabindex={1}
+                                    label={'This is Label'}
+                                    info={'This is info'}
                                 />
                             </div>
                         </div>
@@ -83,6 +87,10 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                             showSelectAll
                             placeholder='Select a color'
                             optionLabel='name'
+                            required
+                            tabindex={1}
+                            label={'This is Label'}
+                            info={'This is info'}
                         />
                     `}</Markup.ReactMarkupCode>
 
@@ -176,7 +184,7 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                     <Prop name='filter' isRequired={false} type='boolean' default='false' description='When specified, displays an input field to filter the items on keyup.'/>
                     <Prop name='filterPlaceholder' isRequired={false} type='string' default='/' description='Placeholder text to show when filter input is empty.'/>
                     <Prop name='emptyFilterMessage' isRequired={false} type='string' default='No results found' description='Template to display when filtering does not return any results.'/>
-                    <Prop name='maxSelectedLabels' isRequired={false} type='number' default='/' description='Decides how many selected item labels to show at most.'/>
+                    <Prop name='maxSelectedLabels' isRequired={false} type='number' default='/' description='Decides how many selected item labels to show at most. Its necessary to use selectedItemTemplate.'/>
                     <Prop name='selectedItemsLabel' isRequired={false} type='string' default='{0} items selected' description='Label to display after exceeding max selected labels.'/>
                     <Prop name='ariaLabelledBy' isRequired={false} type='string' default='/' description='Establishes relationships between the component and label(s) where its value should be one or more element IDs.'/>
                     <Prop name='tabIndex' isRequired={false} type='string' default="'0'" description='Index of the element in tabbing order.'/>
@@ -190,4 +198,4 @@ export class MultiselectDocs extends React.Component<{}, IState> {
             </section>
         )
     }
-}
+}

package/examples/pages/react/SelectWithTemplate.tsx

@@ -80,9 +80,14 @@ export class SelectWithTemplateDocs extends React.Component<{}, IState> {
                                         }
                                     }}
                                     getLabel={(option) => option.name}
-                                    areEqual={(a, b) => a.colorCode === b.colorCode}
+                                    areEqual={(a, b) => a?.colorCode === b?.colorCode}
                                     filterPlaceholder="Search..."
                                     noResultsFoundMessage="No results found."
+                                    required
+                                    tabindex={1}
+                                    label={'This is Label'}
+                                    info={'This is info'}
+                                    error={'This is error'}
                                 />
                             </div>
                         </div>

package/examples/pages/react/Selects.tsx

@@ -62,6 +62,61 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                     <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>
+                                </Select>
+                            </div>
                         </div>
 
                     </Markup.ReactMarkupPreview>

package/examples/pages/react/TableList.tsx

@@ -0,0 +1,248 @@
+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
+                                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
+                                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
+                                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
+                            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
+                            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
+                            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}
+                            onDrag={(start, end) => console.log(start, end)}
+                        />
+
+                    </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">TableList</p>
+                <PropsList>
+                    <Prop name='array' isRequired={false} type='Array' default='false' description='Array of object.' />
+                    <Prop name='children' isRequired={false} type='React.ReactNode' default='false' description='Children of component.' />
+                    <Prop name='addItem' isRequired={false} type='boolean' default='false' description='Functionality to add items to the list.' />
+                    <Prop name='dragAndDrop' isRequired={false} type='boolean' default='false' description='Drag&Drop functionality.' />
+                    <Prop name='itemsDropdown' isRequired={false} type='React.ReactNode | any' default='false' description='Dropdown for functionality to add items to the list.' />
+                    <Prop name='className' isRequired={false} type='string' default='false' description='Add class on TableList container.' />
+                    <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
+                    <Prop name='onDrag' isRequired={false} type='function' default='false' description='Returns start and end position of draggable item' />
+                </PropsList>
+                <p className="docs-page__paragraph">array:</p>
+                <PropsList>
+                    <Prop name='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
+                    <Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
+                    <Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
+                    <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.' />
+                </PropsList>
+                <p className="docs-page__paragraph">TableListItem</p>
+                <PropsList>
+                    <Prop name='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
+                    <Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
+                    <Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
+                    <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.' />
+                    <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
+                </PropsList>
+
+            </section>
+        )
+    }
+}

package/examples/pages/react/TimePicker.tsx

@@ -15,10 +15,16 @@ class TimePickerExample extends React.PureComponent<{}, {time: string}> {
     render() {
         return (
             <TimePicker
-                value={this.state.time}
-                onChange={(time) => {
-                    this.setState({time});
-                }}
+            value={this.state.time}
+            onChange={(time) => {
+                this.setState({time});
+            }}
+            required
+            tabindex={1}
+            label={'This is Label'}
+            info={'This is info'}
+            error={'This is error'}
+            allowSeconds
             />
         );
     }
@@ -38,10 +44,13 @@ export default class TimePickerDoc extends React.Component {
                         render() {
                             return (
                                 <TimePicker
-                                    value={this.state.time}
-                                    onChange={(time) => {
-                                        this.setState({time});
-                                    }}
+                                value={this.state.time}
+                                onChange={(time) => {
+                                    this.setState({time});
+                                }}
+                                label={'This is Label'}
+                                info={'This is info'}
+                                error={'This is error'}
                                 />
                             );
                         }
@@ -67,14 +76,15 @@ export default class TimePickerDoc extends React.Component {
 
                 <h3 className='docs-page__h3'>Props</h3>
                 <PropsList>
-                    <Prop name='value' isRequired={true} type='string' default='/' description='Item value' />
-                    <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='value' isRequired={true} type='string' default='/' description='Item value.' />
+                    <Prop name='allowSeconds' isRequired={true} type='string' default='/' description='Allow seconds.' />
+                    <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.' />
                 </PropsList>
 
                 <h3 className='docs-page__h3'>Events</h3>
                 <PropsList>
-                    <Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of time input' />
+                    <Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of time input.' />
                 </PropsList>
             </section>
         );