superdesk-ui-framework 3.0.66 → 3.0.68

package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import * as Components from './components/Index';
-import { ButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, RadioButtonGroup, Input, Select, Option, Label, Icon, IconButton, Checkbox, GridList, Badge } from '../../../../app-typescript/index';
+import { ButtonGroup, Button, NavButton, SubNav, Dropdown, RadioButtonGroup, Input, Select, Option, Label, Icon, IconButton, Checkbox, GridList, Badge } from '../../../../app-typescript/index';
 import * as GridElements from '../../../../app-typescript/components/GridItem';
 
 import dummy_items from '../dummy-data/items';
 
-
 interface IProps {
     children?: React.ReactNode;
 }
@@ -78,7 +77,9 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                         { icon: 'spike', size: 'big' },
                         { icon: 'personal', size: 'big' },
                         { icon: 'global-search', size: 'big' },
-                        { icon: 'picture', size: 'big', active: true }]} />
+                        { icon: 'picture', size: 'big', active: true }
+                    ]}
+                />
 
                 <Components.LayoutContainer>
                     <Components.HeaderPanel>
@@ -94,7 +95,9 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                                                 { label: 'File archive', onSelect: () => this.setState({ dropDownState: 'File archive' }) },
                                                 { label: 'AP images', onSelect: () => this.setState({ dropDownState: 'AP archive' }) },
                                             ]
-                                        }]}>
+                                        }
+                                    ]}
+                                >
                                     <NavButton text={this.state.dropDownState ? this.state.dropDownState : 'All Archives'} onClick={() => false} />
                                 </Dropdown>
                             </ButtonGroup>
@@ -108,13 +111,17 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                             <ButtonGroup align='inline'>
                                 <NavButton icon='filter-large' onClick={this.handleFilter} />
                             </ButtonGroup>
-                            <RadioButtonGroup value={this.state.itemType} onChange={(value) => this.setState({ itemType: value })}
+                            <RadioButtonGroup
+                                value={this.state.itemType}
+                                onChange={(value) => this.setState({ itemType: value })}
                                 options={[
-                                { value: 'itemtype01', label: 'All item types' },
-                                { value: 'itemtype02', label: 'Images only' },
-                                { value: 'itemtype03', label: 'Videos only' },
-                                { value: 'itemtype04', label: 'Documents only' }
-                                ]} group={{padded: true}} />
+                                    { value: 'itemtype01', label: 'All item types' },
+                                    { value: 'itemtype02', label: 'Images only' },
+                                    { value: 'itemtype03', label: 'Videos only' },
+                                    { value: 'itemtype04', label: 'Documents only' }
+                                ]}
+                                group={{padded: true}}
+                            />
                             <ButtonGroup align='end' spaces='no-space'>
                                 <Dropdown
                                     items={[
@@ -125,7 +132,8 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                                                 { label: 'Dark', onSelect: () => this.handleTheme('dark-ui')},
                                             ]
                                         },
-                                    ]}>
+                                    ]}
+                                >
                                     <NavButton type='default' icon='adjust' onClick={()=> false} />
                                 </Dropdown>
                                 <NavButton icon='th-list' onClick={() => false} />
@@ -145,22 +153,22 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                                                 label='Title'
                                                 type='text'
                                                 value=''
-                                                error='This is error message'
+                                                info='This is info message'
                                                 inlineLabel={false}
                                                 disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }} />
+                                                onChange={() => false}
+                                            />
                                         </div>
                                     </div>
                                     <div className="form__group">
                                         <div className="form__item">
                                             <Select label='Source'
                                                 value='Select ingest source...'
-                                                error='This is error message'
+                                                info='This is info message'
                                                 inlineLabel={false}
                                                 disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }}>
+                                                onChange={() => false}
+                                            >
                                                 <Option value="option-1">Select ingest source...</Option>
                                                 <Option value="option-2">Associated Press</Option>
                                                 <Option value="option-3">Reuters</Option>
@@ -174,11 +182,11 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                                                 label='Keyword'
                                                 type='text'
                                                 value=''
-                                                error='This is error message'
+                                                info='This is info message'
                                                 inlineLabel={false}
                                                 disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }} />
