superdesk-ui-framework 2.4.20 → 3.0.1-beta.1

package/examples/pages/react/DropZone.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import { DropZone, Button, Icon, Prop, PropsList  } from '../../../app-typescript';
+
+interface IProps {
+    children?: React.ReactNode;
+}
+
+export default class DropZoneDoc extends React.Component<IProps> {
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>Container</h2>
+                
+                <Markup.ReactMarkupCodePreview>{`
+                    <DropZone>
+
+                    </DropZone>
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <p className="docs-page__paragraph">
+                    The Container is a convenient layout component with different layout options and support for external CSS classes.
+                    The display model is <code>flex</code> by default, but can be changed with the <code>display</code> prop. It is 
+                    intended to be used with helper CSS classes to achieve desired styling options
+                </p>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// Basic</p>
+                        <div className='docs-page__content-row'>
+                            <DropZone actionText='Attach file' text="Drag one or more files here to upload them, or just click on the field.">
+                                 
+                            </DropZone>
+                        </div>
+
+                        <p className="docs-page__paragraph">// Usage examples</p>
+
+
+
+                        <div className='docs-page__content-row'>
+
+                        </div>
+
+                        
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        // Basic
+
+                        <Container>
+                            Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et... 
+                        </Container>
+
+                        // Usage examples
+
+                        <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>
+                        </Container>
+
+                        <Container gap="large" direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
+                            <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
+                            <Text color='light'>
+                                Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
+                            </Text>
+                            <ButtonGroup align="end">
+                                <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                                <Button text="Submit" onClick={()=> false} type="primary" />
+                            </ButtonGroup>
+                        </Container>
+
+                        <Container gap="large" theme='dark-ui' direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
+                        <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
+                        <Text color='light'>
+                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
+                        </Text>
+                        <ButtonGroup align="end">
+                            <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                            <Button text="Submit" onClick={()=> false} type="primary" />
+                        </ButtonGroup>
+                    </Container>
+  
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+                    <Prop name='display' isRequired={false} type='flex | inline-flex | block' default='flex' description='Change the default display mode (flex).'/>
+                    <Prop name='direction' isRequired={false} type='row | column' default='row' description='Change the flex-direction property.'/>
+                    <Prop name='gap' isRequired={false} type='none | small |  medium | large' default='none' description='Set the gap between elements inside the Container.'/>
+                    <Prop name='theme' isRequired={false} type='light | dark' default='/' description='Choose the UI theme. It will inherit the default theme if not set. All items inside will inherit the theme of the Container if it is set.'/>
+                    <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
+                </PropsList>
+            </section>
+        )
+    }
+}

package/examples/pages/react/Heading.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import { PropsList, Prop, Heading } from '../../../app-typescript';
+
+interface IProps {
+    children?: React.ReactNode;
+}
+
+export default class HeadingDoc extends React.Component<IProps> {
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>Heading</h2>
+                
+                <Markup.ReactMarkupCodePreview>{`
+                    <Heading type='h2'>
+                        Purus Dolor Ligula
+                    </Heading>
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <p className="docs-page__paragraph">Heading component. By choosing the type (h1, h2, h3...) appropriate HTML tags will be rendered, preserving the semantcs.</p>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// Basic</p>
+                        <div className='docs-page__content-row'>
+                            <Heading type='h1'>Heading one example</Heading>
+                        </div>
+                        <div className='docs-page__content-row'>
+                            <Heading type='h2'>Heading two example</Heading>
+                        </div>
+                        <div className='docs-page__content-row'>
+                            <Heading type='h3'>Heading three example</Heading>
+                        </div>
+                        <div className='docs-page__content-row'>
+                            <Heading type='h4'>Heading four example</Heading>
+                        </div>
+                        <div className='docs-page__content-row'>
+                            <Heading type='h5'>Heading five example</Heading>
+                        </div>
+                        <div className='docs-page__content-row'>
+                            <Heading type='h6'>Heading six example</Heading>
+                        </div>
+
+                        <p className="docs-page__paragraph">// Variations</p>
+
+                        <div className='docs-page__content-row'>
+                            <Heading fontStyle='serif' color='light' weight='strong' type='h1'>
+                                Maecenas faucibus mollis interdum.
+                            </Heading>
+                        </div>
+                        <div className='docs-page__content-row'>
+                            <Heading type='h2' style='italic' align='end'>
+                                Cras mattis consectetur purus sit amet fermentum.
+                            </Heading>
+                        </div>
+                        <div className='docs-page__content-row'>
+                            <Heading fontStyle='serif' type='h3' align='center' color='lighter'>
+                                Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla.
+                            </Heading>
+                        </div>
+
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        // Basic
+
+                        <Heading type='h1'>Heading one example</Heading>
+                        <Heading type='h2'>Heading two example</Heading>
+                        <Heading type='h3'>Heading three example</Heading>
+                        <Heading type='h4'>Heading four example</Heading>
+                        <Heading type='h5'>Heading five example</Heading>
+                        <Heading type='h6'>Heading six example</Heading>
+
+                        // Variations
+
+                        <Heading fontStyle='serif' color='light' weight='strong' type='h1'>
+                            Maecenas faucibus mollis interdum.
+                        </Heading>
+
+                        <Heading type='h2' style='italic' align='end'>
+                            Cras mattis consectetur purus sit amet fermentum.
+                        </Heading>
+
+                        <Heading  fontStyle='serif' type='h3' align='center' color='lighter'>
+                            Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla.
+                        </Heading>
+  
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+                    <Prop name='type' isRequired={true} type='h1 | h2 | h3 | h4 | h5 | h6' default='/' description='Heading type (eg. H1, H2, H3... etc.)'/>
+                    <Prop name='weight' isRequired={false} type='normal | medium | strong' default='normal' description='Change the default font weight.'/>
+                    <Prop name='style' isRequired={false} type='normal | italic' default='normal' description='Change the default text style.'/>
+                    <Prop name='align' isRequired={false} type='start | end | center | justify' default='start' description='Text-align'/>
+                    <Prop name='fontStyle' isRequired={false} type='sans | serif' default='sans' description='Choose between default sans (Roboto) and serif (Merriweather) font styles. '/>
+                    <Prop name='color' isRequired={false} type='normal | light | lighter' default='normal' description='Choose a different text colour. Additional two lighter shades are available.'/>
+                    <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
+                </PropsList>
+            </section>
+        )
+    }
+}

