superdesk-ui-framework 2.4.21 → 3.0.1-beta.2

package/examples/pages/react/LeftNavigations.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
-import { LeftMenu, Prop, PropsList } from '../../../app-typescript';
+import { Container, Heading, LeftMenu, Prop, PropsList, SimpleList, SimpleListItem } from '../../../app-typescript';
 
 export default class LeftNavigationsDoc extends React.Component<{}> {
     render() {
@@ -8,8 +8,20 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
         return (
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Left navigation</h2>
-                <p className="docs-page__paragraph">...</p>
 
+                <Markup.ReactMarkupCodePreview>{`
+                    <LeftMenu 
+                        activeItemId='1' 
+                        groups={[
+                                { label: 'SYSTEM SETTINGS', items: [{id: '1', label: 'General'}, {id: '2', label: 'Email settings'}, {id: '3', label: 'Spell checking'}]},
+                                { label: 'WORKFLOW', items: [{ id: '4', label: 'Desk' }, { id: '5', label: 'User Roles & Privileges'}]},
+                                { label: 'CONTENT CONFIG', items: [{id: '6', label: 'Image renditions'}, {id: '7', label: 'Controlled Vocabularies'}]}
+                            ]}
+                        onSelect={() => false} />
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <h3 className="docs-page__h3">Default</h3>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <div className='docs-page__content-row'>
@@ -20,23 +32,160 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
                                         <p className="sd-top-menu__header">Top menu</p>
                                     </div>
                                 </div>
-                                    <LeftMenu ariaLabel={'Left navigation'} navClass={'docs-page__grid-page-example__side'} activeItemId='1' 
-                                        groups={[{ label: 'SYSTEM SETTINGS', items: [{ id: '1', label: 'General' }, { id: '2', label: 'Email settings' }, { id: '3', label: 'Spell checking' }] },
-                                                 { label: 'WORKFLOW', items: [{ id: '4', label: 'Desk' }, { id: '5', label: 'User Roles & Privileges' }] },
-                                                 { label: 'CONTENT CONFIG', items: [{ id: '6', label: 'Image renditions' }, { id: '7', label: 'Controlled Vocabularies' }] }]}
+                                    <LeftMenu ariaLabel={'Left navigation'} className={'docs-page__grid-page-example__side'} activeItemId='1' 
+                                        groups={[
+                                                {label: 'SYSTEM SETTINGS', items: [{id: '1', label: 'General'}, {id: '2', label: 'Email settings'}, {id: '3', label: 'Spell checking'}]},
+                                                {label: 'WORKFLOW', items: [{id: '4', label: 'Desk'}, {id: '5', label: 'User Roles & Privileges'}]},
+                                                {label: 'CONTENT CONFIG', items: [{id: '6', label: 'Image renditions'}, {id: '7', label: 'Controlled Vocabularies'}]}
+                                            ]}
                                         onSelect={() => false} />
                                 <div className='docs-page__grid-page-example__main'></div>
                             </div>
                         </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <LeftMenu ariaLabel={'Left navigation'} navClass={'some-optional-class'} activeItemId='1' groups={[{ label: 'SYSTEM SETTINGS', items: [{ id: '1', label: 'General' }, { id: '2', label: 'Email settings' }, { id: '3', label: 'Spell checking' }] },
-                            { label: 'WORKFLOW', items: [{ id: '4', label: 'Desk' }, { id: '5', label: 'User Roles & Privileges' }] },
-                            { label: 'CONTENT CONFIG', items: [{ id: '6', label: 'Image renditions' }, { id: '7', label: 'Controlled Vocabularies' }] }]}
+                        <LeftMenu ariaLabel={'Left navigation'} className={'docs-page__grid-page-example__side'} activeItemId='1' 
+                            groups={[
+                                    {label: 'SYSTEM SETTINGS', items: [{id: '1', label: 'General'}, {id: '2', label: 'Email settings'}, {id: '3', label: 'Spell checking'}]},
+                                    {label: 'WORKFLOW', items: [{id: '4', label: 'Desk'}, {id: '5', label: 'User Roles & Privileges'}]},
+                                    {label: 'CONTENT CONFIG', items: [{id: '6', label: 'Image renditions'}, {id: '7', label: 'Controlled Vocabularies'}]}
+                                ]}
                             onSelect={() => false} />
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
+                <h3 className="docs-page__h3">With scrollspy</h3>
+                <p className="docs-page__paragraph">The component also supports the scrollspy variant. It is necessary to add ID value to items and add the ID value of scrollable container in the <code>scrollSpy</code> attribute.</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row'>
+                            <div className='docs-page__grid-page-example'>
+                                <div className='docs-page__grid-page-example__top'>
+                                    <div className="sd-top-menu">
+                                        <a className="sd-top-menu__collapse-nav"><i className="icon-collapse icon--white"></i></a>
+                                        <p className="sd-top-menu__header">Top menu</p>
+                                    </div>
+                                </div>
+                                    <LeftMenu ariaLabel={'Left navigation'}
+                                        className={'docs-page__grid-page-example__side'}     
+                                        scrollSpy='#scrollContainer'
+                                        offset={-300}
+                                        activeItemId='1'
+                                        groups={[
+                                            { label: 'MAIN SECTIONS', items: [
+                                                { id: '1', label: 'Section 1', ref:'section1'},
+                                                { id: '2', label: 'Section 2', ref: 'section2' },
+                                                { id: '3', label: 'Section 3', ref: 'section3' },
+                                            
+                                            ]},
+                                            { label:'OTHER SECTIONS', items: [
+                                                { id: '4', label: 'Section 4', ref: 'section4' },
+                                                { id: '5', label: 'Section 5', ref: 'section5' }
+                                            ]},
+                                            { label:'OTHER SECTIONS', items: [
+                                                { id: '6', label: 'Section 6', ref: 'section6' },
+                                                { id: '7', label: 'Section 7', ref: 'section7' }
+                                            ]}
+                                        ]}
+                                    onSelect={() => false} />
+                                <div className='docs-page__grid-page-example__main sd-padding--4' id='scrollContainer' style={{height:600}}>
+                                        <SimpleList density='comfortable'>
+                                        <SimpleListItem stacked={true} id='section1' >
+                                            <Heading type='h3'>Section 1</Heading>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                        </SimpleListItem >
+                                        <SimpleListItem stacked={true} id='section2' >
+                                            <Heading type='h3'>Section 2</Heading>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                        </SimpleListItem>
+                                        <SimpleListItem stacked={true} id='section3' >
+                                            <Heading type='h3'>Section 3</Heading>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                        </SimpleListItem>
+                                        <SimpleListItem stacked={true} id='section4' >
+                                            <Heading type='h3'>Section 4</Heading>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                        </SimpleListItem>
+                                        <SimpleListItem stacked={true} id='section5' >
+                                            <Heading type='h3'>Section 5</Heading>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                        </SimpleListItem>
+                                        <SimpleListItem stacked={true} id='section6' >
+                                            <Heading type='h3'>Section 6</Heading>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                        </SimpleListItem>
+                                        <SimpleListItem stacked={true} id='section7' >
+                                            <Heading type='h3'>Section 7</Heading>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                            <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
+                                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
+                                            </Container>
+                                        </SimpleListItem>
+                                        </SimpleList>
+                                </div>
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview> 
+                    <Markup.ReactMarkupCode>
+                        {`
+                            <LeftMenu ariaLabel={'Left navigation'}
+                                className={'docs-page__grid-page-example__side'}     
+                                scrollSpy='#scrollContainer'
+                                activeItemId='1' 
+                                groups={[
+                                    { label: 'MAIN SECTIONS', items: [
+                                        { id: '1', label: 'Section 1', ref:'section1'},
+                                        { id: '2', label: 'Section 2', ref: 'section2' },
+                                        { id: '3', label: 'Section 3', ref: 'section3' },
+                                    
+                                    ]},
+                                    {label:'OTHER SECTIONS', items: [
+                                        { id: '4', label: 'Section 4', ref: 'section4' },
+                                        { id: '5', label: 'Section 5', ref: 'section5' }
+                                    ]},
+                                    {label:'OTHER SECTIONS', items: [
+                                        { id: '4', label: 'Section 6', ref: 'section6' },
+                                        { id: '5', label: 'Section 7', ref: 'section7' }
+                                    ]}
+                                ]}
+                                onSelect={() => false} />
+                                
+                            <div id='#scrollContainer'>...</div>
+                        `}  
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
@@ -46,7 +195,10 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
                     <Prop name='menugroup items' isRequired={true} type='Array<menuitem>' default='/' description='Array of items'/>
                     <Prop name='menuitem id' isRequired={true} type='string' default='/' description='Menugroup id value'/>
                     <Prop name='menuitem label' isRequired={true} type='string' default='/' description='Menugroup label text value.'/>
+                    <Prop name='scrollSpy' isRequired={false} type='string' default='HTML' description='Name of the element of scrollable container.'/>
+                    <Prop name='offset' isRequired={false} type='number' default='-300' description='Offset value that adjusts to determine the elements are in the viewport.'/>
                 </PropsList>
+
             </section>
         )
     }

package/examples/pages/react/ListItems.tsx

@@ -6,13 +6,13 @@ export default class ListItemsDoc extends React.Component {
     render() {
         return (
             <section className="docs-page__container">
-                <h2 className="docs-page__h2">List Items</h2>
+                <h2 className="docs-page__h2">ListItemLoader</h2>
                 <Markup.ReactMarkupCodePreview>{`
                     <ListItemLoader />
                 `}
                 </Markup.ReactMarkupCodePreview>
-                <h3 className="docs-page__h3 docs-page__h3--small-top-m">Loader type of 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>
+                <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">

package/examples/pages/react/Modal.tsx

@@ -1,9 +1,13 @@
 import * as React from "react";
 import * as Markup from "../../js/react";
-import { Button, Modal, PropsList, Prop } from "../../../app-typescript";
+import { Button, ButtonGroup, Modal, PropsList, Prop } from "../../../app-typescript";
 
 interface IState {
-    modalVisible: boolean;
+    modalBasic: boolean;
+    modalSmall: boolean;
+    modalMedium: boolean;
+    modalLarge: boolean;
+    modalXLarge: boolean;
     modalFull: boolean;
 }
 
@@ -12,12 +16,34 @@ export default class ModalDoc extends React.Component<{}, IState> {
         super(props);
 
         this.state = {
-            modalVisible: false,
+            modalBasic: false,
+            modalSmall: false,
+            modalMedium: false,
+            modalLarge: false,
+            modalXLarge: false,
             modalFull: false
         }
     }
 
     render() {
+        const modalFullFooter=(
+            <ButtonGroup align="end">
+                <Button text='Cancel' onClick={() => {this.setState({modalFull:false})}}/>
+                <Button type='primary' text='Save' onClick={() => {}}/>
+            </ButtonGroup>
+        );
+        const modalLargeFooter=(
+            <ButtonGroup align="end">
+                <Button text='Cancel' onClick={() => {this.setState({modalLarge:false})}}/>
+                <Button type='primary' text='Save' onClick={() => {}}/>
+            </ButtonGroup>
+        );
+        const modalXLargeFooter=(
+            <ButtonGroup align="end">
+                <Button text='Cancel' onClick={() => {this.setState({modalXLarge:false})}}/>
+                <Button type='primary' text='Save' onClick={() => {}}/>
+            </ButtonGroup>
+        );
         return (
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Modal</h2>
@@ -34,37 +60,164 @@ export default class ModalDoc extends React.Component<{}, IState> {
                 </p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <Button text="Open Modal" onClick={() => this.setState({modalVisible: true})} />
-                        <Modal visible={this.state.modalVisible} onHide={() => {this.setState({modalVisible: false})}}>
-                            <p>This is some content inside modal</p>
+                        <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})} />
+                            <Button text="Large with footer" onClick={() => this.setState({modalLarge: true})} />
+                            <Button text="Extra Large with footer" onClick={() => this.setState({modalXLarge: true})} />
+                        </ButtonGroup>
+
+                        <Modal headerTemplate="Basic modal"
+                               visible={this.state.modalBasic}
+                               onHide={() => {this.setState({modalBasic: false})}}>
+                            <p>This modal has no fixed size. It will adapt its size based on the content inside.</p>
+                        </Modal>
+
+                        <Modal headerTemplate="Small modal header"
+                               visible={this.state.modalSmall}
+                               size='small' onHide={() => {this.setState({modalSmall: false})}}>
+                            <p>Small modal content. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, 
+                            ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.</p>
+                        </Modal>
+                        
+                        <Modal headerTemplate="Medium modal header"
+                               visible={this.state.modalMedium}
+                               size='medium' onHide={() => {this.setState({modalMedium: false})}}>
+                            <p>Medium modal content. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum.
+                            Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non
+                            commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis
+                            ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.</p>
+                        </Modal>
+                        
+                        <Modal headerTemplate="Large modal header"
+                               visible={this.state.modalLarge}
+                               footerTemplate={modalLargeFooter}
+                               size='large' onHide={() => {this.setState({modalLarge: false})}}>
+                            <p>Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+                            Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur
+                            purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit
+                            sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Vivamus sagittis lacus vel augue
+                            laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+                            Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
+                            eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+                        </Modal>
+
+                        <Modal headerTemplate="Extra large modal"
+                               visible={this.state.modalXLarge}
+                               footerTemplate={modalXLargeFooter}
+                               size='x-large' onHide={() => {this.setState({modalXLarge: false})}}>
+                            <p className="sd-margin-b--3">Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh
+                            ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
+                            Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis.</p>
+
+                            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
+                            nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh 
+                            ultricies vehicula ut id elit.</p>
                         </Modal>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <Button text="Open Modal" onClick={() => this.setState({modalVisible: true})} />
-                        <Modal visible={this.state.modalVisible} onHide={() => {this.setState({modalVisible: false})}}>
-                            <p>This is some content inside modal</p>
+                        // Basic
+                        <Button text="Basic (no size)" onClick={() => this.setState({modalBasic: true})} />
+                        <Modal headerTemplate="Basic modal"
+                               visible={this.state.modalBasic}
+                               onHide={() => {this.setState({modalBasic: false})}}>
+                            <p>Content...</p>
+                        </Modal>
+
+                        // Small
+                        <Button text="Small" onClick={() => this.setState({modalSmall: true})} />
+                        <Modal headerTemplate="Small modal header"
+                               visible={this.state.modalSmall}
+                               size='small' onHide={() => {this.setState({modalSmall: false})}}>
+                            <p>Content...</p>
+                        </Modal>
+
+                        // Medium
+                        <Button text="Medium" onClick={() => this.setState({modalMedium: true})} />
+                        <Modal headerTemplate="Medium modal header"
+                               visible={this.state.modalMedium}
+                               size='medium' onHide={() => {this.setState({modalMedium: false})}}>
+                            <p>Content...</p>
+                        </Modal>
+
+                        // Large
+                        <Button text="Large with footer" onClick={() => this.setState({modalLarge: true})} />
+                        const modalLargeFooter=(
+                            <ButtonGroup align="end">
+                                <Button text='Cancel' onClick={() => {this.setState({modalLarge:false})}}/>
+                                <Button type='primary' text='Save' onClick={() => {}}/>
+                            </ButtonGroup>
+                        );
+                        <Modal headerTemplate="Large modal header"
+                               visible={this.state.modalLarge}
+                               footerTemplate={modalLargeFooter}
+                               size='large' onHide={() => {this.setState({modalLarge: false})}}>
+                            <p>Content...</p>
+                        </Modal>
+
+                        // Extra large
+                        <Button text="Extra Large with footer" onClick={() => this.setState({modalXLarge: true})} />
+                        const modalXLargeFooter=(
+                            <ButtonGroup align="end">
+                                <Button text='Cancel' onClick={() => {this.setState({modalXLarge:false})}}/>
+                                <Button type='primary' text='Save' onClick={() => {}}/>
+                            </ButtonGroup>
+                        );
+                        <Modal headerTemplate="Extra large modal"
+                               visible={this.state.modalXLarge}
+                               footerTemplate={modalXLargeFooter}
+                               size='x-large' onHide={() => {this.setState({modalXLarge: false})}}>
+                            <p className="sd-margin-b--3">Content...</p>
+                            <p>...</p>
                         </Modal>
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
-                <h3 className="docs-page__h3">Full Modal Options</h3>
+                <h3 className="docs-page__h3">Maximised modal</h3>
                 <p className="docs-page__paragraph">
-                    This is modal with all configurations set
+                    Maximised modal with footer template and forced dark theme.
                 </p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <Button text="Open Modal" onClick={() => this.setState({modalFull: true})} />
-                        <Modal headerTemplate="This is some header test"
-                            visible={this.state.modalFull} 
-                            onHide={() => {this.setState({modalFull: false})}}>
-                            <p>This is some content inside modal</p>
+                        <Modal headerTemplate="Another modal header"
+                               footerTemplate={modalFullFooter}
+                               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.
+                            Vestibulum id ligula porta felis euismod semper.</p>
+
+                            <p className="sd-margin-b--3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
+                            eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.</p>
+
+                            <p>Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh
+                            ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
+                            Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis.</p>
                         </Modal>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <Button text="Open Modal" onClick={() => this.setState({modalVisible: true})} />
-                        <Modal visible={this.state.modalVisible} onHide={() => {this.setState({modalVisible: false})}}>
-                            <p>This is some content inside modal</p>
+                        <Button text="Open Modal" onClick={() => this.setState({modalFull: true})} />
+                        const modalFullFooter=(
+                            <ButtonGroup align="end">
+                                <Button text='Cancel' onClick={() => {this.setState({modalFull:false})}}/>
+                                <Button type='primary' text='Save' onClick={() => {}}/>
+                            </ButtonGroup>
+                        );
+                        <Modal headerTemplate="Another modal header"
+                               footerTemplate={modalFullFooter}
+                               visible={this.state.modalFull} 
+                               theme='dark'
+                               maximized={true}
+                               onHide={() => {this.setState({modalFull: false})}}>
+                            <p className="sd-margin-b--3">...</p>
+                            <p className="sd-margin-b--3">...</p>
+                            <p>...</p>
                         </Modal>
                     `}
                     </Markup.ReactMarkupCode>
@@ -75,10 +228,12 @@ export default class ModalDoc extends React.Component<{}, IState> {
                     <Prop name='id' isRequired={false} type='string' default='null' description='Unique identifier of the element' />
                     <Prop name='className' isRequired={false} type='string' default='null' description='Style class of the component' />
                     <Prop name='theme' isRequired={false} type='light | dark' default='light' description='Item style' />
+                    <Prop name='size' isRequired={false} type='small | medium | large | x-large' default='/' description='Size of the modal. If not defined it will adapt to the width of the content.' />
                     <Prop name='visible' isRequired={true} type='boolean' default='false' description='Specifies the visibility of the dialog' />
                     <Prop name='headerTemplate' isRequired={false} type='element' default='null' description='Label of header' />
-                    <Prop name='footerTemplate' isRequired={false} type='element' default='null' description='Label of footer' />
+                    <Prop name='footerTemplate' isRequired={false} type='element' default='null' description='Name of the footer template constant, created separately.' />
                     <Prop name='closeOnEscape' isRequired={false} type='boolean' default='null' description='An array of objects to display' />
+                    <Prop name='maximized' isRequired={false} type='boolean' default='null' description='Creates a full-screen mofal id set to true.' />
                     <Prop name='onShow' isRequired={false} type='function' default='null' description='Callback to invoke after modal is opened' />
                     <Prop name='onHide' isRequired={true} type='function' default='null' description='Callback to invoke after modal is closed' />
                 </PropsList>