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

package/dist/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, Divider, InputWrapper, DatePicker, TimePicker, InputNew, InputBase } from '../../../../app-typescript/index';
 import { Carousel } from '../../../../app-typescript/index';
 import * as GridElements from '../../../../app-typescript/components/GridItem';
 
@@ -16,13 +16,16 @@ 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;
+    invalid: boolean;
+    date: any;
+    time: string;
 }
 
 export class TestGround extends React.Component<IProps, IState> {
@@ -40,6 +43,9 @@ export class TestGround extends React.Component<IProps, IState> {
             value5: undefined,
             value6: undefined,
             selctedTheme: 'light',
+            invalid: false,
+            date: '01/08/2022',
+            time: '16:50',
         }
     }
 
@@ -56,6 +62,240 @@ export class TestGround extends React.Component<IProps, IState> {
             <Components.Layout header='Testing Ground'>
                 <Components.LayoutContainer>
                     <Components.MainPanel>
+                        <InputNew
+                            label='testt'
+                            value=''
+                            onChange={(value) => false}
+                            //placeholder='test'
+                            required={true}
+                            info='Nullam Sollicitudin'
+                            maxLength={20}
+                            //invalid={true}
+                            //disabled={true}
+                            error='Error message'
+                            //inlineLabel={true}
+                            //labelHidden={true}
+                            type='text' />
+                        
+                        <hr />
+                        <div className='form__group-new'>
+                            <Input value='' onChange={(value) => {}} type='text' label='Text input' placeholder='Enter text' disabled={true} />
+                            <Input value='' onChange={(value) => {}} type='text' label='Text input' placeholder='Enter text' disabled={true} />
+                            <DatePicker
+                                value={this.state.date}
+                                onChange={(date) => {
+                                    this.setState({date});
+                                }}
+                                disabled={true}
+                                dateFormat="DD-MM-YYYY"
+                                label='Date'
+                                info='Nullam Sollicitudin'
+                                error='Error message'
+                                inlineLabel={true}
+
+                                shortcuts={[
+                                    {label: 'tomorrow', days: 1},
+                                    {label: 'yesterday', days: -1},
+                                ]}
+                            />
+                            <TimePicker
+                                value={this.state.time}
+                                disabled={true}
+                                required={true}
+                                label='Time'
+                                onChange={(time) => {
+                                    this.setState({time});
+                                }}
+                            />
+                            <Button text="Exit" type='primary' onClick={()=> false} />
+
+                            <Button text="Cancel" onClick={()=> false} />
+
+                            <Button text="Save" type='primary' onClick={()=> false} />
+                        </div>
+                        <hr />
+                        <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">
@@ -81,6 +321,42 @@ export class TestGround extends React.Component<IProps, IState> {
                         </div>
 
                         <hr /><hr />
+                        <h3 className="docs-page__h3 sd-margin-y--0 sd-margin-b--3">Duration input</h3>
+
+                        
+                        <div className="sd-input">
+                            <label className="sd-input__label" id="duration01">Input label</label>
+                            <div className="sd-input__duration-input" id="id06" aria-describedby="duration01">
+                                <input type="number" className="" placeholder='00'/>
+                                <span className="sd-input__suffix">h</span>
+                                <input type="number" className="" placeholder='00'/>
+                                <span className="sd-input__suffix">m</span>
+                                <input type="number" className="" placeholder='00'/>
+                                <span className="sd-input__suffix">s</span>
+                            </div>
+                            <div className="sd-input__char-count">0 / 30</div>
+                            <div className="sd-input__message-box">
+                                <div className="sd-input__hint">This is some hint message</div>
+                            </div>
+                        </div>
+
+                        <h3 className="docs-page__h3 sd-margin-y--0 sd-margin-b--3">testiramt</h3>
+
+                        
+                        <div className="sd-input">
+                            <label className="sd-input__label" id="duration01">Input label</label>
+                            {/* temp */}
+                            <div id="pr_id_1" className="p-dropdown p-component p-inputwrapper p-dropdown-clearable"><div className="p-hidden-accessible"><input type="text" aria-haspopup="listbox" /></div><div className="p-hidden-accessible p-dropdown-hidden-select"><select aria-hidden="true"><option value=""> </option></select></div><span className="p-dropdown-label p-inputtext p-placeholder"><div>Select a color</div></span><div className="p-dropdown-trigger" role="button" aria-haspopup="listbox" aria-expanded="false"><span className="p-dropdown-trigger-icon pi pi-chevron-down p-clickable"></span></div></div>
+                            {/* temp */}
+                            
+                            
+                            <div className="sd-input__char-count">0 / 30</div>
+                            <div className="sd-input__message-box">
+                                <div className="sd-input__hint">This is some hint message</div>
+                            </div>
+                        </div>
+
+                        <hr />
 
                         <h3 className="docs-page__h3 sd-margin-t--2 sd-margin-b--0">Radio</h3>
                         <hr />
@@ -166,183 +442,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={[
@@ -352,6 +454,23 @@ export class TestGround extends React.Component<IProps, IState> {
                             ]} onChange={($event)=>{this.setState({selctedTheme: $event})}} value={this.state.selctedTheme} />
                         </Container>
                         <hr />
+                        <Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
+                            <Button text="Exit" type='primary' onClick={()=> false} />
+                            <Divider />
+                            <Button text="Cancel" onClick={()=> false} />
+                            <Divider />
+                            <Button text="Save" type='primary' onClick={()=> false} />
+                        </Container>
+                        <hr />
+                        <Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
+                            
+                            <InputWrapper
+                                label="Label"
+                                invalid={false}>
+                                <input type='text' />
+                            </InputWrapper>
+                        </Container>
+                        <hr />
                         <Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
                             <div className='sd-dropzone__drop-target'>
                                 <div className='sd-dropzone__target-border'></div>

package/dist/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/dist/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/dist/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>
+        );
+    }
+}