superdesk-ui-framework 3.1.5 → 3.1.7

package/dist/main.html

@@ -3,9 +3,9 @@
     <h1 class="docs-page__h1">Superdesk UI</h1>
     <ul class="docs-page__header-nav">
         <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/">Home</a></li>
-        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/components">Components</a></li>
-        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/react">React</a></li>
+        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design-patterns">Design Patterns</a></li>
+        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
     </ul>
 </header>
@@ -20,42 +20,44 @@
     <div class="docs-page__container docs-page__container--medium">
         <div class="flex-grid flex-grid--boxed flex-grid--wrap-items flex-grid--small-4">
 
-            <a class="sd-card sd-card--with-click sd-card--blank sd-card--rounded flex-grid__item" href="#/design">
+            <a class="sd-card sd-card--with-click sd-card--blank sd-card--rounded flex-grid__item" href="#/components">
                 <div class="sd-card__header sd-card__header--with-thumb sd-card__header--blank">
                     <div class="sd-card__thumbnail sd-padding-x--1">
-                        <img src="/illustration--design.svg" alt="Design guidelines">
+                        <img src="/illustration--react.svg" alt="React">
                     </div>
                 </div>
                 <div class="sd-card__content">
-                    <h4 class="sd-card__content-heading sd-text__serif sd-text__center docs-page__color--primary">Design guidelines</h4>
-                    <p class="docs-page__paragraph--light sd-text__center">What to do and what not while creating user interfaces in Superdesk.</p>
+                    <h4 class="sd-card__content-heading sd-text__serif sd-text-align--center docs-page__color--primary">Components</h4>
+                    <p class="docs-page__paragraph--light sd-text-align--center">Superdesk UI components in React.</p> 
                 </div>
             </a>
 
-            <a class="sd-card sd-card--with-click sd-card--blank sd-card--rounded flex-grid__item" href="#/components">
+            <a class="sd-card sd-card--with-click sd-card--blank sd-card--rounded flex-grid__item" href="#/design-patterns">
                 <div class="sd-card__header sd-card__header--with-thumb sd-card__header--blank">
                     <div class="sd-card__thumbnail sd-padding-x--1">
                         <img src="/illustration--components.svg" alt="Superdesk UI Components">
                     </div>
                 </div>
                 <div class="sd-card__content sd-padding-x--1">
-                    <h4 class="sd-card__content-heading sd-text__serif sd-text__center docs-page__color--primary">Components</h4>
-                    <p class="docs-page__paragraph--light sd-text__center">Superdesk HTML/CSS and Angular UI components.</p>
+                    <h4 class="sd-card__content-heading sd-text__serif sd-text-align--center docs-page__color--primary">Design Patterns</h4>
+                    <p class="docs-page__paragraph--light sd-text-align--center">Examples of reusable solutions for common UI patterns in Superdesk.</p>
                 </div>
             </a>
 
-            <a class="sd-card sd-card--with-click sd-card--blank sd-card--rounded flex-grid__item" href="#/react">
+            <a class="sd-card sd-card--with-click sd-card--blank sd-card--rounded flex-grid__item" href="#/design">
                 <div class="sd-card__header sd-card__header--with-thumb sd-card__header--blank">
                     <div class="sd-card__thumbnail sd-padding-x--1">
-                        <img src="/illustration--react.svg" alt="React">
+                        <img src="/illustration--design.svg" alt="Design guidelines">
                     </div>
                 </div>
                 <div class="sd-card__content">
-                    <h4 class="sd-card__content-heading sd-text__serif sd-text__center docs-page__color--primary">React</h4>
-                    <p class="docs-page__paragraph--light sd-text__center">React UI components. Still in early stages, but will hopefully grow quickly.</p> 
+                    <h4 class="sd-card__content-heading sd-text__serif sd-text-align--center docs-page__color--primary">Design guidelines</h4>
+                    <p class="docs-page__paragraph--light sd-text-align--center">What to do and what not while creating user interfaces in Superdesk.</p>
                 </div>
             </a>
 
