superdesk-ui-framework 3.0.1-beta.3 → 3.0.1-beta.30

package/dist/react/MultiSelect.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
 import { PropsList, Prop } from '../../../app-typescript';
-import { MultiSelect } from '../../../app-typescript/components/MultiSelect';
+import { MultiSelect } from '../../../app-typescript';
 
 interface IColor {
     name: string;
@@ -56,7 +56,7 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                     />
                 `}
                 </Markup.ReactMarkupCodePreview>
-                
+
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <div className='docs-page__content-row docs-page__content-row--no-margin'>
@@ -73,7 +73,6 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                                     tabindex={1}
                                     label={'This is Label'}
                                     info={'This is info'}
-                                    error={'This is error'}
                                 />
                             </div>
                         </div>
@@ -88,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>
 
@@ -107,7 +110,7 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                                     showSelectAll
                                     optionLabel='name'
                                     itemTemplate={(option) => {
-                                        if (option) {  
+                                        if (option) {
                                             return (
                                                 <div style={{display: 'flex', alignItems: 'center'}}>
                                                     <div style={{width: 10, height: 10, marginInlineEnd: 10, backgroundColor: option.colorCode}} />
@@ -144,7 +147,7 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                             showSelectAll
                             optionLabel='name'
                             itemTemplate={(option) => {
-                                if (option) {  
+                                if (option) {
                                     return (
                                         <div style={{display: 'flex', alignItems: 'center'}}>
                                             <div style={{width: 10, height: 10, marginInlineEnd: 10, backgroundColor: option.colorCode}} />
@@ -181,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.'/>
@@ -191,7 +194,7 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                     <Prop name='selectedItemTemplate' isRequired={false} type='function' default='/' description='Function that gets an item in the value and returns the content for it.'/>
                     <Prop name='onChange' isRequired={true} type='function' default='/' description='Callback to invoke when value changes.'/>
                 </PropsList>
-  
+
             </section>
         )
     }

package/dist/react/NavButtons.tsx

@@ -56,13 +56,43 @@ export default class NavButtonsDoc extends React.Component {
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
+                <h3 className="docs-page__h3">Styles / Types</h3>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <SubNav zIndex={2}>
+                            <ButtonGroup align='start' spaces='no-space'>
+                                <NavButton icon='adjust' type='default' text="Adjust" onClick={() => false} />
+                                <NavButton icon='eye-open' type='darker' text="View" onClick={() => false} />
+                                <NavButton icon='refresh' type='dark' text="Refresh" onClick={() => false} />
+                            </ButtonGroup>
+                            <ButtonGroup align='end' spaces='no-space'>
+                                <NavButton icon='edit-line' type='primary' text="Edit" onClick={() => false} />
+                                <NavButton icon='expand-thin' type='highlight' text="Expand" onClick={() => false} />
+                            </ButtonGroup>
+                        </SubNav>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <SubNav zIndex={2}>
+                            <ButtonGroup align='start' spaces='no-space'>
+                                <NavButton icon='adjust' type='default' text="Adjust" onClick={() => false} />
+                                <NavButton icon='eye-open' type='darker' text="View" onClick={() => false} />
+                                <NavButton icon='refresh' type='dark' text="Refresh" onClick={() => false} />
+                            </ButtonGroup>
+                            <ButtonGroup align='end' spaces='no-space'>
+                                <NavButton icon='edit-line' type='primary' text="Edit" onClick={() => false} />
+                                <NavButton icon='expand-thin' type='highlight' text="Expand" onClick={() => false} />
+                            </ButtonGroup>
+                        </SubNav>       
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
                     <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.' />
                     <Prop name='text' isRequired={false} type='string' default='/' description='Defines the value for aria-label, for screen-readers accessibility.' />
                     <Prop name='iconSize' isRequired={false} type='small | big' default='small' description='Specifies a small or big button' />
-                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.).' />
+                    <Prop name='type' isRequired={false} type='default | primary | highlight | darker | dark' default='default' description='Default + colour variations.' />
                     <Prop name='state' isRequired={false} type='normal | active' default='normal' description='Defines the optional state of the button (e.g. active)' />
                     <Prop name='theme' isRequired={false} type='light | dark' default='light' description='Styles nav button for diffrent background.' />
                     <Prop name='value' isRequired={false} type='button | submit | reset' default='button' description='Specifies a value of nav button' />

package/dist/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/dist/react/TableList.tsx

@@ -1,6 +1,6 @@
 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 { BoxedList, BoxedListItem, BoxedListContentRow, Prop, PropsList, Icon, IconButton, AvatarWrapper, AvatarContentText, ButtonGroup, Button, Heading, Text, Label, Container, IconLabel, SelectGrid, Dropdown, Tooltip } from '../../../app-typescript';
 import { TableList, TableListItem } from '../../../app-typescript/components/Lists/TableList';
 
 interface IState {
@@ -14,43 +14,46 @@ interface IProps {
 export default class TableListDoc extends React.Component<IProps, IState> {
     constructor(props: IState) {
         super(props);
-        this.state={
+        this.state = {                             
             array: [
                 {
                     start: <>
-                                <Label style='translucent' text='aacc' />
-                                <Label style='translucent' type='primary' text='prlg' />
-                            </>,
+                        <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;
-                    }
+                    action: <Dropdown append={true} items={[
+                        { 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 },
+                    ]}><IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={(e) => e.stopPropagation()} /></Dropdown>,
+                    onClick: () => console.log('single'),
+                    onDoubleClick: () => console.log('double'),
+                    hexColor: '#ccff00'
                 },
                 {
                     start: <>
-                                <Label style='translucent' text='aacc' />
-                                <Label style='translucent' type='primary' text='prlg' />
-                            </>,
+                        <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;
-                    }
+                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
+                    onClick: () => console.log('single'),
+                    onDoubleClick: () => console.log('double'),
                 },
                 {
                     start: <>
-                                <Label style='translucent' text='aacc' />
-                                <Label style='translucent' type='primary' text='prlg' />
-                            </>,
+                        <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;
-                    }
+                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
+                    onClick: () => console.log('single'),
+                    onDoubleClick: () => console.log('double'),
+                    hexColor: '#ff9808'
                 },
             ]
         }
@@ -61,206 +64,96 @@ export default class TableListDoc extends React.Component<IProps, IState> {
         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 },
+                    itemsDropdown={(index) => [
+                        { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => false },
+                        { label: <Label style='translucent' text='prlg' />, onSelect: () => false },
+                        { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => false },
                     ]} />
                 `}
                 </Markup.ReactMarkupCodePreview>
 
