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

package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import * as Components from './components/Index';
+import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, LeftMenu, BoxedList, BoxedListItem, BoxedListContentRow, Heading, Text, Time } from '../../../../app-typescript/index';
+import * as Layout from '../../../../app-typescript/components/Layouts';
+import * as Form from '../../../../app-typescript/components/Form';
+import * as Nav from '../../../../app-typescript/components/Navigation';
+import { BottomNav } from '../../../../app-typescript/components/Navigation/BottomNav';
+
+interface IProps {
+    children?: React.ReactNode;
+    heading?: string;
+    active?: boolean;
+    onClick(): void;
+    ariaControls?: string;
+    menuId?: string;
+}
+
+interface IState {
+    theme: 'dark' | 'light' | string;
+    mainMenuOpen: boolean;
+    notificationsOpen: boolean;
+}
+
+export class CoreLayout extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            theme: 'light',
+            mainMenuOpen: false,
+            notificationsOpen: false,
+        }
+        this.handleMainMenu = this.handleMainMenu.bind(this);
+        this.handleNotifications = this.handleNotifications.bind(this);
+    }
+
+    handleMainMenu() {
+        this.setState((state) => ({
+            mainMenuOpen: !state.mainMenuOpen,
+        }));
+    }
+    handleNotifications() {
+        this.setState((state) => ({
+            notificationsOpen: !state.notificationsOpen,
+        }));
+    }
+
+
+    render() {
+        return (
+            <Layout.CoreLayout
+                heading='Core Layout'
+                menuOpen={this.state.mainMenuOpen}
+                onClick={this.handleMainMenu}
+                active={this.state.mainMenuOpen}
+                ariaControls='main-menu'
+                menuId='main-menu'
+                slideInMenu={(
+                    <Layout.MainMenu
+                        headerTitle='Main Menu'
+                        poweredBy='Powered by Superdesk technology'
+                        header={(null)}
+                        footerContent={true}
+                        footer={(
+                            <p>Menu footer testing</p>
+                        )}
+                    >
+                        <LeftMenu 
+                            style='blanc'
+                            reverseItemBorder={true}
+                            size='large'
+                            ariaLabel={'Left navigation'}   
+                            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} />
+                    </Layout.MainMenu>
+                )}
+                topMenu={(
+                    <NavButton badgeValue='6' icon='bell' text='Show notifications' onClick={this.handleNotifications} />
+                )}
+                footer={(
+                    <>
+                    <Layout.BottomBarAction onClick={()=> false} />
+                    <BottomNav
+                        items={[
+                            { icon:'photo', title: 'Sed posuere consectetur est at lobortis.', onClick: () => console.log('test1') },
+                            { title: 'Nullam id dolor id nibh ultricies.', onClick: () => console.log('test2')},
+                            { icon:'video', title: 'Nulla vitae elit libero, a pharetra augue.', onClick: () => false},
+                            { title: 'Donec sed odio dui.', onClick: () => false},
+                    ]} />
+                    </>
+                )}
+                overlay={(
+                    <Layout.NotificationPanel
+                        header={(null)}
+                        headerTitle='Notifications'
+                        open={this.state.notificationsOpen}
+                        onClick={this.handleNotifications}
+                        theme='dark'
+                    >
+                        <BoxedList>
+                            <BoxedListItem unread={true}>
+                                <Time datetime='29.06.2022'>29.06.2022</Time>
+                                <BoxedListContentRow>
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et
+                                    magnis dis parturient montes, nascetur ridiculus mus.
+                                </BoxedListContentRow>
+                            </BoxedListItem>
+                            <BoxedListItem>
+                                <Time datetime='29.06.2022'>29.06.2022</Time>
+                                <BoxedListContentRow>
+                                    Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula
+                                    porta felis euismod semper.
+                                </BoxedListContentRow>
+                            </BoxedListItem>
+                            <BoxedListItem>
+                                <Time datetime='29.06.2022'>29.06.2022</Time>
+                                <BoxedListContentRow>
+                                    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer
+                                    posuere erat a ante venenatis dapibus posuere velit aliquet.
+                                </BoxedListContentRow>
+                            </BoxedListItem>
+                        </BoxedList>
+
+                    </Layout.NotificationPanel>
+                )}
+            >
+            </Layout.CoreLayout>
+        );
+    }
+}

