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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Components from './components/Index';
-import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, Input, Select, Option, Label, Icon, IconButton, CheckGroup, GridList, Badge, ThemeSelector, Container } from '../../../../app-typescript/index';
+import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, Input, Select, Option, Label, Icon, IconButton, CheckGroup, GridList, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner } from '../../../../app-typescript/index';
 import { Carousel } from '../../../../app-typescript/index';
 import * as GridElements from '../../../../app-typescript/components/GridItem';
 
@@ -16,12 +16,12 @@ interface IState {
     itemSelected1: boolean;
     itemSelected2: boolean;
     itemSelected3: boolean;
-    value1: string;
-    value2: string;
-    value3: string;
-    value4: string;
-    value5: string;
-    value6: string;
+    value1?: string;
+    value2?: string;
+    value3?: string;
+    value4?: string;
+    value5?: string;
+    value6?: string;
     selctedTheme: string;
 }
 
@@ -56,6 +56,188 @@ export class TestGround extends React.Component<IProps, IState> {
             <Components.Layout header='Testing Ground'>
                 <Components.LayoutContainer>
                     <Components.MainPanel>
+                        <h3 className="docs-page__h3 sd-margin-y--0">Table list</h3>
+                        <hr />
+                        <ul className='table-list'>
+                            <li className='table-list__item table-list__item--clickable table-list__item--draggable'>
+                                <div className='table-list__item-content'>
+                                    <div className='table-list__item-content-block'>
+                                        <Label style='translucent' text='aacc' />
+                                        <Label style='translucent' type='primary' text='prlg' />
+                                    </div>
+                                    <div className='table-list__item-content-block table-list__item-content-block--center'>
+                                        <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
+                                    </div>
+                                    <div className='table-list__item-content-block'>
+                                        <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                    </div>
+                                </div>
+                                <div className='table-list__slide-in-actions'>
+                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                                </div>
+                            </li>
+                            <li className='table-list__item table-list__item--clickable table-list__item--draggable'>
+                                <div className='table-list__item-content'>
+                                    <div className='table-list__item-content-block'>
+                                        <Label style='translucent' type='warning' text='pokr' />
+                                        <Label style='translucent' text='slika' />
+                                    </div>
+                                    <div className='table-list__item-content-block table-list__item-content-block--center'>
+                                        <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
+                                    </div>
+                                    <div className='table-list__item-content-block'>
+                                        <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                    </div>
+                                </div>
+                                <div className='table-list__slide-in-actions'>
+                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                                </div>
+                            </li>
+                            <li className='table-list__item table-list__item--clickable'>
+                                <div className='table-list__item-content'>
+                                    <div className='table-list__item-content-block'>
+                                        <Label style='translucent' type='warning' text='pokr' />
+                                        <Label style='translucent' text='slika' />
+                                    </div>
+                                    <div className='table-list__item-content-block table-list__item-content-block--center'>
+                                        <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
+                                    </div>
+                                    <div className='table-list__item-content-block'>
+                                        <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                    </div>
+                                </div>
+                                <div className='table-list__slide-in-actions'>
+                                    <IconButton icon='pencil' size='small' ariaValue='More actions' onClick={()=> false} />
+                                    <IconButton icon='trash' size='small' ariaValue='More actions' onClick={()=> false} />
+                                </div>
+                            </li>
+                            <li className='table-list__item table-list__item--clickable table-list__item--selected'>
+                                <div className='table-list__item-content'>
+                                    <div className='table-list__item-content-block'>
+                                        <Label style='translucent' type='warning' text='pokr' />
+                                        <Label style='translucent' text='slika' />
+                                    </div>
+                                    <div className='table-list__item-content-block table-list__item-content-block--center'>
+                                        <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
+                                    </div>
+                                    <div className='table-list__item-content-block'>
+                                        <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                    </div>
+                                </div>
+                                <div className='table-list__slide-in-actions'>
+                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                                </div>
+                            </li>
+                            <li className='table-list__item table-list__item--clickable'>
+                                <div className='table-list__item-content'>
+                                    <div className='table-list__item-content-block'>
+                                        <Label style='translucent' type='warning' text='pokr' />
+                                        <Label style='translucent' text='slika' />
+                                    </div>
+                                    <div className='table-list__item-content-block table-list__item-content-block--center'>
+                                        <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
+                                    </div>
+                                    <div className='table-list__item-content-block'>
+                                        <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                    </div>
+                                </div>
+                                <div className='table-list__slide-in-actions'>
+                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                                </div>
+                            </li>
+                        </ul>
+
+                        <h3 className="docs-page__h3 sd-margin-y--0 sd-margin-t--3">Table list with items between</h3>
+                        <hr />
+                        <ul className='table-list table-list--contained'>
+                            <li className='table-list__item-container'>
+                                <div className='table-list__item table-list__item--clickable table-list__item--draggable'>
+                                    <div className='table-list__item-content'>
+                                        <div className='table-list__item-content-block'>
+                                            <Label style='translucent' text='aacc' />
+                                            <Label style='translucent' type='primary' text='prlg' />
+                                        </div>
+                                        <div className='table-list__item-content-block table-list__item-content-block--center'>
+                                            <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
+                                        </div>
+                                        <div className='table-list__item-content-block'>
+                                            <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                        </div>
+                                    </div>
+                                    <div className='table-list__slide-in-actions'>
+                                        <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                                    </div>
+                                </div>
+
+                                <div className='table-list__add-bar-container'>
+                                    <Tooltip text='Add item' flow='top' appendToBody={true}>
+                                        <div className='table-list__add-bar'>
+                                            <Button type="primary" icon="plus-large" text="Add item" size="small" shape="round" iconOnly={true} onClick={()=> false} />
+                                        </div>
+                                    </Tooltip>
+                                </div>
+                            </li>
+
+                            <li className='table-list__item-container'>
+                                <div className='table-list__item table-list__item--clickable table-list__item--draggable'>
+                                    <div className='table-list__item-content'>
+                                        <div className='table-list__item-content-block'>
+                                            <Label style='translucent' type='warning' text='pokr' />
+                                            <Label style='translucent' text='slika' />
+                                        </div>
+                                        <div className='table-list__item-content-block table-list__item-content-block--center'>
+                                            <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
+                                        </div>
+                                        <div className='table-list__item-content-block'>
+                                            <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                        </div>
+                                    </div>
+                                    <div className='table-list__slide-in-actions'>
+                                        <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                                    </div>
+                                </div>
+
+                                <div className='table-list__add-bar-container'>
+                                    <Tooltip text='Add item' flow='top' appendToBody={true}>
+                                        <div className='table-list__add-bar'>
+                                            <Button type="primary" icon="plus-large" text="Add item" size="small" shape="round" iconOnly={true} onClick={()=> false} />
+                                        </div>
+                                    </Tooltip>
+                                </div>
+                            </li>
+
+                            <li className='table-list__item-container'>
+                                <div className='table-list__item table-list__item--clickable table-list__item--draggable'>
+                                    <div className='table-list__item-content'>
+                                        <div className='table-list__item-content-block'>
+                                            <Label style='translucent' type='warning' text='pokr' />
+                                            <Label style='translucent' text='slika' />
+                                        </div>
+                                        <div className='table-list__item-content-block table-list__item-content-block--center'>
+                                            <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
+                                        </div>
+                                        <div className='table-list__item-content-block'>
+                                            <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                        </div>
+                                    </div>
+                                    <div className='table-list__slide-in-actions'>
+                                        <IconButton icon='pencil' size='small' ariaValue='More actions' onClick={()=> false} />
+                                        <IconButton icon='trash' size='small' ariaValue='More actions' onClick={()=> false} />
+                                    </div>
+                                </div>
+
+                                <div className='table-list__add-bar-container'>
+                                    <Tooltip text='Add item' flow='top' appendToBody={true}>
+                                        <div className='table-list__add-bar'>
+                                            <Button type="primary" icon="plus-large" text="Add item" size="small" shape="round" iconOnly={true} onClick={()=> false} />
+                                        </div>
+                                    </Tooltip>
+                                </div>
+                            </li>
+                        </ul>
+
+                        <hr /><hr />
+
                         <h3 className="docs-page__h3 sd-margin-y--0">Checkbox</h3>
                         <hr />
                         <div className="sd-check__group-new sd-check__group-new--vertical">
@@ -166,183 +348,9 @@ export class TestGround extends React.Component<IProps, IState> {
                         <div className="button-group button-group--comfort">
                             <div className="color-swatch colour-test--1"></div>
                             <div className="color-swatch colour-test--2"></div>
+                            <Spinner />
                         </div>
-                        {/* <hr />
-                        <div className="sd-theme-selector__list">
-                            <div className="sd-theme-selector__item">
-                                <figure className="sd-theme-selector__item-thumb" data-theme="light-ui">
-                                    <svg viewBox="0 0 156 94" xmlns="http://www.w3.org/2000/svg">
-                                        <g fill="none" fillRule="evenodd">
-                                            <path d="m0 0h156v94h-156z" fill="var(--sd-colour-panel-bg--100)"/>
-                                            <circle cx="144" cy="33" fill="var(--color-text-lighter)" r="4"/>
-                                            <rect fill="var(--sd-colour-interactive)" height="15" rx="2" width="58" x="91" y="71"/>
-                                            <g fill="var(--sd-colour-btn-bg-neutral)">
-                                                <rect height="15" rx="2" width="58" x="29" y="52"/>
-                                                <rect height="15" rx="2" width="58" x="29" y="71"/>
-                                                <rect height="15" rx="2" width="58" x="91" y="52"/>
-                                            </g>
-                                            <g fill="#fff">
-                                                <rect height="3" rx="1.5" width="9" x="99" y="77"/>
-                                                <rect height="3" rx="1.5" width="11" x="130" y="77"/>
-                                                <rect height="3" rx="1.5" width="18" x="110" y="77"/>
-                                            </g>
-                                            <g fill="var(--color-text-light)">
-                                                <rect height="3" rx="1.5" width="9" x="37" y="58"/>
-                                                <rect height="3" rx="1.5" width="11" x="68" y="58"/>
-                                                <rect height="3" rx="1.5" width="18" x="48" y="58"/>
-                                                <rect height="3" rx="1.5" width="9" x="37" y="77"/>
-                                                <rect height="3" rx="1.5" width="11" x="68" y="77"/>
-                                                <rect height="3" rx="1.5" width="18" x="48" y="77"/>
-                                                <rect height="3" rx="1.5" width="9" x="99" y="58"/>
-                                                <rect height="3" rx="1.5" width="11" x="130" y="58"/>
-                                                <rect height="3" rx="1.5" width="18" x="110" y="58"/>
-                                            </g>
-                                            <g fill="var(--color-text)">
-                                                <rect height="4" rx="2" width="11" x="29" y="31"/>
-                                                <rect height="4" rx="2" width="14" x="70" y="31"/>
-                                                <rect height="4" rx="2" width="23" x="43" y="31"/>
-                                            </g>
-                                            <path d="m0 22h22v72h-22z" fill="var(--sd-colour-sidebar-menu--00)"/>
-                                            <circle cx="11" cy="52" fill="var(--sd-colour-interactive)" r="6"/>
-                                            <g fill="var(--color-icon-default)" opacity=".75">
-                                                <circle cx="11" cy="34" r="6"/>
-                                                <circle cx="11" cy="70" r="6"/>
-                                            </g>
-                                            <path d="m0 0h156v22h-156z" fill="var(--sd-colour-top-menu)"/>
-                                            <path d="m0 22h156v1h-156z" fill="var(--sd-colour--shadow-line)"/>
-                                            <g fill="hsla(214, 13%, 65%, 1)" opacity="1">
-                                                <rect height="4" rx="2" width="11" x="31" y="9"/>
-                                                <rect height="4" rx="2" width="23" x="45" y="9"/>
-                                            </g>
-                                            <path d="m22 44h134v1h-134z" fill="var(--sd-colour-line--medium)"/>
-                                            <path d="m0 0h22v22h-22z" fill="var(--sd-colour-top-menu__btn)"/>
-                                            <path d="m15 13v1h-8v-1zm0-3v1h-8v-1zm0-3v1h-8v-1z" fill="#fff"/>
-                                        </g>
-                                    </svg>
-                                </figure>
-                                <div className="sd-theme-selector__item-action">
-                                    <input type="radio" className="sd-theme-selector__input" id="id50" name="id5" />
-                                    <span className="sd-radio-new"></span>
-                                    <label className="sd-theme-selector__label" htmlFor="id50">Light</label>
-                                </div>
-                            </div>
-
-                            <div className="sd-theme-selector__item">
-                                <figure className="sd-theme-selector__item-thumb" data-theme="dark-ui">
-                                    <svg viewBox="0 0 156 94" xmlns="http://www.w3.org/2000/svg">
-                                        <g fill="none" fillRule="evenodd">
-                                            <path d="m0 0h156v94h-156z" fill="var(--sd-colour-panel-bg--100)"/>
-                                            <circle cx="144" cy="33" fill="var(--color-text-lighter)" r="4"/>
-                                            <rect fill="var(--sd-colour-interactive)" height="15" rx="2" width="58" x="91" y="71"/>
-                                            <g fill="var(--sd-colour-btn-bg-neutral)">
-                                                <rect height="15" rx="2" width="58" x="29" y="52"/>
-                                                <rect height="15" rx="2" width="58" x="29" y="71"/>
-                                                <rect height="15" rx="2" width="58" x="91" y="52"/>
-                                            </g>
-                                            <g fill="#fff">
-                                                <rect height="3" rx="1.5" width="9" x="99" y="77"/>
-                                                <rect height="3" rx="1.5" width="11" x="130" y="77"/>
-                                                <rect height="3" rx="1.5" width="18" x="110" y="77"/>
-                                            </g>
-                                            <g fill="var(--color-text-light)">
-                                                <rect height="3" rx="1.5" width="9" x="37" y="58"/>
-                                                <rect height="3" rx="1.5" width="11" x="68" y="58"/>
-                                                <rect height="3" rx="1.5" width="18" x="48" y="58"/>
-                                                <rect height="3" rx="1.5" width="9" x="37" y="77"/>
-                                                <rect height="3" rx="1.5" width="11" x="68" y="77"/>
-                                                <rect height="3" rx="1.5" width="18" x="48" y="77"/>
-                                                <rect height="3" rx="1.5" width="9" x="99" y="58"/>
-                                                <rect height="3" rx="1.5" width="11" x="130" y="58"/>
-                                                <rect height="3" rx="1.5" width="18" x="110" y="58"/>
-                                            </g>
-                                            <g fill="var(--color-text)">
-                                                <rect height="4" rx="2" width="11" x="29" y="31"/>
-                                                <rect height="4" rx="2" width="14" x="70" y="31"/>
-                                                <rect height="4" rx="2" width="23" x="43" y="31"/>
-                                            </g>
-                                            <path d="m0 22h22v72h-22z" fill="var(--sd-colour-sidebar-menu--00)"/>
-                                            <circle cx="11" cy="52" fill="var(--sd-colour-interactive)" r="6"/>
-                                            <g fill="var(--color-icon-default)" opacity=".75">
-                                                <circle cx="11" cy="34" r="6"/>
-                                                <circle cx="11" cy="70" r="6"/>
-                                            </g>
-                                            <path d="m0 0h156v22h-156z" fill="var(--sd-colour-top-menu)"/>
-                                            <path d="m0 22h156v1h-156z" fill="var(--sd-colour--shadow-line)"/>
-                                            <g fill="hsla(214, 13%, 65%, 1)" opacity="1">
-                                                <rect height="4" rx="2" width="11" x="31" y="9"/>
-                                                <rect height="4" rx="2" width="23" x="45" y="9"/>
-                                            </g>
-                                            <path d="m22 44h134v1h-134z" fill="var(--sd-colour-line--medium)"/>
-                                            <path d="m0 0h22v22h-22z" fill="var(--sd-colour-top-menu__btn)"/>
-                                            <path d="m15 13v1h-8v-1zm0-3v1h-8v-1zm0-3v1h-8v-1z" fill="#fff"/>
-                                        </g>
-                                    </svg>
-                                </figure>
-                                <div className="sd-theme-selector__item-action">
-                                    <input type="radio" className="sd-theme-selector__input" id="id50" name="id5" />
-                                    <span className="sd-radio-new"></span>
-                                    <label className="sd-theme-selector__label" htmlFor="id50">Dark</label>
-                                </div>
-                            </div>
 
-                            <div className="sd-theme-selector__item">
-                                <figure className="sd-theme-selector__item-thumb" data-theme="accessible-light-ui">
-                                    <svg viewBox="0 0 156 94" xmlns="http://www.w3.org/2000/svg">
-                                        <g fill="none" fillRule="evenodd">
-                                            <path d="m0 0h156v94h-156z" fill="var(--sd-colour-panel-bg--100)"/>
-                                            <circle cx="144" cy="33" fill="var(--color-text-lighter)" r="4"/>
-                                            <rect fill="var(--sd-colour-interactive)" height="15" rx="2" width="58" x="91" y="71"/>
-                                            <g fill="var(--sd-colour-btn-bg-neutral)">
-                                                <rect height="15" rx="2" width="58" x="29" y="52"/>
-                                                <rect height="15" rx="2" width="58" x="29" y="71"/>
-                                                <rect height="15" rx="2" width="58" x="91" y="52"/>
-                                            </g>
-                                            <g fill="#fff">
-                                                <rect height="3" rx="1.5" width="9" x="99" y="77"/>
-                                                <rect height="3" rx="1.5" width="11" x="130" y="77"/>
-                                                <rect height="3" rx="1.5" width="18" x="110" y="77"/>
-                                            </g>
-                                            <g fill="var(--color-text-light)">
-                                                <rect height="3" rx="1.5" width="9" x="37" y="58"/>
-                                                <rect height="3" rx="1.5" width="11" x="68" y="58"/>
-                                                <rect height="3" rx="1.5" width="18" x="48" y="58"/>
-                                                <rect height="3" rx="1.5" width="9" x="37" y="77"/>
-                                                <rect height="3" rx="1.5" width="11" x="68" y="77"/>
-                                                <rect height="3" rx="1.5" width="18" x="48" y="77"/>
-                                                <rect height="3" rx="1.5" width="9" x="99" y="58"/>
-                                                <rect height="3" rx="1.5" width="11" x="130" y="58"/>
-                                                <rect height="3" rx="1.5" width="18" x="110" y="58"/>
-                                            </g>
-                                            <g fill="var(--color-text)">
-                                                <rect height="4" rx="2" width="11" x="29" y="31"/>
-                                                <rect height="4" rx="2" width="14" x="70" y="31"/>
-                                                <rect height="4" rx="2" width="23" x="43" y="31"/>
-                                            </g>
-                                            <path d="m0 22h22v72h-22z" fill="var(--sd-colour-sidebar-menu--00)"/>
-                                            <circle cx="11" cy="52" fill="var(--sd-colour-interactive)" r="6"/>
-                                            <g fill="var(--color-icon-default)" opacity=".75">
-                                                <circle cx="11" cy="34" r="6"/>
-                                                <circle cx="11" cy="70" r="6"/>
-                                            </g>
-                                            <path d="m0 0h156v22h-156z" fill="var(--sd-colour-top-menu)"/>
-                                            <path d="m0 22h156v1h-156z" fill="var(--sd-colour--shadow-line)"/>
-                                            <g fill="hsla(214, 13%, 65%, 1)" opacity="1">
-                                                <rect height="4" rx="2" width="11" x="31" y="9"/>
-                                                <rect height="4" rx="2" width="23" x="45" y="9"/>
-                                            </g>
-                                            <path d="m22 44h134v1h-134z" fill="var(--sd-colour-line--medium)"/>
-                                            <path d="m0 0h22v22h-22z" fill="var(--sd-colour-top-menu__btn)"/>
-                                            <path d="m15 13v1h-8v-1zm0-3v1h-8v-1zm0-3v1h-8v-1z" fill="#fff"/>
-                                        </g>
-                                    </svg>
-                                </figure>
-                                <div className="sd-theme-selector__item-action">
-                                    <input type="radio" className="sd-theme-selector__input" id="id50" name="id5" />
-                                    <span className="sd-radio-new"></span>
-                                    <label className="sd-theme-selector__label" htmlFor="id50">High Contrast</label>
-                                </div>
-                            </div>
-                        </div> */}
                         <hr />
                         <Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
                             <ThemeSelector size='small' options={[

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

@@ -141,6 +141,8 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                         <div className="form__item">
                                             <Input label='Title'
                                                 error='This is error message'
+                                                type='text'
+                                                value='Title'
                                                 inlineLabel={false}
                                                 disabled={false}
                                                 invalid={false}
@@ -167,6 +169,8 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                         <div className="form__item">
                                             <Input label='Keyword'
                                                 error='This is error message'
+                                                type='text'
+                                                value='Keyword'
                                                 inlineLabel={false}
                                                 disabled={false}
                                                 invalid={false}

package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    children?: React.ReactNode;
+    side?: 'left' | 'right';
+    background?: 'transparent' | 'light' | 'grey' | 'dark';
+    open?: boolean; 
+}
+
+export class AuthoringContainer extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('sd-content-wrapper__authoring-content-area', {
+            [`sd-content-wrapper__authoring-content-area--${this.props.side}`] : this.props.side,
+            [`sd-content-wrapper__authoring-content-area--${this.props.background}`]: this.props.background !== 'light' && this.props.background !== undefined,
+            'open-editor': this.props.open,
+        });
+        return (
+            <div className={classes}>
+                <div className='sd-editor__container'>
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+}

package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    children?: React.ReactNode;
+    background?: 'transparent' | 'light' | 'grey' | 'dark';
+    visible?: boolean; // defaults to light (white) 
+}
+
+export class ContentSplitter extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('sd-content-wrapper__content-splitter', {
+            [`sd-content-wrapper__content-splitter--${this.props.background}`]: this.props.background !== 'light' && this.props.background !== undefined,
+            'content-splitter--visible': this.props.visible,
+        });
+        return (
+            <div className={classes}>
+                {this.props.children}
+            </div>
+        );
+    }
+}

