superdesk-ui-framework 2.4.21 → 3.0.0-rc12

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>

package/examples/pages/react/MultiSelect.tsx

@@ -0,0 +1,201 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import { PropsList, Prop } from '../../../app-typescript';
+import { MultiSelect } from '../../../app-typescript';
+
+interface IColor {
+    name: string;
+    colorCode?: string;
+}
+
+interface IState {
+    value: any;
+    value2: any;
+}
+
+const ItemArr: Array<IColor> = [
+    {name: 'Red', colorCode: '#FF0000'},
+    {name: 'Cyan', colorCode: '#00FFFF'},
+    {name: 'Blue', colorCode: '#0000FF'},
+    {name: 'DarkBlue', colorCode: '#0000A0'},
+    {name: 'Purple', colorCode: '#800080'},
+    {name: 'Yellow', colorCode: '#FFFF00'},
+    {name: 'Lime', colorCode: '#00FF00'},
+    {name: 'Magenta', colorCode: '#FF00FF'},
+    {name: 'Silver', colorCode: '#C0C0C0'},
+    {name: 'Gray', colorCode: '#808080'},
+    {name: 'Black', colorCode: '#000000'},
+    {name: 'Orange', colorCode: '#FFA500'},
+    {name: 'Brown', colorCode: '#A52A2A'},
+    {name: 'Maroon', colorCode: '#800000'},
+    {name: 'Green', colorCode: '#008000'},
+    {name: 'Olive', colorCode: '#808000'},
+];
+
+export class MultiselectDocs extends React.Component<{}, IState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: null,
+            value2: null,
+        }
+    }
+
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>MultiSelect</h2>
+
+                <Markup.ReactMarkupCodePreview>{`
+                    <MultiSelect
+                        value={this.state.value2}
+                        options={ItemArr}
+                        onChange={(e: any) => this.setState({value2: e.value})}
+                        placeholder='Select Item'
+                        optionLabel='name'
+                    />
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <MultiSelect
+                                    value={this.state.value}
+                                    options={ItemArr}
+                                    onChange={(e: any) => this.setState({value: e.value})}
+                                    filter
+                                    showSelectAll
+                                    placeholder='Select a color'
+                                    optionLabel='name'
+                                    required
+                                    tabindex={1}
+                                    label={'This is Label'}
+                                    info={'This is info'}
+                                />
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <MultiSelect
+                            value={this.state.value}
+                            options={ItemArr}
+                            onChange={(e: any) => this.setState({value: e.value})}
+                            filter
+                            showSelectAll
+                            placeholder='Select a color'
+                            optionLabel='name'
+                            required
+                            tabindex={1}
+                            label={'This is Label'}
+                            info={'This is info'}
+                        />
+                    `}</Markup.ReactMarkupCode>
+
+                </Markup.ReactMarkup>
+
+                <p className='docs-page__paragraph'>MultiSelect with custom template.</p>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <MultiSelect
+                                    value={this.state.value2}
+                                    options={ItemArr}
+                                    onChange={(e: any) => this.setState({value2: e.value})}
+                                    filter
+                                    showSelectAll
+                                    optionLabel='name'
+                                    itemTemplate={(option) => {
+                                        if (option) {
+                                            return (
+                                                <div style={{display: 'flex', alignItems: 'center'}}>
+                                                    <div style={{width: 10, height: 10, marginInlineEnd: 10, backgroundColor: option.colorCode}} />
+                                                    <div>{option.name}</div>
+                                                </div>
+                                            );
+                                        }
+                                    }}
+                                    selectedItemTemplate={(option) => {
+                                        if (option == null) {
+                                            return (
+                                                <div>Select a color</div>
+                                            );
+                                        } else {
+                                            return (
+                                                <div className='p-multiselect-token'>
+                                                    <span style={{width: 10, height: 10, marginInlineEnd: 10, backgroundColor: option.colorCode}} />
+                                                    <span className='p-multiselect-token-label'>{option.name}</span>
+                                                </div>
+                                            );
+                                        }
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <MultiSelect
+                            value={this.state.value2}
+                            options={ItemArr}
+                            onChange={(e: any) => this.setState({value2: e.value})}
+                            filter
+                            showSelectAll
+                            optionLabel='name'
+                            itemTemplate={(option) => {
+                                if (option) {
+                                    return (
+                                        <div style={{display: 'flex', alignItems: 'center'}}>
+                                            <div style={{width: 10, height: 10, marginInlineEnd: 10, backgroundColor: option.colorCode}} />
+                                            <div>{option.name}</div>
+                                        </div>
+                                    );
+                                }
+                            }}
+                            selectedItemTemplate={(option) => {
+                                if (option == null) {
+                                    return (
+                                        <div>Select a color</div>
+                                    );
+                                } else {
+                                    return (
+                                        <div className='p-multiselect-token'>
+                                            <span style={{width: 10, height: 10, marginInlineEnd: 10, backgroundColor: option.colorCode}} />
+                                            <span className='p-multiselect-token-label'>{option.name}</span>
+                                        </div>
+                                    );
+                                }
+                            }}
+                        />
+                    `}</Markup.ReactMarkupCode>
+
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+                    <Prop name='value' isRequired={true} type='Array<T>' default='/' description='Value of the component.'/>
+                    <Prop name='options' isRequired={true} type='Array<T>' default='/' description='An array of selectitems to display as the available options.'/>
+                    <Prop name='optionLabel' isRequired={true} type='string' default='/' description='Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options and decides which field or fields to search against.'/>
+                    <Prop name='placeholder' isRequired={false} type='string' default='/' description='Label to display when there are no selections.'/>
+                    <Prop name='filter' isRequired={false} type='boolean' default='false' description='When specified, displays an input field to filter the items on keyup.'/>
+                    <Prop name='filterPlaceholder' isRequired={false} type='string' default='/' description='Placeholder text to show when filter input is empty.'/>
+                    <Prop name='emptyFilterMessage' isRequired={false} type='string' default='No results found' description='Template to display when filtering does not return any results.'/>
+                    <Prop name='maxSelectedLabels' isRequired={false} type='number' default='/' description='Decides how many selected item labels to show at most. Its necessary to use selectedItemTemplate.'/>
+                    <Prop name='selectedItemsLabel' isRequired={false} type='string' default='{0} items selected' description='Label to display after exceeding max selected labels.'/>
+                    <Prop name='ariaLabelledBy' isRequired={false} type='string' default='/' description='Establishes relationships between the component and label(s) where its value should be one or more element IDs.'/>
+                    <Prop name='tabIndex' isRequired={false} type='string' default="'0'" description='Index of the element in tabbing order.'/>
+                    <Prop name='showClear' isRequired={false} type='boolean' default='false' description='When enabled, a clear icon is displayed to clear the value.'/>
+                    <Prop name='showSelectAll' isRequired={false} type='boolean' default='false' description='Whether to show the select all checkbox inside the panel header.'/>
+                    <Prop name='itemTemplate' isRequired={false} type='function' default='/' description='Function that gets the option and returns the content for it.'/>
+                    <Prop name='selectedItemTemplate' isRequired={false} type='function' default='/' description='Function that gets an item in the value and returns the content for it.'/>
+                    <Prop name='onChange' isRequired={true} type='function' default='/' description='Callback to invoke when value changes.'/>
+                </PropsList>
+
+            </section>
+        )
+    }
+}

package/examples/pages/react/NavButtons.tsx

@@ -18,13 +18,13 @@ export default class NavButtonsDoc extends React.Component {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <SubNav zIndex={2}>
-                            <ButtonGroup align='left'>
+                            <ButtonGroup align='start' spaces='no-space'>
                                 <Tooltip text='Filters' flow='right'>
                                     <NavButton icon='filter-large' type='darker' state="active" text="Filter" onClick={() => false} />
                                 </Tooltip>
                                 <NavButton icon='search' text="Search" onClick={() => false} />
                             </ButtonGroup>
-                            <ButtonGroup align='right'>
+                            <ButtonGroup align='end' spaces='no-space'>
                                 <NavButton icon='list-plus' text="Add to list" onClick={() => false} />
                                 <Tooltip text='More actions' flow='down'>
                                     <NavButton icon='dots-vertical' text="More actions" onClick={() => false} />
@@ -37,13 +37,13 @@ export default class NavButtonsDoc extends React.Component {
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <SubNav zIndex={2}>
-                            <ButtonGroup align='left'>
+                            <ButtonGroup align='start' spaces='no-space'>
                                 <Tooltip text='Filters' flow='right'>
                                     <NavButton icon='filter-large' type='darker' state="active" text="Filter" onClick={() => false} />
                                 </Tooltip>
                                 <NavButton icon='search' text="Search" onClick={() => false} />
                             </ButtonGroup>
-                            <ButtonGroup align='right'>
+                            <ButtonGroup align='end' spaces='no-space'>
                                 <NavButton icon='list-plus' text="Add to list" onClick={() => false} />
                                 <Tooltip text='More actions' flow='down'>
                                     <NavButton icon='dots-vertical' text="More actions" onClick={() => false} />
@@ -56,13 +56,43 @@ export default class NavButtonsDoc extends React.Component {
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
+                <h3 className="docs-page__h3">Styles / Types</h3>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <SubNav zIndex={2}>
+                            <ButtonGroup align='start' spaces='no-space'>
+                                <NavButton icon='adjust' type='default' text="Adjust" onClick={() => false} />
+                                <NavButton icon='eye-open' type='darker' text="View" onClick={() => false} />
+                                <NavButton icon='refresh' type='dark' text="Refresh" onClick={() => false} />
+                            </ButtonGroup>
+                            <ButtonGroup align='end' spaces='no-space'>
+                                <NavButton icon='edit-line' type='primary' text="Edit" onClick={() => false} />
+                                <NavButton icon='expand-thin' type='highlight' text="Expand" onClick={() => false} />
+                            </ButtonGroup>
+                        </SubNav>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <SubNav zIndex={2}>
+                            <ButtonGroup align='start' spaces='no-space'>
+                                <NavButton icon='adjust' type='default' text="Adjust" onClick={() => false} />
+                                <NavButton icon='eye-open' type='darker' text="View" onClick={() => false} />
+                                <NavButton icon='refresh' type='dark' text="Refresh" onClick={() => false} />
+                            </ButtonGroup>
+                            <ButtonGroup align='end' spaces='no-space'>
+                                <NavButton icon='edit-line' type='primary' text="Edit" onClick={() => false} />
+                                <NavButton icon='expand-thin' type='highlight' text="Expand" onClick={() => false} />
+                            </ButtonGroup>
+                        </SubNav>       
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
                     <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.' />
                     <Prop name='text' isRequired={false} type='string' default='/' description='Defines the value for aria-label, for screen-readers accessibility.' />
                     <Prop name='iconSize' isRequired={false} type='small | big' default='small' description='Specifies a small or big button' />
-                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.).' />
+                    <Prop name='type' isRequired={false} type='default | primary | highlight | darker | dark' default='default' description='Default + colour variations.' />
                     <Prop name='state' isRequired={false} type='normal | active' default='normal' description='Defines the optional state of the button (e.g. active)' />
                     <Prop name='theme' isRequired={false} type='light | dark' default='light' description='Styles nav button for diffrent background.' />
                     <Prop name='value' isRequired={false} type='button | submit | reset' default='button' description='Specifies a value of nav button' />