+
+
             <a class="sd-card sd-card--with-click sd-card--blank sd-card--rounded flex-grid__item" href="#/playgrounds">
                 <div class="sd-card__header sd-card__header--with-thumb sd-card__header--blank">
                     <div class="sd-card__thumbnail sd-padding-x--1">
@@ -63,8 +65,8 @@
                     </div>
                 </div>
                 <div class="sd-card__content">
-                    <h4 class="sd-card__content-heading sd-text__serif sd-text__center docs-page__color--primary">Playground</h4>
-                    <p class="docs-page__paragraph--light sd-text__center">Examples and drafts for more complex modules and full-page layouts.</p>
+                    <h4 class="sd-card__content-heading sd-text__serif sd-text-align--center docs-page__color--primary">Playground</h4>
+                    <p class="docs-page__paragraph--light sd-text-align--center">Examples, full-page layouts and design drafts.</p>
                 </div>
             </a>
 

package/dist/playgrounds/boxed-list.html

@@ -70,7 +70,7 @@
                         </div>
                         <div class="boxed-list__item-content">
                             <div class="boxed-list__item-content-row">
-                                <span class="sd-text__strong sd-overflow-ellipsis">Pellentesque ornare lacinia</span>
+                                <span class="sd-text--bold sd-overflow-ellipsis">Pellentesque ornare lacinia</span>
                                 <span class="label label--success ml-auto">success</span>
                             </div>
                             <div class="boxed-list__item-content-row">
@@ -85,7 +85,7 @@
                         </div>
                         <div class="boxed-list__item-content">
                             <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
-                                <span class="sd-text__strong sd-overflow-ellipsis">Max Mustermann</span>
+                                <span class="sd-text--bold sd-overflow-ellipsis">Max Mustermann</span>
                                 <time class="sd-text__date-time sd-text__date-time--small ml-auto">25.04.2019</time>
                             </div>
                             <div class="boxed-list__item-content-row">
@@ -102,7 +102,7 @@
                         </div>
                         <div class="boxed-list__item-content">
                             <div class="boxed-list__item-content-row">
-                                <span class="sd-text__strong-s">Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum.</span>
+                                <span class="sd-text--bold-s">Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum.</span>
                             </div>
                         </div>
                         <div class="boxed-list__static-actions">
@@ -115,7 +115,7 @@
                         </div>
                         <div class="boxed-list__item-content">
                             <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
-                                <span class="sd-text__strong sd-overflow-ellipsis">Jane Doe</span>
+                                <span class="sd-text--bold sd-overflow-ellipsis">Jane Doe</span>
                                 <time class="sd-text__date-time sd-text__date-time--small ml-auto">25.04.2019</time>
                             </div>
                             <div class="boxed-list__item-content-row">
@@ -133,14 +133,14 @@
                                 <span class="ml-auto">by Jane Doe</span>
                             </div>
                             <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
-                                <span class="sd-text__strong sd-overflow-ellipsis">Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Aenean eu leo quam.</span>
+                                <span class="sd-text--bold sd-overflow-ellipsis">Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Aenean eu leo quam.</span>
                             </div>
                             <div class="boxed-list__item-content-row">
-                                <span><span class="sd-text__italic">desk:</span> National</span> <span class="ml-auto"><span class="sd-text__italic">stage:</span> Working</span>
+                                <span><span class="sd-text--italic">desk:</span> National</span> <span class="ml-auto"><span class="sd-text--italic">stage:</span> Working</span>
                             </div>
                         </div>
                         <div class="boxed-list__item-footer">
-                            <span class="sd-text__italic sd-padding-r--1">version: 25</span> <span class="label label--yellow2 label--hollow">in progress</span> <button class="btn btn--small btn--hollow ml-auto">revert</button>
+                            <span class="sd-text--italic sd-padding-r--1">version: 25</span> <span class="label label--yellow2 label--hollow">in progress</span> <button class="btn btn--small btn--hollow ml-auto">revert</button>
                         </div>
 
                     </li>