package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx

@@ -1,9 +1,13 @@
 export { Layout } from './Layout';
+export { LayoutContainer } from './LayoutContainer';
 export { HeaderPanel } from './HeaderPanel';
 export { MainPanel } from './MainPanel';
 export { OverlayPanel } from './OverlayPanel';
 export { RightPanel } from './RightPanel';
 export { LeftPanel } from './LeftPanel';
+export { AuthoringContainer } from './AuthoringContainer';
+export { ContentSplitter } from './ContentSplitter';
+
 export { SubNav } from './SubNav';
 export { GraphicButtonsGroup } from './GraphicButtonsGroup';
 export { GraphicButton } from './GraphicButton';
@@ -14,4 +18,5 @@ export { PanelHeader } from './PanelHeader';
 export { PanelFooter } from './PanelFooter';
 export { SearchBar } from './SearchBar';
 export { SidebarMenu } from './SidebarMenu';
-export { LayoutContainer } from './LayoutContainer';
+
+

package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx

@@ -1,13 +1,23 @@
 import * as React from 'react';
+import classNames from 'classnames';
 
 interface IProps {
     children?: React.ReactNode;
+    className?: string;
+    padding?: 'small' | 'medium' | 'large' | 'none';
 }
 
 export class MainPanel extends React.PureComponent<IProps> {
+    
     render() { 
+        let classes = classNames('sd-main-content-grid__content', {
+            'sd-padding--2': !this.props.padding || this.props.padding === 'small',
+            'sd-padding--3': this.props.padding === 'medium',
+            'sd-padding--4': this.props.padding === 'large',
+            'sd-padding--0': this.props.padding === 'none',
+        }, this.props.className);
         return (
-            <div className='sd-main-content-grid__content sd-padding--2'>
+            <div className={classes}>
                 {this.props.children}
             </div>
         );

package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx

@@ -3,29 +3,71 @@ import classNames from 'classnames';
 import {Icon}  from '../../../../../app-typescript/index';
 
 interface IProps {
+    value?: string | number;
     type?: 'expanded' | 'collapsed' | 'boxed';
     placeholder: string;
     focused? : boolean;
+    boxed?: boolean;
+    onSubmit?(): void;
 }
 
-export class SearchBar extends React.PureComponent<IProps> {
+interface IState {
+    inputValue: any;
+    type: string;
+    focused: boolean;
+    boxed?: boolean;
+}
+
+export class SearchBar extends React.PureComponent<IProps, IState> {
+    private inputRef: any;
+    constructor(props) {
+        super(props);
+        this.state = {
+            inputValue: this.props.value ? this.props.value : '', 
+            focused: this.props.focused ? this.props.focused : false,
+            type: this.props.type ? this.props.type : 'expanded',
+            boxed: this.props.boxed ? this.props.boxed : false,
+        }
+        this.inputRef = React.createRef();
+    }
+
+    componentDidUpdate(prevProps: any) {
+        if (prevProps.value !== this.props.value) {
+            this.setState({inputValue: this.props.value});
+        }
+    }
+
+    componentDidMount = () => {
+        document.addEventListener("mousedown", (event) => {
+            if (this.inputRef.current && !this.inputRef.current.contains(event.target)) {
+                this.setState({focused: false});
+            }
+        });
+    }
+
     render() {
         let classes = classNames('sd-searchbar', {
-            [`sd-searchbar--${this.props.type}`] : this.props.type,
-            'sd-searchbar--expanded': this.props.type === 'expanded' || this.props.type === undefined,
-            'sd-searchbar--focused' : this.props.focused,
+            [`sd-searchbar--${this.state.type}`] : this.props.type,
+            'sd-searchbar--expanded': this.state.type === 'expanded' || this.props.type === undefined,
+            'sd-searchbar--focused' : this.state.focused,
+            'sd-searchbar--boxed': this.state.boxed,
         });
         return (
-            <div className={classes}>
+            <div className={classes} ref={this.inputRef}>
                 <label className="sd-searchbar__icon"></label>
                 <input id="search-input"
+                ref={(input: any) => (input && this.props.focused) && input.focus()}
                     className="sd-searchbar__input"
                     type="text"
-                    placeholder={this.props.placeholder} />
-                <button className="sd-searchbar__cancel">
+                    placeholder={this.props.placeholder}
+                    value={this.state.inputValue}
+                    onChange={(e) => this.setState({inputValue: e.target.value})}
+                    onFocus={() => this.setState({focused: true})} />
+                {this.state.inputValue &&
+                <button className="sd-searchbar__cancel" onClick={() => this.setState({inputValue: ''})}>
                     <Icon name='remove-sign' />
-                </button>
-                <button id="sd-searchbar__search-btn" className="sd-searchbar__search-btn">
+                </button>}
+                <button id="sd-searchbar__search-btn" className="sd-searchbar__search-btn" onSubmit={() => this.props.onSubmit}>
                     <Icon name='chevron-right-thin' />
                 </button>
             </div>

package/examples/pages/react/Container.tsx

@@ -133,7 +133,7 @@ export default class ContainerDoc extends React.Component<IProps> {
                 <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='gap' isRequired={false} type='none | x-small | 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>