superdesk-ui-framework 4.0.46 → 4.0.48

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

@@ -1,6 +1,22 @@
 import * as React from 'react';
 import * as Components from './components/Index';
-import { ButtonGroup, Button, NavButton, SubNav, Dropdown, 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';
@@ -34,7 +50,7 @@ export class UiPlayground extends React.Component<IProps, IState> {
             itemSelected2: false,
             itemSelected3: false,
             value1: false,
-        }
+        };
         this.handleFilter = this.handleFilter.bind(this);
         this.handlePreview = this.handlePreview.bind(this);
         this.handleTheme = this.handleTheme.bind(this);
@@ -54,8 +70,8 @@ export class UiPlayground extends React.Component<IProps, IState> {
 
     handleTheme(newTheme: string) {
         this.setState({
-            theme: newTheme
-        })
+            theme: newTheme,
+        });
     }
 
     changeStatus(item: any, status: string) {
@@ -68,91 +84,123 @@ export class UiPlayground extends React.Component<IProps, IState> {
 
     render() {
         return (
-            <Components.Layout header='UI Playground' theme={this.state.theme}>
+            <Components.Layout header="UI Playground" theme={this.state.theme}>
                 <Components.SidebarMenu
                     items={[
-                        { icon: 'dashboard', size: 'big' },
-                        { icon: 'view', size: 'big' },
-                        { icon: 'marked-star', size: 'big' },
-                        { icon: 'spike', size: 'big' },
-                        { icon: 'personal', size: 'big' },
-                        { icon: 'global-search', size: 'big' },
-                        { icon: 'picture', size: 'big', active: true }
+                        {icon: 'dashboard', size: 'big'},
+                        {icon: 'view', size: 'big'},
+                        {icon: 'marked-star', size: 'big'},
+                        {icon: 'spike', size: 'big'},
+                        {icon: 'personal', size: 'big'},
+                        {icon: 'global-search', size: 'big'},
+                        {icon: 'picture', size: 'big', active: true},
                     ]}
                 />
 
                 <Components.LayoutContainer>
                     <Components.HeaderPanel>
                         <SubNav>
-                            <ButtonGroup align='inline'>
+                            <ButtonGroup align="inline">
                                 <Dropdown
                                     items={[
                                         {
-                                            type: 'group', label: 'Archives', items: [
+                                            type: 'group',
+                                            label: 'Archives',
+                                            items: [
                                                 'divider',
-                                                { label: 'All archives', onSelect: () => this.setState({ dropDownState: 'All archives' }) },
-                                                { label: 'Media archive', onSelect: () => this.setState({ dropDownState: 'Media archive' }) },
-                                                { label: 'File archive', onSelect: () => this.setState({ dropDownState: 'File archive' }) },
-                                                { label: 'AP images', onSelect: () => this.setState({ dropDownState: 'AP archive' }) },
-                                            ]
-                                        }
+                                                {
+                                                    label: 'All archives',
+                                                    onSelect: () => this.setState({dropDownState: 'All archives'}),
+                                                },
+                                                {
+                                                    label: 'Media archive',
+                                                    onSelect: () => this.setState({dropDownState: 'Media archive'}),
+                                                },
+                                                {
+                                                    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} />
+                                    <NavButton
+                                        text={this.state.dropDownState ? this.state.dropDownState : 'All Archives'}
+                                        onClick={() => false}
+                                    />
                                 </Dropdown>
                             </ButtonGroup>
-                            <Components.SearchBar placeholder='Search media'></Components.SearchBar>
+                            <Components.SearchBar placeholder="Search media"></Components.SearchBar>
 
-                            <ButtonGroup align='end'>
-                                <NavButton icon='dots-vertical' onClick={() => false} />
+                            <ButtonGroup align="end">
+                                <NavButton icon="dots-vertical" onClick={() => false} />
                             </ButtonGroup>
                         </SubNav>
                         <SubNav>
-                            <ButtonGroup align='inline'>
-                                <NavButton icon='filter-large' onClick={this.handleFilter} />
+                            <ButtonGroup align="inline">
+                                <NavButton icon="filter-large" onClick={this.handleFilter} />
                             </ButtonGroup>
                             <RadioButtonGroup
                                 options={[
-                                    {value:'test10', label:'Radio button with icon'},
-                                    {value:'test11', label:'I have an icon!'},
-                                    {value:'test12', label:'Yeah, me too!'},
+                                    {value: 'test10', label: 'Radio button with icon'},
+                                    {value: 'test11', label: 'I have an icon!'},
+                                    {value: 'test12', label: 'Yeah, me too!'},
                                 ]}
-                                group={{padded:true}}
+                                group={{padded: true}}
                                 value={this.state.itemType}
-                                onChange={(value) => this.setState({ itemType: value })}
+                                onChange={(value) => this.setState({itemType: value})}
                             />
-                            <ButtonGroup align='end' spaces='no-space'>
+                            <ButtonGroup align="end" spaces="no-space">
                                 <Dropdown
                                     items={[
                                         {
-                                            type: 'group', label: 'Chose a theme', items: [
+                                            type: 'group',
+                                            label: 'Chose a theme',
+                                            items: [
                                                 'divider',
-                                                { label: 'Light', icon: 'adjust', onSelect: () => this.handleTheme('light-ui')},
-                                                { label: 'Dark', icon: 'adjust', onSelect: () => this.handleTheme('dark-ui')},
-                                                { label: 'Accessible Light', icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui')},
-                                            ]
+                                                {
+                                                    label: 'Light',
+                                                    icon: 'adjust',
+                                                    onSelect: () => this.handleTheme('light-ui'),
+                                                },
+                                                {
+                                                    label: 'Dark',
+                                                    icon: 'adjust',
+                                                    onSelect: () => this.handleTheme('dark-ui'),
+                                                },
+                                                {
+                                                    label: 'Accessible Light',
+                                                    icon: 'adjust',
+                                                    onSelect: () => this.handleTheme('accessible-light-ui'),
+                                                },
+                                            ],
                                         },
                                     ]}
                                 >
-                                    <NavButton type='default' icon='adjust' onClick={()=> false} />
+                                    <NavButton type="default" icon="adjust" onClick={() => false} />
                                 </Dropdown>
-                                <NavButton icon='th-list' onClick={() => false} />
+                                <NavButton icon="th-list" onClick={() => false} />
                             </ButtonGroup>
                         </SubNav>
                     </Components.HeaderPanel>
                     {/* TOOLBAR HEADER */}
 
                     <Components.LeftPanel open={this.state.openFilter}>
-                        <Components.Panel side='left' background='grey'>
-                            <Components.PanelHeader handleFilterParent={this.handleFilter} title='Advanced filters' />
+                        <Components.Panel side="left" background="grey">
+                            <Components.PanelHeader handleFilterParent={this.handleFilter} title="Advanced filters" />
                             <Components.PanelContent>
                                 <Components.PanelContentBlock>
                                     <div className="form__group">
                                         <div className="form__item">
-                                            <Input label='Title'
-                                                error='This is error message'
-                                                type='text'
-                                                value='Title'
+                                            <Input
+                                                label="Title"
+                                                error="This is error message"
+                                                type="text"
+                                                value="Title"
                                                 inlineLabel={false}
                                                 disabled={false}
                                                 onChange={() => false}
@@ -161,9 +209,10 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                     </div>
                                     <div className="form__group">
                                         <div className="form__item">
-                                            <Select label='Source'
-                                                value='Select ingest source...'
-                                                error='This is error message'
+                                            <Select
+                                                label="Source"
+                                                value="Select ingest source..."
+                                                error="This is error message"
                                                 inlineLabel={false}
                                                 disabled={false}
                                                 onChange={() => false}
@@ -177,10 +226,11 @@ export class UiPlayground extends React.Component<IProps, IState> {
 
                                     <div className="form__group">
                                         <div className="form__item">
-                                            <Input label='Keyword'
-                                                error='This is error message'
-                                                type='text'
-                                                value='Keyword'
+                                            <Input
+                                                label="Keyword"
+                                                error="This is error message"
+                                                type="text"
+                                                value="Keyword"
                                                 inlineLabel={false}
                                                 disabled={false}
                                                 onChange={() => false}
@@ -190,10 +240,11 @@ export class UiPlayground extends React.Component<IProps, IState> {
 
                                     <div className="form__group">
                                         <div className="form__item">
-                                            <Select label='Usage right'
-                                                value='--- Not selected ---'
-                                                error='This is error message'
-                                                info='Dolor in hendrerit.'
+                                            <Select
+                                                label="Usage right"
+                                                value="--- Not selected ---"
+                                                error="This is error message"
+                                                info="Dolor in hendrerit."
                                                 inlineLabel={false}
                                                 disabled={false}
                                                 onChange={() => false}
@@ -209,8 +260,8 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                 </Components.PanelContentBlock>
                             </Components.PanelContent>
                             <Components.PanelFooter>
-                                <Button text='Clear' style='hollow' onClick={() => false} />
-                                <Button text='Submit' type='primary' onClick={() => false} />
+                                <Button text="Clear" style="hollow" onClick={() => false} />
+                                <Button text="Submit" type="primary" onClick={() => false} />
                             </Components.PanelFooter>
                         </Components.Panel>
                     </Components.LeftPanel>
@@ -218,12 +269,18 @@ export class UiPlayground extends React.Component<IProps, IState> {
 
                     <Components.MainPanel>
                         <GridList size="small" gap="medium" margin="3">
-                            {dummy_items.map((item: any, index: any) =>
-                                <GridElements.GridItem locked={item.locked} status={item.status} onClick={this.handlePreview} itemtype={item.type} key={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:''}}
+                                            label={{text: ''}}
                                             onChange={(value) => {
                                                 item.selected = value;
                                                 this.changeStatus(item, 'selected');
@@ -231,10 +288,10 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                         />
                                     </GridElements.GridItemCheckWrapper>
                                     <GridElements.GridItemTopActions>
-                                        <IconButton icon='fullscreen' ariaValue='More actions' onClick={()=> false} />
+                                        <IconButton icon="fullscreen" ariaValue="More actions" onClick={() => false} />
                                     </GridElements.GridItemTopActions>
                                     <GridElements.GridItemMedia>
-                                        { item.image ? <img src={item.image} alt={item.imageAlt}/> : null }
+                                        {item.image ? <img src={item.image} alt={item.imageAlt} /> : null}
                                     </GridElements.GridItemMedia>
                                     <GridElements.GridItemContent>
                                         <GridElements.GridItemTime time={item.date} />
@@ -242,51 +299,83 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                         <GridElements.GridItemText>{item.description}</GridElements.GridItemText>
                                     </GridElements.GridItemContent>
                                     <GridElements.GridItemFooter>
-                                        <GridElements.GridItemFooterBlock align='left'>
-                                            <Icon name={item.type} className='sd-grid-item__type-icn' />
+                                        <GridElements.GridItemFooterBlock align="left">
+                                            <Icon name={item.type} className="sd-grid-item__type-icn" />
                                             <Badge text={item.urgency} color={item.urgencyColor} />
-                                            <Badge text={item.priority} shape='square' color={item.priorityColor} />
+                                            <Badge text={item.priority} shape="square" color={item.priorityColor} />
                                         </GridElements.GridItemFooterBlock>
                                         <GridElements.GridItemFooterActions>
-                                            <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
+                                            <IconButton
+                                                icon="dots-vertical"
+                                                ariaValue="More actions"
+                                                onClick={() => this.changeStatus(item, 'archived')}
+                                            />
                                         </GridElements.GridItemFooterActions>
                                     </GridElements.GridItemFooter>
                                 </GridElements.GridItem>
-                            )}
+                            ))}
                         </GridList>
                     </Components.MainPanel>
                     {/* MAIN CONTENT (Monitoring) */}
 
                     <Components.RightPanel open={this.state.openPreview}>
-                        <Components.Panel side='right'>
-                            <Components.PanelHeader title='Item details' handleFilterParent={this.handlePreview} />
+                        <Components.Panel side="right">
+                            <Components.PanelHeader title="Item details" handleFilterParent={this.handlePreview} />
                             <Components.PanelContent>
                                 <Components.PanelContentBlock flex={true}>
                                     <div className="side-panel__content-block-inner side-panel__content-block-inner--grow">
-                                        <p className="sd-text__date-and-author"><time>Created 19.06.2020 by </time> <span className="sd-text__author">Mika Karapet</span></p> 
-                                        <p className="sd-text__date-and-author"><time>Updated 3 hours ago by</time> <span className="sd-text__author">John Doe</span></p>
+                                        <p className="sd-text__date-and-author">
+                                            <time>Created 19.06.2020 by </time>{' '}
+                                            <span className="sd-text__author">Mika Karapet</span>
+                                        </p>
+                                        <p className="sd-text__date-and-author">
+                                            <time>Updated 3 hours ago by</time>{' '}
+                                            <span className="sd-text__author">John Doe</span>
+                                        </p>
                                     </div>
                                     <div className="side-panel__content-block-inner side-panel__content-block-inner--right">
                                         <Dropdown
-                                            align = 'right'
+                                            align="right"
                                             items={[
                                                 {
-                                                    type: 'group', label: 'Actions', items: [
+                                                    type: 'group',
+                                                    label: 'Actions',
+                                                    items: [
                                                         'divider',
-                                                        { label: 'Edit', icon: 'pencil', onSelect: () => this.setState({ dropDownState: 'Edit ' }) },
-                                                        { label: 'Download', icon: 'download', onSelect: () => this.setState({ dropDownState: 'Download' }) },
-                                                        { label: 'Delete', icon: 'trash', onSelect: () => this.setState({ dropDownState: 'Delete' }) },
-                                                    ]
-                                                }
+                                                        {
+                                                            label: 'Edit',
+                                                            icon: 'pencil',
+                                                            onSelect: () => this.setState({dropDownState: 'Edit '}),
+                                                        },
+                                                        {
+                                                            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} />
+                                            <IconButton
+                                                ariaValue="dropdown-more-options"
+                                                icon="dots-vertical"
+                                                onClick={() => false}
+                                            />
                                         </Dropdown>
                                     </div>
                                 </Components.PanelContentBlock>
-                                <Components.PanelContentBlock padding='0' className='side-panel__content-block--image'>
+                                <Components.PanelContentBlock padding="0" className="side-panel__content-block--image">
                                     <span className="side-panel__image-actions">
-                                        <IconButton ariaValue='button-fullscreen' icon='fullscreen' onClick={() => false} />
+                                        <IconButton
+                                            ariaValue="button-fullscreen"
+                                            icon="fullscreen"
+                                            onClick={() => false}
+                                        />
                                     </span>
                                     <img src="/d_trump.jpg" alt="test" />
                                 </Components.PanelContentBlock>
@@ -298,11 +387,14 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                     </div>
                                     <div className="form__row">
                                         <label className="form-label form-label--light">Description</label>
-                                        <p className="sd-text sd-text--medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur, vestibulum eros.</p>
+                                        <p className="sd-text sd-text--medium">
+                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus,
+                                            porta ac consectetur, vestibulum eros.
+                                        </p>
                                     </div>
                                     <div className="form__row">
-                                        <Label text='Public' type='success' style='hollow' size='large' />
-                                    </div> 
+                                        <Label text="Public" type="success" style="hollow" size="large" />
+                                    </div>
                                 </Components.PanelContentBlock>
                             </Components.PanelContent>
                         </Components.Panel>
@@ -312,7 +404,7 @@ export class UiPlayground extends React.Component<IProps, IState> {
                     <Components.OverlayPanel />
                     {/* OVERLAY PANEL (Send To) */}
                 </Components.LayoutContainer>
-            </Components.Layout >
+            </Components.Layout>
         );
     }
 }

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

@@ -5,22 +5,21 @@ interface IProps {
     children?: React.ReactNode;
     side?: 'left' | 'right';
     background?: 'transparent' | 'light' | 'grey' | 'dark';
-    open?: boolean; 
+    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,
+            [`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 className="sd-editor__container">{this.props.children}</div>
             </div>
         );
     }
-}
+}

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

@@ -10,75 +10,75 @@ export class AuthoringContent extends React.PureComponent<IProps> {
         if (this.props.open) {
             return (
                 <React.Fragment>
-                    <div className='sd-content-wrapper__content-splitter'></div>
-                    <div className='sd-content-wrapper__authoring-content-area'>
-                        <div className='sd-authoring-page'>
-                            <div className='sd-authoring-page__header'>
-                                <div className='subnav subnav--darker'>
+                    <div className="sd-content-wrapper__content-splitter"></div>
+                    <div className="sd-content-wrapper__authoring-content-area">
+                        <div className="sd-authoring-page">
+                            <div className="sd-authoring-page__header">
+                                <div className="subnav subnav--darker">
                                     <div className="subnav__stretch-bar">
                                         <figure className="avatar">VS</figure>
                                     </div>
-                                    <div className='subnav__stretch-bar subnav__stretch-bar--right'>
-                                        <button className='btn'>Cancel</button>
-                                        <button className='btn btn--primary'>Save</button>
+                                    <div className="subnav__stretch-bar subnav__stretch-bar--right">
+                                        <button className="btn">Cancel</button>
+                                        <button className="btn btn--primary">Save</button>
                                     </div>
-                                    <button className='navbtn'>
-                                        <i className='big-icon--minimize'></i>
+                                    <button className="navbtn">
+                                        <i className="big-icon--minimize"></i>
                                     </button>
-                                    <button className='navbtn'>
-                                        <i className='icon-dots-vertical'></i>
+                                    <button className="navbtn">
+                                        <i className="icon-dots-vertical"></i>
                                     </button>
-                                    <button className='navbtn navbtn--highlighted'>
-                                        <i className='big-icon--send-to'></i>
+                                    <button className="navbtn navbtn--highlighted">
+                                        <i className="big-icon--send-to"></i>
                                     </button>
                                 </div>
                             </div>
-                            <div className='sd-authoring-page__main-container'></div>
-                            <div className='sd-authoring-page__side-tabs sd-sidetab-menu sd-sidetab-menu--right sd-sidetab-menu--static'>
+                            <div className="sd-authoring-page__main-container"></div>
+                            <div className="sd-authoring-page__side-tabs sd-sidetab-menu sd-sidetab-menu--right sd-sidetab-menu--static">
                                 <ul>
-                                    <li data-sd-tooltip='Info' data-flow='left'>
-                                        <a className='sd-sidetab-menu__btn'>
-                                            <i className='sd-sidetab-menu__main-icon big-icon--info'></i>
-                                            <i className='sd-sidetab-menu__helper-icon icon-close-small'></i>
+                                    <li data-sd-tooltip="Info" data-flow="left">
+                                        <a className="sd-sidetab-menu__btn">
+                                            <i className="sd-sidetab-menu__main-icon big-icon--info"></i>
+                                            <i className="sd-sidetab-menu__helper-icon icon-close-small"></i>
                                         </a>
                                     </li>
-                                    <li data-sd-tooltip='Find & Replace' data-flow='left'>
-                                        <a className='sd-sidetab-menu__btn'>
-                                            <i className='sd-sidetab-menu__main-icon big-icon--find-replace'></i>
-                                            <i className='sd-sidetab-menu__helepr-icon icon-close-small'></i>
+                                    <li data-sd-tooltip="Find & Replace" data-flow="left">
+                                        <a className="sd-sidetab-menu__btn">
+                                            <i className="sd-sidetab-menu__main-icon big-icon--find-replace"></i>
+                                            <i className="sd-sidetab-menu__helepr-icon icon-close-small"></i>
                                         </a>
                                     </li>
-                                    <li data-sd-tooltip='Comments' data-flow='left'>
-                                        <a className='sd-sidetab-menu__btn'>
-                                            <i className='sd-sidetab-menu__main-icon big-icon--chat'></i>
-                                            <i className='sd-sidetab-menu__helepr-icon icon-close-small'></i>
+                                    <li data-sd-tooltip="Comments" data-flow="left">
+                                        <a className="sd-sidetab-menu__btn">
+                                            <i className="sd-sidetab-menu__main-icon big-icon--chat"></i>
+                                            <i className="sd-sidetab-menu__helepr-icon icon-close-small"></i>
                                         </a>
                                     </li>
-                                    <li data-sd-tooltip='Versions / History' data-flow='left'>
-                                        <a className='sd-sidetab-menu__btn'>
-                                            <i className='sd-sidetab-menu__main-icon big-icon--history'></i>
-                                            <i className='sd-sidetab-menu__helepr-icon icon-close-small'></i>
+                                    <li data-sd-tooltip="Versions / History" data-flow="left">
+                                        <a className="sd-sidetab-menu__btn">
+                                            <i className="sd-sidetab-menu__main-icon big-icon--history"></i>
+                                            <i className="sd-sidetab-menu__helepr-icon icon-close-small"></i>
                                         </a>
                                     </li>
-                                    <li data-sd-tooltip='Macros' data-flow='left'>
-                                        <a className='sd-sidetab-menu__btn'>
-                                            <i className='sd-sidetab-menu__main-icon big-icon--macro'></i>
-                                            <i className='sd-sidetab-menu__helepr-icon icon-close-small'></i>
+                                    <li data-sd-tooltip="Macros" data-flow="left">
+                                        <a className="sd-sidetab-menu__btn">
+                                            <i className="sd-sidetab-menu__main-icon big-icon--macro"></i>
+                                            <i className="sd-sidetab-menu__helepr-icon icon-close-small"></i>
                                         </a>
                                     </li>
-                                    <li data-sd-tooltip='Macros' data-flow='left'>
-                                        <a className='sd-sidetab-menu__btn'>
-                                            <i className='sd-sidetab-menu__main-icon big-icon--comments'></i>
-                                            <i className='sd-sidetab-menu__helepr-icon icon-close-small'></i>
+                                    <li data-sd-tooltip="Macros" data-flow="left">
+                                        <a className="sd-sidetab-menu__btn">
+                                            <i className="sd-sidetab-menu__main-icon big-icon--comments"></i>
+                                            <i className="sd-sidetab-menu__helepr-icon icon-close-small"></i>
                                         </a>
                                     </li>
                                 </ul>
                             </div>
-                            <div className='sd-authoring-page__publish-container'></div>
+                            <div className="sd-authoring-page__publish-container"></div>
                         </div>
                     </div>
                 </React.Fragment>
-            )
+            );
         } else {
             return null;
         }

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

@@ -4,19 +4,16 @@ import classNames from 'classnames';
 interface IProps {
     children?: React.ReactNode;
     background?: 'transparent' | 'light' | 'grey' | 'dark';
-    visible?: boolean; // defaults to light (white) 
+    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,
+            [`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>
-        );
+        return <div className={classes}>{this.props.children}</div>;
     }
-}
+}