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

package/examples/pages/react/Index.tsx

@@ -6,7 +6,6 @@ import { ButtonGroup, Button, NavButton, Dropdown } from '../../../app-typescrip
 import {
     Switch,
     Route,
-
 } from "react-router-dom";
 
 import InputsDoc from './Inputs';
@@ -24,10 +23,11 @@ import TooltipDoc from './Tooltips';
 import DatePickerDoc from './DatePicker';
 import TimePickerDoc from './TimePicker';
 import SwitchDoc from './Switch';
-import RadiosDoc from './Radios';
+import RadioGroupDoc from './RadioGroup';
 import CheckboxsDoc from './Checkboxs';
 import TabsDoc from './Tabs';
 import LeftNavigationsDoc from './LeftNavigations';
+import QuickNavBarDoc from './QuickNavigationBar';
 import NavButtonsDoc from './NavButtons';
 import IconFontDoc from './IconFont';
 import BigIconFontDoc from './BigIconFont';
@@ -43,9 +43,21 @@ import ModalDoc from './Modal';
 import CarouselDoc from './Carousel';
 import ContentDividerDoc from './ContentDivider';
 import ToggleboxDocs from './Togglebox';
+import ListItemsDoc from './ListItems';
+import PanelDoc from './Panel';
+import SelectGridDocs from './SelectGrid';
+import IconPickerDocs from "./IconPicker";
+import SimpleListDoc from "./SimpleList";
+import BoxedListDoc from "./BoxedList";
+import HeadingDoc from "./Heading";
+import TextDoc from "./Text";
+import ContainerDoc from './Container';
+import DropZoneDoc from './DropZone';
 
 import * as Playgrounds from '../playgrounds/react-playgrounds/Index';
 import { SelectWithTemplateDocs } from './SelectWithTemplate';
+import { MultiselectDocs } from './MultiSelect';
+import { TreeSelectDocs } from './TreeSelect';
 import { PopoverDoc } from './Popover';
 import { MenuDocs } from './Menu';
 