package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx

@@ -0,0 +1,459 @@
+import * as React from 'react';
+import * as Components from './components/Index';
+import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, Divider, Tooltip, Select, Option, Switch, Icon, AvatarWrapper, AvatarContentImage, AvatarContentText, Text, EmptyState, Alert, SlidingToolbar, TabLabel, Tabs, Heading } from '../../../../app-typescript/index';
+import * as Layout from '../../../../app-typescript/components/Layouts';
+import * as Form from '../../../../app-typescript/components/Form';
+import * as Nav from '../../../../app-typescript/components/Navigation';
+import { BoxedList, BoxedListItem, BoxedListContentRow } from '../../../../app-typescript/components/Lists';
+import { SimpleList, SimpleListItem } from '../../../../app-typescript/components/Lists';
+
+interface IProps {
+    children?: React.ReactNode;
+}
+
+interface IState {
+    theme: 'dark' | 'light' | string;
+    itemType: string;
+    dropDownState: string;
+    itemSelected1: boolean;
+    itemSelected2: boolean;
+    itemSelected3: boolean;
+    value1: boolean;
+    value2: boolean;
+    value3: boolean;
+    leftPanelOpen: boolean;
+    rightPanelOpen: boolean;
+    rightPanelPinned: boolean;
+    sideOverlayOpen: boolean;
+}
+
+export class EditorTest extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            theme: 'light',
+            itemType: 'itemtype01',
+            dropDownState: '',
+            itemSelected1: false,
+            itemSelected2: false,
+            itemSelected3: false,
+            value1: false,
+            value2: false,
+            value3: false,
+            leftPanelOpen: false,
+            rightPanelOpen: false,
+            rightPanelPinned: false,
+            sideOverlayOpen: false,
+            
+        }
+        this.handleTheme = this.handleTheme.bind(this);
+    }
+
+    handleTheme(newTheme: string) {
+        this.setState({
+            theme: newTheme
+        })
+    }
+
+    changeStatus(item: any, status: string) {
+        if (item.status.includes(status)) {
+            item.status.splice(item.status.indexOf(status), 1);
+        } else {
+            item.status.push(status);
+        }
+    }
+
+    render() {
+        return (
+            <Layout.AuthoringFrame
+            header={(
+                <SubNav zIndex={2}>
+                    <ButtonGroup align='end'>
+                        <Button
+                                text="Open pinned"
+                                style="hollow"
+                                onClick={() => this.setState({'rightPanelOpen': !this.state.rightPanelOpen})}
+                            />
+                        <Divider size="mini" />
+                        <ButtonGroup subgroup={true} spaces="no-space">
+                            <Dropdown
+                                items={[
+                                    {
+                                        type: 'group', label: 'Chose a theme', items: [
+                                            'divider',
+                                            { label: 'Light', onSelect: () => this.handleTheme('light-ui')},
+                                            { label: 'Dark', onSelect: () => this.handleTheme('dark-ui')},
+                                        ]
+                                    },
+                                ]}>
+                                <NavButton type='default' icon='adjust' onClick={()=> false} />
+                            </Dropdown>
+                            <Tooltip text='Minimize' flow='left'>
+                                <NavButton type='default' icon='minimize' iconSize='big' text='Minimize' onClick={()=> false} />
+                            </Tooltip>
+                            <Tooltip text='More actions' flow='left'>
+                                <NavButton type='default' icon='dots-vertical' text='More actions' onClick={()=> false} />
+                            </Tooltip>
+                            <Tooltip text='Send to / Publish' flow='left'>
+                                <NavButton type='highlight' icon='send-to' iconSize='big' text='Send to / Publish' onClick={()=> false} />
+                            </Tooltip>
+                        </ButtonGroup>
+                    </ButtonGroup>
+                </SubNav>
+            )}
+            leftPanel={(
+                <Nav.SideBarTabs
+                items={[
+                    { icon: 'semantics', size: 'big', tooltip: 'Semantics', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
+                    { icon: 'create-list', size: 'big', tooltip: 'Create list', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
+                    { icon: 'picture', size: 'big', tooltip: 'Pictures', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
+                    { icon: 'annotation', size: 'big', tooltip: 'Annotations', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
+                    { icon: 'export', size: 'big', tooltip: 'Export', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) }]} />
+            )}
+            main={(
+                <Layout.AuthoringMain
+                headerPadding='medium'
+                toolBar={(
+                    <React.Fragment>
+                        <div className="sd-editor-toolbar__content">
+                            <dl>
+                                <dt>Created</dt>
+                                <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
+                                <dt>by</dt>
+                                <dt>Nareg Asmarian</dt>
+                            </dl>
+                            <dl>
+                                <dt>Modified</dt>
+                                <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
+                            </dl>
+                        </div>
+                        <ButtonGroup align='end'>
+                            <IconButton icon="preview-mode" toolTipAppend={true} ariaValue="Print preview" onClick={()=> false} />
+                            <IconButton icon="adjust" ariaValue="Toogle theme" onClick={()=> false} />
+                            <IconButton icon="switches" ariaValue="Theme settings" onClick={()=> false} />
+                        </ButtonGroup>
+                    </React.Fragment>
+                )}
+                authoringHeader ={(
+                    <React.Fragment>
+                        <Form.FormGroup inlineLabel={true}>
+                            <Form.FormItem>
+                                <Input
+                                    type='text'
+                                    label='Slugline'
+                                    value='This is some value'
+                                    maxLength={30}
+                                    error='This is error message'
+                                    info='This is some hint message'
+                                    required={false}
+                                    disabled={false}
+                                    invalid={false}
+                                    onChange={(value) => {}} />
+                            </Form.FormItem>
+                            <Form.FormItem>
+                                <Input
+                                    type='text'
+                                    label='Slugline'
+                                    value='This is some value'
+                                    maxLength={30}
+                                    error='This is error message'
+                                    info='This is some hint message'
+                                    required={false}
+                                    disabled={false}
+                                    invalid={false}
+                                    onChange={(value) => {}} /> 
+                            </Form.FormItem>
+                        </Form.FormGroup>
+                        <Form.FormGroup inlineLabel={true}>
+                            <Form.FormItem>
+                                <Input
+                                    type='text'
+                                    label='Genre'
+                                    value='This is some value'
+                                    maxLength={30}
+                                    error='This is error message'
+                                    info='This is some hint message'
+                                    required={false}
+                                    disabled={false}
+                                    invalid={false}
+                                    onChange={(value) => {}} /> 
+                            </Form.FormItem>
+                        </Form.FormGroup>
+                        <Form.FormGroup marginBottom='0' inlineLabel={true}>
+                            <Form.FormItem>
+                                <Input
+                                    type='text'
+                                    label='Subject'
+                                    value='This is some value'
+                                    maxLength={30}
+                                    error='This is error message'
+                                    info='This is some hint message'
+                                    required={true}
+                                    disabled={false}
+                                    invalid={false}
+                                    onChange={(value) => {}} /> 
+                            </Form.FormItem>
+                            <Form.FormItem autoWidth={true}>
+                                <Form.FormText>Just testing:</Form.FormText>
+                            </Form.FormItem>
+                            <Form.FormItem>
+                                <Select
+                                    label='Categories'
+                                    labelHidden={true}
+                                    value='This is some value'
+                                    error='This is error message'
+                                    info='This is some hint message'
+                                    required={true}
+                                    disabled={false}
+                                    invalid={false}
+                                    onChange={(value) => {}}>
+                                        <Option>Option 1</Option>
+                                        <Option>Option 2</Option>
+                                </Select>
+                            </Form.FormItem>
+                            <Form.FormItem autoWidth={true}>
+                                <ButtonGroup>
+                                    <IconButton ariaValue="Submit" icon="picture" onClick={()=> false} />
+                                    <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                                    <Button text="Submit" onClick={()=> false} type="primary" />
+                                </ButtonGroup>
+                            </Form.FormItem>
+                        </Form.FormGroup>
+                    </React.Fragment>
+                )}
+                authoringBookmarks={(
+                    <Nav.QuickNavBar
+                    scrollSpy='#scroll'
+                        offset={-300}
+                        items={[
+                            { icon: 'heading-1', tooltip: 'Headline', onClick:()=> false, id: 'section1' },
+                            { icon: 'align-left', tooltip: 'Body', onClick:()=> false, id: 'section2' },
+                            { icon: 'picture', tooltip: 'Media', onClick:()=> false, id: 'section3' },
+                            { icon: 'attachment-large', tooltip: 'Attachments', onClick:()=> false, id: 'section4' }]} />
+                        )}>
+                            <div id='scroll' style={{overflow: 'scroll', height: 600}}>
+                                <div id='section1'>
+                                    <Heading type='h1' className='sd-padding--5'>Section 1</Heading>
+                                <p className='sd-margin-b--3'>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 className='sd-margin-b--3'>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. Morbi leo
+                                    risus, porta ac consectetur ac, vestibulum at eros.</p>
+                                <p className='sd-margin-b--3'>Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
+                                    vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
+                                    vestibulum at eros. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+                                <p>Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra
+                                    augue. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus
+                                    sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur
+                                    purus sit amet fermentum.</p>
+                                    <Layout.Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
+                                        <span>Curabitur blandit tempus porttitor.</span>
+                                        <Button text="Test button" type="primary" onClick={()=> false} />
+                                        <Button text="Test button" type="highlight" onClick={()=> false} />
+                                        <ButtonGroup align="end">
+                                            <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                                            <Button text="Submit" onClick={()=> false} type="primary" />
+                                        </ButtonGroup>
+                                    </Layout.Container>
+                                </div>
+                                <div id='section2'>
+                                <Heading type='h1' className='sd-padding--5'>Section 2</Heading>
+                                <p className='sd-margin-b--3'>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 className='sd-margin-b--3'>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. Morbi leo
+                                    risus, porta ac consectetur ac, vestibulum at eros.</p>
+                                <p className='sd-margin-b--3'>Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
+                                    vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
+                                    vestibulum at eros. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+                                <p>Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra
+                                    augue. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus
+                                    sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur
+                                    purus sit amet fermentum.</p>
+                                    <Layout.Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
+                                        <span>Curabitur blandit tempus porttitor.</span>
+                                        <Button text="Test button" type="primary" onClick={()=> false} />
+                                        <Button text="Test button" type="highlight" onClick={()=> false} />
+                                        <ButtonGroup align="end">
+                                            <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                                            <Button text="Submit" onClick={()=> false} type="primary" />
+                                        </ButtonGroup>
+                                    </Layout.Container>
+                                </div>
+                                <div id='section3'>
+                                <Heading type='h1' className='sd-padding--5'>Section 3</Heading>
+                                <p className='sd-margin-b--3'>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 className='sd-margin-b--3'>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. Morbi leo
+                                    risus, porta ac consectetur ac, vestibulum at eros.</p>
+                                <p className='sd-margin-b--3'>Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
+                                    vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
+                                    vestibulum at eros. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+                                <p>Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra
+                                    augue. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus
+                                    sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur
+                                    purus sit amet fermentum.</p>
+                                    <Layout.Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
+                                        <span>Curabitur blandit tempus porttitor.</span>
+                                        <Button text="Test button" type="primary" onClick={()=> false} />
+                                        <Button text="Test button" type="highlight" onClick={()=> false} />
+                                        <ButtonGroup align="end">
+                                            <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                                            <Button text="Submit" onClick={()=> false} type="primary" />
+                                        </ButtonGroup>
+                                    </Layout.Container>
+                                </div>
+                                
+                                <div id='section4'>
+                                <Heading type='h1' className='sd-padding--5'>Section 4</Heading>
+                                    <p className='sd-margin-b--3'>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 className='sd-margin-b--3'>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. Morbi leo
+                                        risus, porta ac consectetur ac, vestibulum at eros.</p>
+                                    <p className='sd-margin-b--3'>Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
+                                        vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
+                                        vestibulum at eros. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+                                    <p>Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra
+                                        augue. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus
+                                        sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur
+                                        purus sit amet fermentum.</p>
+                                        <Layout.Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
+                                            <span>Curabitur blandit tempus porttitor.</span>
+                                            <Button text="Test button" type="primary" onClick={()=> false} />
+                                            <Button text="Test button" type="highlight" onClick={()=> false} />
+                                            <ButtonGroup align="end">
+                                                <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                                                <Button text="Submit" onClick={()=> false} type="primary" />
+                                            </ButtonGroup>
+                                        </Layout.Container>
+                                </div>  
+                            </div>
+                            
+                </Layout.AuthoringMain>
+            )}
+            sidePanelPinned={this.state.rightPanelOpen}
+            sidePanel={(
+                <Layout.Panel side='right' background='grey' open={this.state.rightPanelOpen} size='x-small'>
+                    <Layout.PanelHeader title='Pinned content' onClose={() => this.setState({'rightPanelOpen': false})}>
+                    </Layout.PanelHeader>
+                    <Layout.PanelContent>
+                        <Layout.PanelContentBlock>
+                            <BoxedList density='comfortable'>
+                                <BoxedListItem 
+                                    type="success"
+                                    clickable={true}
+                                    media={(
+                                        <Icon name='slideshow'  />
+                                    )}
+                                    actions={(
+                                        <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
+                                    )}
+                                >
+                                    <BoxedListContentRow>
+                                        Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
+                                    </BoxedListContentRow>
+                                    <BoxedListContentRow>
+                                        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. 
+                                    </BoxedListContentRow>
+                                </BoxedListItem>
+                                <BoxedListItem 
+                                    type="warning"
+                                    media={(
+                                        <AvatarWrapper
+                                            size="medium"
+                                            >
+                                            <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
+                                        </AvatarWrapper>
+                                    )}
+                                    footer={(
+                                        <ButtonGroup align="end">
+                                            <Button text="cancel" size="small" style="hollow" onClick={()=> false} />
+                                            <Button text="yes" size="small" style="hollow" type="primary" onClick={()=> false} />
+                                        </ButtonGroup>
+                                    )}
+                                    actions={(
+                                        <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
+                                    )}
+                                >
+                                    <BoxedListContentRow>
+                                        Maecenas sed diam eget risus varius blandit sit amet magna.
+                                    </BoxedListContentRow>
+                                </BoxedListItem>
+                                <BoxedListItem 
+                                    selected={true}
+                                    actions={(
+                                        <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
+                                    )}
+                                >
+                                    <BoxedListContentRow>
+                                        Maecenas sed diam eget risus varius blandit sit amet magna. Vestibulum id ligula porta felis euismod semper.
+                                    </BoxedListContentRow>
+                                </BoxedListItem>
+                            </BoxedList>
+                        </Layout.PanelContentBlock>
+                    </Layout.PanelContent>
+                </Layout.Panel>
+            )}
+            sideOverlayOpen={this.state.sideOverlayOpen}
+            sideOverlay={(
+                <Layout.Panel background='light' open={this.state.sideOverlayOpen} size='x-small'>
+                    <Layout.PanelHeader title="Metadata (overlay pannel)" onClose={() => this.setState({'sideOverlayOpen': false})}>
+                        {/* <Tabs onClick={()=> false}>
+                            <TabLabel label='Content' indexValue={0}/>
+                            <TabLabel label='Metadata' indexValue={1}/>
+                            <TabLabel label='Duplicates' indexValue={2}/>
+                        </Tabs> */}
+
+                        {/* <SlidingToolbar>
+                            <Button text="Cancel" onClick={()=> false} />
+                            <Button text="Save" type="primary" onClick={()=> false} />
+                        </SlidingToolbar> */}
+                        {/* <Alert icon="warning-sign" size='small' type='warning'>
+                            Sed tincidunt ipsum metus, consectetur vestibulum turpis luctus in.
+                        </Alert> */}
+                    </Layout.PanelHeader>
+                    <Layout.PanelContent
+                        loading={false}
+                        empty={false}
+                        emptyTemplate={(
+                            <EmptyState title="test" />
+                        )} >
+                        <Layout.PanelContentBlock>
+                            <SimpleList border={true}>
+                                <SimpleListItem justify="space-between">
+                                    <Form.FormLabel text="My label" />
+                                    <Switch toolTipFlow='left' label={{text:'My label', hidden: true}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
+                                </SimpleListItem>
+                                <SimpleListItem justify="space-between">
+                                    <Form.FormLabel text="Form label" />
+                                    <Switch toolTipFlow='left' label={{text:'Form label', hidden: true}} value={this.state.value2} onChange={(value) => this.setState(() => ({ value2: value }))} />
+                                </SimpleListItem>
+                                <SimpleListItem stacked={true}>
+                                    <Form.FormLabel text="Label two" />
+                                    <Text size="small" weight="light">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo.</Text>
+                                </SimpleListItem>
+                            </SimpleList>
+                        </Layout.PanelContentBlock>
+                    </Layout.PanelContent>
+                </Layout.Panel>
+            )}
+            sideBar={(
+                <Nav.SideBarTabs
+                items={[
+                    { icon: 'info', size: 'big', tooltip: 'Info', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
+                    { icon: 'chat', size: 'big', tooltip: 'Comments', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
+                    { icon: 'history', size: 'big', tooltip: 'History', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
+                    { icon: 'package', size: 'big', tooltip: 'Packages', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
+                    { icon: 'attachment', size: 'big', tooltip: 'Attachments', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
+                    { icon: 'comments', size: 'big', tooltip: 'Inline Comments', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
+                    { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) }]} />
+            )}
+            overlayPanel={(
+                <div></div>
+            )}
+        />
+        );
+    }
+}

package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx

@@ -69,7 +69,7 @@ export class FirstPlayground extends React.Component<IProps, IState> {
 
                 <div className='sd-content-wrapper__main-content-area sd-main-content-grid comfort'>
                     <Components.HeaderPanel >
-                        <SubNav theme={this.state.theme}>
+                        <SubNav>
                             <ButtonGroup align='inline'>
                                 <Dropdown
                                     items={[
@@ -85,11 +85,11 @@ export class FirstPlayground extends React.Component<IProps, IState> {
                                     <NavButton onClick={() => false} />
                                 </Dropdown>
                             </ButtonGroup>
-                            <ButtonGroup align='right'>
+                            <ButtonGroup align='end'>
                                 <NavButton icon='dots-vertical' onClick={() => false} />
                             </ButtonGroup>
                         </SubNav>
-                        <SubNav theme={this.state.theme}>
+                        <SubNav>
                             <ButtonGroup >
                                 <NavButton icon='filter-large' onClick={this.handleFilter} />
                             </ButtonGroup>
@@ -100,7 +100,7 @@ export class FirstPlayground extends React.Component<IProps, IState> {
                                     { value: 'itemtype03', label: 'Videos only' },
                                     { value: 'itemtype04', label: 'Documents only' }]} />
                             </CheckButtonGroup>
-                            <ButtonGroup align='right'>
+                            <ButtonGroup align='end'>
                                 <NavButton icon='adjust' onClick={this.handleTheme} />
                                 <NavButton icon='th-list' onClick={() => false} />
                             </ButtonGroup>