package/examples/pages/react/IconButtons.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import * as Markup from '../../js/react';
 
-import { IconButton, Prop, PropsList, Tooltip } from '../../../app-typescript';
+import { IconButton, Prop, PropsList, Tooltip, Container, ButtonGroup } from '../../../app-typescript';
 
 export default class IconButtonDoc extends React.Component {
     render() {
@@ -20,61 +20,64 @@ export default class IconButtonDoc extends React.Component {
                         <p className="docs-page__paragraph">// Default</p>
                         <p className="docs-page__paragraph--small">Hover buttons to see tooltips.</p>
                         <div className="docs-page__content-row docs-page__content-row--white">
-                            <Tooltip text='I support tooltips!'>
-                                <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
-                            </Tooltip>
-                            <IconButton icon='plus-large' ariaValue='Add' onClick ={()=> false} />
+                            <IconButton icon='close-small' disabled ariaValue='Close' onClick={()=> false} />
+                            <IconButton icon='plus-large'  ariaValue='Add' onClick={()=> false} />
                             <IconButton icon='dots-vertical' ariaValue='More options' onClick={()=> false} />
                             <IconButton icon='trash' ariaValue='Move to trash' onClick={()=> false} />
-                            <Tooltip text='My tooltip is on the right.' flow='right'>
-                                <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
-                            </Tooltip>
+                            <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
                         </div>
                         <p className="docs-page__paragraph">// Small</p>
                         <div className="docs-page__content-row docs-page__content-row--white sd-d-flex ">
-                            <IconButton size='small' icon='plus-large' ariaValue='Add' onClick ={()=> false} />
+                            <IconButton size='small' icon='plus-large' ariaValue='Add' onClick={()=> false} />
                             <span className="sd-margin-x--auto"></span>
                             <IconButton size='small' icon='close-small' ariaValue='Close' onClick={()=> false} />
                         </div>
-                        <p className="docs-page__paragraph">// Dark UI</p>
-                        <div className="docs-page__content-row docs-page__content-row--ui-dark" style={{color:'white'}}>
-                            <Tooltip text='I support tooltips!'>
-                                    <IconButton icon='close-small' ariaValue='close' onClick={()=> false} />
-                            </Tooltip>
-                            <IconButton icon='plus-large' ariaValue='Add item' onClick={()=> false} />
-                            <IconButton icon='dots-vertical' ariaValue='More options' onClick={()=> false} />
-                            <IconButton icon='trash' ariaValue='Delete' onClick={()=> false} />
-                            <Tooltip text='My tooltip is on the right.' flow='right'>
-                                <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
-                            </Tooltip>
+
+                        <p className="docs-page__paragraph">// Xtra large, 'outline' style</p>
+                        <Container gap="large" className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--3'>
+                            <ButtonGroup align='center' spaces='loose'>
+                                <IconButton style='outline' size='x-large' icon='pencil' ariaValue='Add' onClick={()=> false} />
+                                <IconButton style='outline' disabled={true} size='x-large' icon='switches' ariaValue='Add' onClick={()=> false} />
+                                <IconButton style='outline' size='x-large' icon='crop' ariaValue='Close' onClick={()=> false} />
+                            </ButtonGroup>
+                        </Container>
+
+                        <p className="docs-page__paragraph">// Xtra large, outlineWhite style</p>
+                        <p className="docs-page__paragraph--small">The 'outlineWhite' syle forces a white icon and outline. It can be used on dark overlays for example.</p>
+                        <div style={{background: 'hsla(214, 13%, 12%, 1)'}} className="sd-container sd-container--flex sd-container--gap-large sd-radius--medium sd-shadow--z2 sd-padding--3">
+                            <ButtonGroup align='center' spaces='loose'>
+                                <IconButton style='outlineWhite' size='x-large' icon='pencil' ariaValue='Add' onClick={()=> false} />
+                                <IconButton style='outlineWhite' disabled={true} size='x-large' icon='switches' ariaValue='Add' onClick={()=> false} />
+                                <IconButton style='outlineWhite' size='x-large' icon='crop' ariaValue='Close' onClick={()=> false} />
+                            </ButtonGroup>
                         </div>
+
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <Tooltip text='I support tooltips!'>
-                            <IconButton icon='close-small' ariaValue='close' onClick={()=> false} />
-                        </Tooltip>
-                        <IconButton icon='plus-large' ariaValue='plus' onClick ={()=> false} />
-                        <IconButton icon='dots-vertical' ariaValue='dots' onClick={()=> false} />
-                        <IconButton icon='trash' ariaValue='trash' onClick={()=> false} />
-                        <Tooltip text='My tooltip is on right.' flow='right'>
-                            <IconButton icon='close-small' ariaValue='close' onClick={()=> false} />
-                        </Tooltip>
+                        <IconButton icon='close-small' disabled ariaValue='Close' onClick={()=> false} />
+                        <IconButton icon='plus-large' ariaValue='Add' onClick={()=> false} />
+                        <IconButton icon='dots-vertical' ariaValue='More options' onClick={()=> false} />
+                        <IconButton icon='trash' ariaValue='Move to trash' onClick={()=> false} />
+                        <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
 
                         // Small
-                        <IconButton size='small' icon='plus-large' ariaValue='Add' onClick ={()=> false} />
+                        <IconButton size='small' icon='plus-large' ariaValue='Add' onClick={()=> false} />
                         ...
                         <IconButton size='small' icon='close-small' ariaValue='Close' onClick={()=> false} />
 
-                        //Dark UI
-                        <Tooltip text='I support tooltips!'>
-                            <IconButton icon='close-small' ariaValue='close' onClick={()=> false} />
-                        </Tooltip>
-                        <IconButton icon='plus-large' ariaValue='plus' onClick={()=> false} />
-                        <IconButton icon='dots-vertical' ariaValue='dots' onClick={()=> false} />
-                        <IconButton icon='trash' ariaValue='trash' onClick={()=> false} />
-                        <Tooltip text='My tooltip is on right.' flow='right'>
-                            <IconButton icon='close-small' ariaValue='close' onClick={()=> false} />
-                        </Tooltip>
+                        // Xtra large, 'outline' style
+                        <ButtonGroup align='center' spaces='loose'>
+                            <IconButton style='outline' size='x-large' icon='pencil' ariaValue='Add' onClick={()=> false} />
+                            <IconButton style='outline' disabled={true} size='x-large' icon='switches' ariaValue='Add' onClick={()=> false} />
+                            <IconButton style='outline' size='x-large' icon='crop' ariaValue='Close' onClick={()=> false} />
+                        </ButtonGroup>
+
+                        // Xtra large, outlineWhite style
+                        <ButtonGroup align='center' spaces='loose'>
+                            <IconButton style='outlineWhite' size='x-large' icon='pencil' ariaValue='Add' onClick={()=> false} />
+                            <IconButton style='outlineWhite' disabled={true} size='x-large' icon='switches' ariaValue='Add' onClick={()=> false} />
+                            <IconButton style='outlineWhite' size='x-large' icon='crop' ariaValue='Close' onClick={()=> false} />
+                        </ButtonGroup>
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -82,8 +85,12 @@ export default class IconButtonDoc extends React.Component {
                 <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='ariaValue' isRequired={true} type='string' default='/' description='Description for screen readers'/>
-                    <Prop name='size' isRequired={false} type='small' default='normal' description='Creates an IconButton with a smaller footprint.'/>
+                    <Prop name='ariaValue' isRequired={true} type='string' default='/' description='Description for screen readers, also used as the ToolTip value.'/>
+                    <Prop name='size' isRequired={false} type='default | small | x-large' default='default' description='Creates an IconButton with a smaller or larger footprint.'/>
+                    <Prop name='style' isRequired={false} type='default | outline | outlineWhite' default='default' description='Different styling options.'/>
+                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Disables the Button, preventing mouse events.'/>
+                    <Prop name='toolTipFlow' isRequired={false} type='top | left | right | down' default='top' description='Defines the possition of the ToolTip.'/>
+                    <Prop name='toolTipAppend' isRequired={false} type='boolean' default='false' description='Uses the append to body version of the ToolTips if set to true.'/>
                 </PropsList>
             </section>
         )

package/examples/pages/react/Index.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 
 import { ReactNav, ReactDefault } from '../../js/react';
+import { ButtonGroup, Button, NavButton, Dropdown } from '../../../app-typescript/index';
 
 import {
     Switch,
     Route,
-
 } from "react-router-dom";
 
 import InputsDoc from './Inputs';
@@ -23,10 +23,11 @@ import TooltipDoc from './Tooltips';
 import DatePickerDoc from './DatePicker';
 import TimePickerDoc from './TimePicker';
 import SwitchDoc from './Switch';
-import RadiosDoc from './Radios';
+import RadioGroupDoc from './RadioGroup';
 import CheckboxsDoc from './Checkboxs';
 import TabsDoc from './Tabs';
 import LeftNavigationsDoc from './LeftNavigations';
+import QuickNavBarDoc from './QuickNavigationBar';
 import NavButtonsDoc from './NavButtons';
 import IconFontDoc from './IconFont';
 import BigIconFontDoc from './BigIconFont';
@@ -40,13 +41,23 @@ import GridListDoc from './GridList';
 import GridItemDoc from './GridItem';
 import ModalDoc from './Modal';
 import CarouselDoc from './Carousel';
+import ContentDividerDoc from './ContentDivider';
 import ToggleboxDocs from './Togglebox';
 import ListItemsDoc from './ListItems';
+import PanelDoc from './Panel';
 import SelectGridDocs from './SelectGrid';
 import IconPickerDocs from "./IconPicker";
+import SimpleListDoc from "./SimpleList";
+import BoxedListDoc from "./BoxedList";
+import HeadingDoc from "./Heading";
+import TextDoc from "./Text";
+import ContainerDoc from './Container';
+import DropZoneDoc from './DropZone';
 
 import * as Playgrounds from '../playgrounds/react-playgrounds/Index';
 import { SelectWithTemplateDocs } from './SelectWithTemplate';
+import { MultiselectDocs } from './MultiSelect';
+import { TreeSelectDocs } from './TreeSelect';
 import { PopoverDoc } from './Popover';
 import { MenuDocs } from './Menu';
 
@@ -116,6 +127,9 @@ const pages = {
             'left-navigation': {
                 name: 'Left navigation'
             },
+            'Quick-navigation-bar': {
+                name: 'Quick navigation bar'
+            },
             'sub-navigation': {
                 name: 'Sub navigation bar'
             },
@@ -124,26 +138,57 @@ const pages = {
     containerComponents: {
         name: "Containers",
         items: {
+            'container': {
+                name: 'Container component'
+            },
             'empty-states': {
                 name: 'Empty states'
             },
             'grid-item': {
                 name: 'Grid Item'
             },
+            'panel': {
+                name: 'Panel'
+            },
         }
     },
     layoutComponents: {
         name: "Layout",
         items: {
-            'grid-list': {
-                name: 'Grid List'
+            'content-divider': {
+                name: 'Content Divider'
             },
             "togglebox": {
                 name: "Togglebox"
             },
+        }
+    },
+    textComponents: {
+        name: "Text",
+        items: {
+            'heading': {
+                name: 'Heading component'
+            },
+            'text': {
+                name: 'Text component'
+            },
+        }
+    },
+    listComponents: {
+        name: "Lists",
+        items: {
+            'grid-list': {
+                name: 'Grid List'
+            },
             'list-items': {
                 name: 'List items'
             },
+            'simple-list': {
+                name: 'Simple list'
+            },
+            'boxed-list': {
+                name: 'Boxed list'
+            },
         }
     },
     formComponents: {
@@ -167,6 +212,12 @@ const pages = {
             'select-with-template': {
                 name: 'Select with template',
             },
+            'multiselect': {
+                name: 'MultiSelect',
+            },
+            'treeselect': {
+                name: 'TreeSelect',
+            },
             'date-picker': {
                 name: 'Date Picker',
             },
@@ -179,12 +230,15 @@ const pages = {
             'switch': {
                 name: 'Switch'
             },
-            'radio': {
-                name: 'Radio'
+            'radiogroup': {
+                name: 'RadioGroup'
             },
             'checkbox': {
                 name: 'Checkbox'
-            }
+            },
+            'dropzone': {
+                name: 'DropZone'
+            },
         }
     },
     generalComponents: {
@@ -199,13 +253,56 @@ const pages = {
         }
     }
 }
+interface IProps {
+    theme?: string;
+}
+interface IState {
+    theme: 'dark-ui' | 'light-ui' | string;
+}
+
+class ReactDoc extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            theme: 'light-ui',
+        }
+        this.handleTheme = this.handleTheme.bind(this);
+    }
+
+    handleTheme(newTheme: string) {
+        document.body.setAttribute('data-theme', newTheme);
+
+        this.setState({
+            theme: newTheme
+        })
+    }
+
+    checkTheme(theme: string) {
+        return this.state.theme === theme;
+    }
 
-class ReactDoc extends React.Component {
     render() {
         return (
             <React.Fragment>
                 <ReactNav pages={pages} />
                 <main className="docs-page__content docs-page__container-fluid">
+                    <div className="docs-page__fla-button-container">
+                        <Dropdown
+                            items={[
+                                {
+                                    type: 'group', label: 'Chose a theme', items: [
+                                        'divider',
+                                        { label: 'Light', icon: 'adjust', active: this.checkTheme('light-ui'), onSelect: () => this.handleTheme('light-ui') },
+                                        { label: 'Dark', icon: 'adjust', active: this.checkTheme('dark-ui'), onSelect: () => this.handleTheme('dark-ui') },
+                                        { label: 'Accessible Light', active: this.checkTheme('accessible-light-ui'), icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui') },
+                                    ]
+                                },
+                            ]}>
+                            <button className="docs-page__fla-button" aria-label="Change theme" onClick={() => false}>
+                                <i className="icon-adjust"></i>
+                            </button>
+                        </Dropdown>
+                    </div>
                     <Switch>
                         <Route path="/react/buttons" component={ButtonsDoc} />
                         <Route path="/react/icon-buttons" component={IconButtonDoc} />
@@ -221,14 +318,17 @@ class ReactDoc extends React.Component {
                         <Route path="/react/autocomplete" component={AutocompleteDoc} />
                         <Route path="/react/select" component={SelectsDoc} />
                         <Route path="/react/select-with-template" component={SelectWithTemplateDocs} />
+                        <Route path="/react/multiselect" component={MultiselectDocs} />
+                        <Route path="/react/treeselect" component={TreeSelectDocs} />
                         <Route path="/react/popover" component={PopoverDoc} />
                         <Route path="/react/date-picker" component={DatePickerDoc} />
                         <Route path="/react/time-picker" component={TimePickerDoc} />
                         <Route path="/react/switch" component={SwitchDoc} />
-                        <Route path="/react/radio" component={RadiosDoc} />
+                        <Route path="/react/radiogroup" component={RadioGroupDoc} />
                         <Route path="/react/checkbox" component={CheckboxsDoc} />
                         <Route path="/react/tab" component={TabsDoc} />
                         <Route path="/react/left-navigation" component={LeftNavigationsDoc} />
+                        <Route path="/react/Quick-navigation-bar" component={QuickNavBarDoc} />
                         <Route path="/react/nav-buttons" component={NavButtonsDoc} />
                         <Route path="/react/icon-font" component={IconFontDoc} />
                         <Route path="/react/big-icon-font" component={BigIconFontDoc} />
@@ -241,11 +341,19 @@ class ReactDoc extends React.Component {
                         <Route path="/react/grid-item" component={GridItemDoc} />
                         <Route path="/react/modal" component={ModalDoc} />
                         <Route path="/react/carousel" component={CarouselDoc} />
+                        <Route path="/react/content-divider" component={ContentDividerDoc} />
                         <Route path="/react/menu" component={MenuDocs} />
                         <Route path="/react/togglebox" component={ToggleboxDocs} />
                         <Route path="/react/list-items" component={ListItemsDoc} />
+                        <Route path="/react/panel" component={PanelDoc} />
                         <Route path="/react/select-grid" component={SelectGridDocs} />
                         <Route path="/react/icon-picker" component={IconPickerDocs} />
+                        <Route path="/react/simple-list" component={SimpleListDoc} />
+                        <Route path="/react/boxed-list" component={BoxedListDoc} />
+                        <Route path="/react/heading" component={HeadingDoc} />
+                        <Route path="/react/text" component={TextDoc} />
+                        <Route path="/react/container" component={ContainerDoc} />
+                        <Route path="/react/dropzone" component={DropZoneDoc} />
                         <Route path="/" component={ReactDefault} />
                     </Switch>
                 </main>
@@ -270,10 +378,9 @@ class ReactPlayground extends React.Component<IProps> {
 
 const parsePlayground = ({ match }, playgrounds) => {
     const Component = Playgrounds[playgrounds[match.params.id].component];
-
     return (
         <Component />
     );
 };
 
-export { ReactDoc, ReactPlayground };
+export { ReactDoc, ReactPlayground };