superdesk-ui-framework 3.1.5 → 3.1.7

package/examples/css/docs-page.css

@@ -19,6 +19,7 @@
     --docs-page-border__window-bar--top: hsla(0, 0%, 100%, 0.9);
     --docs-page-border__window-bar--bottom: hsla(0, 0%, 88%, 1);
     --docs-page-border__table: hsla(0, 0%, 0%, 0.16);
+    --docs-page-color-bg__table-divider-row: hsla(0, 0%, 100%, 0.8);
 
     --docs-page-bg__table-tr-even: hsla(214, 13%, 50%, 0.08);
 }
@@ -318,6 +319,15 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     background-color: var(--docs-page-color-bg__aside);
     overflow-y: auto;
 }
+.docs-page__sidebar-searchbar-container {
+    position: sticky;
+    top: -20px;
+    margin-top: -20px;
+    padding-block: 16px 8px;
+    background-color: var(--docs-page-color-bg__aside);
+    z-index: 2;
+}
+
 .docs-page__sidebar.scroll {
     top: 0;
     margin-top: 0;
@@ -375,12 +385,37 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     color: var(--color-text);
     font-size: 12px;
     font-weight: 500;
-    letter-spacing: 0.1em;
-    display: inline-block;
+    letter-spacing: 0.04em;
+    line-height: 1.2;
     margin-block-start: 20px;
     margin-block-end: 6px;
-    padding-inline-start: 20px;
+    padding-inline-start: 16px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    transition: all 0.2s ease;
+    min-height: 16px;
+}
+.docs-page__nav-title:hover {
+    cursor: pointer;
+    color: var(--sd-colour-interactive);
+}
+
+.docs-page__nav-title-caret {
+    height: 16px;
+    width: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.6;
+    margin-block-end: 2px;
+    transition: all 0.2s ease;
+}
+.docs-page__nav-title--open .docs-page__nav-title-caret {
+    transform: rotate(90deg)
+
 }
+
 .docs-page__nav > li:first-child .docs-page__nav-title {
     margin-block-start: 0;
 }
@@ -478,43 +513,41 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
 }
 .docs-page__small-text {
     font-size: 1.3rem;
-    font-weight: 300;
+    font-weight: 400;
     color: var(--color-text-light);
     opacity: 0.7;
 }
 
 .docs-page__nav-item {
-    position: relative;
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 300;
-    color: var(--color-text);
-    border-inline-start: 4px solid transparent;
+    position: relative; 
 }
 .docs-page__nav-item a {
     font-size: 14px;
     line-height: 32px;
     display: block;
-    padding-inline-start: 24px;
+    margin-inline-start: 22px;
+    padding-inline-start: 12px;
     color: var(--color-text-light);
     background-color: rgba(255, 255, 255, 0);
     cursor: pointer;
     text-decoration: none;
-    transition: all ease-in-out 0.2s;
+    transition: all ease 0.2s;
+    border-inline-start: 1px solid var(--color-border-line--medium);
 }
 .docs-page__nav-item a:hover {
     color: var(--color-text);
-    background-color: var(--docs-page-color-bg-00);
+    border-color: var(--color-border-line--strong);
+    /* background-color: var(--docs-page-color-bg-00); */
 }
 .docs-page__nav-item a:active {
-    color: var(--color-text-light);
-    background-color: var(--sd-colour-interactive--alpha-20);
+    color: var(--color-text);
 }
 
