superdesk-ui-framework 3.1.9 → 3.1.12

package/dist/components/utilities/ObjectFitUtilities.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import * as Markup from '../../../js/react';
+
+class ObjectFitUtilitiesDoc extends React.Component {
+    render() {
+        return (
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Object Fit</h2>
+                <p className="docs-page__paragraph">
+                    Utilities for managing how a replaced element's content should be resized. 
+                </p>
+                <div className='docs-page__container-block--object-fit'>
+                    <div className="utilities-table__container">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>object-contain</td>
+                                    <td>{'object-fit: 0;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>object-cover</td>
+                                    <td>{'object-fit: cover;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>object-fill</td>
+                                    <td>{'object-fit: fill;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>object-none</td>
+                                    <td>{'object-fit: none;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>object-scale-down</td>
+                                    <td>{'object-fit: scale-down;'}</td>
+                                </tr>
+
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+            </section>
+        )
+    }
+}
+
+export { ObjectFitUtilitiesDoc };

package/dist/components/utilities/ObjectPositionUtilities.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import * as Markup from '../../../js/react';
+
+class ObjectPositionUtilitiesDoc extends React.Component {
+    render() {
+        return (
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Object Position</h2>
+                <p className="docs-page__paragraph">
+                    Utilities for managing how a replaced element's content should be positioned within its container.
+                </p>
+                <div className='docs-page__container-block--object-position'>
+                    <div className="utilities-table__container utilities-table__container--no-height">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>object-bottom</td>
+                                    <td>{'object-position: bottom;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>object-center</td>
+                                    <td>{'object-position: center;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>object-left</td>
+                                    <td>{'object-position: left;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>object-left-bottom</td>
+                                    <td>{'object-position: left bottom;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>object-left-top</td>
+                                    <td>{'object-position: left top;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>object-right</td>
+                                    <td>{'object-position: right;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>object-right-bottom </td>
+                                    <td>{'object-position: right bottom;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>object-right-top</td>
+                                    <td>{'object-position: right top;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>object-top</td>
+                                    <td>{'object-position: top;'}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+            </section>
+        )
+    }
+}
+
+export { ObjectPositionUtilitiesDoc };

package/dist/components/utilities/OpacityUtilities.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import * as Markup from '../../../js/react';
+
+class OpacityUtilitiesDoc extends React.Component {
+    render() {
+        return (
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Opacity</h2>
+                <p className="docs-page__paragraph">
+                    Utility classes for controlling the opacity of an element. 
+                </p>
+                <div className='docs-page__container-block--opacity'>
+                    <div className="utilities-table__container">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>opacity-0</td>
+                                    <td>{'opacity: 0;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>opacity-20</td>
+                                    <td>{'opacity: 0.2;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>opacity-25</td>
+                                    <td>{'opacity: 0.25;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>opacity-30</td>
+                                    <td>{'opacity: 0.3;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>opacity-40</td>
+                                    <td>{'opacity: 0.4;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>opacity-50</td>
+                                    <td>{'opacity: 0.5;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>opacity-60</td>
+                                    <td>{'opacity: 0.6;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>opacity-75</td>
+                                    <td>{'opacity: 0.75;'}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+            </section>
+        )
+    }
+}
+
+export { OpacityUtilitiesDoc };

package/dist/components/utilities/OverflowUtilities.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import * as Markup from '../../../js/react';
+
+class OverflowUtilitiesDoc extends React.Component {
+    render() {
+        return (
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Overflow</h2>
+                <p className="docs-page__paragraph">
+                Utility classes for managing how an element deals with content that exceeds the container's size. 
+                </p>
+                <div className='docs-page__container-block--position'>
+                    <div className="utilities-table__container utilities-table__container--no-height">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>overflow-auto</td>
+                                    <td>{'overflow: auto !important;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>overflow-hidden</td>
+                                    <td>{'overflow: hidden !important;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>overflow-scroll</td>
+                                    <td>{'overflow: scroll !important;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>overflow-visible</td>
+                                    <td>{'overflow: visible !important;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>overflow-clip</td>
+                                    <td>{'overflow: clip !important;'}</td>
+                                </tr>
+
+                                <tr>
+                                    <td>overflow-x-auto</td>
+                                    <td>{'overflow-x: auto !important;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>overflow-y-auto</td>
+                                    <td>{'overflow-y: auto !important;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>overflow-x-hidden</td>
+                                    <td>{'overflow-x: hidden !important;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>overflow-y-hidden</td>
+                                    <td>{'overflow-y: hidden !important;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>overflow-x-scroll</td>
+                                    <td>{'overflow-x: scroll !important;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>overflow-y-scroll</td>
+                                    <td>{'overflow-y: scroll !important;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>overflow-x-visible</td>
+                                    <td>{'overflow-x: visible !important;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>overflow-y-visible</td>
+                                    <td>{'overflow-y: visible !important;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>overflow-x-clip</td>
+                                    <td>{'overflow-x: clip !important;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>overflow-y-clip</td>
+                                    <td>{'overflow-y: clip !important;'}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+            </section>
+        )
+    }
+}
+
+export { OverflowUtilitiesDoc };

package/dist/components/utilities/PositionUtilities.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import * as Markup from '../../../js/react';
+
+class PositionUtilitiesDoc extends React.Component {
+    render() {
+        return (
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Position</h2>
+                <p className="docs-page__paragraph">
+                Utility classes for managing the placement of an element within the DOM. 
+                </p>
+                <div className='docs-page__container-block--position'>
+                    <div className="utilities-table__container">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>p-static</td>
+                                    <td>{'position: static;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>p-fixed</td>
+                                    <td>{'position: fixed;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>p-absolute</td>
+                                    <td>{'position: absolute;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>p-relative</td>
+                                    <td>{'position: relative;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>p-sticky</td>
+                                    <td>{'position: sticky;'}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+            </section>
+        )
+    }
+}
+
+export { PositionUtilitiesDoc };

package/dist/components/utilities/ShadowUtilities.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react';
+import * as Markup from '../../../js/react';
+
+class ShadowUtilitiesDoc extends React.Component {
+    render() {
+        return (
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Shadow</h2>
+                <p className="docs-page__paragraph">
+                    Utility classes for managing the shadow depth of an element.
+                </p>
+
+                <div className='docs-page__container-block--box-shadow'>
+                    <h3 className="docs-page__h3">box-shadow</h3>
+                    <div className="utilities-table__container">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>sd-shadow--z1</td>
+                                    <td>{'box-shadow: var(--sd-shadow--z1);'}</td>
+                                </tr>
+                                <tr>
+                                    <td>sd-shadow--z2</td>
+                                    <td>{'box-shadow: var(--sd-shadow--z2);'}</td>
+                                </tr>
+                                <tr>
+                                    <td>sd-shadow--z3</td>
+                                    <td>{'box-shadow: var(--sd-shadow--z3);'}</td>
+                                </tr>
+                                <tr>
+                                    <td>sd-shadow--z4</td>
+                                    <td>{'box-shadow: var(--sd-shadow--z4);'}</td>
+                                </tr>
+                                <tr>
+                                    <td>sd-shadow--none</td>
+                                    <td>{'box-shadow: none;'}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div className='docs-page__container-block'>
+                        <h4 className="docs-page__h4">Usage</h4>
+                        <div className="docs-page__code-window">
+                            <div className="sd-grid-list">
+                                <div className="docs-page__example-box sd-shadow--z1">
+                                    <p>sd-shadow--z1</p>
+                                </div>
+                                <div className="docs-page__example-box sd-shadow--z2">
+                                    <p>sd-shadow--z2</p>
+                                </div>
+                                <div className="docs-page__example-box sd-shadow--z3">
+                                    <p>sd-shadow--z3</p>
+                                </div>
+                                <div className="docs-page__example-box sd-shadow--z4">
+                                    <p>sd-shadow--z4</p>
+                                </div>
+                            
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='docs-page__container-block--drop-shadow'>
+                    <h3 className="docs-page__h3">drop-shadow filter</h3>
+                    <p className="docs-page__paragraph">
+                        These helper classes utilize the <code>drop-shadow</code> filter. Use them exclusively to apply a shadow to an element that doesn't correspond to its bounding box, but instead uses the element's alpha mask, such as transparent PNG or SVG. For all other situations, it is recommended to use the above classes, based on the <code>box-shadow</code> property.
+                    </p>
+                    <div className="utilities-table__container">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>sd-drop-shadow--z1</td>
+                                    <td>{'filter: var(--sd-drop-shadow--z1);'}</td>
+                                </tr>
+                                <tr>
+                                    <td>sd-drop-shadow--z2</td>
+                                    <td>{'filter: var(--sd-drop-shadow--z2);'}</td>
+                                </tr>
+                                <tr>
+                                    <td>sd-drop-shadow--z3</td>
+                                    <td>{'filter: var(--sd-drop-shadow--z3);'}</td>
+                                </tr>
+                                <tr>
+                                    <td>sd-drop-shadow--z4</td>
+                                    <td>{'filter: var(--sd-drop-shadow--z4);'}</td>
+                                </tr>
+                                <tr>
+                                    <td>sd-drop-shadow--none</td>
+                                    <td>{'filter: var(--sd-drop-shadow--none);'}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <div className='docs-page__container-block--drop-shadow'>
+                    <h4 className="docs-page__h4">Basic usage</h4>
+                    <div className="docs-page__code-window docs-page__example-box">
+                            <div className="p-4">
+                                <p className="text-md font-light text-color-subdued mb-2">sd-drop-shadow--z3</p>
+                                <img className='sd-drop-shadow--z3' width={300} src='./SD-logo.svg' />
+                            </div>
+                    </div>
+                </div>
+
+            </section>
+        )
+    }
+}
+
+export { ShadowUtilitiesDoc };

package/dist/components/utilities/SpacingUtilities.tsx

@@ -5,7 +5,7 @@ class SpacingUtilitiesDoc extends React.Component {
     render() {
         return (
             <section className="docs-page__container">
-                <h2 className="docs-page__h2">Spacing Utilities</h2>
+                <h2 className="docs-page__h2">Spacing</h2>
                 <p className="docs-page__paragraph">
                     The Superdesk UI Framework provides various spacing utility classes to modify the positioning and look of elements. 
                     All values are set in multiples of the <code>--base-increment</code>  CSS variable, which is equivalent to 0.8rem (or 8px in our context), to ensure consistency. 
@@ -771,4 +771,4 @@ class SpacingUtilitiesDoc extends React.Component {
     }
 }
 
-export { SpacingUtilitiesDoc };
+export { SpacingUtilitiesDoc };

package/dist/components/utilities/TextUtilities.tsx

@@ -5,7 +5,7 @@ class TextUtilitiesDoc extends React.Component {
     render() {
         return (
             <section className="docs-page__container">
-                <h2 className="docs-page__h2">Text Utilities</h2>
+                <h2 className="docs-page__h2">Text</h2>
 
                 <div className='docs-page__container-block--font-size'>
                     <h3 className="docs-page__h3">Font Size</h3>
@@ -23,7 +23,7 @@ class TextUtilitiesDoc extends React.Component {
                                 </tr>
                             </thead>
                             <tbody>
-                            <tr>
+                                <tr>
                                     <td>text-2xs</td>
                                     <td>{'font-size: var(--text-size-x-small);'} <span className="doc-text--highlight">/* 10px */</span></td>
                                 </tr>
@@ -408,7 +408,7 @@ class TextUtilitiesDoc extends React.Component {
                                 <tr>
                                     <td>break-normal</td>
                                     <td>
-                                        {'overflow-wrap: normal;'}
+                                        {'overflow-wrap: normal;'}<br />
                                         {'word-break: normal;'}
                                     </td>
                                 </tr>
@@ -424,9 +424,49 @@ class TextUtilitiesDoc extends React.Component {
                         </table>
                     </div>
                 </div>
+
+                <div className='docs-page__container-block--whitespace'>
+                    <h3 className="docs-page__h3">Whitespace</h3>
+                    <div className="utilities-table__container">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>whitespace-normal</td>
+                                    <td>{'white-space: normal;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>whitespace-nowrap</td>
+                                    <td>{'white-space: nowrap;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>whitespace-pre</td>
+                                    <td>{'white-space: pre;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>whitespace-pre-line</td>
+                                    <td>{'white-space: pre-line;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>whitespace-pre-wrap</td>
+                                    <td>{'white-space: pre-wrap;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>whitespace-break-spaces</td>
+                                    <td>{'white-space: break-spaces;'}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
             </section>
         )
     }
 }
 
-export { TextUtilitiesDoc };
+export { TextUtilitiesDoc };

package/dist/components.html

@@ -8,10 +8,8 @@
         <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>
-    <button class="docs-page__header-button" aria-label="Change theme" aria-haspopup="menu" aria-expanded="false">
-        <i role="presentation" class="icon-adjust"></i>
-    </button>
+    <doc-theme-picker></doc-theme-picker>
 </header>
 
 
-<doc-react class="sd-wrap-helper"></doc-react>
+<doc-react class="d-contents"></doc-react>

package/dist/components_deprecated/modals.html

@@ -295,7 +295,7 @@
                         <h3 class="modal__heading">Modal dark (fill option)</h3>
                         <button class="icn-btn" ng-click="closeModal('modalActive9')"><i class="icon-close-small"></i></button>
                     </div>
-                    <div class="sd-wrap-helper">
+                    <div class="d-contents">
                         <div style="height: 100%;" class="sd-content-wrapper__main-content-area sd-main-content-grid comfort">
                             <div class="sd-main-content-grid__content sd-padding--2">
                                 <div class="sd-grid-list">
@@ -376,7 +376,7 @@
                             <h3 class="modal__heading">Modal dark (fill option)</h3>
                             <button class="icn-btn" ng-click="closeModal('modalActive9')"><i class="icon-close-small"></i></button>
                         </div>
-                        <div class="sd-wrap-helper">
+                        <div class="d-contents">
                             <div style="height: 100%;" class="sd-content-wrapper__main-content-area sd-main-content-grid comfort">
                                 <div class="sd-main-content-grid__content sd-padding--2">
                                     <div class="sd-grid-list">

package/dist/components_deprecated.html

@@ -8,6 +8,7 @@
         <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>
+    <doc-theme-picker></doc-theme-picker>
 </header>
 
 <aside class="docs-page__sidebar">

package/dist/design-patterns/Index.tsx

@@ -26,53 +26,12 @@ const pages = {
         }
     },
 }
-interface IProps {
-    theme?: string;
-}
-interface IState {
-    theme: 'dark-ui' | 'light-ui' | string;
-}
-class DesignPatternsDoc extends React.Component<IProps, IState> {
-    constructor(props: IProps) {
-        super(props);
-        this.state = {
-            theme: 'light-ui',
-        }
-        this.handleTheme = this.handleTheme.bind(this);
-    }
-    handleTheme(newTheme: string) {
-        document.body.setAttribute('data-theme', newTheme);
-
-        this.setState({
-            theme: newTheme
-        })
-    }
-
-    checkTheme(theme: string) {
-        return this.state.theme === theme;
-    }
+class DesignPatternsDoc extends React.Component<> {
     render() {
         return (
             <React.Fragment>
                 <ReactNav pages={pages} base="design-patterns" />
                 <main className="docs-page__content docs-page__container-fluid">
-                    <div className="docs-page__fla-button-container">
-                        <Dropdown
-                            items={[
-                                {
-                                    type: 'group', label: 'Chose a theme', items: [
-                                        'divider',
-                                        { label: 'Light', icon: 'adjust', active: this.checkTheme('light-ui'), onSelect: () => this.handleTheme('light-ui') },
-                                        { label: 'Dark', icon: 'adjust', active: this.checkTheme('dark-ui'), onSelect: () => this.handleTheme('dark-ui') },
-                                        { label: 'Accessible Light', active: this.checkTheme('accessible-light-ui'), icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui') },
-                                    ]
-                                },
-                            ]}>
-                            <button className="docs-page__fla-button" aria-label="Change theme" onClick={() => false}>
-                                <i className="icon-adjust"></i>
-                            </button>
-                        </Dropdown>
-                    </div>
                     <Switch>
                         <Route path="/design-patterns/three-pane-layout" component={ThreePaneLayoutPattern} />
                         <Route path="/" component={PatternsDefault} />