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

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

@@ -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,26 @@ 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'},
+                                ]},
+                                { label: 'WORKFLOW', items: [
+                                    { id: '4', label: 'Desk' },
+                                    { id: '5', label: 'User Roles & Privileges'},
+                                ]}
+                            ]}
+                        onSelect={() => false}
+                    />
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <h3 className="docs-page__h3">Default</h3>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <div className='docs-page__content-row'>
@@ -20,32 +38,193 @@ 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' }] }]}
-                                        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'} 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' }] }]}
-                            onSelect={() => false} />
+                        <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}
+                                    //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'>
+                                        <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'
+                                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: '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>
-                    <Prop name='groups' isRequired={true} type='Array<menugroup>' default='/' description='Array of groups'/>
-                    <Prop name='activeItemId' isRequired={true} type='string' default='/' description='Id of active item'/>
+                    <Prop name='groups' isRequired={true} type='Array<menugroup>' default='/' description='Array of groups.'/>
                     <Prop name='menugroup label' isRequired={true} type='string' default='/' description='Menugroup label text value.'/>
-                    <Prop name='menugroup items' isRequired={true} type='Array<menuitem>' default='/' description='Array of items'/>
-                    <Prop name='menuitem id' isRequired={true} type='string' default='/' description='Menugroup id value'/>
+                    <Prop name='menugroup items' isRequired={true} type='Array<menuitem>' default='/' description='Array of items.'/>
+                    <Prop name='menuitem id' isRequired={true} type='string' default='/' description='Menugroup id value.'/>
                     <Prop name='menuitem label' isRequired={true} type='string' default='/' description='Menugroup label text value.'/>
+                    <Prop name='menuitem ref' isRequired={false} type='string' default='/' description='Menugroup ref.'/>
+                    <Prop name='menuitem route' isRequired={false} type='string' default='/' description='Menugroup route value.'/>
+                    <Prop name='menuitem onCLick' isRequired={true} type='string' default='/' description='On click function.'/>
+                    <Prop name='scrollSpy' isRequired={false} type='string' default='HTML' description='Name of the element of scrollable container.'/>
+                    <Prop name='offset' isRequired={false} type='number' default='-300' description='Offset value that adjusts to determine the elements are in the viewport.'/>
+                    <Prop name='activeItemId' isRequired={false} type='string' default='/' description='Id of active item'/>
+                    <Prop name='scrollTo' isRequired={false} type='string' default='/' description='Ref of active item.'/>
                 </PropsList>
             </section>
         )

package/examples/pages/react/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>
+        )
+    }
+}