+                                                onChange={() => false}
+                                            />
                                         </div>
                                     </div>
 
@@ -186,12 +194,11 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                                         <div className="form__item">
                                             <Select label='Usage right'
                                                 value='--- Not selected ---'
-                                                error='This is error message'
-                                                info='Dolor in hendrerit.'
+                                                info='This is info message'
                                                 inlineLabel={false}
                                                 disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }}>
+                                                onChange={() => false}
+                                            >
                                                 <Option value="">--- Not selected ---</Option>
                                                 <Option value="single">Single usage</Option>
                                                 <Option value="time">Time restricted</Option>
@@ -213,7 +220,7 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                     <Components.MainPanel >
 
                         <GridList size="small" gap="medium" margin="1">
-                            {dummy_items.map((item, index) =>
+                            {dummy_items.map((item: any, index: any) =>
                                 <GridElements.GridItem locked={item.locked} status={item.status} onClick={this.handlePreview} itemtype={item.type} key={index}>
                                     <GridElements.GridItemCheckWrapper>
                                         <Checkbox checked={item.selected} label={{text:''}} onChange={(value) => {
@@ -272,7 +279,9 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                                                         { label: 'Download', icon: 'download', onSelect: () => this.setState({ dropDownState: 'Download' }) },
                                                         { label: 'Delete', icon: 'trash', onSelect: () => this.setState({ dropDownState: 'Delete' }) },
                                                     ]
-                                                }]}>
+                                                }
+                                            ]}
+                                        >
                                             <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
                                         </Dropdown>
                                     </div>

package/dist/playgrounds/react-playgrounds/TestGround.tsx

@@ -1,13 +1,8 @@
 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, IconLabel, Tooltip, Spinner, Divider, InputWrapper, DatePicker, TimePicker, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, BoxedListContentRow} from '../../../../app-typescript/index';
-import { Carousel } from '../../../../app-typescript/index';
+import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker} from '../../../../app-typescript/index';
 import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
 
-
-import dummy_items from '../dummy-data/items';
-
-
 interface IProps {
     children?: React.ReactNode;
 }
@@ -46,7 +41,7 @@ export class TestGround extends React.Component<IProps, IState> {
             value6: undefined,
             selctedTheme: 'light',
             invalid: false,
-            date: '01/08/2022',
+            date: new Date('2022-01-08'),
             time: '16:50',
             modalPlanningTemplates: false,
         }
@@ -72,7 +67,8 @@ export class TestGround extends React.Component<IProps, IState> {
                             contentPadding='medium'
                             contentBg='medium'
                             size='medium'
-                            onHide={() => {this.setState({modalPlanningTemplates: false})}}>
+                            onHide={() => {this.setState({modalPlanningTemplates: false})}}
+                        >
                             <div className='modal__sticky-header'>
                                 <SearchBar placeholder='Search templates' boxed={true}>
                                     <Dropdown
@@ -80,8 +76,9 @@ export class TestGround extends React.Component<IProps, IState> {
                                             { label: 'Features', onSelect: () => 1 },
                                             { label: 'Sports', onSelect: () => 1 },
                                             { label: 'Entertainment', onSelect: () => 1 },
-                                        ]}>
-                                    All Calendars
+                                        ]}
+                                    >
+                                        All Calendars
                                     </Dropdown>
                                 </SearchBar>
                             </div>
@@ -108,11 +105,14 @@ export class TestGround extends React.Component<IProps, IState> {
                                     { label: 'Action 1', onSelect: () => 1 },
                                     { label: 'Action 2', onSelect: () => 1 },
                                     { label: 'Action 3', onSelect: () => 1 },
-                                ]}>
-                            Toogle button
+                                ]}
+                            >
+                                Toogle button
                             </Dropdown>
                         </SearchBar>
+
                         <hr />
+
                         <h3 className="docs-page__h3 sd-margin-y--0">Pagination</h3>
                         <div className='sd-pagination'>
                             <button className='sd-pagination__item sd-pagination__item--start' disabled>