package/dist/playgrounds/master-desk.html

@@ -1587,7 +1587,7 @@
                     </div>
                     <div class="boxed-list__item-content">
                         <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
-                            <span class="sd-text__strong sd-overflow-ellipsis">Max Mustermann</span>
+                            <span class="sd-text--bold sd-overflow-ellipsis">Max Mustermann</span>
                             <time class="sd-text__date-time sd-text__date-time--small ml-auto">25.09.2020</time>
                         </div>
                         <div class="boxed-list__item-content-row">
@@ -1629,7 +1629,7 @@
                     </div>
                     <div class="boxed-list__item-content">
                         <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
-                            <span class="sd-text__strong sd-overflow-ellipsis">Walter Sobchak</span>
+                            <span class="sd-text--bold sd-overflow-ellipsis">Walter Sobchak</span>
                             <time class="sd-text__date-time sd-text__date-time--small ml-auto">25.09.2020</time>
                         </div>
                         <div class="boxed-list__item-content-row">
@@ -1643,7 +1643,7 @@
                     </div>
                     <div class="boxed-list__item-content">
                         <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
-                            <span class="sd-text__strong sd-overflow-ellipsis">Jeff Lebowski</span>
+                            <span class="sd-text--bold sd-overflow-ellipsis">Jeff Lebowski</span>
                             <time class="sd-text__date-time sd-text__date-time--small ml-auto">25.09.2020</time>
                         </div>
                         <div class="boxed-list__item-content-row">
@@ -1657,7 +1657,7 @@
                     </div>
                     <div class="boxed-list__item-content">
                         <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
-                            <span class="sd-text__strong sd-overflow-ellipsis">Bunny Lebowski</span>
+                            <span class="sd-text--bold sd-overflow-ellipsis">Bunny Lebowski</span>
                             <time class="sd-text__date-time sd-text__date-time--small ml-auto">25.09.2020</time>
                         </div>
                         <div class="boxed-list__item-content-row">

package/dist/playgrounds/photo-snippets/edit-photo-metadata.html

@@ -152,7 +152,7 @@
                             </div>
                             <div class="form__row">
                                 <label class="form-label form-label--light">Name</label>
-                                <p class="sd-text__strong">Event name</p>
+                                <p class="sd-text--bold">Event name</p>
                             </div>
                             <div class="form__row">
                                 <label class="form-label form-label--light">Date</label>

package/dist/playgrounds/planning-snippets/edit-planning.html

@@ -176,7 +176,7 @@
                                 </div>
                                 <div class="form__row">
                                     <label class="form-label form-label--light">Name</label>
-                                    <p class="sd-text__strong">Event name</p>
+                                    <p class="sd-text--bold">Event name</p>
                                 </div>
                                 <div class="form__row">
                                     <label class="form-label form-label--light">Date</label>

package/dist/playgrounds/planning.html

@@ -870,7 +870,7 @@
                                 </div>
                                 <div class="form__row">
                                     <label class="form-label form-label--light">Name</label>
-                                    <p class="sd-text__strong">Duis dolore</p>
+                                    <p class="sd-text--bold">Duis dolore</p>
                                 </div>
                                 <div class="form__row">
                                     <label class="form-label form-label--light">Description</label>

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

@@ -230,16 +230,16 @@
                                     </div>
                                     <div class="sd-flex-table__row">
                                         <div class="sd-flex-table__cell sd-flex-grow">
-                                            <div class="sd-text__strong">
+                                            <div class="sd-text--bold">
                                                 <strong>Nisi quis eiusmod nostrud pariatur amet.</strong>
                                             </div>
                                             <div>