-                <p className="docs-page__paragraph">Basic:</p>
-
+                <p className="docs-page__paragraph">Simple list without drag and drop functionality and without functionality for adding item in list:</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>
-
+                        <TableList
+                            array={this.state.array}
+                        />
                     </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>
+                        <TableList
+                        array={this.state.array}
+                        />
                     `}
                     </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}
+                            dragAndDrop
+                            append
+                            addItem
+                            array={this.state.array}
+                            itemsDropdown={(index) => [
+                                    { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => console.log(index) },
+                                    { label: <Label style='translucent' text='prlg' />, onSelect: () => console.log(index) },
+                                    { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => console.log(index) },
+                                ]
+                            }
+                            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}
+                        itemsDropdown={(index) => [
+                                { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => console.log(index) },
+                                { label: <Label style='translucent' text='prlg' />, onSelect: () => console.log(index) },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => console.log(index) },
+                            ]
+                        }
+                        onDrag={(start, end) => console.log(start, end)}
                         />
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3">Props</h3>
-                <p className="docs-page__paragraph">BoxedList</p>
+                <p className="docs-page__paragraph">TableList</p>
                 <PropsList>
-                    <Prop name='density' isRequired={false} type='compact | comfortable' default='compact' description='Increase the gap beetween list items.'/>
+                    <Prop name='array' isRequired={true} type='Array' default='false' description='Array of object.' />
+                    <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='className' isRequired={false} type='string' default='false' description='Add class on TableList container.' />
+                    <Prop name='showDragHandle' isRequired={false} type='string' default='always' description='"always" | "onHover" | "none".' />
+                    <Prop name='readOnly' isRequired={false} type='boolean' default='false' description='When specified, component changes are not enabled.' />
+                    <Prop name='append' isRequired={false} type='boolean' default='false' description='Set append to body on individual item while draging.' />
+                    <Prop name='onDrag' isRequired={false} type='function' default='false' description='Returns start and end position of draggable item' />
+                    <Prop name='onAddItem' isRequired={false} type='function' default='false' description='Returns index of draggable item.' />
+                    <Prop name='itemsDropdown' isRequired={false} type='function' default='false' description='Dropdown for adding items in the list. Returns index of draggable item.' />
                 </PropsList>
-                <p className="docs-page__paragraph">BoxedListItem</p>
+                <p className="docs-page__paragraph">array:</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.'/>
+                    <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='hexColor' isRequired={false} type='string' default='false' description='Color of left border for item status.' />
+                    <Prop name='locked' isRequired={false} type='function' default='false' description='If is true, the individual item of list change state and change style (border).' />
+                    <Prop name='positionLocked' isRequired={false} type='function' default='false' description='Work in progress...' />
+                    <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
+                    <Prop name='onDoubleClick' isRequired={false} type='function' default='false' description='onDoubleClick functionality.' />
                 </PropsList>
+                
 
             </section>
         )

package/dist/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>
         );

package/dist/react/Togglebox.tsx

@@ -40,6 +40,7 @@ const ToggleboxDocs = () => {
                 <Prop name='hideUsingCSS' isRequired={false} type='boolean' default='false' description='Usefull when working with forms. Content of togglebox will be hidden but remain rendered.' />
                 <Prop name='initiallyOpen' isRequired={false} type='boolean' default='false' description='Opens togglebox on initial render' />
                 <Prop name='className' isRequired={false} type='string' default='null' description='Style class of the component' />
+                <Prop name='margin' isRequired={false} type='none | small | normal | large' default='normal' description='Defines the bottom margin of the toggle box.' />
                 <Prop name='onOpen' isRequired={false} type='function' default='null' description='Callback on open event' />
                 <Prop name='onClose' isRequired={false} type='function' default='null' description='Callback on close event' />
             </PropsList>
@@ -47,5 +48,4 @@ const ToggleboxDocs = () => {
     )
 }
 
-
 export default ToggleboxDocs;