@@ -121,23 +121,18 @@ export class TestGround extends React.Component<IProps, IState> {
                             <button className='sd-pagination__item sd-pagination__item--back' disabled>
                                 <Icon name='chevron-left-thin' />
                             </button>
-
                             <button className='sd-pagination__item'>1</button>
                             <button className='sd-pagination__item sd-pagination__item--active'>2</button>
                             <button className='sd-pagination__item'>3</button>
                             <button className='sd-pagination__item'>4</button>
-
                             <span className='sd-pagination__item sd-pagination__item--more'>...</span>
-
                             <button className='sd-pagination__item'>12</button>
-
                             <button className='sd-pagination__item sd-pagination__item--forward'>
                                 <Icon name='chevron-right-thin' />
                             </button>
                             <button className='sd-pagination__item sd-pagination__item--end'>
                                 <Icon name='forward-thin' />
                             </button>
-
                         </div>
 
                         <hr />
@@ -157,17 +152,20 @@ export class TestGround extends React.Component<IProps, IState> {
 
                         <hr />
 
-                        <img src="/path/toimage" alt="my image" 
+                        <img
+                            src="/path/toimage"
+                            alt="my image" 
                             onError={({ currentTarget }) => {
                                 currentTarget.onerror = null; // prevents looping
                                 currentTarget.src="/illustration--playground.svg";
                                 currentTarget.classList.add('broken-img')
-                            }} />
+                            }}
+                        />
 
                         <div className="input-wrap">
                             <FormLabel invalid required={true} state='focused' text="Form Label" forId="input1" />
                             <IconButton size='small' icon="settings" ariaValue="Screen-reader text" onClick={()=> false} />
-                            <InputBase placeholder='Test placeholder' boxedStyle invalid type='text' id="input1" value='' onChange={(value) => {}} />
+                            <InputBase placeholder='Test placeholder' boxedStyle invalid type='text' id="input1" value='' onChange={() => false} />
                             <div className="input-wrap__message-box">
                                 <div className="sd-input__hint">Error message</div>
                             </div>