@@ -115,6 +127,9 @@ const pages = {
             'left-navigation': {
                 name: 'Left navigation'
             },
+            'Quick-navigation-bar': {
+                name: 'Quick navigation bar'
+            },
             'sub-navigation': {
                 name: 'Sub navigation bar'
             },
@@ -123,26 +138,57 @@ const pages = {
     containerComponents: {
         name: "Containers",
         items: {
+            'container': {
+                name: 'Container component'
+            },
             'empty-states': {
                 name: 'Empty states'
             },
             'grid-item': {
                 name: 'Grid Item'
             },
+            'panel': {
+                name: 'Panel'
+            },
         }
     },
     layoutComponents: {
         name: "Layout",
         items: {
-            'grid-list': {
-                name: 'Grid List'
-            },
             'content-divider': {
                 name: 'Content Divider'
             },
             "togglebox": {
                 name: "Togglebox"
-            }
+            },
+        }
+    },
+    textComponents: {
+        name: "Text",
+        items: {
+            'heading': {
+                name: 'Heading component'
+            },
+            'text': {
+                name: 'Text component'
+            },
+        }
+    },
+    listComponents: {
+        name: "Lists",
+        items: {
+            'grid-list': {
+                name: 'Grid List'
+            },
+            'list-items': {
+                name: 'List items'
+            },
+            'simple-list': {
+                name: 'Simple list'
+            },
+            'boxed-list': {
+                name: 'Boxed list'
+            },
         }
     },
     formComponents: {
@@ -160,24 +206,39 @@ const pages = {
             'select': {
                 name: 'Select',
             },
+            'select-grid': {
+                name: 'Select Grid',
+            },
             'select-with-template': {
                 name: 'Select with template',
             },
+            'multiselect': {
+                name: 'MultiSelect',
+            },
+            'treeselect': {
+                name: 'TreeSelect',
+            },
             'date-picker': {
                 name: 'Date Picker',
             },
             'time-picker': {
                 name: 'Time Picker',
             },
+            'icon-picker': {
+                name: 'Icon Picker',
+            },
             'switch': {
                 name: 'Switch'
             },
-            'radio': {
-                name: 'Radio'
+            'radiogroup': {
+                name: 'RadioGroup'
             },
             'checkbox': {
                 name: 'Checkbox'
-            }
+            },
+            'dropzone': {
+                name: 'DropZone'
+            },
         }
     },
     generalComponents: {
@@ -196,40 +257,48 @@ interface IProps {
     theme?: string;
 }
 interface IState {
-    theme: 'dark' | 'light' | string;
+    theme: 'dark-ui' | 'light-ui' | string;
 }
 
 class ReactDoc extends React.Component<IProps, IState> {
     constructor(props: IProps) {
         super(props);
         this.state = {
-            theme: 'light',
+            theme: 'light-ui',
         }
         this.handleTheme = this.handleTheme.bind(this);
     }
+
     handleTheme(newTheme: string) {
+        document.body.setAttribute('data-theme', newTheme);
+
         this.setState({
             theme: newTheme
         })
     }
+
+    checkTheme(theme: string) {
+        return this.state.theme === theme;
+    }
+
     render() {
         return (
             <React.Fragment>
                 <ReactNav pages={pages} />
-                <main className="docs-page__content docs-page__container-fluid" data-theme={this.state.theme}>
+                <main className="docs-page__content docs-page__container-fluid">
                     <div className="docs-page__fla-button-container">
                         <Dropdown
                             items={[
                                 {
                                     type: 'group', label: 'Chose a theme', items: [
                                         'divider',
-                                        { label: 'Light', icon: 'adjust', onSelect: () => this.handleTheme('light-ui')},
-                                        { label: 'Dark', icon: 'adjust', onSelect: () => this.handleTheme('dark-ui')},
-                                        { label: 'Accessible Light', icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui')},
+                                        { label: 'Light', icon: 'adjust', active: this.checkTheme('light-ui'), onSelect: () => this.handleTheme('light-ui') },
+                                        { label: 'Dark', icon: 'adjust', active: this.checkTheme('dark-ui'), onSelect: () => this.handleTheme('dark-ui') },
+                                        { label: 'Accessible Light', active: this.checkTheme('accessible-light-ui'), icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui') },
                                     ]
                                 },
                             ]}>
-                            <button className="docs-page__fla-button" aria-label="Change theme" onClick={()=> false}>
+                            <button className="docs-page__fla-button" aria-label="Change theme" onClick={() => false}>
                                 <i className="icon-adjust"></i>
                             </button>
                         </Dropdown>
@@ -249,14 +318,17 @@ class ReactDoc extends React.Component<IProps, IState> {
                         <Route path="/react/autocomplete" component={AutocompleteDoc} />
                         <Route path="/react/select" component={SelectsDoc} />
                         <Route path="/react/select-with-template" component={SelectWithTemplateDocs} />
+                        <Route path="/react/multiselect" component={MultiselectDocs} />
+                        <Route path="/react/treeselect" component={TreeSelectDocs} />
                         <Route path="/react/popover" component={PopoverDoc} />
                         <Route path="/react/date-picker" component={DatePickerDoc} />
                         <Route path="/react/time-picker" component={TimePickerDoc} />
                         <Route path="/react/switch" component={SwitchDoc} />
-                        <Route path="/react/radio" component={RadiosDoc} />
+                        <Route path="/react/radiogroup" component={RadioGroupDoc} />
                         <Route path="/react/checkbox" component={CheckboxsDoc} />
                         <Route path="/react/tab" component={TabsDoc} />
                         <Route path="/react/left-navigation" component={LeftNavigationsDoc} />
+                        <Route path="/react/Quick-navigation-bar" component={QuickNavBarDoc} />
                         <Route path="/react/nav-buttons" component={NavButtonsDoc} />
                         <Route path="/react/icon-font" component={IconFontDoc} />
                         <Route path="/react/big-icon-font" component={BigIconFontDoc} />
@@ -272,6 +344,16 @@ class ReactDoc extends React.Component<IProps, IState> {
                         <Route path="/react/content-divider" component={ContentDividerDoc} />
                         <Route path="/react/menu" component={MenuDocs} />
                         <Route path="/react/togglebox" component={ToggleboxDocs} />
+                        <Route path="/react/list-items" component={ListItemsDoc} />
+                        <Route path="/react/panel" component={PanelDoc} />
+                        <Route path="/react/select-grid" component={SelectGridDocs} />
+                        <Route path="/react/icon-picker" component={IconPickerDocs} />
+                        <Route path="/react/simple-list" component={SimpleListDoc} />
+                        <Route path="/react/boxed-list" component={BoxedListDoc} />
+                        <Route path="/react/heading" component={HeadingDoc} />
+                        <Route path="/react/text" component={TextDoc} />
+                        <Route path="/react/container" component={ContainerDoc} />
+                        <Route path="/react/dropzone" component={DropZoneDoc} />
                         <Route path="/" component={ReactDefault} />
                     </Switch>
                 </main>
@@ -296,10 +378,9 @@ class ReactPlayground extends React.Component<IProps> {
 
 const parsePlayground = ({ match }, playgrounds) => {
     const Component = Playgrounds[playgrounds[match.params.id].component];
-
     return (
         <Component />
     );
 };
 
-export { ReactDoc, ReactPlayground };
+export { ReactDoc, ReactPlayground };

package/examples/pages/react/Inputs.tsx

@@ -9,6 +9,7 @@ interface IState {
     required: boolean;
     disabled: boolean;
     invalid: boolean;
+    value: number;
 }
 
 export default class InputsDoc extends React.Component<{}, IState> {
@@ -18,7 +19,8 @@ export default class InputsDoc extends React.Component<{}, IState> {
             inlineLabel: false,
             required: true,
             disabled: false,
-            invalid: false
+            invalid: false,
+            value: null
         }
     }
     
@@ -45,15 +47,17 @@ export default class InputsDoc extends React.Component<{}, IState> {
 
                             <div className='form__row'>
                                 <Input label='Input label'
-                                    value='This is some value'
+                                    value={this.state.value}
                                     maxLength={30}
+                                    type='number'
                                     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}
-                                    onChange={(value) => {}} />
+                                    tabindex={0}
+                                    onChange={(value) => this.setState({value: value})} />
                             </div>
                         </div>
 
@@ -75,6 +79,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
                 <h3 className='docs-page__h3'>Props</h3>
                 <PropsList>
                     <Prop name='value' isRequired={false} type='string' default='/' description='Item value'/>
+                    <Prop name='type' isRequired={false} type='text | number | password' default='text' description='Input type. Defaults to type text.'/>
                     <Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>
                     <Prop name='maxLength' isRequired={false} type='number' default='/' description='Sets max length for input text'/>
                     <Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
@@ -83,6 +88,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
                     <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required'/>
                     <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
                     <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>
+                    <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.'/>
                 </PropsList>
             </section>
         )

package/examples/pages/react/LeftNavigations.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
-import { LeftMenu, Prop, PropsList } from '../../../app-typescript';
+import { Container, Heading, LeftMenu, Prop, PropsList, SimpleList, SimpleListItem } from '../../../app-typescript';
 
 export default class LeftNavigationsDoc extends React.Component<{}> {
     render() {
@@ -8,8 +8,20 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
         return (
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Left navigation</h2>
-                <p className="docs-page__paragraph">...</p>
 
+                <Markup.ReactMarkupCodePreview>{`
+                    <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'}]}
+                            ]}
+                        onSelect={() => false} />
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <h3 className="docs-page__h3">Default</h3>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <div className='docs-page__content-row'>
@@ -20,23 +32,160 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
                                         <p className="sd-top-menu__header">Top menu</p>
                                     </div>
                                 </div>
-                                    <LeftMenu ariaLabel={'Left navigation'} navClass={'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' }] }]}
+                                    <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} />
                                 <div className='docs-page__grid-page-example__main'></div>
                             </div>
                         </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <LeftMenu ariaLabel={'Left navigation'} navClass={'some-optional-class'} 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' }] }]}
+                        <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} />
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
+                <h3 className="docs-page__h3">With scrollspy</h3>
+                <p className="docs-page__paragraph">The component also supports the scrollspy variant. It is necessary to add ID value to items and add the ID value of scrollable container in the <code>scrollSpy</code> attribute.</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row'>
+                            <div className='docs-page__grid-page-example'>
+                                <div className='docs-page__grid-page-example__top'>
+                                    <div className="sd-top-menu">
+                                        <a className="sd-top-menu__collapse-nav"><i className="icon-collapse icon--white"></i></a>
+                                        <p className="sd-top-menu__header">Top menu</p>
+                                    </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' }
+                                            ]}
+                                        ]}
+                                    onSelect={() => false} />
+                                <div className='docs-page__grid-page-example__main sd-padding--4' id='scrollContainer' style={{height:600}}>
+                                        <SimpleList density='comfortable'>
+                                        <SimpleListItem stacked={true} id='section1' >
+                                            <Heading type='h3'>Section 1</Heading>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                        </SimpleListItem >
+                                        <SimpleListItem stacked={true} id='section2' >
+                                            <Heading type='h3'>Section 2</Heading>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                        </SimpleListItem>
+                                        <SimpleListItem stacked={true} id='section3' >
+                                            <Heading type='h3'>Section 3</Heading>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                        </SimpleListItem>
+                                        <SimpleListItem stacked={true} id='section4' >
+                                            <Heading type='h3'>Section 4</Heading>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                        </SimpleListItem>
+                                        <SimpleListItem stacked={true} id='section5' >
+                                            <Heading type='h3'>Section 5</Heading>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                        </SimpleListItem>
+                                        <SimpleListItem stacked={true} id='section6' >
+                                            <Heading type='h3'>Section 6</Heading>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                        </SimpleListItem>
+                                        <SimpleListItem stacked={true} id='section7' >
+                                            <Heading type='h3'>Section 7</Heading>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                        </SimpleListItem>
+                                        </SimpleList>
+                                </div>
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview> 
+                    <Markup.ReactMarkupCode>
+                        {`
+                            <LeftMenu ariaLabel={'Left navigation'}
+                                className={'docs-page__grid-page-example__side'}     
+                                scrollSpy='#scrollContainer'
+                                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: '4', label: 'Section 6', ref: 'section6' },
+                                        { id: '5', label: 'Section 7', ref: 'section7' }
+                                    ]}
+                                ]}
+                                onSelect={() => false} />
+                                
+                            <div id='#scrollContainer'>...</div>
+                        `}  
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
@@ -46,7 +195,10 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
                     <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='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.'/>
                 </PropsList>
+
             </section>
         )
     }

package/examples/pages/react/ListItems.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import * as Markup from "../../js/react";
+import { ListItemLoader, PropsList } from "../../../app-typescript";
+
+export default class ListItemsDoc extends React.Component {
+    render() {
+        return (
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">ListItemLoader</h2>
+                <Markup.ReactMarkupCodePreview>{`
+                    <ListItemLoader />
+                `}
+                </Markup.ReactMarkupCodePreview>
+                <h3 className="docs-page__h3 docs-page__h3--small-top-m">Skeleton type loader for list items.</h3>
+                {/* <p className="docs-page__paragraph">Basic layout structure for list elements. The content inside the elements serves just as an example.</p> */}
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className="docs-page__content-row">
+                            <ListItemLoader />
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <ListItemLoader />
+                    `}</Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+                
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+
+                </PropsList>
+            </section>
+        )
+    }
+}

package/examples/pages/react/Modal.tsx

@@ -27,19 +27,19 @@ export default class ModalDoc extends React.Component<{}, IState> {
 
     render() {
         const modalFullFooter=(
-            <ButtonGroup align="right">
+            <ButtonGroup align="end">
                 <Button text='Cancel' onClick={() => {this.setState({modalFull:false})}}/>
                 <Button type='primary' text='Save' onClick={() => {}}/>
             </ButtonGroup>
         );
         const modalLargeFooter=(
-            <ButtonGroup align="right">
+            <ButtonGroup align="end">
                 <Button text='Cancel' onClick={() => {this.setState({modalLarge:false})}}/>
                 <Button type='primary' text='Save' onClick={() => {}}/>
             </ButtonGroup>
         );
         const modalXLargeFooter=(
-            <ButtonGroup align="right">
+            <ButtonGroup align="end">
                 <Button text='Cancel' onClick={() => {this.setState({modalXLarge:false})}}/>
                 <Button type='primary' text='Save' onClick={() => {}}/>
             </ButtonGroup>
@@ -60,7 +60,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
                 </p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <ButtonGroup align="right">
+                        <ButtonGroup align="end">
                             <Button text="Basic (no size)" onClick={() => this.setState({modalBasic: true})} />
                             <Button text="Small" onClick={() => this.setState({modalSmall: true})} />
                             <Button text="Medium" onClick={() => this.setState({modalMedium: true})} />
@@ -144,7 +144,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
                         // Large
                         <Button text="Large with footer" onClick={() => this.setState({modalLarge: true})} />
                         const modalLargeFooter=(
-                            <ButtonGroup align="right">
+                            <ButtonGroup align="end">
                                 <Button text='Cancel' onClick={() => {this.setState({modalLarge:false})}}/>
                                 <Button type='primary' text='Save' onClick={() => {}}/>
                             </ButtonGroup>
@@ -159,7 +159,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
                         // Extra large
                         <Button text="Extra Large with footer" onClick={() => this.setState({modalXLarge: true})} />
                         const modalXLargeFooter=(
-                            <ButtonGroup align="right">
+                            <ButtonGroup align="end">
                                 <Button text='Cancel' onClick={() => {this.setState({modalXLarge:false})}}/>
                                 <Button type='primary' text='Save' onClick={() => {}}/>
                             </ButtonGroup>
@@ -203,7 +203,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
                     <Markup.ReactMarkupCode>{`
                         <Button text="Open Modal" onClick={() => this.setState({modalFull: true})} />
                         const modalFullFooter=(
-                            <ButtonGroup align="right">
+                            <ButtonGroup align="end">
                                 <Button text='Cancel' onClick={() => {this.setState({modalFull:false})}}/>
                                 <Button type='primary' text='Save' onClick={() => {}}/>
                             </ButtonGroup>