-                                                <span class="sd-text__date-time sd-text__italic">Category:</span><span class="sd-text__normal">Culture</span>
-                                                <span class="sd-text__date-time sd-text__italic sd-margin-l--1">Authors:</span><span class="sd-text__normal">Donald Duck</span>
-                                                <span class="sd-text__date-time sd-text__italic sd-margin-l--1">Published:</span><time>1 week ago</time>
+                                                <span class="sd-text__date-time sd-text--italic">Category:</span><span class="sd-text--normal">Culture</span>
+                                                <span class="sd-text__date-time sd-text--italic sd-margin-l--1">Authors:</span><span class="sd-text--normal">Donald Duck</span>
+                                                <span class="sd-text__date-time sd-text--italic sd-margin-l--1">Published:</span><time>1 week ago</time>
                                             </div>
                                         </div>
-                                        <div class="sd-flex-table__cell sd-text__center">
+                                        <div class="sd-flex-table__cell sd-text-align--center">
                                             <a class="icn-btn" target="_blank" href="#">
                                                 <i class="icon-external"></i>
                                             </a>
@@ -256,16 +256,16 @@
                                     </div>
                                     <div class="sd-flex-table__row">
                                         <div class="sd-flex-table__cell sd-flex-grow">
-                                            <div class="sd-text__strong">
+                                            <div class="sd-text--bold">
                                                 <strong>Mollit sit ut mollit dolor laborum nisi adipisicing minim.</strong>
                                             </div>
                                             <div>
-                                                <span class="sd-text__date-time sd-text__italic">Category:</span><span class="sd-text__normal">Sport, News</span>
-                                                <span class="sd-text__date-time sd-text__italic sd-margin-l--1">Authors:</span><span class="sd-text__normal">Jack Daniels, Mickey Mouse</span>
-                                                <span class="sd-text__date-time sd-text__italic sd-margin-l--1">Published:</span><time>1 week ago</time>
+                                                <span class="sd-text__date-time sd-text--italic">Category:</span><span class="sd-text--normal">Sport, News</span>
+                                                <span class="sd-text__date-time sd-text--italic sd-margin-l--1">Authors:</span><span class="sd-text--normal">Jack Daniels, Mickey Mouse</span>
+                                                <span class="sd-text__date-time sd-text--italic sd-margin-l--1">Published:</span><time>1 week ago</time>
                                             </div>
                                         </div>
-                                        <div class="sd-flex-table__cell sd-text__center">
+                                        <div class="sd-flex-table__cell sd-text-align--center">
                                             <a class="icn-btn" target="_blank" href="#">
                                                 <i class="icon-external"></i>
                                             </a>
@@ -282,16 +282,16 @@
                                     </div>
                                     <div class="sd-flex-table__row">
                                         <div class="sd-flex-table__cell sd-flex-grow">
-                                            <div class="sd-text__strong">
+                                            <div class="sd-text--bold">
                                                 <strong>Enim enim cupidatat duis eu deserunt.</strong>
                                             </div>
                                             <div>
-                                                <span class="sd-text__date-time sd-text__italic">Category:</span><span class="sd-text__normal">News, Business</span>
-                                                <span class="sd-text__date-time sd-text__italic sd-margin-l--1">Authors:</span><span class="sd-text__normal">Donald Trump</span>
-                                                <span class="sd-text__date-time sd-text__italic sd-margin-l--1">Published:</span><time>1 week ago</time>
+                                                <span class="sd-text__date-time sd-text--italic">Category:</span><span class="sd-text--normal">News, Business</span>
+                                                <span class="sd-text__date-time sd-text--italic sd-margin-l--1">Authors:</span><span class="sd-text--normal">Donald Trump</span>
+                                                <span class="sd-text__date-time sd-text--italic sd-margin-l--1">Published:</span><time>1 week ago</time>
                                             </div>
                                         </div>
