superdesk-ui-framework 3.1.5 → 3.1.6

package/examples/pages/components/utilities/TextUtilities.tsx

@@ -0,0 +1,428 @@
+import * as React from 'react';
+import * as Markup from '../../../js/react';
+
+class TextUtilitiesDoc extends React.Component {
+    render() {
+        return (
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Text Utilities</h2>
+
+                <div className='docs-page__container-block--font-size'>
+                    <h3 className="docs-page__h3">Font Size</h3>
+                    <p className="docs-page__paragraph">
+                        The root (HTML) font size is conveniently set to 10px, which makes 1rem equal to 10px by default.
+                        This approach simplifies the calculation of font sizes rem units. Font size helpers classes are
+                        calculated based on the <code>--text-size--base</code> variable, with a value of 1rem.
+                    </p>
+                    <div className="utilities-table__container">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>text-xs</td>
+                                    <td>{'font-size: var(--text-size-x-small);'} <span className="doc-text--highlight">/* 12px */</span></td>
+                                </tr>
+                                <tr>
+                                    <td>text-sm</td>
+                                    <td>{'font-size: var(--text-size-small);'} <span className="doc-text--highlight">/* 14px */</span></td>
+                                </tr>
+                                <tr>
+                                    <td>text-md</td>
+                                    <td>{'font-size: var(--text-size-medium);'} <span className="doc-text--highlight">/* 16px */</span></td>
+                                </tr>
+                                <tr>
+                                    <td>text-lg</td>
+                                    <td>{'font-size: var(--text-size-large;'} <span className="doc-text--highlight">/* 20px */</span></td>
+                                </tr>
+                                <tr>
+                                    <td>text-xl</td>
+                                    <td>{'font-size: var(--text-size-x-large);'} <span className="doc-text--highlight">/* 24px */</span></td>
+                                </tr>
+                                <tr>
+                                    <td>text-2xl</td>
+                                    <td>{'font-size: var(--text-size-xx-large);'} <span className="doc-text--highlight">/* 32px */</span></td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <div className='docs-page__container-block--font-weight'>
+                    <h3 className="docs-page__h3">Font Weight</h3>
+                    <div className="utilities-table__container">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>font-light</td>
+                                    <td>{'font-weight: 300;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>font-normal</td>
+                                    <td>{'font-weight: 400;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>font-medium</td>
+                                    <td>{'font-weight: 500;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>font-semibold</td>
+                                    <td>{'font-weight: 600;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>font-bold</td>
+                                    <td>{'font-weight: 700;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>font-black</td>
+                                    <td>{'font-weight: 900;'}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <div className='docs-page__container-block--font-style'>
+                    <h3 className="docs-page__h3">Font Style</h3>
+                    <div className="utilities-table__container">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>italic</td>
+                                    <td>{'font-style: italic;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>non-italic</td>
+                                    <td>{'font-style: normal;'}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <div className='docs-page__container-block--line-clamp'>
+                    <h3 className="docs-page__h3">Line Clamp</h3>
+                    <p className="docs-page__paragraph">
+                        Utility classes for clamping text to a specific number of lines.
+                    </p>
+                    <div className="utilities-table__container">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>line-clamp-1</td>
+                                    <td>
+                                        {'overflow: hidden;'}<br />
+                                        {'display: -webkit-box;'}<br />
+                                        {'-webkit-box-orient: vertical;'}<br />
+                                        {'-webkit-line-clamp: 1;'}
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>line-clamp-2</td>
+                                    <td>
+                                        {'overflow: hidden;'}<br />
+                                        {'display: -webkit-box;'}<br />
+                                        {'-webkit-box-orient: vertical;'}<br />
+                                        {'-webkit-line-clamp: 2;'}
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>line-clamp-3</td>
+                                    <td>
+                                        {'overflow: hidden;'}<br />
+                                        {'display: -webkit-box;'}<br />
+                                        {'-webkit-box-orient: vertical;'}<br />
+                                        {'-webkit-line-clamp: 3;'}
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>line-clamp-4</td>
+                                    <td>
+                                        {'overflow: hidden;'}<br />
+                                        {'display: -webkit-box;'}<br />
+                                        {'-webkit-box-orient: vertical;'}<br />
+                                        {'-webkit-line-clamp: 4;'}
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>line-clamp-5</td>
+                                    <td>
+                                        {'overflow: hidden;'}<br />
+                                        {'display: -webkit-box;'}<br />
+                                        {'-webkit-box-orient: vertical;'}<br />
+                                        {'-webkit-line-clamp: 5;'}
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>line-clamp-6</td>
+                                    <td>
+                                        {'overflow: hidden;'}<br />
+                                        {'display: -webkit-box;'}<br />
+                                        {'-webkit-box-orient: vertical;'}<br />
+                                        {'-webkit-line-clamp: 6;'}
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>line-clamp-none</td>
+                                    <td>
+                                        {'overflow: hidden;'}<br />
+                                        {'display: -webkit-box;'}<br />
+                                        {'-webkit-box-orient: vertical;'}<br />
+                                        {'-webkit-line-clamp: none;'}
+                                    </td>
+                                </tr>
+
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <div className='docs-page__container-block--font-style'>
+                    <h3 className="docs-page__h3">Text Align</h3>
+                    <div className="utilities-table__container">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>text-start</td>
+                                    <td>{'text-align: start;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>text-center</td>
+                                    <td>{'text-align: center;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>text-end</td>
+                                    <td>{'text-align: end;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>text-justify</td>
+                                    <td>{'text-align: justify;'}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <div className='docs-page__container-block--text-color'>
+                    <h3 className="docs-page__h3">Text Color</h3>
+                    <div className="utilities-table__container">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                    <th></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>text-color-normal</td>
+                                    <td>{'color: var(--color-text) !important'}</td>
+                                    <td><span className='text-color-normal'>Aa</span></td>
+                                </tr>
+                                <tr>
+                                    <td>text-color-muted</td>
+                                    <td>{'color: var(--color-text-light) !important;'}</td>
+                                    <td><span className='text-color-muted'>Aa</span></td>
+                                </tr>
+                                <tr>
+                                    <td>text-color-subdued</td>
+                                    <td>{'color: var(--color-text-lighter) !important;'}</td>
+                                    <td><span className='text-color-subdued'>Aa</span></td>
+                                </tr>
+                                <tr>
+                                    <td>text-color-inverse</td>
+                                    <td>{'color: var(--color-text--inverse) !important;'}</td>
+                                    <td style={{backgroundColor: 'var(--color-text-lighter)',}}><span className='text-color-inverse'>Aa</span></td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <div className='docs-page__container-block--text-transform'>
+                    <h3 className="docs-page__h3">Text Transform</h3>
+                    <div className="utilities-table__container">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>text-uppercase</td>
+                                    <td>{'text-transform: uppercase;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>text-lowercase</td>
+                                    <td>{'text-transform: lowercase;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>text-capitalize</td>
+                                    <td>{'text-transform: capitalize;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>text-normal-case</td>
+                                    <td>{'text-transform: none !important;'}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <div className='docs-page__container-block--text-decoration'>
+                    <h3 className="docs-page__h3">Text Decoration</h3>
+                    <div className="utilities-table__container">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>text-underline</td>
+                                    <td>{'text-decoration: underline;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>text-line-through</td>
+                                    <td>{'text-decoration: line-through;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>text-no-underline</td>
+                                    <td>{'text-decoration: none;'}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <div className='docs-page__container-block--text-overflow'>
+                    <h3 className="docs-page__h3">Text Overflow</h3>
+                    <div className="utilities-table__container">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>text-ellipsis</td>
+                                    <td>
+                                        {'overflow: hidden;'}<br />
+                                        {'text-overflow: ellipsis;'}<br />
+                                        {'white-space: nowrap;'}
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>text-clip</td>
+                                    <td>
+                                        {'text-overflow: clip;'}
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <div className='docs-page__container-block--text-wrap'>
+                    <h3 className="docs-page__h3">Text Wrap</h3>
+                    <div className="utilities-table__container">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>text-wrap</td>
+                                    <td>{'text-wrap: wrap;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>text-nowrap</td>
+                                    <td>{'text-wrap: nowrap;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>text-balance</td>
+                                    <td>{'text-wrap: balance;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>text-pretty</td>
+                                    <td>{'text-wrap: pretty;'}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <div className='docs-page__container-block--text-wrap'>
+                    <h3 className="docs-page__h3">Word Break</h3>
+                    <div className="utilities-table__container">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>break-normal</td>
+                                    <td>
+                                        {'overflow-wrap: normal;'}
+                                        {'word-break: normal;'}
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>break-words</td>
+                                    <td>{'overflow-wrap: break-word;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>break-all</td>
+                                    <td>{'word-break: break-all;'}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </section>
+        )
+    }
+}
+
+export { TextUtilitiesDoc };

package/examples/pages/components.html

@@ -3,36 +3,15 @@
     <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 docs-page__header-nav-item--active"><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>
+    <button class="docs-page__header-button" aria-label="Change theme" aria-haspopup="menu" aria-expanded="false">
+        <i role="presentation" class="icon-adjust"></i>
+    </button>
 </header>
 
-<aside class="docs-page__sidebar">
-    <ul class="docs-page__nav" doc-nav>
-        <li ng-repeat="group in components">
-            <span class="docs-page__nav-title">{{group.name}}</span>
-            <ul class="docs-page__nav--sub-level">
-                <li class="docs-page__nav-item" ng-repeat="(name, item) in group.items"
-                    ng-class="{'docs-page__nav-item--active': isActive(name)}"><a href="#/components/{{name}}">{{item.name}}</a>
-                </li>
-            </ul>
-        </li>
-    </ul>
-</aside>
-
-<main class="docs-page__content docs-page__container-fluid" ng-if="page" ng-include="'components/' + page + '.html'"></main>
 
-<main class="docs-page__content docs-page__container-fluid" ng-if="!page">
-    <section class="docs-page__container">
-        <div class="docs-page__hero">
-            <figure class="docs-page__hero-image">
-                <img src="/illustration--components.svg" alt="Components">
-            </figure>
-            <h2 class="docs-page__hero-h2 docs-page__color--primary">Superdesk HTML/CSS and Angular UI components</h2>
-            <p class="docs-page__hero-text">Since we are moving completely to React, check fist if what you are looking for is available as a react component. If it's not – this is the right place to look.</p>
-        </div>
-    </section>
-</main>
+<doc-react class="sd-wrap-helper"></doc-react>

package/examples/pages/{components → components_deprecated}/text.html

@@ -11,44 +11,44 @@
     <ul class="sd-margin-t--2">
         <li>
             <p class="docs-page__paragraph">
-                <code>sd-text__normal</code><br>
+                <code>sd-text--normal</code><br>
                 // Sets the font style to normal
             </p>
         </li>
         <li>
             <p class="docs-page__paragraph">
-                <code>sd-text__strong</code><br>
+                <code>sd-text--bold</code><br>
                 // Sets the font style to bold
             </p>
         </li>
         <li>
             <p class="docs-page__paragraph">
-                <code>sd-text__light</code><br>
+                <code>sd-text--light</code><br>
                 // Sets the font style to light
             </p>
         </li>
         <li>
             <p class="docs-page__paragraph">
-                <code>sd-text__italic</code><br>
+                <code>sd-text--italic</code><br>
                 // Sets the font style to italic
             </p>
         </li>
         <li>
             <p class="docs-page__paragraph">
-                <code>sd-text__right</code><br>
+                <code>sd-text-align--end</code><br>
                 // Aligns the text to the right
             </p>
         </li>
         <li>
             <p class="docs-page__paragraph">
-                <code>sd-text__center</code><br>
+                <code>sd-text-align--center</code><br>
                 // Aligns the text to the center
             </p>
         </li>
         <li>
             <p class="docs-page__paragraph">
                 <code>sd-text__serif</code><br>
-                // Changes the font family to a serif version. Currently set to <span class="sd-text__normal">Merriweather</span> in Superdesk, with a fallback to <span class="sd-text__italic">Georgia, 'Times New Roman', Times, serif</span>;
+                // Changes the font family to a serif version. Currently set to <span class="sd-text--normal">Merriweather</span> in Superdesk, with a fallback to <span class="sd-text--italic">Georgia, 'Times New Roman', Times, serif</span>;
             </p>
         </li>
     </ul>

package/examples/pages/components_deprecated.html

@@ -0,0 +1,38 @@
+<header class="docs-page__header">
+    <a href="#/" class="docs-page__header-logo"></a>
+    <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 docs-page__header-nav-item--active"><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="#/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>
+
+<aside class="docs-page__sidebar">
+    <ul class="docs-page__nav" doc-nav>
+        <li ng-repeat="group in components">
+            <span class="docs-page__nav-title">{{group.name}}</span>
+            <ul class="docs-page__nav--sub-level">
+                <li class="docs-page__nav-item" ng-repeat="(name, item) in group.items"
+                    ng-class="{'docs-page__nav-item--active': isActive(name)}"><a href="#/components/{{name}}">{{item.name}}</a>
+                </li>
+            </ul>
+        </li>
+    </ul>
+</aside>
+
+<main class="docs-page__content docs-page__container-fluid" ng-if="page" ng-include="'components/' + page + '.html'"></main>
+
+<main class="docs-page__content docs-page__container-fluid" ng-if="!page">
+    <section class="docs-page__container">
+        <div class="docs-page__hero">
+            <figure class="docs-page__hero-image">
+                <img src="/illustration--components.svg" alt="Components">
+            </figure>
+            <h2 class="docs-page__hero-h2 docs-page__color--primary">Superdesk HTML/CSS and Angular UI components</h2>
+            <p class="docs-page__hero-text">Since we are moving completely to React, check fist if what you are looking for is available as a react component. If it's not – this is the right place to look.</p>
+        </div>
+    </section>
+</main>

package/examples/pages/design/buttons.html

@@ -21,7 +21,7 @@
         </div>
     </div>
     <div class="docs-page__button-grid">
-        <a class="docs-page__graphic-btn" href="#/react/buttons" target="_blank">
+        <a class="docs-page__graphic-btn" href="#/components/buttons" target="_blank">
             <figure class="docs-page__graphic-btn-graphic">
                 <img src="/illustration-small--react.svg" alt="React components">
             </figure>
@@ -30,15 +30,5 @@
                 <span class="docs-page__small-text">React components</span>
             </label>
         </a>
-        <a class="docs-page__graphic-btn" href="#/components/buttons" target="_blank">
-            <figure class="docs-page__graphic-btn-graphic">
-                <img src="/illustration-small--components.svg" alt="Components">
-            </figure>
-            <label class="docs-page__graphic-btn-label">
-                <span>View component</span>
-                <span class="docs-page__small-text">Components</span>
-
-            </label>
-        </a>
     </div>
 </section>

package/examples/pages/design/checkbox-and-radio.html

@@ -44,16 +44,16 @@
         <div class="docs-page__button-grid">
             <a class="docs-page__graphic-btn" href="#/components/checkbox" target="_blank">
                 <figure class="docs-page__graphic-btn-graphic">
-                    <img src="/illustration-small--components.svg" alt="Components">
+                    <img src="/illustration-small--react.svg" alt="Components">
                 </figure>
                 <label class="docs-page__graphic-btn-label">
                     <span>View Checkbox component</span>
                     <span class="docs-page__small-text">Components</span>
                 </label>
             </a>
-            <a class="docs-page__graphic-btn" href="#/components/radio" target="_blank">
+            <a class="docs-page__graphic-btn" href="#/components/radiogroup" target="_blank">
                 <figure class="docs-page__graphic-btn-graphic">
-                    <img src="/illustration-small--components.svg" alt="Components">
+                    <img src="/illustration-small--react.svg" alt="Components">
                 </figure>
                 <label class="docs-page__graphic-btn-label">
                     <span>View Radio component</span>

package/examples/pages/design/layout-principles.html

@@ -18,7 +18,6 @@
             <label class="docs-page__graphic-btn-label">
                 <span>View spacing helper classes</span>
                 <span class="docs-page__small-text">Components</span>
-
             </label>
         </a>
     </div>

package/examples/pages/design/switch.html

@@ -51,15 +51,5 @@
                     <span class="docs-page__small-text">React components</span>
                 </label>
             </a>
-            <a class="docs-page__graphic-btn" href="#/components/switch" target="_blank">
-                <figure class="docs-page__graphic-btn-graphic">
-                    <img src="/illustration-small--components.svg" alt="Components">
-                </figure>
-                <label class="docs-page__graphic-btn-label">
-                    <span>View component</span>
-                    <span class="docs-page__small-text">Components</span>
-    
-                </label>
-            </a>
         </div>
     </section>