superdesk-ui-framework 3.0.0-beta.0 → 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/boxed-list.html

@@ -79,7 +79,7 @@
                         </div>
                     </li>
 
-                    <li class="boxed-list__item boxed-list__item--selcted boxed-list__item--clickable">
+                    <li class="boxed-list__item boxed-list__item--selected boxed-list__item--clickable">
                         <div class="boxed-list__item-media">
                             <figure class="avatar sd-margin--0 pink--600">mm</figure>
                         </div>

package/dist/playgrounds/cards.html

@@ -2,10 +2,15 @@
     <a class="sd-top-menu__collapse-nav"><i class="icon-collapse icon--white"></i></a>
     <p class="sd-top-menu__header">Cards</p>
 </header>
-<main class="sd-page">
+<main class="sd-page" ng-init="darkUI = false" data-theme="{{darkUI ? 'dark-ui' : 'light-ui'}}">
     <section class="sd-page__main-content">
-        <div class="sd-page__header sd-page__header--white">
-            <h2 class="sd-page__page-heading">Card options</h2>
+        <div class="subnav">
+            <h2 class="subnav__page-title">Card options</h2>
+            <div class="button-group button-group--right">
+                <button class="sd-navbtn" ng-click="darkUI = !darkUI">
+                    <i class="icon-adjust"></i>
+                </button>
+            </div>
         </div>
         <div class="sd-page__content">
 
@@ -35,7 +40,7 @@
                 </div>
 
                 <div class="sd-card flex-grid__item">
-                    <div class="sd-card__header sd-card__header--white">
+                    <div class="sd-card__header sd-card__header--light">
                         <div class="sd-card__heading">Features Desk</div>
                         <a class="icn-btn sd-card__actions"><i class="icon-pencil"></i></a>
                     </div>

package/dist/playgrounds/editor-3-test.html

@@ -0,0 +1,15 @@
+
+<div class="sd-padding--4">
+    <button class="btn btn--primary btn--loading" tabindex="0" aria-label="">
+        <div class="btn__state--loading">
+            <svg class="sd-spinner sd-spinner--mini" viewBox="0 0 48 48">
+                <circle class="sd-spinner__path" cx="24" cy="24" r="18" fill="none" stroke-width="6"></circle>
+            </svg>
+        </div>
+            primary
+    </button>
+</div>
+
+<svg class="sd-spinner sd-spinner sd-spinner--large" viewBox="0 0 48 48">
+    <circle class="sd-spinner__path" cx="24" cy="24" r="18" fill="none" stroke-width="6"></circle>
+</svg>

package/dist/playgrounds/form-layout.html

@@ -16,13 +16,15 @@
             <div style="width: 70%; margin: 100px auto; max-width: 900px;" class="docs-page__code-window">
 
                 <div class="sd-form-element" style="padding: 30px;" data-theme="{{darkTheme ? 'dark-ui' : 'ligh-ui'}}">
-                    <div class="form__item">
-                        <div class="sd-input">
-                            <label class="sd-input__label">input field label 1</label>
-                            <input class="sd-input__input" type="text">
-                            <div class="sd-input__char-count">00/90</div>
-                            <div class="sd-input__message-box">
-                                <div class="sd-input__hint">Hendrerit in vulputate.</div>
+                    <div class="form__group">
+                        <div class="form__item">
+                            <div class="sd-input">
+                                <label class="sd-input__label">input field label 1</label>
+                                <input class="sd-input__input" type="text">
+                                <div class="sd-input__char-count">00/90</div>
+                                <div class="sd-input__message-box">
+                                    <div class="sd-input__hint">Hendrerit in vulputate.</div>
+                                </div>
                             </div>
                         </div>
                     </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

@@ -40,10 +40,8 @@
                 </ul>
             </div>
         </div>
-
-
-
     </header>
+    
     <section class="sd-content sd-content-wrapper">
         <div class="sd-sidebar-menu sd-content-wrapper__left-tabs">
             <ul class="authoring-active">
@@ -1568,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>
+        );
+    }
+}