@@ -179,55 +177,55 @@ export class TestGround extends React.Component<IProps, IState> {
                         <div className="input-wrap input-wrap--boxed">
                             <FormLabel style='boxed' text="Form Label" required={true} forId="input2" />
                             <IconButton size='small' icon="settings" ariaValue="Screen-reader text" onClick={()=> false} />
-                            <InputBase disabled size='medium' placeholder='Test placeholder' boxedStyle type='text' id="input2" value='' onChange={(value) => {}} />
+                            <InputBase disabled size='medium' placeholder='Test placeholder' boxedStyle type='text' id="input2" value='' onChange={() => false} />
                             <div className="input-wrap__message-box">
                                 <div className="sd-input__hint">Error message</div>
                             </div>
                             <span className="sd-input__char-count">0 / 40</span>
                         </div>
 
-                        <hr />
                         <hr />
 
                         <InputNew
                             label='test'
                             value=''
-                            onChange={(value) => false}
+                            onChange={() => false}
                             placeholder='test'
                             required={true}
                             info='Nullam Sollicitudin'
                             maxLength={20}
-                            error='Error message'
                             inlineLabel={true}
                             labelHidden={true}
-                            type='text' />
+                            type='text'
+                        />
                         
                         <hr />
+
                         <div className='form__group-new'>
                             <Input
                                 value=''
-                                onChange={(value) => {}}
+                                onChange={() => false}
                                 type='text'
                                 label='Text input'
                                 placeholder='Enter text'
-                                disabled={true} />
+                                disabled={true}
+                            />
                             <Input value=''
-                                onChange={(value) => {}}
+                                onChange={() => false}
                                 type='text'
                                 label='Text input'
                                 placeholder='Enter text'
-                                disabled={true} />
-                            {/* <DatePicker
+                                disabled={true}
+                            />
+                            <DatePicker
                                 value={this.state.date}
+                                dateFormat="YYYY-MM-DD"
+                                disabled={true}
+                                required={true}
+                                label='Date'
                                 onChange={(date) => {
                                     this.setState({date});
                                 }}
-                                disabled={true}
-                                dateFormat="DD-MM-YYYY"
-                                label='Date'
-                                info='Nullam Sollicitudin'
-                                error='Error message'
-                                inlineLabel={false}
                             />
                             <TimePicker
                                 value={this.state.time}
@@ -237,57 +235,36 @@ export class TestGround extends React.Component<IProps, IState> {
                                 onChange={(time) => {
                                     this.setState({time});
                                 }}
-                            /> */}
+                            />
                             <Button text="Clear" onClick={()=> false} />
                             <Button text="Cancel" onClick={()=> false} />
                             <Button text="Save" type='primary' onClick={()=> false} />
                         </div>
+
                         <hr />
 
                         <FormRowNew rowLabel='My group label' inlineLabels={true}>
                             <Input
                                 value=''
-                                onChange={(value) => {}}
+                                onChange={() => false}
                                 type='text'
                                 label='Text input'
                                 placeholder='Enter text'
                                 inlineLabel={true}
                                 labelHidden={true}
-                                disabled={false} />
+                                disabled={false}
+                            />
                             <Text size='small' align='center'>To:</Text>
                             <Input
                                 value=''
-                                onChange={(value) => {}}
+                                onChange={() => false}
                                 type='text'
                                 label='Text input'
                                 placeholder='Enter text'
                                 inlineLabel={true}
                                 labelHidden={true}
-                                disabled={false} />
-                            {/* <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}
-                                labelHidden={true}
+                                disabled={false}
                             />
-                            <TimePicker
-                                value={this.state.time}
-                                // disabled={true}
-                                required={true}
-                                inlineLabel={true}
-                                labelHidden={true}
-                                label='Time'
-                                onChange={(time) => {
-                                    this.setState({time});
-                                }}
-                            /> */}
                             <Button text="Save" type='primary' onClick={()=> false} />
                         </FormRowNew>
 
@@ -296,47 +273,31 @@ export class TestGround extends React.Component<IProps, IState> {
                         <FormRowNew>
                             <Input
                                 value=''
-                                onChange={(value) => {}}
+                                onChange={() => false}
                                 type='text'
                                 label='Text input'
                                 placeholder='Enter text'
-                                disabled={false} />
+                                disabled={false}
+                            />
                             <Text size='small' align='center'>To:</Text>
                             <Input
                                 value=''
-                                onChange={(value) => {}}
+                                onChange={() => false}
                                 type='text'
                                 label='Text input'
                                 placeholder='Enter text'
                                 labelHidden={true}
-                                disabled={false} />
-                            {/* <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={false}
-                            /> */}
-                            {/* <TimePicker
-                                value={this.state.time}
-                                // disabled={true}
-                                required={true}
-                                label='Time'
-                                onChange={(time) => {
-                                    this.setState({time});
-                                }}
-                            /> */}
+                                disabled={false}
+                            />
                             <Button text="Save" type='primary' onClick={()=> false} />
                         </FormRowNew>
 
                         <hr />
+
                         <h3 className="docs-page__h3 sd-margin-y--0">Table list (draggable)</h3>
+
                         <hr />
+
                         <h4 className="docs-page__h4 sd-margin-y--1">Handles visible</h4>
                         <ul className='table-list table-list--gap-s'>
                             <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always'>
@@ -414,6 +375,7 @@ export class TestGround extends React.Component<IProps, IState> {
                         </ul>
 
                         <hr />
+
                         <h4 className="docs-page__h4 sd-margin-y--1">Handles hidden</h4>
                         <ul className='table-list table-list--gap-s'>
                             <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none'>
@@ -491,6 +453,7 @@ export class TestGround extends React.Component<IProps, IState> {
                         </ul>
 
                         <hr />
+
                         <h4 className="docs-page__h4 sd-margin-y--1">Handles on hover</h4>
                         <ul className='table-list table-list--gap-s'>
                             <li className='table-list__item table-list__item--clickable table-list__item--draggable'>
@@ -566,11 +529,13 @@ export class TestGround extends React.Component<IProps, IState> {
                                 </div>
                             </li>
                         </ul>
-                        <hr />
+
                         <hr />
 
                         <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'>
@@ -658,14 +623,16 @@ export class TestGround extends React.Component<IProps, IState> {
                             </li>
                         </ul>
 
-                        <hr /><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">
                             <Checkbox label={{text: 'Label side not defined'}} onChange={(value) => console.log('value changed', value)} />
                             <Checkbox label={{text: 'Defined label side - right', side: 'end'}} onChange={(value) => console.log('value changed', value)} />
-                            <Checkbox label={{text: 'This checkbox is disabled'}} onChange={(value) => console.log('value changed', value)} disabled={true}/>
+                            <Checkbox label={{text: 'This checkbox is disabled'}} onChange={(value) => console.log('value changed', value)} disabled={true} />
                         </div>
 
                         <hr />
@@ -684,10 +651,10 @@ export class TestGround extends React.Component<IProps, IState> {
                             <CheckboxButton label={{text: 'Hell yeah!'}} onChange={(value) => console.log('value changed', value)} />
                         </div>
 
-                        <hr /><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">
@@ -706,48 +673,40 @@ export class TestGround extends React.Component<IProps, IState> {
 
                         <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 />
+
                         <div className="sd-check__group-new">
-                            <RadioGroup value={this.state.value2} options={[
-                                {label: "Radio 1", value: "somevalue1"},
-                                {label: "Radio 2", value: "somevalue2"},
-                                {label: "Radio 3", value: "somevalue3"},
-                            ]} onChange={(value) => this.setState(() => ({ value2: value }))} />
+                            <RadioGroup
+                                value={this.state.value2}
+                                options={[
+                                    {label: "Radio 1", value: "somevalue1"},
+                                    {label: "Radio 2", value: "somevalue2"},
+                                    {label: "Radio 3", value: "somevalue3"},
+                                ]}
+                                onChange={(value) => this.setState(() => ({ value2: value }))}
+                            />
                         </div>
 
                         <hr />
 
                         <div className="sd-check__group-new sd-check-button__group--left">
-                            <RadioButtonGroup value={this.state.value3} options={[
-                                {label: "RadioButton with an icon", value: "somevalue4", icon: "th-list"},
-                                {label: "RadioButton with no visible text, only an icon", value: "somevalue5", icon: "th", labelHidden: true},
-                                {label: "Normal RadioButton", value: "somevalue6"},
-                            ]} onChange={(value) => this.setState(() => ({ value3: value }))} />
+                            <RadioButtonGroup
+                                value={this.state.value3}
+                                options={[
+                                    {label: "RadioButton with an icon", value: "somevalue4", icon: "th-list"},
+                                    {label: "RadioButton with no visible text, only an icon", value: "somevalue5", icon: "th", labelHidden: true},
+                                    {label: "Normal RadioButton", value: "somevalue6"},
+                                ]}
+                                onChange={(value) => this.setState(() => ({ value3: value }))}
+                            />
                         </div>
 
-
                         <hr />
-                        
-                        {/* <Carousel></Carousel> */}
 
-                        <hr />
                         <div className="sd-thumb-carousel" data-theme="dark-ui">
                             <div className="sd-thumb-carousel__header">
                                 <h4 className="sd-thumb-carousel__heading">Mountain bike Championships gallery</h4>
@@ -802,7 +761,9 @@ export class TestGround extends React.Component<IProps, IState> {
                                 parturient montes, nascetur ridiculus mus.
                             </div>
                         </div>
+
                         <hr />
+
                         <div className="button-group button-group--comfort">
                             <div className="color-swatch colour-test--1"></div>
                             <div className="color-swatch colour-test--2"></div>
@@ -810,14 +771,21 @@ export class TestGround extends React.Component<IProps, IState> {
                         </div>
 
                         <hr />
+
                         <Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
-                            <ThemeSelector size='small' options={[
-                                {label: 'Light', value: 'light', theme: 'light'},
-                                {label: 'Dark', value: 'dark', theme: 'dark'},
-                                {label: 'High Contrast', value: 'high-contrast', theme: 'contrast-light', disabled: true},
-                            ]} onChange={($event)=>{this.setState({selctedTheme: $event})}} value={this.state.selctedTheme} />
+                            <ThemeSelector
+                                size='small'
+                                options={[
+                                    {label: 'Light', value: 'light', theme: 'light'},
+                                    {label: 'Dark', value: 'dark', theme: 'dark'},
+                                    {label: 'High Contrast', value: 'high-contrast', theme: 'contrast-light', disabled: true},
+                                ]}
+                                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 />
@@ -825,16 +793,19 @@ export class TestGround extends React.Component<IProps, IState> {
                             <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>