superdesk-ui-framework 4.0.46 → 4.0.48

package/examples/pages/components/LeftNavigations.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
-import { Container, Heading, LeftMenu, Prop, PropsList, SimpleList, SimpleListItem } from '../../../app-typescript';
+import {Container, Heading, LeftMenu, Prop, PropsList, SimpleList, SimpleListItem} from '../../../app-typescript';
 
 export default class LeftNavigationsDoc extends React.Component<{}> {
     render() {
-
         return (
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Left navigation</h2>
 
-                <Markup.ReactMarkupCodePreview>{`
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <LeftMenu 
                         activeItemId='1' 
                         groups={[
@@ -30,28 +30,52 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
                 <h3 className="docs-page__h3">Default</h3>
                 <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="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>
+                                        <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'}
+                                <LeftMenu
+                                    ariaLabel={'Left navigation'}
                                     className={'docs-page__grid-page-example__side'}
-                                    activeItemId='3' 
+                                    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>
+                                        {
+                                            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>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         <LeftMenu 
                             ariaLabel={'Left navigation'}
                             className={'docs-page__grid-page-example__side'}
@@ -77,109 +101,240 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
                     </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>
+                <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="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>
+                                        <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'
+                                <LeftMenu
+                                    ariaLabel={'Left navigation'}
+                                    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' }
-                                        ]}
+                                        {
+                                            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>
+                                    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
+                                                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>
+                                        </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
+                                                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>
+                                        <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
+                                                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>
+                                        <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
+                                                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>
+                                        <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
+                                                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>
+                                        <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
+                                                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>
+                                        <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
+                                                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>
+                                    </SimpleList>
                                 </div>
                             </div>
                         </div>
-                    </Markup.ReactMarkupPreview> 
+                    </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>
                         {`
                             <LeftMenu
@@ -207,26 +362,98 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
                             />
                                 
                             <div id='#scrollContainer'>...</div>
-                        `}  
+                        `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <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='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.'/>
+                    <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="menuitem label"
+                        isRequired={true}
+                        type="string"
+                        default="/"
+                        description="Menugroup label text value."
+                    />
+                    <Prop
+                        name="menuitem ref"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Menugroup ref."
+                    />
+                    <Prop
+                        name="menuitem route"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Menugroup route value."
+                    />
+                    <Prop
+                        name="menuitem onCLick"
+                        isRequired={true}
+                        type="string"
+                        default="/"
+                        description="On click function."
+                    />
+                    <Prop
+                        name="scrollSpy"
+                        isRequired={false}
+                        type="string"
+                        default="HTML"
+                        description="Name of the element of scrollable container."
+                    />
+                    <Prop
+                        name="offset"
+                        isRequired={false}
+                        type="number"
+                        default="-300"
+                        description="Offset value that adjusts to determine the elements are in the viewport."
+                    />
+                    <Prop
+                        name="activeItemId"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Id of active item"
+                    />
+                    <Prop
+                        name="scrollTo"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Ref of active item."
+                    />
                 </PropsList>
             </section>
-        )
+        );
     }
 }

package/examples/pages/components/ListItems.tsx

@@ -1,13 +1,14 @@
-import * as React from "react";
-import * as Markup from "../../js/react";
-import { ListItemLoader, PropsList } from "../../../app-typescript";
+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>{`
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <ListItemLoader />
                 `}
                 </Markup.ReactMarkupCodePreview>
@@ -23,12 +24,10 @@ export default class ListItemsDoc extends React.Component {
                         <ListItemLoader />
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
-                
-                <h3 className="docs-page__h3">Props</h3>
-                <PropsList>
 
-                </PropsList>
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList></PropsList>
             </section>
-        )
+        );
     }
 }

package/examples/pages/components/Loader.tsx

@@ -5,20 +5,21 @@ import {Loader} from '../../../app-typescript';
 export default class LoaderDoc extends React.Component {
     render() {
         return (
-            <section className='docs-page__container'>
-                <h2 className='docs-page__h2'>Loader</h2>
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Loader</h2>
 
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <Loader />
                     </Markup.ReactMarkupPreview>
 
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         <Loader />
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
             </section>
-        )
+        );
     }
 }