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

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

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>
@@ -187,6 +187,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
                                visible={this.state.modalFull} 
                                theme='dark'
                                maximized={true}
+                               className='testClass'
                                onHide={() => {this.setState({modalFull: false})}}>
                             <p className="sd-margin-b--3">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes,
                             nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
@@ -203,7 +204,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>