-.docs-page__nav-item.docs-page__nav-item--active {
+.docs-page__nav-item a.docs-page__nav-item--active {
     border-color: var(--sd-colour-interactive);
-    background-color: var(--docs-page-color-bg-00);
     font-weight: 400;
+    color: var(--sd-colour-interactive);
+    box-shadow: -1px 0 0 var(--sd-colour-interactive), inset 1px 0 0 var(--sd-colour-interactive);
 }
 
 .docs-page__nav-item.docs-page__nav-item--active a {
@@ -964,17 +997,70 @@ doc-gif-img:hover img {
     border-color: var(--docs-page-border__table) !important;
 }
 
-.docs-page__container table tr td:nth-child(3) {
+.docs-page__container table:not(.utilities-table) tr td:nth-child(3) {
     white-space: nowrap;
 }
 
-.docs-page__container table tr:nth-child(even),
-.docs-page__container table thead tr {
+.docs-page__container table:not(.utilities-table) tr:nth-child(even),
+.docs-page__container table:not(.utilities-table) thead tr {
     background-color: var(--docs-page-bg__table-tr-even);
 }
 
 
+.docs-page__container table.utilities-table {
+    width: 100%;
+    border-block-start: none !important;
+    margin: 0;
+    font-size: 14px;
+}
+.docs-page__container table.utilities-table thead th {
+    font-size: 14px;
+	position: sticky;
+    top: 0;
+    background-color: var(--docs-page-color-bg-00);
+    border-bottom: ;
+}
+
+.docs-page__container table.utilities-table tbody td  {
+    width: 100%;
+    font-family: monospace;
+    line-height: 1.4;
+    color: var(--color-text-light);
+}
+.docs-page__container table.utilities-table tbody td:first-child {
+    min-width: 200px;
+    width: auto;
+    color: var(--color-text);
+}
+.docs-page__container table.utilities-table tbody td:nth-child(3){
+    min-width: 200px;
+    width: auto;
+    text-align: end;
+    padding-inline-end: var(--space--1-5);
+    font-weight: 700;
+}
+
+.docs-page__container table.utilities-table tbody tr.utilities-table__divider-row td {
+    color: var(--color-text);
+    font-family: 'Roboto', sans-serif;
+    font-size: 13px;
+    letter-spacing: 0.025em;
+    font-weight: 500;
+    padding-block: 8px !important;
+    background-color: var(--docs-page-color-bg__table-divider-row);
+}
+
+.utilities-table__container {
+    position: relative;
+    max-height: 438px;
+    overflow-y: auto;
+    border-block-start:1px solid var(--sd-colour-line--medium);
+    margin-block-end: var(--space--4);
+}
 
+.docs-page__container .doc-text--highlight {
+    color: var(--docs-page-color-primary) !important;
+}
 
 /* -------------- END COLOR SWATCHES -------------- */
 /* -------------- PrismJS overrides -------------- */

package/examples/index.js

@@ -250,12 +250,95 @@ export default angular.module('ui-docs', [
                 },
             },
         }
-        
+
     }))
 
     .factory('playgrounds', () => ({
+        // React playgrounds
+        'react': {
+            'first-playground': {
+                name: 'First playground',
+                component: 'FirstPlayground'
+            },
+            'sams-playground': {
+                name: 'SAMS',
+                component: 'SamsPlayground'
+            },
+            'test-ground': {
+                name: 'Test Ground',
+                component: 'TestGround'
+            },
+            'ui-playground': {
+                name: 'UI',
+                component: 'UiPlayground'
+            },
+            'pagelayout-test': {
+                name: 'PageLayout Test',
+                component: 'PageLayoutTest'
+            },
+            'editor-test': {
+                name: 'Editor Layout Test',
+                component: 'EditorTest'
+            },
+            'personal-profile': {
+                name: 'Personal Profile',
+                component: 'PersonalProfile'
+            },
+            'rundown-editor': {
+                name: 'Rundown Editor',
+                component: 'RundownEditor'
+            },
+            'rundowns': {
+                name: 'Rundowns',
+                component: 'Rundowns'
+            },
+            'core-layout': {
+                name: 'Core Layout',
+                component: 'CoreLayout'
+            },
+            'multiedit': {
+                name: 'Multiedit',
+                component: 'Multiedit'
+            }
+        },
+        
+        // Publisher playgrounds
+        publisher: {
+            'publisher-dashboard': {
+                name: 'Dashboard',
+                page: 'publisher-dashboard.html'
+            },
+            'publisher-content-lists': {
+                name: 'Content Lists',
+                page: 'publisher-content-lists.html'
+            },
+            'publisher-content-list-manual': {
+                name: 'Content List - Manual',
+                page: 'publisher-content-list-manual.html'
+            },
+            'publisher-content-list-automatic': {
+                name: 'Content List - Automatic',
+                page: 'publisher-content-list-automatic.html'
+            },
+            'publisher-output-control': {
+                name: 'Output Control',
+                page: 'publisher-output-control.html'
+            },
+            'publisher-content-analytics': {
+                name: 'Content Analytics',
+                page: 'publisher-content-analytics.html'
+            },
+            'publisher-website-settings': {
+                name: 'Website Settings',
+                page: 'publisher-website-settings.html'
+            },
+            'publisher-website-settings-general': {
+                name: 'Website Settings - General',
+                page: 'publisher-website-settings-general.html'
+            },
+        },
         // Superdesk playgrounds
-        superdesk: {
+        'archived': {
             'planning': {
                 name: 'Planning',
                 page: 'buttons.html'
@@ -341,89 +424,6 @@ export default angular.module('ui-docs', [
                 page: 'editor-3-test.html'
             },
         },
-        // Publisher playgrounds
-        publisher: {
-            'publisher-dashboard': {
-                name: 'Dashboard',
-                page: 'publisher-dashboard.html'
-            },
-            'publisher-content-lists': {
-                name: 'Content Lists',
-                page: 'publisher-content-lists.html'
-            },
-            'publisher-content-list-manual': {
-                name: 'Content List - Manual',
-                page: 'publisher-content-list-manual.html'
-            },
-            'publisher-content-list-automatic': {
-                name: 'Content List - Automatic',
-                page: 'publisher-content-list-automatic.html'
-            },
-            'publisher-output-control': {
-                name: 'Output Control',
-                page: 'publisher-output-control.html'
-            },
-            'publisher-content-analytics': {
-                name: 'Content Analytics',
-                page: 'publisher-content-analytics.html'
-            },
-            'publisher-website-settings': {
-                name: 'Website Settings',
-                page: 'publisher-website-settings.html'
-            },
-            'publisher-website-settings-general': {
-                name: 'Website Settings - General',
-                page: 'publisher-website-settings-general.html'
-            },
-        },
-
-        // React playgrounds
-        react: {
-            'first-playground': {
-                name: 'First playground',
-                component: 'FirstPlayground'
-            },
-            'sams-playground': {
-                name: 'SAMS',
-                component: 'SamsPlayground'
-            },
-            'test-ground': {
-                name: 'Test Ground',
-                component: 'TestGround'
-            },
-            'ui-playground': {
-                name: 'UI',
-                component: 'UiPlayground'
-            },
-            'pagelayout-test': {
-                name: 'PageLayout Test',
-                component: 'PageLayoutTest'
-            },
-            'editor-test': {
-                name: 'Editor Layout Test',
-                component: 'EditorTest'
-            },
-            'personal-profile': {
-                name: 'Personal Profile',
-                component: 'PersonalProfile'
-            },
-            'rundown-editor': {
-                name: 'Rundown Editor',
-                component: 'RundownEditor'
-            },
-            'rundowns': {
-                name: 'Rundowns',
-                component: 'Rundowns'
-            },
-            'core-layout': {
-                name: 'Core Layout',
-                component: 'CoreLayout'
-            },
-            'multiedit': {
-                name: 'Multiedit',
-                component: 'Multiedit'
-            }
-        }
     }))
 
     .config(($routeProvider) => {
@@ -444,11 +444,11 @@ export default angular.module('ui-docs', [
             .when('/components/:name*', {
                 template: require('../examples/pages/components.html')
             })
-            .when('/react', {
-                template: require('../examples/pages/react.html')
+            .when('/design-patterns', {
+                template: require('../examples/pages/design-patterns.html')
             })
-            .when('/react/:name*', {
-                template: require('../examples/pages/react.html')
+            .when('/design-patterns/:name*', {
+                template: require('../examples/pages/design-patterns.html')
             })
             .when('/playgrounds', {
                 template: require('../examples/pages/playgrounds.html')

package/examples/js/doc.js

@@ -1,7 +1,8 @@
 /* eslint-disable */
 /* global _, PR */
 
-import { ReactDoc, ReactPlayground } from './../pages/react/Index';
+import { ReactDoc, ReactPlayground } from './../pages/components/Index';
+import { DesignPatternsDoc } from './../pages/design-patterns/Index';
 import { HashRouter } from 'react-router-dom';
 
 import React from 'react';
@@ -115,7 +116,7 @@ function docModal($modal) {
 
             scope.openTemplateModal = function () {
                 modal = $modal.open({
-                    template: require('../pages/components/modal-template.html'),
+                    template: require('../pages/components_deprecated/modal-template.html'),
                     controller: docModalController,
                     size: 'large'
                 });
@@ -152,6 +153,18 @@ function docReact() {
     };
 }
 
+docDesignPatterns.$inject = [];
+function docDesignPatterns() {
+    return {
+        link: function (scope, elem) {
+            ReactDOM.render(
+                <HashRouter>
+                    <DesignPatternsDoc />
+                </HashRouter>, elem[0]);
+        }
+    };
+}
+
 docReactPlayground.$inject = ['playgrounds'];
 function docReactPlayground(playgrounds) {
     return {
@@ -199,5 +212,6 @@ export default angular.module('ui-docs.directives', [])
     .directive('docNav', docNav)
     .directive('docModal', docModal)
     .directive('docReact', docReact)
+    .directive('docDesignPatterns', docDesignPatterns)
     .directive('docReactPlayground', docReactPlayground)
     .directive('docGifImg', docGifImg);

package/examples/js/react.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { NavLink } from 'react-router-dom';
 
 import Prism from 'prismjs';
 import NormalizeWhitespace from 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
@@ -6,25 +7,107 @@ import LineNumbers from 'prismjs/plugins/line-numbers/prism-line-numbers';
 import Markdown from 'prismjs/components/prism-markdown';
 import JSX from 'prismjs/components/prism-jsx';
 
-import { Link } from 'react-router-dom';
-
 class ReactNav extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            searchTerm: '',
+            expandedSections: Object.keys(this.props.pages).reduce((sections, key) => {
+                sections[key] = true;
+                return sections;
+            }, {}),
+        };
+
+        this.activeRef = React.createRef();
+
+        this.handleSearchChange = this.handleSearchChange.bind(this);
+        this.toggleSection = this.toggleSection.bind(this);
+    }
+
+
+    componentDidMount() {
+        if (this.activeRef.current) {
+            this.activeRef.current.scrollIntoView({
+                block: 'center',
+                inline: 'nearest'
+            });
+        }
+    }
+
+    handleSearchChange(event) {
+        this.setState({
+            searchTerm: event.target.value,
+            expandedSections: Object.keys(this.props.pages).reduce((sections, key) => {
+                sections[key] = true;
+                return sections;
+            }, {})
+        });
+    }
+
+    toggleSection(section) {
+        this.setState(prevState => ({
+            expandedSections: {
+                ...prevState.expandedSections,
+                [section]: !prevState.expandedSections[section],
+            },
+        }));
+    };
+
     render() {
-        const pages = this.props.pages;
-
-        const navigations = Object.keys(pages).map((group) => <li key={group}>
-            <span className="docs-page__nav-title">{pages[group].name}</span>
-            <ul className="docs-page__nav--sub-level">
-                {Object.keys(pages[group].items).map((page) =>
-                    <li key={page} className="docs-page__nav-item">
-                        <Link to={{ pathname: '/react/' + page }}>{pages[group].items[page].name}</Link>
-                    </li>
+        const { pages, base = 'components' } = this.props;
+        const { searchTerm } = this.state;
+
+        const filteredPages = Object.keys(pages).reduce((filtered, section) => {
+            const filteredItems = Object.keys(pages[section].items)
+                .filter(item => pages[section].items[item].name.toLowerCase().includes(searchTerm.toLowerCase()))
+                .reduce((obj, key) => {
+                    obj[key] = pages[section].items[key];
+                    return obj;
+                }, {});
+
+            if (Object.keys(filteredItems).length > 0) {
+                filtered[section] = { ...pages[section], items: filteredItems };
+            }
+
+            return filtered;
+        }, {});
+
+        const navigations = Object.keys(filteredPages).map((group) => (
+            <li key={group}>
+                <div
+                    className={`docs-page__nav-title ${this.state.expandedSections[group] ? 'docs-page__nav-title--open' : ''}`}
+                    onClick={() => this.toggleSection(group)}
+                >
+                    <span className='docs-page__nav-title-caret'>
+                        <i className="icon-chevron-right-thin" aria-label="chevron-right-thin" />
+                    </span>
+                    {filteredPages[group].name}
+                </div>
+                {this.state.expandedSections[group] && (
+                    <ul className="docs-page__nav--sub-level">
+                        {Object.keys(filteredPages[group].items).map((page) =>
+                            <li key={page} className="docs-page__nav-item" ref={`/${base}/${page}` === location.hash.replace('#', '') ? this.activeRef : null}>
+                                <NavLink to={{ pathname: `/${base}/${page}` }} activeClassName="docs-page__nav-item--active">{filteredPages[group].items[page].name}</NavLink>
+                            </li>
+                        )}
+                    </ul>
                 )}
-            </ul>
-        </li>);
+            </li>
+        ));
 
         return (
             <aside className="docs-page__sidebar">
+                <div className='docs-page__sidebar-searchbar-container'>
+                    <div className="mx-2 mb-1-5 sd-searchbar sd-searchbar--expanded sd-searchbar--boxed">
+                        <label className="sd-searchbar__icon"></label>
+                        <input id="search-input" className="sd-searchbar__input" type="text" placeholder="Search" value={searchTerm} onChange={this.handleSearchChange} />
+                        {this.state.searchTerm && (
+                            <button className="sd-searchbar__cancel" onClick={() => this.setState({ searchTerm: '' })}>
+                                <Icon name='remove-sign' />
+                            </button>
+                        )}
+                    </div>
+                </div>
                 <ul className="docs-page__nav">{navigations}</ul>
             </aside>
         )
@@ -40,8 +123,25 @@ class ReactDefault extends React.PureComponent {
                         <img src="/illustration--react.svg" alt="React" />
                     </figure>
                     <h2 className="docs-page__hero-h2 docs-page__color--primary">Home of Superdesk React components</h2>
-                    <p className="docs-page__hero-text">As the headline suggests – React components for Superdesk. Work in progress!</p>
-                    <p className="docs-page__hero-text sd-text__normal">Feel free to contribute!</p>
+                    <p className="docs-page__hero-text">As the headline suggests, these where the React components live.</p>
+                </div>
+            </section>
+        )
+    }
+}
+
+class PatternsDefault extends React.PureComponent {
+    render() {
+        return (
+            <section className="docs-page__container">
+                <div className="docs-page__hero">
+                    <figure className="docs-page__hero-image">
+                        <img src="/illustration--components.svg" alt="React" />
+                    </figure>
+                    <h2 className="docs-page__hero-h2 docs-page__color--primary">Design Patterns</h2>
+                    <p className="docs-page__hero-text">
+                        Examples of reusable solutions for common UI patterns in Superdesk.
+                    </p>
                 </div>
             </section>
         )
@@ -113,14 +213,17 @@ class ReactMarkupCodePreview extends React.PureComponent {
         Prism.highlightAll();
     }
     render() {
+        const { limitHeight, children } = this.props;
+        const classes = `language-jsx ${limitHeight ? 'max-h-25' : ''}`;
+
         return (
-            <pre>
-                <code className="language-jsx">
-                    {this.props.children}
+            <pre className={limitHeight ? 'max-h-25' : ''}>
+                <code className={classes}>
+                    {children}
                 </code>
             </pre>
         )
     }
 }
 
-export { ReactNav, ReactDefault, ReactMarkup, ReactMarkupPreview, ReactMarkupCode, ReactMarkupCodePreview };
+export { ReactNav, ReactDefault, ReactMarkup, ReactMarkupPreview, ReactMarkupCode, ReactMarkupCodePreview, PatternsDefault };