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

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

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

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

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

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

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

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

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

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

@@ -27,8 +27,8 @@ export const Layout = ({
             <section id='1' className='sd-content sd-content-wrapper'>
                 {children}
             </section>
-            <footer className='bottom-bar'>
-                This is the footer.
+            <footer className='sd-bottom-bar'>
+                Footer
             </footer>
         </div>
     );

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

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

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

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

package/examples/pages/playgrounds/swimlane-view.html

@@ -1969,7 +1969,7 @@
             <!-- END Editor content -->
         </div>
     </section>
-    <footer class="bottom-bar ">
+    <footer class="sd-bottom-bar">
         This is the optional footer.
     </footer>
 </div>

package/examples/pages/playgrounds/toasts.html

@@ -19,7 +19,7 @@
 
             </div>
     </section>
-    <footer class="bottom-bar">
+    <footer class="sd-bottom-bar">
         This is the optional footer.
     </footer>
 </div>

package/examples/pages/playgrounds/video-editor.html

@@ -538,7 +538,7 @@
             <!-- END Editor content -->
         </div>
     </section>
-    <footer class="bottom-bar ">
+    <footer class="sd-bottom-bar">
         This is the optional footer.
     </footer>
 

package/examples/pages/react/Badges.tsx

@@ -89,6 +89,16 @@ export default class BadgeDoc extends React.Component {
                             <Badge text='E' color='purple--400' shape='square' />
                             <Badge text='F' color='purple--500' shape='square' />
                         </div>
+
+                        <p className="docs-page__paragraph">// Custom hex colours</p>
+                        <div className='docs-page__content-row'>
+                            <Badge text='1' hexColor='#008773' />
+                            <Badge text='2' hexColor='#0000FF' />
+                            <Badge text='3' hexColor='#00D100' />
+                            <Badge text='4' hexColor='#5531D9' shape='square' />
+                            <Badge text='5' hexColor='#960E0F' shape='square' />
+                            <Badge text='6' hexColor='#DB60FF' shape='square' />
+                        </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         // Basic colour palette
@@ -112,6 +122,13 @@ export default class BadgeDoc extends React.Component {
                         <Badge text='D' color='purple--300' shape='square'/>
                         <Badge text='E' color='purple--400' shape='square'/>
                         <Badge text='F' color='purple--500' shape='square'/>
+                        // Custom hex colours
+                        <Badge text='1' hexColor='#008773' />
+                        <Badge text='2' hexColor='#0000FF' />
+                        <Badge text='3' hexColor='#00D100' />
+                        <Badge text='4' hexColor='#5531D9' shape='square' />
+                        <Badge text='5' hexColor='#960E0F' shape='square' />
+                        <Badge text='6' hexColor='#DB60FF' shape='square' />
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -152,6 +169,7 @@ export default class BadgeDoc extends React.Component {
                     <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.)' />
                     <Prop name='color' isRequired={false} type='string' default='/' description='Extended color palette from the framework (e.g. red--500);  NOTE: The badge can have either a Type or Color defined, not both at the same time.' />
                     <Prop name='shape' isRequired={false} type='round | square' default='round' description='Make shape of badge square or default round.' />
+                    <Prop name='hexColor' isRequired={false} type='string' default='/' description='Define a custom Hex colour for the Badge.'/>
                 </PropsList>
             </section>
         )

package/examples/pages/react/Container.tsx

@@ -133,7 +133,7 @@ export default class ContainerDoc extends React.Component<IProps> {
                 <PropsList>
                     <Prop name='display' isRequired={false} type='flex | inline-flex | block' default='flex' description='Change the default display mode (flex).'/>
                     <Prop name='direction' isRequired={false} type='row | column' default='row' description='Change the flex-direction property.'/>
-                    <Prop name='gap' isRequired={false} type='none | small |  medium | large' default='none' description='Set the gap between elements inside the Container.'/>
+                    <Prop name='gap' isRequired={false} type='none | x-small | small |  medium | large' default='none' description='Set the gap between elements inside the Container.'/>
                     <Prop name='theme' isRequired={false} type='light | dark' default='/' description='Choose the UI theme. It will inherit the default theme if not set. All items inside will inherit the theme of the Container if it is set.'/>
                     <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
                 </PropsList>

package/examples/pages/react/ContentList.tsx

@@ -0,0 +1,286 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import { BoxedList, BoxedListItem, BoxedListContentRow, Prop, PropsList, Icon, IconButton, AvatarWrapper, AvatarContentText, ButtonGroup, Button, Heading, Text, Label, Container, IconLabel } from '../../../app-typescript';
+import { TableList, TableListItem } from '../../../app-typescript/components/Lists/TableList';
+import { ContentList, ContentListItem } from '../../../app-typescript/components/Lists/ContentList';
+
+export default class ContentListDoc extends React.Component {
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>ContentList</h2>
+                
+                <Markup.ReactMarkupCodePreview>{`
+                    <ContentList 
+                    items: [...]
+                    />
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <p className="docs-page__paragraph">...</p>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// basic</p>
+
+                        <ContentList
+                        items={[
+                            {
+                                itemColum: [
+                                    {
+                                        itemRow: [{content:<>
+                                                    <i className="icon-rundown"></i>
+                                                </>}],
+                                        border: true
+                                    },
+                                    {
+                                        itemRow: [
+                                            {
+                                                content:
+                                                <>
+                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
+                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
+                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
+                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                </>
+                                            },
+                                            {
+                                                content:
+                                                <>
+                                                    <Label text='Marker' color='blue--800'/>
+                                                        <span className='sd-list-item__compound-text'>
+                                                            <span className='sd-list-item__text-label'>Template:</span>
+                                                            <span>Marker Daily</span>
+                                                        </span>
+                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
+                                                    <Label style='translucent' text='In Progress' type='warning' />
+                                                </>
+                                            },
+                                        ],
+                                        fullwidth: true,
+                                    }
+                                ],
+                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
+                                loading: true,
+                            },
+                            {
+                                itemColum: [
+                                    {
+                                        itemRow: [{content:<>
+                                                    <i className="icon-rundown"></i>
+                                                </>}], 
+                                        border: true
+                                    },
+                                    {
+                                        itemRow: [
+                                            {
+                                                content: 
+                                                <>
+                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
+                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
+                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
+                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                </>
+                                            },
+                                            {
+                                                content: 
+                                                <>
+                                                    <Label text='Marker' color='blue--800'/>
+                                                        <span className='sd-list-item__compound-text'>
+                                                            <span className='sd-list-item__text-label'>Template:</span>
+                                                            <span>Marker Daily</span>
+                                                        </span>
+                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
+                                                    <Label style='translucent' text='In Progress' type='warning' />
+                                                </>
+                                            },
+                                        ],
+                                        fullwidth: true,
+                                    }
+                                ],
+                                //locked: true,
+                                selected: true,
+                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
+                            },
+                            {
+                                itemColum: [
+                                    {
+                                        itemRow: [{content:<>
+                                                    <i className="icon-rundown"></i>
+                                                </>}],
+                                        border: true
+                                    },
+                                    {
+                                        itemRow: [
+                                            {
+                                                content:
+                                                <>
+                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
+                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
+                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
+                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                </>
+                                            },
+                                            {
+                                                content:
+                                                <>
+                                                    <Label text='Marker' color='blue--800'/>
+                                                        <span className='sd-list-item__compound-text'>
+                                                            <span className='sd-list-item__text-label'>Template:</span>
+                                                            <span>Marker Daily</span>
+                                                        </span>
+                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
+                                                    <Label style='translucent' text='In Progress' type='warning' />
+                                                </>
+                                            },
+                                        ],
+                                        fullwidth: true,
+                                    }
+                                ],
+                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
+                            },
+                        ]} />
+
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <ContentList
+                        items={[
+                            {
+                                itemColum: [
+                                    {
+                                        itemRow: [{content:<>
+                                                            <i className="icon-rundown"></i>
+                                                        </>}],   
+                                        border: true
+                                    },
+                                    {
+                                        itemRow: [
+                                            {
+                                                content: 
+                                                <>
+                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
+                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
+                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
+                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                </>
+                                            },
+                                            {
+                                                content: 
+                                                <>
+                                                    <Label text='Marker' color='blue--800'/>
+                                                        <span className='sd-list-item__compound-text'>
+                                                            <span className='sd-list-item__text-label'>Template:</span>
+                                                            <span>Marker Daily</span>
+                                                        </span>
+                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
+                                                    <Label style='translucent' text='In Progress' type='warning' />
+                                                </>
+                                            },
+                                        ],
+                                        fullwidth: true,
+                                    }
+                                ],
+                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
+                            },
+                            {
+                                itemColum: [
+                                    {
+                                        itemRow: [{content:<>
+                                                            <i className="icon-rundown"></i>
+                                                        </>}], 
+                                        border: true
+                                    },
+                                    {
+                                        itemRow: [
+                                            {
+                                                content: 
+                                                <>
+                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
+                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
+                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
+                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                </>
+                                            },
+                                            {
+                                                content: 
+                                                <>
+                                                    <Label text='Marker' color='blue--800'/>
+                                                        <span className='sd-list-item__compound-text'>
+                                                            <span className='sd-list-item__text-label'>Template:</span>
+                                                            <span>Marker Daily</span>
+                                                        </span>
+                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
+                                                    <Label style='translucent' text='In Progress' type='warning' />
+                                                </>
+                                            },
+                                        ],
+                                        fullwidth: true,
+                                    }
+                                ],
+                                locked: true,
+                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
+                            },
+                            {
+                                itemColum: [
+                                    {
+                                        itemRow: [{content:<>
+                                                            <i className="icon-rundown"></i>
+                                                        </>}], 
+                                        border: true
+                                    },
+                                    {
+                                        itemRow: [
+                                            {
+                                                content:
+                                                <>
+                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
+                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
+                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
+                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                </>
+                                            },
+                                            {
+                                                content:
+                                                <>
+                                                    <Label text='Marker' color='blue--800'/>
+                                                        <span className='sd-list-item__compound-text'>
+                                                            <span className='sd-list-item__text-label'>Template:</span>
+                                                            <span>Marker Daily</span>
+                                                        </span>
+                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
+                                                    <Label style='translucent' text='In Progress' type='warning' />
+                                                </>
+                                            },
+                                        ],
+                                        fullwidth: true,
+                                    }
+                                ],
+                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
+                            },
+                        ]} />
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <p className="docs-page__paragraph">ContentList</p>
+                <PropsList>
+                    <Prop name='items' isRequired={true} type='Array' default='compact' description='An array of object.'/>
+                </PropsList>
+                <p className="docs-page__paragraph">Items:</p>
+                <PropsList>
+                    <Prop name='itemColum' isRequired={true} type='Array<{itemRow: Array<{content: any}>, border?: boolean, fullwidth?: boolean}>' default='false' description='An array of objects for defining column of individual items.'/>
+                    <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='On hover displays an additional menu.'/>
+                    <Prop name='locked' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
+                    <Prop name='activated' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
+                    <Prop name='selected' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
+                    <Prop name='archived' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
+                    <Prop name='loading' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
+                    <Prop name='onClick' isRequired={false} type='function' default='/' description='onClick functionality.'/>
+                    <Prop name='onDoubleClick' isRequired={false} type='function' default='/' description='onDoubleClick functionality.'/>
+                </PropsList>
+    
+            </section>
+        )
+    }
+}