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

package/dist/playgrounds/accessible-theme-test.html

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

package/dist/playgrounds/layout-test-2.html

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

package/dist/playgrounds/list-item-test.html

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

package/dist/playgrounds/master-desk.html

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

package/dist/playgrounds/media-carousel.html

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

package/dist/playgrounds/photo-desk.html

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

package/dist/playgrounds/planning.html

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

package/dist/playgrounds/publish.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>
 </div>

package/dist/playgrounds/publisher-content-analytics.html

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

package/dist/playgrounds/publisher-content-list-automatic.html

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

package/dist/playgrounds/publisher-content-list-manual.html

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

package/dist/playgrounds/publisher-content-lists.html

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

package/dist/playgrounds/publisher-dashboard.html

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

package/dist/playgrounds/publisher-output-control.html

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

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

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import * as Components from './components/Index';
+import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, LeftMenu, BoxedList, BoxedListItem, BoxedListContentRow, Heading, Text, Time } from '../../../../app-typescript/index';
+import * as Layout from '../../../../app-typescript/components/Layouts';
+import * as Form from '../../../../app-typescript/components/Form';
+import * as Nav from '../../../../app-typescript/components/Navigation';
+import { BottomNav } from '../../../../app-typescript/components/Navigation/BottomNav';
+
+interface IProps {
+    children?: React.ReactNode;
+    heading?: string;
+    active?: boolean;
+    onClick(): void;
+    ariaControls?: string;
+    menuId?: string;
+}
+
+interface IState {
+    theme: 'dark' | 'light' | string;
+    mainMenuOpen: boolean;
+    notificationsOpen: boolean;
+}
+
+export class CoreLayout extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            theme: 'light',
+            mainMenuOpen: false,
+            notificationsOpen: false,
+        }
+        this.handleMainMenu = this.handleMainMenu.bind(this);
+        this.handleNotifications = this.handleNotifications.bind(this);
+    }
+
+    handleMainMenu() {
+        this.setState((state) => ({
+            mainMenuOpen: !state.mainMenuOpen,
+        }));
+    }
+    handleNotifications() {
+        this.setState((state) => ({
+            notificationsOpen: !state.notificationsOpen,
+        }));
+    }
+
+
+    render() {
+        return (
+            <Layout.CoreLayout
+                heading='Core Layout'
+                menuOpen={this.state.mainMenuOpen}
+                onClick={this.handleMainMenu}
+                active={this.state.mainMenuOpen}
+                ariaControls='main-menu'
+                menuId='main-menu'
+                slideInMenu={(
+                    <Layout.MainMenu
+                        headerTitle='Main Menu'
+                        poweredBy='Powered by Superdesk technology'
+                        header={(null)}
+                        footerContent={true}
+                        footer={(
+                            <p>Menu footer testing</p>
+                        )}
+                    >
+                        <LeftMenu 
+                            style='blanc'
+                            reverseItemBorder={true}
+                            size='large'
+                            ariaLabel={'Left navigation'}   
+                            activeItemId='1'
+                            groups={[
+                                { label: 'MAIN SECTIONS', items: [
+                                    { id: '1', label: 'Section 1', ref:'section1'},
+                                    { id: '2', label: 'Section 2', ref: 'section2' },
+                                    { id: '3', label: 'Section 3', ref: 'section3' },
+                                
+                                ]},
+                                { label:'OTHER SECTIONS', items: [
+                                    { id: '4', label: 'Section 4', ref: 'section4' },
+                                    { id: '5', label: 'Section 5', ref: 'section5' },
+                                ]},
+                                { label:'OTHER SECTIONS', items: [
+                                    { id: '6', label: 'Section 6', ref: 'section6' },
+                                    { id: '7', label: 'Section 7', ref: 'section7' },
+                                ]}
+                            ]}
+                        onSelect={() => false} />
+                    </Layout.MainMenu>
+                )}
+                topMenu={(
+                    <NavButton badgeValue='6' icon='bell' text='Show notifications' onClick={this.handleNotifications} />
+                )}
+                footer={(
+                    <>
+                    <Layout.BottomBarAction onClick={()=> false} />
+                    <BottomNav
+                        items={[
+                            { icon:'photo', title: 'Sed posuere consectetur est at lobortis.', onClick: () => console.log('test1') },
+                            { title: 'Nullam id dolor id nibh ultricies.', onClick: () => console.log('test2')},
+                            { icon:'video', title: 'Nulla vitae elit libero, a pharetra augue.', onClick: () => false},
+                            { title: 'Donec sed odio dui.', onClick: () => false},
+                    ]} />
+                    </>
+                )}
+                overlay={(
+                    <Layout.NotificationPanel
+                        header={(null)}
+                        headerTitle='Notifications'
+                        open={this.state.notificationsOpen}
+                        onClick={this.handleNotifications}
+                        theme='dark'
+                    >
+                        <BoxedList>
+                            <BoxedListItem unread={true}>
+                                <Time datetime='29.06.2022'>29.06.2022</Time>
+                                <BoxedListContentRow>
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et
+                                    magnis dis parturient montes, nascetur ridiculus mus.
+                                </BoxedListContentRow>
+                            </BoxedListItem>
+                            <BoxedListItem>
+                                <Time datetime='29.06.2022'>29.06.2022</Time>
+                                <BoxedListContentRow>
+                                    Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula
+                                    porta felis euismod semper.
+                                </BoxedListContentRow>
+                            </BoxedListItem>
+                            <BoxedListItem>
+                                <Time datetime='29.06.2022'>29.06.2022</Time>
+                                <BoxedListContentRow>
+                                    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer
+                                    posuere erat a ante venenatis dapibus posuere velit aliquet.
+                                </BoxedListContentRow>
+                            </BoxedListItem>
+                        </BoxedList>
+
+                    </Layout.NotificationPanel>
+                )}
+            >
+            </Layout.CoreLayout>
+        );
+    }
+}

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

