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

package/examples/pages/react/MultiSelect.tsx

@@ -0,0 +1,193 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import { PropsList, Prop } from '../../../app-typescript';
+import { MultiSelect } from '../../../app-typescript/components/MultiSelect';
+
+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'
+                                />
+                            </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'
+                        />
+                    `}</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.'/>
+                    <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} />

package/examples/pages/react/Panel.tsx

@@ -0,0 +1,366 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import { PropsList, Prop, Button, ButtonGroup, IconButton, Label, SlidingToolbar } from '../../../app-typescript';
+import * as PanelElements from '../../../app-typescript/components/Layouts/Panel';
+
+interface IProps {
+    children?: React.ReactNode;
+}
+
+interface IState {
+    openPanel1: boolean;
+    openPanel2: boolean;
+    openPanel3: boolean;
+    openPanel4: boolean;
+    openToolbar1: boolean;
+}
+
+export default class PanelDoc extends React.Component<IProps, IState> {
+     constructor(props: IProps) {
+         super(props);
+         this.state = {
+             openPanel1: true,
+             openPanel2: true,
+             openPanel3: true,
+             openPanel4: true,
+             openToolbar1: true
+         }
+    }
+
+    // handlePanel() {
+    //     this.setState((state) => ({
+    //         openPanel: !state.openPanel,
+    //     }));
+    // }
+
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>Panel</h2>
+                
+                <Markup.ReactMarkupCodePreview>{`
+                    <Panel  side='left' size="small">
+                        <PanelHeader title='Title for the Panel' handlePanelParent={()=> false}>
+                        </PanelHeader>
+                        <PanelContent>
+                            <PanelContentBlock>
+                                ...
+                            </PanelContentBlock>
+                        </PanelContent>
+                        <PanelFooter>
+                            <Button text='Clear' style='hollow' onClick={() => false} />
+                            <Button text='Submit' type='primary' onClick={() => false} />
+                        </PanelFooter>
+                    </Panel>
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <p className="docs-page__paragraph">...</p>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// Left</p>
+                        <div className='sd-display--flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
+                            {this.state.openPanel1 ? null : 
+                                <div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
+                                    <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel1': true})} />
+                                </div> 
+                            }
+                            <PanelElements.Panel side='left' background='light' open={this.state.openPanel1} size='x-small'>
+                                <PanelElements.PanelHeader title='This is the title for the Panel' onClose={() => this.setState({'openPanel1': false})}>
+                                </PanelElements.PanelHeader>
+                                <PanelElements.PanelContent>
+                                    <PanelElements.PanelContentBlock>
+                                        <p className='sd-margin-b--2'>Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.
+                                            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                                        <p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
+                                            vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.</p>
+                                    </PanelElements.PanelContentBlock>
+                                </PanelElements.PanelContent>
+                                <PanelElements.PanelFooter>
+                                    <Button text='Clear' style='hollow' onClick={() => false} />
+                                    <Button text='Submit' type='primary' onClick={() => false} />
+                                </PanelElements.PanelFooter>
+                            </PanelElements.Panel>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        // Left
+                        {this.state.openPanel1 ? null : 
+                            <div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
+                                <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel1': true})} />
+                            </div> 
+                        }
+                        <PanelElements.Panel side='left' background='light' open={this.state.openPanel1} size='x-small'>
+                            <PanelElements.PanelHeader title='This is the title for the Panel' onClose={() => this.setState({'openPanel1': false})}>
+                            </PanelElements.PanelHeader>
+                            <PanelElements.PanelContent>
+                                <PanelElements.PanelContentBlock>
+                                    <p className='sd-margin-b--2'>Maecenas sed diam eget risus varius blandit sit amet non magna...</p>
+                                    <p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada...</p>
+                                </PanelElements.PanelContentBlock>
+                            </PanelElements.PanelContent>
+                            <PanelElements.PanelFooter>
+                                <Button text='Clear' style='hollow' onClick={() => false} />
+                                <Button text='Submit' type='primary' onClick={() => false} />
+                            </PanelElements.PanelFooter>
+                        </PanelElements.Panel>
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// Right, custom elements inside the footer + dark theme.</p>
+                        <div className='sd-display--flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
+                            {this.state.openPanel2 ? null :
+                                <div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
+                                    <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel2': true})} />
+                                </div>
+                            }
+                            <PanelElements.Panel side='right' background='light' open={this.state.openPanel2} size='small' theme="dark">
+                                <PanelElements.PanelHeader title='Right panel title' onClose={()=> this.setState({openPanel2: false})} color='blueGreyDarker'>
+                                </PanelElements.PanelHeader>
+                                <PanelElements.PanelContent>
+                                    <PanelElements.PanelContentBlock>
+                                        <p className='sd-margin-b--2'>Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem 
+                                            lacinia quam venenatis vestibulum.</p>
+                                        <p className='sd-margin-b--2'>Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus.
+                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Vestibulum id ligula porta felis euismod semper.</p>
+                                        <p>Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada
+                                            magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+                                    </PanelElements.PanelContentBlock>
+                                </PanelElements.PanelContent>
+                                <PanelElements.PanelFooter>
+                                    <ButtonGroup align='start'>
+                                        <Button text='one' style='hollow' onClick={()=> false} />
+                                        <Button text='two' style='hollow' onClick={()=> false} />
+                                        <Label text='Published' type='primary' style='translucent'/>
+                                    </ButtonGroup>
+                                    <ButtonGroup align='end'>
+                                        <IconButton icon='pencil' ariaValue={'Edit'} onClick={() => false}  />
+                                        <IconButton icon='dots-vertical' ariaValue={'More options'} onClick={() => false}  />
+                                    </ButtonGroup>
+                                </PanelElements.PanelFooter>
+                            </PanelElements.Panel>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        // Right, custom elements inside the footer + dark theme.
+
+                        {this.state.openPanel2 ? null :
+                            <div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
+                                <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel2': true})} />
+                            </div>
+                        }
+                        <PanelElements.Panel side='right' background='light' open={this.state.openPanel2} size='small' theme="dark-ui">
+                            <PanelElements.PanelHeader title='Right panel title' onClose={()=> this.setState({openPanel2: false})} color='blueGreyDarker'>
+                            </PanelElements.PanelHeader>
+                            <PanelElements.PanelContent>
+                                <PanelElements.PanelContentBlock>
+                                    <p className='sd-margin-b--2'>Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
+                                    <p className='sd-margin-b--2'>Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum...</p>
+                                    <p>Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient...</p>
+                                </PanelElements.PanelContentBlock>
+                            </PanelElements.PanelContent>
+                            <PanelElements.PanelFooter>
+                                <ButtonGroup align='start'>
+                                    <Button text='one' style='hollow' onClick={()=> false} />
+                                    <Button text='two' style='hollow' onClick={()=> false} />
+                                    <Label text='Published' type='primary' style='translucent'/>
+                                </ButtonGroup>
+                                <ButtonGroup align='end'>
+                                    <IconButton icon='pencil' ariaValue={'Edit'} onClick={() => false}  />
+                                    <IconButton icon='dots-vertical' ariaValue={'More options'} onClick={() => false}  />
+                                </ButtonGroup>
+                            </PanelElements.PanelFooter>
+                        </PanelElements.Panel>
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// With PanelHeaderSlidingToolbar element inside the PanelHeader</p>
+                        <div className='sd-display--flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
+                            {this.state.openPanel3 ? null :
+                                <div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
+                                    <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel3': true})} />
+                                </div>
+                            }
+                            <PanelElements.Panel side='left' background='light' open={this.state.openPanel3} size='small'>
+                                <PanelElements.PanelHeader title='Donec sed odio dui' onClose={()=> this.setState({openPanel3: false})}>
+                                {!this.state.openToolbar1 ? null :
+                                    <PanelElements.PanelHeaderSlidingToolbar>
+                                        <ButtonGroup align='end'>
+                                            <Button text='Cancel' style='hollow' onClick={()=> this.setState({openToolbar1: false})} />
+                                            <Button text='Save' style='hollow' type='primary' onClick={()=> this.setState({openToolbar1: false})} />
+                                        </ButtonGroup>
+                                    </PanelElements.PanelHeaderSlidingToolbar>
+                                }
+                                </PanelElements.PanelHeader>
+                                <PanelElements.PanelContent>
+                                    <PanelElements.PanelContentBlock>
+                                        <p className='sd-margin-b--2'>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida
+                                            at eget metus. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
+                                            dolor auctor. Nulla vitae elit libero, a pharetra augue.</p>
+                                        <p>Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus.
+                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Vestibulum id ligula porta felis euismod semper.</p>
+                                    </PanelElements.PanelContentBlock>
+                                </PanelElements.PanelContent>
+                                <PanelElements.PanelFooter>
+                                    {this.state.openToolbar1 ? null :
+                                        <ButtonGroup align='start'>
+                                            <Button text='Open Slide In Toolbar' style='hollow' onClick={()=> this.setState({openToolbar1: true})} />
+                                        </ButtonGroup>
+                                    }
+                                    <ButtonGroup align='end'>
+                                        <IconButton icon='dots-vertical' ariaValue={'More options'} onClick={() => false}  />
+                                    </ButtonGroup>
+                                </PanelElements.PanelFooter>
+                            </PanelElements.Panel>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        // With PanelHeaderSlidingToolbar element inside the PanelHeader
+
+                        {this.state.openPanel3 ? null :
+                            <div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
+                                <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel3': true})} />
+                            </div>
+                        }
+                        <PanelElements.Panel side='left' background='light' open={this.state.openPanel3} size='small'>
+                            <PanelElements.PanelHeader title='Donec sed odio dui' onClose={()=> this.setState({openPanel3: false})}>
+                            {!this.state.openToolbar1 ? null :
+                                <PanelElements.PanelHeaderSlidingToolbar>
+                                    <ButtonGroup align='end'>
+                                        <Button text='Cancel' style='hollow' onClick={()=> this.setState({openToolbar1: false})} />
+                                        <Button text='Save' style='hollow' type='primary' onClick={()=> this.setState({openToolbar1: false})} />
+                                    </ButtonGroup>
+                                </PanelElements.PanelHeaderSlidingToolbar>
+                            }
+                            </PanelElements.PanelHeader>
+                            <PanelElements.PanelContent>
+                                <PanelElements.PanelContentBlock>
+                                    <p className='sd-margin-b--2'>Fusce dapibus, tellus ac cursus commodo...</p>
+                                    <p>Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus...</p>
+                                </PanelElements.PanelContentBlock>
+                            </PanelElements.PanelContent>
+                            <PanelElements.PanelFooter>
+                                {this.state.openToolbar1 ? null :
+                                    <ButtonGroup align='start'>
+                                        <Button text='Open Slide In Toolbar' style='hollow' onClick={()=> this.setState({openToolbar1: true})} />
+                                    </ButtonGroup>
+                                }
+                                <ButtonGroup align='end'>
+                                    <IconButton icon='dots-vertical' ariaValue={'More options'} onClick={() => false}  />
+                                </ButtonGroup>
+                            </PanelElements.PanelFooter>
+                        </PanelElements.Panel>
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// With PanelTools (allowing custom actions) + dark theme</p>
+                        <div className='sd-display--flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
+                            {this.state.openPanel4 ? null :
+                                <div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
+                                    <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel4': true})} />
+                                </div>
+                            }
+                            <PanelElements.Panel side='left' background='light' open={this.state.openPanel4} size='x-small' theme='dark'>
+                                <PanelElements.PanelHeader title='Donec sed odio dui'>
+                                    <PanelElements.PanelTools tools={[
+                                        {title: 'Delete', icon: 'trash', onClick: () => false, ariaValue: 'Delete' },
+                                        {title: 'Edit', icon: 'pencil', onClick: () => false, ariaValue: 'Edit' },
+                                        {title: 'Close', icon: 'close-small', onClick: ()=> this.setState({openPanel4: false}), ariaValue: 'Close' },
+                                    ]} />
+                                </PanelElements.PanelHeader>
+                                <PanelElements.PanelContent>
+                                    <PanelElements.PanelContentBlock>
+                                        <p className='sd-margin-b--2'>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida
+                                            at eget metus. Nulla vitae elit libero, a pharetra augue.</p>
+                                        <p>Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus.
+                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                                    </PanelElements.PanelContentBlock>
+                                </PanelElements.PanelContent>
+                                <PanelElements.PanelFooter>
+                                    <Button text='Cancel' style='hollow' onClick={() => false} />
+                                    <Button text='Save' type='primary' onClick={() => false} />
+                                </PanelElements.PanelFooter>
+                            </PanelElements.Panel>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        // With PanelTools (allowing custom actions) + dark theme
+
+                        {this.state.openPanel4 ? null :
+                            <div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
+                                <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel4': true})} />
+                            </div>
+                        }
+                        <PanelElements.Panel side='left' background='light' open={this.state.openPanel4} size='x-small' theme='dark-ui'>
+                            <PanelElements.PanelHeader title='Donec sed odio dui'>
+                                <PanelElements.PanelTools tools={[
+                                    {title: 'Delete', icon: 'trash', onClick: () => false, ariaValue: 'Delete' },
+                                    {title: 'Edit', icon: 'pencil', onClick: () => false, ariaValue: 'Edit' },
+                                    {title: 'Close', icon: 'close-small', onClick: ()=> this.setState({openPanel4: false}), ariaValue: 'Close' },
+                                ]} />
+                            </PanelElements.PanelHeader>
+                            <PanelElements.PanelContent>
+                                <PanelElements.PanelContentBlock>
+                                    <p className='sd-margin-b--2'>Fusce dapibus, tellus ac cursus commodo, tortor mauris...</p>
+                                    <p>Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet...</p>
+                                </PanelElements.PanelContentBlock>
+                            </PanelElements.PanelContent>
+                            <PanelElements.PanelFooter>
+                                <Button text='Cancel' style='hollow' onClick={() => false} />
+                                <Button text='Save' type='primary' onClick={() => false} />
+                            </PanelElements.PanelFooter>
+                        </PanelElements.Panel>
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+                
+
+                <h3 className="docs-page__h3">Props</h3>
+                <p className="docs-page__paragraph">Panel</p>
+                <PropsList>
+                    <Prop name='size' isRequired={false} type='xx-small | x-small | small | medium | large | x-large | xx-large  | xxx-large  | full | auto' default='small' description='Specifies the width of the panel.'/>
+                    <Prop name='side' isRequired={false} type='left | right' default='left' description='Defines the side of the panel. It will also add the appropriate shadow on the opsite side.'/>
+                    <Prop name='theme' isRequired={false} type='light | dark' default='/' description='Explicitly define the theme of the panel. All child elements and the content will inherit the selected theme.'/>
+                    <Prop name='background' isRequired={false} type='transparent | light | grey' default='light' description='Background colour of the panel.'/>
+                    <Prop name='open' isRequired={false} type='boolean' default='false' description='Toggles the open/closed state of the panel.'/>
+                    <Prop name='ClassName' isRequired={false} type='string' default='false' description='Add custom classes to modify the default behaviour or specify the placement in complex layouts.'/>
+                </PropsList>
+
+                <p className="docs-page__paragraph">PanelHeader</p>
+                <PropsList>
+                    <Prop name='title' isRequired={false} type='string' default='/' description='Specifies the title of the panel.'/>
+                    <Prop name='zIndex' isRequired={false} type='number' default='1' description='Increase the z-index of the header if needed.'/>
+                    <Prop name='theme' isRequired={false} type='light | dark' default='/' description='Explicitly define the theme just for the of Panel Header. All child elements and the content inside the Header will inherit the selected theme.'/>
+                    <Prop name='color' isRequired={false} type='light | darker | blueGrey | blueGreyDarker' default='light' description='Background colour of the Panel Header. blueGrey and blueGreyDarker will also change the text colour to white.'/>
+                    <Prop name='ClassName' isRequired={false} type='string' default='false' description='Add custom or helper classes to modify the default behaviour if needed. Use only if necessary.'/>
+                </PropsList>
+
+                <p className="docs-page__paragraph">PanelContent</p>
+                <PropsList>
+                    <Prop name='loading' isRequired={false} type='boolean' default='false' description='Loading state.'/>
+                    <Prop name='empty' isRequired={false} type='boolean' default='false' description='Empty state'/>
+                    <Prop name='emptyTemplate' isRequired={false} type='ReactNode' default='/' description='Use the EmptyState component to define the image and text for the empty state.'/>
+                </PropsList>
+
+                <p className="docs-page__paragraph">PanelContentBlock</p>
+                <PropsList>
+                    <Prop name='flex' isRequired={false} type='boolean' default='false' description='Change to flex display mode.'/>
+                    <Prop name='padding' isRequired={false} type='0 | 1-5 | 3' default='2' description='Choose padding for the content block. Defaults to 2 (16px) without specifiying a value.'/>
+                    <Prop name='ClassName' isRequired={false} type='string' default='false' description='Add custom or helper classes to modify the default behaviour or layout if needed.'/>
+                </PropsList>
+            </section>
+        )
+    }
+}