-                                        <div class="sd-flex-table__cell sd-text__center">
+                                        <div class="sd-flex-table__cell sd-text-align--center">
                                             <a class="icn-btn" target="_blank" href="#">
                                                 <i class="icon-external"></i>
                                             </a>
@@ -308,16 +308,16 @@
                                     </div>
                                     <div class="sd-flex-table__row">
                                         <div class="sd-flex-table__cell sd-flex-grow">
-                                            <div class="sd-text__strong">
+                                            <div class="sd-text--bold">
                                                 <strong>Sit qui aliqua dolore dolor aliqua ut officia incididunt reprehenderit ad laboris qui proident.</strong>
                                             </div>
                                             <div>
-                                                <span class="sd-text__date-time sd-text__italic">Category:</span><span class="sd-text__normal">News, Business</span>
-                                                <span class="sd-text__date-time sd-text__italic sd-margin-l--1">Authors:</span><span class="sd-text__normal">Donald Trump</span>
-                                                <span class="sd-text__date-time sd-text__italic sd-margin-l--1">Published:</span><time>1 week ago</time>
+                                                <span class="sd-text__date-time sd-text--italic">Category:</span><span class="sd-text--normal">News, Business</span>
+                                                <span class="sd-text__date-time sd-text--italic sd-margin-l--1">Authors:</span><span class="sd-text--normal">Donald Trump</span>
+                                                <span class="sd-text__date-time sd-text--italic sd-margin-l--1">Published:</span><time>1 week ago</time>
                                             </div>
                                         </div>
-                                        <div class="sd-flex-table__cell sd-text__center">
+                                        <div class="sd-flex-table__cell sd-text-align--center">
                                             <a class="icn-btn" target="_blank" href="#">
                                                 <i class="icon-external"></i>
                                             </a>
@@ -334,16 +334,16 @@
                                     </div>
                                     <div class="sd-flex-table__row">
                                         <div class="sd-flex-table__cell sd-flex-grow">
-                                            <div class="sd-text__strong">
+                                            <div class="sd-text--bold">
                                                 <strong>Elit eu laboris nulla laborum irure dolor ut.</strong>
                                             </div>
                                             <div>
-                                                <span class="sd-text__date-time sd-text__italic">Category:</span><span class="sd-text__normal">Sport, News</span>
-                                                <span class="sd-text__date-time sd-text__italic sd-margin-l--1">Authors:</span><span class="sd-text__normal">Jack Daniels, Mickey Mouse</span>
-                                                <span class="sd-text__date-time sd-text__italic sd-margin-l--1">Published:</span><time>1 week ago</time>
+                                                <span class="sd-text__date-time sd-text--italic">Category:</span><span class="sd-text--normal">Sport, News</span>
+                                                <span class="sd-text__date-time sd-text--italic sd-margin-l--1">Authors:</span><span class="sd-text--normal">Jack Daniels, Mickey Mouse</span>
+                                                <span class="sd-text__date-time sd-text--italic sd-margin-l--1">Published:</span><time>1 week ago</time>
                                             </div>
                                         </div>
-                                        <div class="sd-flex-table__cell sd-text__center">
+                                        <div class="sd-flex-table__cell sd-text-align--center">
                                             <a class="icn-btn" target="_blank" href="#">
                                                 <i class="icon-external"></i>
                                             </a>

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ButtonGroup, Button, NavButton, SubNav, Input, IconButton, Divider, Tooltip, Select, Option, Text, SlidingToolbar, Container, Label, IconLabel } from '../../../../app-typescript/index';
+import { ButtonGroup, Button, NavButton, SubNav, Input, IconButton, Divider, Tooltip, Select, Option, Text, SlidingToolbar, Container, Label, IconLabel, Icon } 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';
@@ -29,6 +29,7 @@ interface IState {
     array: any;
     inputValue: string;
     activeTab: string | null;
+    isExpanded: boolean;
 }
 
 export class RundownEditor extends React.Component<IProps, IState> {
@@ -117,6 +118,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
                 },
             ],
             activeTab: null,