@@ -7,3 +7,4 @@ export { EditorTest } from './EditorTest';
 export { RundownEditor } from './RundownEditor';
 export { PersonalProfile } from './PersonalProfile';
 export { Rundowns } from './Rundowns';
+export { CoreLayout } from './CoreLayout';

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

@@ -263,6 +263,42 @@ export class TestGround extends React.Component<IProps, IState> {
                         </div>
 
                         <hr /><hr />
+                        <h3 className="docs-page__h3 sd-margin-y--0 sd-margin-b--3">Duration input</h3>
+
+                        
+                        <div className="sd-input">
+                            <label className="sd-input__label" id="duration01">Input label</label>
+                            <div className="sd-input__duration-input" id="id06" aria-describedby="duration01">
+                                <input type="number" className="" placeholder='00'/>
+                                <span className="sd-input__suffix">h</span>
+                                <input type="number" className="" placeholder='00'/>
+                                <span className="sd-input__suffix">m</span>
+                                <input type="number" className="" placeholder='00'/>
+                                <span className="sd-input__suffix">s</span>
+                            </div>
+                            <div className="sd-input__char-count">0 / 30</div>
+                            <div className="sd-input__message-box">
+                                <div className="sd-input__hint">This is some hint message</div>
+                            </div>
+                        </div>
+
+                        <h3 className="docs-page__h3 sd-margin-y--0 sd-margin-b--3">testiramt</h3>
+
+                        
+                        <div className="sd-input">
+                            <label className="sd-input__label" id="duration01">Input label</label>
+                            {/* temp */}
+                            <div id="pr_id_1" className="p-dropdown p-component p-inputwrapper p-dropdown-clearable"><div className="p-hidden-accessible"><input type="text" aria-haspopup="listbox" /></div><div className="p-hidden-accessible p-dropdown-hidden-select"><select aria-hidden="true"><option value=""> </option></select></div><span className="p-dropdown-label p-inputtext p-placeholder"><div>Select a color</div></span><div className="p-dropdown-trigger" role="button" aria-haspopup="listbox" aria-expanded="false"><span className="p-dropdown-trigger-icon pi pi-chevron-down p-clickable"></span></div></div>
+                            {/* temp */}
+                            
+                            
+                            <div className="sd-input__char-count">0 / 30</div>
+                            <div className="sd-input__message-box">
+                                <div className="sd-input__hint">This is some hint message</div>
+                            </div>
+                        </div>
+
+                        <hr />
 
                         <h3 className="docs-page__h3 sd-margin-t--2 sd-margin-b--0">Radio</h3>
                         <hr />

package/dist/playgrounds/react-playgrounds/components/Layout.tsx

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

package/dist/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/dist/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/dist/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/dist/react/DatePicker.tsx

@@ -14,11 +14,16 @@ class DatePickerExample extends React.PureComponent<{}, {date: Date}> {
     render() {
         return (
             <DatePicker
-                value={this.state.date}
-                dateFormat="YYYY-MM-DD"
-                onChange={(date) => {
-                    this.setState({date});
-                }}
+            value={this.state.date}
+            dateFormat="YYYY-MM-DD"
+            onChange={(date) => {
+                this.setState({date});
+            }}
+            required
+            tabindex={1}
+            label={'This is Label'}
+            info={'This is info'}
+            error={'This is error'}
             />
         );
     }

package/dist/react/Index.tsx

@@ -63,6 +63,7 @@ import { MultiselectDocs } from './MultiSelect';
 import { TreeSelectDocs } from './TreeSelect';
 import { PopoverDoc } from './Popover';
 import { MenuDocs } from './Menu';
+import {WithSizeObserverDocs} from './WithSizeObserver';
 
 const pages = {
     basicComponents: {
@@ -221,6 +222,9 @@ const pages = {
             'select-with-template': {
                 name: 'Select with template',
             },
+            'with-size-observer': {
+                name: 'With size observer',
+            },
             'multiselect': {
                 name: 'MultiSelect',
             },
@@ -330,6 +334,7 @@ class ReactDoc extends React.Component<IProps, IState> {
                         <Route path="/react/autocomplete" component={AutocompleteDoc} />
                         <Route path="/react/select" component={SelectsDoc} />
                         <Route path="/react/select-with-template" component={SelectWithTemplateDocs} />
+                        <Route path="/react/with-size-observer" component={WithSizeObserverDocs} />
                         <Route path="/react/multiselect" component={MultiselectDocs} />
                         <Route path="/react/treeselect" component={TreeSelectDocs} />
                         <Route path="/react/popover" component={PopoverDoc} />

package/dist/react/Inputs.tsx

@@ -10,6 +10,7 @@ interface IState {
     disabled: boolean;
     invalid: boolean;
     value: any;
+    value2: any;
 }
 
 export default class InputsDoc extends React.Component<{}, IState> {
@@ -20,7 +21,8 @@ export default class InputsDoc extends React.Component<{}, IState> {
             required: true,
             disabled: false,
             invalid: false,
-            value: null
+            value: null,
+            value2: '',
         }
     }
     
@@ -47,7 +49,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
 
                             <div className='form__row'>
                                 <Input label='Input label'
-                                    value={null}
+                                    value={''}
                                     maxLength={30}
                                     type='text'
                                     error='This is error message'
@@ -57,7 +59,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                     disabled={this.state.disabled}
                                     invalid={this.state.invalid}
                                     tabindex={0}
-                                    onChange={(value) => this.setState({value: value})} />
+                                    onChange={(value) => this.setState({value2: value})} />
                             </div>
                             <div className='form__row'>
                                 <Input label='Number Input'
@@ -75,9 +77,10 @@ export default class InputsDoc extends React.Component<{}, IState> {
                             <p className="docs-page__paragraph">// Hidden label</p>
                             <div className='form__row'>
                                 <Input label='Input label'
-                                    value={null}
+                                    value={''}
                                     maxLength={25}
                                     type='text'
+                                    placeholder='Placeholder'
                                     error='This is error message'
                                     info='Donec id elit non mi porta gravida at eget metus.'
                                     inlineLabel={true}
@@ -86,7 +89,107 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                     disabled={this.state.disabled}
                                     invalid={this.state.invalid}
                                     tabindex={0}
-                                    onChange={(value) => this.setState({value: value})} />
+                                    onChange={(value) => this.setState({value2: value})} />
+                            </div>
+                            <p className="docs-page__paragraph">// Boxed with hidden label</p>
+                            <div className='form__row'>
+                                <Input label='Input label'
+                                    value={''}
+                                    boxedStyle={true}
+                                    maxLength={25}
+                                    type='text'
+                                    placeholder='Default boxed input'
+                                    error='This is error message'
+                                    inlineLabel={true}
+                                    labelHidden={true}
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => this.setState({value2: value})} />
+                            </div>
+                            <div className='form__row'>
+                                <Input label='Input label'
+                                    value={''}
+                                    boxedStyle={true}
+                                    size='large'
+                                    maxLength={25}
+                                    type='text'
+                                    placeholder='Large boxed input'
+                                    error='This is error message'
+                                    inlineLabel={true}
+                                    labelHidden={true}
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => this.setState({value2: value})} />
+                            </div>
+                            <div className='form__row'>
+                                <Input label='Input label'
+                                    value={''}
+                                    boxedStyle={true}
+                                    size='x-large'
+                                    maxLength={25}
+                                    type='text'
+                                    placeholder='Extra large boxed input'
+                                    error='This is error message'
+                                    inlineLabel={true}
+                                    labelHidden={true}
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => this.setState({value2: value})} />
+                            </div>
+                            <p className="docs-page__paragraph">// Boxed with default label</p>
+                            <div className='form__row'>
+                                <Input label='Input label'
+                                    value={''}
+                                    boxedStyle={true}
+                                    size='large'
+                                    maxLength={25}
+                                    placeholder='Placeholder'
+                                    type='text'
+                                    error='This is error message'
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => this.setState({value2: value})} />
+                            </div>
+                            <p className="docs-page__paragraph">// Boxed with boxed label</p>
+                            <div className='form__row'>
+                                <Input label='Input label'
+                                    value={''}
+                                    boxedStyle={true}
+                                    boxedLable={true}
+                                    size='large'
+                                    maxLength={25}
+                                    placeholder='Placeholder'
+                                    type='text'
+                                    error='This is error message'
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => this.setState({value2: value})} />
+                            </div>
+                            <div className='form__row'>
+                                <Input label='Input label'
+                                    value={''}
+                                    boxedStyle={true}
+                                    boxedLable={true}
+                                    size='large'
+                                    placeholder='Hide my label'
+                                    labelHidden={true}
+                                    type='text'
+                                    error='This is error message'
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => this.setState({value2: value})} />
                             </div>
                         </div>
 
@@ -122,4 +225,4 @@ export default class InputsDoc extends React.Component<{}, IState> {
             </section>
         )
     }
-}
+}

package/dist/react/MultiSelect.tsx

@@ -69,6 +69,11 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                                     showSelectAll
                                     placeholder='Select a color'
                                     optionLabel='name'
+                                    required
+                                    tabindex={1}
+                                    label={'This is Label'}
+                                    info={'This is info'}
+                                    error={'This is error'}
                                 />
                             </div>
                         </div>
@@ -190,4 +195,4 @@ export class MultiselectDocs extends React.Component<{}, IState> {
             </section>
         )
     }
-}
+}