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

package/examples/pages/react/DurationInput.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import { Input, Select, CheckGroup, Checkbox, PropsList, Prop } from '../../../app-typescript';
+import { DurationInput } from '../../../app-typescript/components/DurationInput';
+import { getDurationString } from '../../../app-typescript/components/DurationInput';
+
+interface IState {
+    inlineLabel: boolean;
+    required: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    value: any
+}
+
+export default class DurationInputDoc extends React.Component<{}, IState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            inlineLabel: false,
+            required: true,
+            disabled: false,
+            invalid: false,
+            value: 3661,
+        }
+    }
+    
+    render() {
+        
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>Duration Input</h2>
+                <Markup.ReactMarkupCodePreview>{`
+                    <DurationInput
+                    label='Label'
+                    info='info message'
+                    disabled={this.state.disabled}
+                    required={this.state.required}
+                    invalid={this.state.invalid}
+                    inlineLabel={this.state.inlineLabel}
+                    onChange={(e) => {
+                        console.log(e)
+                    }}
+                    />
+                `}
+                </Markup.ReactMarkupCodePreview>
+                <p className='docs-page__paragraph'></p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <CheckGroup>
+                                    <Checkbox checked={this.state.required} label={{text:'Required input'}} onChange={(value) => {this.setState({required: value})}} />
+                                    <Checkbox checked={this.state.disabled} label={{text:'Disabled input'}} onChange={(value) => {this.setState({disabled: value})}} />
+                                    <Checkbox checked={this.state.invalid} label={{text:'Invalid input'}} onChange={(value) => {this.setState({invalid: value})}} />
+                                    <Checkbox checked={this.state.inlineLabel} label={{text:'Label positioned inline'}} onChange={(value) => {this.setState({inlineLabel: value})}} />
+                                </CheckGroup>
+                            </div>
+
+                            <div className='form__row'>
+                                <DurationInput
+                                label='Label'
+                                info='info message'
+                                disabled={this.state.disabled}
+                                required={this.state.required}
+                                invalid={this.state.invalid}
+                                inlineLabel={this.state.inlineLabel}
+                                seconds={this.state.value}
+                                onChange={(e) => {
+                                    this.setState({value: e})
+                                    console.log(e);
+                                }}
+                                />
+                            </div>
+                        </div>
+
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <DurationInput
+                        label='Label'
+                        info='info message'
+                        disabled={this.state.disabled}
+                        required={this.state.required}
+                        invalid={this.state.invalid}
+                        inlineLabel={this.state.inlineLabel}
+                        onChange={(e) => {
+                            console.log(e)
+                        }}
+                        />
+                    `}</Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className='docs-page__h3'>Props</h3>
+                <PropsList>
+                    <Prop name='hours' isRequired={false} type='number' default='00' description='Hours value'/>
+                    <Prop name='minutes' isRequired={false} type='number' default='00' description='Minutes value'/>
+                    <Prop name='seconds' isRequired={false} type='number' default='00' description='Seconds value'/>
+                    <Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>
+                    <Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
+                    <Prop name='error' isRequired={false} type='string' default='/' description='Error text'/>
+                    <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline'/>
+                    <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'/>
+                </PropsList>
+            </section>
+        )
+    }
+}

package/examples/pages/react/Index.tsx

@@ -61,6 +61,7 @@ import * as Playgrounds from '../playgrounds/react-playgrounds/Index';
 import { SelectWithTemplateDocs } from './SelectWithTemplate';
 import { MultiselectDocs } from './MultiSelect';
 import { TreeSelectDocs } from './TreeSelect';
+import DurationInputDoc from './DurationInput';
 import { PopoverDoc } from './Popover';
 import { MenuDocs } from './Menu';
 import {WithSizeObserverDocs} from './WithSizeObserver';
@@ -240,6 +241,9 @@ const pages = {
             'icon-picker': {
                 name: 'Icon Picker',
             },
+            'duration-input': {
+                name: 'Duration Input',
+            },
             'switch': {
                 name: 'Switch'
             },
@@ -337,6 +341,7 @@ class ReactDoc extends React.Component<IProps, IState> {
                         <Route path="/react/with-size-observer" component={WithSizeObserverDocs} />
                         <Route path="/react/multiselect" component={MultiselectDocs} />
                         <Route path="/react/treeselect" component={TreeSelectDocs} />
+                        <Route path="/react/duration-input" component={DurationInputDoc} />
                         <Route path="/react/popover" component={PopoverDoc} />
                         <Route path="/react/date-picker" component={DatePickerDoc} />
                         <Route path="/react/time-picker" component={TimePickerDoc} />

package/examples/pages/react/Inputs.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-
 import * as Markup from '../../js/react';
+import { Input, CheckGroup, Checkbox, PropsList, Prop, InputNew } from '../../../app-typescript';
+import { DurationInput } from '../../../app-typescript/components/DurationInput';
 
-import { Input, Select, CheckGroup, Checkbox, PropsList, Prop } from '../../../app-typescript';
 
 interface IState {
     inlineLabel: boolean;
@@ -46,6 +46,23 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                     <Checkbox checked={this.state.inlineLabel} label={{text:'Label positioned inline'}} onChange={(value) => {this.setState({inlineLabel: value})}} />
                                 </CheckGroup>
                             </div>
+                            <div className='form__row'>
+                                <InputNew
+                                label='Label'
+                                value=''
+                                onChange={(value) => false
+                                }
+                            
+                                required={true}
+                                info='Nullam Sollicitudin'
+                                maxLength={20}
+                                //invalid={true}
+                                //disabled={true}
+                                error='Error message'
+                                //inlineLabel={true}
+                                //labelHidden={true}
+                                type='text' />
+                            </div>
 
                             <div className='form__row'>
                                 <Input label='Input label'
@@ -91,6 +108,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                     tabindex={0}
                                     onChange={(value) => this.setState({value2: value})} />
                             </div>
+
                             <p className="docs-page__paragraph">// Boxed with hidden label</p>
                             <div className='form__row'>
                                 <Input label='Input label'
@@ -205,6 +223,128 @@ export default class InputsDoc extends React.Component<{}, IState> {
                             disabled={false}
                             invalid={false}
                             onChange={(value) => {}} />
+
+                        <Input label='Number Input'
+                            value={this.state.value}
+                            type='number'
+                            error='This is error message'
+                            info='Morbi leo risus porta ac consectetur ac.'
+                            inlineLabel={this.state.inlineLabel}
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {}} />
+                        
+                        // Hidden label
+                        <Input label='Input label'
+                            value={''}
+                            maxLength={25}
+                            type='text'
+                            placeholder='Placeholder'
+                            error='This is error message'
+                            info='Donec id elit non mi porta gravida at eget metus.'
+                            inlineLabel={true}
+                            labelHidden={true}
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {}} />
+
+                        // Boxed with hidden label
+                        <Input label='Input label'
+                            value={''}
+                            boxedStyle={true}
+                            maxLength={25}
+                            type='text'
+                            placeholder='Default boxed input'
+                            error='This is error message'
+                            inlineLabel={true}
+                            labelHidden={true}
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {}} />
+
+                        <Input label='Input label'
+                            value={''}
+                            boxedStyle={true}
+                            size='large'
+                            maxLength={25}
+                            type='text'
+                            placeholder='Large boxed input'
+                            error='This is error message'
+                            inlineLabel={true}
+                            labelHidden={true}
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {}} />
+
+                        <Input label='Input label'
+                            value={''}
+                            boxedStyle={true}
+                            size='x-large'
+                            maxLength={25}
+                            type='text'
+                            placeholder='Extra large boxed input'
+                            error='This is error message'
+                            inlineLabel={true}
+                            labelHidden={true}
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {}} />
+
+                        // Boxed with default label
+                        <Input label='Input label'
+                            value={''}
+                            boxedStyle={true}
+                            size='large'
+                            maxLength={25}
+                            placeholder='Placeholder'
+                            type='text'
+                            error='This is error message'
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {}} />
+                        
+                        // Boxed with boxed label
+                        <Input label='Input label'
+                            value={''}
+                            boxedStyle={true}
+                            boxedLable={true}
+                            size='large'
+                            maxLength={25}
+                            placeholder='Placeholder'
+                            type='text'
+                            error='This is error message'
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {}} />
+                        
+                        <Input label='Input label'
+                            value={''}
+                            boxedStyle={true}
+                            boxedLable={true}
+                            size='large'
+                            placeholder='Hide my label'
+                            labelHidden={true}
+                            type='text'
+                            error='This is error message'
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {}} />
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
@@ -221,6 +361,11 @@ export default class InputsDoc extends React.Component<{}, IState> {
                     <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.'/>
+                    <Prop name='placeholder' isRequired={false} type='string' default='/' description='Defines the text for the placeholder pseudo-element.'/>
+                    <Prop name='fullWidth' isRequired={false} type='boolean' default='false' description='Forces the input to take 100% of the container width.'/>
+                    <Prop name='boxedStyle' isRequired={false} type='boolean' default='false' description='Applies a boxed style to the input. This style should be used only in the authoring enviroment and similar.'/>
+                    <Prop name='boxedLable' isRequired={false} type='boolean' default='false' description='Applies a boxed style to the input label. This label style should be used only in combination with the boxedStyle input inside the authoring enviroment.'/>
+                    <Prop name='size' isRequired={false} type='medium | large | x-large' default='medium' description='Specifies the size of the input. Defaults to medium and should be changed only in special cases (e.g. titles, headlines etc.).'/>
                 </PropsList>
             </section>
         )

package/examples/pages/react/Labels.tsx

@@ -67,6 +67,12 @@ export default class LabelsDoc extends React.Component {
                             <Label text='deep-orange--700' color='deep-orange--700'/>
                             <Label text='lime--700' color='lime--700'/>  
                         </div>
+                        <p className="docs-page__paragraph">// Custom Hex colors</p>
+                        <div className='docs-page__content-row'>
+                            <Label text='Hex: #008773' hexColor='#008773'/>
+                            <Label text='Hex: #000FB5' hexColor='#000FB5'/>
+                            <Label text='Hex: #696B00' hexColor='#696B00'/>
+                        </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <Label text='default label'/>
@@ -82,7 +88,11 @@ export default class LabelsDoc extends React.Component {
                         <Label text='cyan--600' color='cyan--600'/>
                         <Label text='light-green--700' color='light-green--700'/>
                         <Label text='deep-orange--700' color='deep-orange--700'/>
-                        <Label text='lime--700' color='lime--700'/>  
+                        <Label text='lime--700' color='lime--700'/> 
+                        // Custom Hex colors
+                        <Label text='Hex: #008773' hexColor='#008773'/>
+                        <Label text='Hex: #000FB5' hexColor='#000FB5'/>
+                        <Label text='Hex: #696B00' hexColor='#696B00'/>
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -113,6 +123,12 @@ export default class LabelsDoc extends React.Component {
                             <Label text='light-green--700 label' style='hollow' color='light-green--700'/>
                             <Label text='deep-purple--600 label' style='hollow' color='deep-purple--600'/>
                         </div>
+                        <p className="docs-page__paragraph">// Custom Hex colours</p>
+                        <div className='docs-page__content-row'>
+                            <Label text='Hex: #008773' style='hollow' hexColor='#008773'/>
+                            <Label text='Hex: #000FB5' style='hollow' hexColor='#000FB5'/>
+                            <Label text='Hex: #696B00' style='hollow' hexColor='#696B00'/>
+                        </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <Label text='default label' style='hollow'/>
@@ -133,6 +149,11 @@ export default class LabelsDoc extends React.Component {
                         <Label text='blue-grey--600 label' style='hollow' color='blue-grey--600'/>
                         <Label text='light-green--700 label' style='hollow' color='light-green--700'/>
                         <Label text='deep-purple--600 label' style='hollow' color='deep-purple--600'/>
+
+                        // Custom Hex colours
+                        <Label text='Hex: #008773' style='hollow' hexColor='#008773'/>
+                        <Label text='Hex: #000FB5' style='hollow' hexColor='#000FB5'/>
+                        <Label text='Hex: #696B00' style='hollow' hexColor='#696B00'/>
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -156,6 +177,12 @@ export default class LabelsDoc extends React.Component {
                             <Label text='Translucent large' size='large' type='primary' style='translucent'/>
                             <Label text='Translucent, large & no text transformation' type='highlight' size='large' style='translucent' noTransform={true}/>
                         </div>
+                        <p className="docs-page__paragraph">// Custom Hex colours</p>
+                        <div className='docs-page__content-row'>
+                            <Label text='Hex: #008773' style='translucent' hexColor='#008773'/>
+                            <Label text='Hex: #000FB5' style='translucent' hexColor='#000FB5'/>
+                            <Label text='Hex: #696B00' style='translucent' hexColor='#696B00'/>
+                        </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <Label text='default label' style='hollow'/>
@@ -169,6 +196,11 @@ export default class LabelsDoc extends React.Component {
                         <Label text='Translucent large' size='large' style='translucent'/>
                         <Label text='Translucent large' size='large' type='primary' style='translucent'/>
                         <Label text='Translucent, large & no text transformation' type='highlight' size='large' style='translucent' noTransform={true}/>
+
+                        // Custom Hex colours
+                        <Label text='Hex: #008773' style='translucent' hexColor='#008773'/>
+                        <Label text='Hex: #000FB5' style='translucent' hexColor='#000FB5'/>
+                        <Label text='Hex: #696B00' style='translucent' hexColor='#696B00'/>
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -195,6 +227,15 @@ export default class LabelsDoc extends React.Component {
                             <Label text='success label' type='success' style='translucent' onClick={()=> false}/>
                             <Label text='alert label' type='alert' style='translucent' onClick={()=> false}/>
                         </div>
+                        <p className="docs-page__paragraph">// Custom Hex colours</p>
+                        <div className='docs-page__content-row'>
+                            <Label text='Hex: #008773' hexColor='#008773' onClick={()=> false}/>
+                            <Label text='Hex: #000FB5' hexColor='#000FB5' onClick={()=> false}/>
+                            <Label style='hollow' text='Hex: #008773' hexColor='#008773' onClick={()=> false}/>
+                            <Label style='hollow' text='Hex: #000FB5' hexColor='#000FB5' onClick={()=> false}/>
+                            <Label style='translucent' text='Hex: #008773' hexColor='#008773' onClick={()=> false}/>
+                            <Label style='translucent' text='Hex: #000FB5' hexColor='#000FB5' onClick={()=> false}/>
+                        </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <Label text='default label' onClick={()=> false}/>
@@ -211,6 +252,14 @@ export default class LabelsDoc extends React.Component {
                         <Label text='primary label' type='primary' style='translucent' onClick={()=> false}/>
                         <Label text='success label' type='success' style='translucent' onClick={()=> false}/>
                         <Label text='alert label' type='alert' style='translucent' onClick={()=> false}/>
+
+                        // Custom Hex colours
+                        <Label text='Hex: #008773' hexColor='#008773' onClick={()=> false}/>
+                        <Label text='Hex: #000FB5' hexColor='#000FB5' onClick={()=> false}/>
+                        <Label style='hollow' text='Hex: #008773' hexColor='#008773' onClick={()=> false}/>
+                        <Label style='hollow' text='Hex: #000FB5' hexColor='#000FB5' onClick={()=> false}/>
+                        <Label style='translucent' text='Hex: #008773' hexColor='#008773' onClick={()=> false}/>
+                        <Label style='translucent' text='Hex: #000FB5' hexColor='#000FB5' onClick={()=> false}/>
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -223,6 +272,7 @@ export default class LabelsDoc extends React.Component {
                     <Prop name='size' isRequired={false} type='small | normal | large' default='normal' description='Specifies a small, normal or large label.'/>
                     <Prop name='noTransform' isRequired={false} type='boolean' default='false' description='Transforms text to uppercase.'/>
                     <Prop name='style' isRequired={false} type='filled | hollow | translucent' default='filled' description='Label may have one of these styles - filled (default), hollow or translucent.'/>
+                    <Prop name='hexColor' isRequired={false} type='string' default='/' description='Define a custom Hex colour for the label.'/>
                 </PropsList>
             </section>
         )

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>
         )
     }