+            isExpanded: false,
         }
         this.handleTheme = this.handleTheme.bind(this);
     }
@@ -134,11 +136,24 @@ export class RundownEditor extends React.Component<IProps, IState> {
             item.status.push(status);
         }
     }
+
+    toggleExpand = () => {
+        this.setState(prevState => ({ isExpanded: !prevState.isExpanded }));
+    }
+
     render() {
         return (
             <Layout.LayoutContainer>
                 <Layout.HeaderPanel>
                     <SubNav>
+                        <Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right' appendToBody={true}>
+                            <button 
+                                className={`expand-button ${this.state.isExpanded ? "expand-button--expanded" : ""}`}
+                                onClick={this.toggleExpand}
+                            >
+                                <Icon name='chevron-left-thin' />
+                            </button>
+                        </Tooltip>
                         <ButtonGroup align='end'>
                             <Button text="Cancel" onClick={()=> false} type="default" />
                             <Button text="Save Rundown" onClick={()=> false} type="primary" />

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Components from './components/Index';
-import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker, TreeSelect, ContentDivider, Select, Option, AvatarGroup, SvgIconIllustration, IllustrationButton } from '../../../../app-typescript/index';
+import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, TreeSelect, DatePicker, ContentDivider, Select, Option, AvatarGroup, SvgIconIllustration, IllustrationButton, SubNav, NavButton } from '../../../../app-typescript/index';
 import { IAvatarInGroup } from '../../../../app-typescript/components/avatar/avatar-group';
 import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
 
@@ -32,6 +32,7 @@ interface IState {
     value: any;
     valueS2: any;
     thisTheme: string;
+    isExpanded: boolean;
 }
 
 let options2 = [
@@ -73,6 +74,7 @@ export class TestGround extends React.Component<IProps, IState> {
             value: undefined,
             valueS2: undefined,
             thisTheme: 'light-ui',
+            isExpanded: false,
         }
     }
 
@@ -88,7 +90,11 @@ export class TestGround extends React.Component<IProps, IState> {
         this.setState( {
             thisTheme: this.state.thisTheme === 'light-ui' ? 'dark-ui' : 'light-ui',
         });
-      };
+    };
+
+    toggleExpand = () => {
+        this.setState(prevState => ({ isExpanded: !prevState.isExpanded }));
+    }
 
     render() {
         const avatars: Array<IAvatarInGroup> = [
@@ -145,6 +151,42 @@ export class TestGround extends React.Component<IProps, IState> {
                             <IconButton icon="adjust" ariaValue="Toggle theme" onClick={this.toggleTheme} toolTipFlow='left' />
                         </ButtonGroup>
 
+                        <hr />
+
+                        <SubNav color='darker'>
+                            <Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right' appendToBody={true}>
+                                <button 
+                                    className={`expand-button ${this.state.isExpanded ? "expand-button--expanded" : ""}`}
+                                    onClick={this.toggleExpand}
+                                >
+                                    <Icon name='chevron-left-thin' />
+                                </button>
+                            </Tooltip>
+                            <div className='text-2xs text-uppercase sd-display--flex ms-2 gap-0-5'>
+                                <span className='font-medium'>News desk</span>
+                                <span className='font-light text-color-subdued'>/</span>
+                                <span className='text-color-muted'>Working stage</span>
+                            </div>
+                            <ButtonGroup align='end'>
+                                <Button text="Cancel" onClick={()=> false} type="default" />
+                                <Button text="Save" onClick={()=> false} type="primary" />
+                                <Divider size="mini" />
+                                <ButtonGroup subgroup={true} spaces="no-space">
+                                    <Tooltip text='Minimize' flow='left'>
+                                        <NavButton type='default' icon='minimize' iconSize='big' text='Minimize' onClick={()=> false} />
+                                    </Tooltip>
+                                    <Tooltip text='More actions' flow='left'>
+                                        <NavButton type='default' icon='dots-vertical' text='More actions' onClick={()=> false} />
+                                    </Tooltip>
+                                    <Tooltip text='Send to / Publish' flow='left'>
+                                        <NavButton type='highlight' icon='send-to' iconSize='big' text='Send to / Publish' onClick={()=> false} />
+                                    </Tooltip>
+                                </ButtonGroup>
+                            </ButtonGroup>
+                        </SubNav>
+                        
+                        <hr />
+
                         <div className='sd-grid-list sd-grid-list--xx-small sd-grid-list--gap-s sd-grid-list--no-margin' style={{width:'290px'}}>
                             
                             <IllustrationButton text='Headlines' onClick={()=> false}>
@@ -337,7 +379,7 @@ export class TestGround extends React.Component<IProps, IState> {
                                 <Option>All events</Option>
                             </Select>
                             <ContentDivider type="solid" margin="medium" />
-                            <Heading type='h3' className='mb-1 sd-text--strong'>Related Planning(s)</Heading>
+                            <Heading type='h3' className='mb-1 sd-text--bold'>Related Planning(s)</Heading>
                             <Text size='small' className='mb-1'>
                                 <strong>You made changes to a planning item that is a part of a recurring event</strong>.
                                 Apply the changes to all recurring planning items or just this one?
@@ -397,7 +439,7 @@ export class TestGround extends React.Component<IProps, IState> {
                             footerTemplate={modalSaveEventFooterThree}
                             onHide={() => {this.setState({modalSaveEvent3: false})}}
                         >
-                            <Heading type='h3' className='mb-1 sd-text--strong'>Related Planning(s)</Heading>
+                            <Heading type='h3' className='mb-1 sd-text--bold'>Related Planning(s)</Heading>
                             <Text size='small' className='mb-1'>
                                 <strong>You made changes to a planning item that is a part of a recurring event</strong>.
                                 Apply the changes to all recurring planning items or just this one?

package/dist/playgrounds/video-editor.html

@@ -598,7 +598,7 @@
                                     </button>
                                     <span class="sd-photo-preview__label mlr-auto">DJI_0270.mp4</span>
                                     <div>
-                                        <span class="sd-text__strong-s">Quality:</span>
+                                        <span class="sd-text--bold-s">Quality:</span>
                                         <div class="dropdown dropdown--align-right" dropdown>
                                             <button class="dropdown__toggle dark-ui" dropdown__toggle>
                                                 Same<span class="dropdown__caret dropdown__caret--white"></span>

package/dist/playgrounds.html

@@ -3,9 +3,9 @@
     <h1 class="docs-page__h1">Superdesk UI</h1>
     <ul class="docs-page__header-nav">
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/">Home</a></li>
-        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/components">Components</a></li>
-        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/react">React</a></li>
+        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design-patterns">Design Patterns</a></li>
+        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
         <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
     </ul>
 </header>
@@ -15,12 +15,10 @@
             <img src="/illustration--playground.svg" alt="React">
         </figure>
         <h2 class="docs-page__hero-h2 docs-page__color--primary">UI Playgrounds</h2>
-        <p class="docs-page__hero-text">Examples and drafts for more complex modules<br>
-            and full-page layouts.</p>
+        <p class="docs-page__hero-text">Examples, full-page layouts and design drafts.</p>
     </div>
     <section class="docs-page__container sd-margin-t--0">
         <div class="flex-grid flex-grid--boxed flex-grid--wrap-items flex-grid--small-3">
-
             <div class="sd-card flex-grid__item" ng-repeat="(group, content) in playgrounds">
                 <div class="sd-card__header sd-card__header--with-thumb sd-card__header--gradient-1">
                     <div class="sd-card__thumbnail sd-card__thumbnail--size-xxs">
@@ -36,7 +34,6 @@
                     </ul>
                 </div>
             </div>
-
         </div>
     </section>
 </main>