superdesk-ui-framework 4.0.52 → 4.0.53

package/examples/pages/components_deprecated/tag-labels.html

@@ -1,57 +0,0 @@
-<section class="docs-page__container">
-    <h2 class="docs-page__h2">Tag labels</h2>
-    <p class="docs-page__paragraph">Add the .tag-label class to an element to create a Tag style label. In the code example <code>&lt;span&gt;</code> is used, but any tag will do.</p>
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div>
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">
-                <p class="docs-page__paragraph">// Rounded (default)</p>
-                <div class="docs-page__content-row">
-                    <div class="tag-label">
-                        This is a tag
-                        <button class="tag-label__remove"><i class="icon-close-small"></i></button>
-                    </div>
-                    <div class="tag-label tag-label--darker">
-                        This is a another tag
-                        <button class="tag-label__remove"><i class="icon-close-small"></i></button>
-                    </div>
-                    <div class="tag-label tag-label--highlight1">
-                        Lorem ipsum
-                        <button class="tag-label__remove"><i class="icon-close-small"></i></button>
-                    </div>
-                    <div class="tag-label tag-label--highlight2">
-                        Dolor amet
-                        <button class="tag-label__remove"><i class="icon-close-small"></i></button>
-                    </div>
-                </div>
-                <p class="docs-page__paragraph">// Square version</p>
-                <div class="docs-page__content-row">
-                    <div class="tag-label tag-label--square">
-                        This is a square tag
-                        <button class="tag-label__remove"><i class="icon-close-small"></i></button>
-                    </div>
-                    <div class="tag-label tag-label--darker tag-label--square">
-                        Lorem ipsum
-                        <button class="tag-label__remove"><i class="icon-close-small"></i></button>
-                    </div>
-                    <div class="tag-label tag-label--highlight1 tag-label--square">
-                        Dolor amet
-                        <button class="tag-label__remove"><i class="icon-close-small"></i></button>
-                    </div>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <span class="tag-label">1</span>
-                    <span class="tag-label tag-label--primary">2</span>
-                    <span class="tag-label tag-label--success">A</span>
-                    <span class="tag-label tag-label--warning">B</span>
-                    <span class="tag-label tag-label--alert">6</span>
-                </pre>
-            </div>
-        </div>
-    </div>
-</section>

package/examples/pages/components_deprecated/text.html

@@ -1,55 +0,0 @@
-<section class="docs-page__container"> 
-    <h2 class="docs-page__h2">Text helpers</h2>
-    <p class="docs-page__paragraph">
-        <span class="label label--large label--no-transform label--alert">Work in progress</span>
-    </p>
-
-    <h4 class="docs-page__h4">Font weight and italics</h4>
-    <p class="docs-page__paragraph">
-        The class names for this are prett much self explanatory so not much explanation is provided.
-    </p>
-    <ul class="sd-margin-t--2">
-        <li>
-            <p class="docs-page__paragraph">
-                <code>sd-text--normal</code><br>
-                // Sets the font style to normal
-            </p>
-        </li>
-        <li>
-            <p class="docs-page__paragraph">
-                <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>
-                // Sets the font style to light
-            </p>
-        </li>
-        <li>
-            <p class="docs-page__paragraph">
-                <code>sd-text--italic</code><br>
-                // Sets the font style to italic
-            </p>
-        </li>
-        <li>
-            <p class="docs-page__paragraph">
-                <code>sd-text-align--end</code><br>
-                // Aligns the text to the right
-            </p>
-        </li>
-        <li>
-            <p class="docs-page__paragraph">
-                <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>;
-            </p>
-        </li>
-    </ul>
-</section>   

package/examples/pages/components_deprecated/toggle.html

@@ -1,63 +0,0 @@
-<section class="docs-page__container">    
-    <h2 class="docs-page__h2">Toggle box (Collapsible panel)</h2>
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div>
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">
-                <div class="docs-page__content-row">
-                    <div sd-toggle-box data-title="Toggle header" data-open="true">
-                        <span>Define your content here. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
-                            ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
-                            dolores et ea rebum. Stet clita kasd gubergren.
-                        </span>
-                    </div>
-                    <toggle-box-next data-title="'Second toggle header'" is-open="false">
-                        <span>Content goes here. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
-                            ut labore et dolore magna aliquyam erat, sed diam voluptua.
-                        </span>
-                    </toggle-box-next>
-                </div>
-                <p class="docs-page__paragraph">// Alternative styling with circled chevron</p>
-                <div class="docs-page__content-row">
-                    <div sd-toggle-box data-title="Toggle header circle" data-style="circle" data-open="false">
-                        <span>Define your content here. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
-                            ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
-                            dolores et ea rebum. Stet clita kasd gubergren.
-                        </span>
-                    </div>
-                    <toggle-box-next data-title="'Second toggle header circle'" style="'circle'" is-open="false">
-                        <span>Content goes here. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
-                            ut labore et dolore magna aliquyam erat, sed diam voluptua.
-                        </span>
-                    </toggle-box-next>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    
-                        <!-- Usage in Angular: -->
-
-                        <toggle-box-next data-title="'Title goes here'" ng-non-bindable>
-                            <div>Content goes here</div>
-                        </toggle-box-next>
-
-                        <!-- Usage in React: -->
-
-                        <ToggleBoxNext title="{'Title goes here'}" ng-non-bindable>
-                            <div>Content goes here</div>
-                        </ToggleBoxNext>
-
-                        <!-- Deprecated usage via Angular directive: -->
-
-                        <div sd-toggle-box data-title="Toggle header" data-open="true" ng-non-bindable>
-                            <div>Content goes here</div>
-                        </div>
-                
-                </pre>
-            </div>
-        </div>
-    </div>
-</section>

package/examples/pages/components_deprecated/tooltips.html

@@ -1,29 +0,0 @@
-<section class="docs-page__container">  
-    <h2 class="docs-page__h2">Tooltips</h2>
-    <p class="docs-page__paragraph">Add the <code>sd-tooltip</code> attribute to an element to add a tooltip to the element. The value of the attribute will be the text in the tooltip. The tooltip will appear at the top of the element by default. Use the optional <code>flow</code> attribute to control the possiton of the tooltip; possible values are: <code>bottom</code>, <code>left</code> and <code>right</code>.<br /></p>
-    <p class="docs-page__paragraph">You can also use <code>data-sd-tooltip</code> syntax with <code>data-flow</code> attribute, if needed.</p>
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div>
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">
-                <div class="docs-page__content-row">
-                    <a class="btn" sd-tooltip="I'm on top">Top</a>
-                    <a class="btn" sd-tooltip="I'm at the Botton" flow="down">Bottom</a>
-                    <a class="btn" data-sd-tooltip="I open on the left" data-flow="left">Left</a>
-                    <a class="btn" data-sd-tooltip="Right on!" data-flow="right">Right</a>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <a class="btn" sd-tooltip="I'm on top">Top</a>
-                    <a class="btn" sd-tooltip="I'm at the Botton" flow="down">Bottom</a>
-                    <a class="btn" data-sd-tooltip="I open on the left" data-flow="left">Left</a>
-                    <a class="btn" data-sd-tooltip="Right on!" data-flow="right">Right</a>
-                </pre>
-            </div>
-        </div>
-    </div>
-</section>  

package/examples/pages/components_deprecated/vertical-tabs.html

@@ -1,48 +0,0 @@
-<section class="docs-page__container">  
-    <h2 class="docs-page__h2">Vertical tabs</h2>
-    <p class="docs-page__paragraph">To use vertical tabbed navigation, please follow the structure from the example markup.</p>
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div>
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">
-                <div class="docs-page__content-row">
-                    <div style="position: relative; overflow: hidden; border: 1px solid #dadada;">
-                        <div class="nav-tabs-vertical">
-                            <ul class="nav-tabs-vertical__list">
-                                <li class="nav-tabs-vertical__tab nav-tabs-vertical__tab--active">
-                                    <button class="nav-tabs-vertical__link">Link 1</button>
-                                </li>
-                                <li class="nav-tabs-vertical__tab">
-                                    <button class="nav-tabs-vertical__link">Link 2</button>
-                                </li>
-                                <li class="nav-tabs-vertical__tab">
-                                    <button class="nav-tabs-vertical__link">Link 3</button>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <div class="nav-tabs-vertical">
-                        <ul class="nav-tabs-vertical__list">
-                            <li class="nav-tabs-vertical__tab nav-tabs-vertical__tab--active">
-                                <button class="nav-tabs-vertical__link">Link 1</button>
-                            </li>
-                            <li class="nav-tabs-vertical__tab">
-                                <button class="nav-tabs-vertical__link">Link 2</button>
-                            </li>
-                            <li class="nav-tabs-vertical__tab">
-                                <button class="nav-tabs-vertical__link">Link 3</button>
-                            </li>
-                        </ul>
-                    </div>
-                </pre>
-            </div>
-        </div>
-    </div>
-</section>  

package/examples/pages/components_deprecated/wizard.html

@@ -1,41 +0,0 @@
-<section class="docs-page__container">  
-    <h2 class="docs-page__h2">Wizard</h2>
-    <p class="docs-page__paragraph">It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.</p>
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div>
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example" doc-modal>
-                <button class="btn" ng-click="openModal('wizardModal')">Show wizard</button>
-                <div sd-modal data-model="wizardModal" class="modal--tabs modal--large">
-                    <div class="modal__header">
-                        <button class="modal__close pull-right" ng-click="closeModal('wizardModal')"><i class="icon-close-small"></i></button>
-                        <h3 class="modal__heading">Modal Default</h3>
-                    </div>
-                    <div class="modal__body" sd-wizard data-name="wizard" data-finish="closeModal('wizardModel')">
-                        <div sd-wizard-step data-title="General" data-code="general">
-                            <p>Content in General Tab</p>
-                        </div>
-                        <div sd-wizard-step data-title="Services" data-code="services">
-                            <p>Content in Services Tab</p>
-                        </div>
-                        <div sd-wizard-step data-title="Stages" data-code="stages">
-                            <p>Content in Stages Tab</p>
-                        </div>
-                    </div>
-                    <div class="modal__footer">
-                        <button class="btn" ng-click="closeModal('wizardModal')">Cancel</button>
-                        <button class="btn btn--primary" ng-click="closeModal('wizardModal')">Ok</button>
-                    </div>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <button class="btn" ng-click="openModal('wizardModal')">Show wizard</button>
-                </pre>
-            </div>
-        </div>
-    </div>
-</section>

package/examples/pages/components_deprecated.html

@@ -1,39 +0,0 @@
-<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>
-    <doc-theme-picker></doc-theme-picker>
-</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/application-structure.html

@@ -1,168 +0,0 @@
-<section class="docs-page__container">
-    <h2 class="docs-page__h2">Main application structure</h2>
-    <p class="docs-page__paragraph">Superdesk and its modules (Planning, Publisher, etc.) should share the same fundamental layout structure. This will guarantee a familiar experience and a shorter learning curve for users.</p>
-    <div class="docs-page__content-block">
-        <div class="docs-page__content-block-item">
-            <figure class="docs-page__figure-media docs-page__figure-media--light">
-                <img src="/application-frame.png" alt="Application frame">
-            </figure>
-        </div>
-    </div>
-    <div class="docs-page__button-grid">
-        <!-- <a class="docs-page__graphic-btn" href="#/components/spacing" 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>
-        <a class="docs-page__graphic-btn" href="">
-            <figure class="docs-page__graphic-btn-graphic">
-                <img src="/illustration-small--react.svg" alt="React components">
-            </figure>
-            <label class="docs-page__graphic-btn-label">
-                <span>View react component</span>
-                <span class="docs-page__small-text">React components</span>
-            </label>
-        </a> -->
-        <a class="docs-page__graphic-btn" href="#/playgrounds/layout-test-2" target="_blank">
-            <figure class="docs-page__graphic-btn-graphic">
-                <img src="/illustration-small--playground.svg" alt="UI Playgrounds">
-            </figure>
-            <label class="docs-page__graphic-btn-label">
-                <span>View Playground</span>
-                <span class="docs-page__small-text">UI Playgrounds</span>
-            </label>
-        </a>
-    </div>
-    <h3 class="docs-page__h3">Table of contents</h3>
-    <hr class="docs-page__rule docs-page__rule--large">
-    <ul class="docs-page__unordered-list docs-page__unordered-list--plain docs-page__unordered-list--small">
-        <li><a class="link" href="#topBar">Top bar</a></li>
-        <li><a class="link" href="#sideBar">Left side-bar</a></li>
-        <li><a class="link" href="#subNav">Sub-navigation toolbar</a></li>
-        <li><a class="link" href="#leftPane">Left-side panel</a></li>
-        <li><a class="link" href="#mainContent">Main Content</a></li>
-        <li><a class="link" href="#rightPane">Right-side panel</a></li>
-        <li><a class="link" href="#bottomBar">Bottom bar</a></li>
-    </ul>
-
-    <h3 class="docs-page__h3" id="topBar">Top bar</h3>
-    <p class="docs-page__paragraph">A fixed bar that contains top-level navigation elements (e.g. activation button for the hamburger menu, 
-        title, desk dropdown, active user avatar etc.). In Superdesk most UI elements inside the top bar are persistent, only the title and 
-        the desk dropdown are contextual.</p>
-    <div class="docs-page__content-block">
-        <div class="docs-page__content-block-item">
-            <figure class="docs-page__figure-media">
-                <img src="/application-frame__top-bar.png" alt="Top bar">
-            </figure>
-        </div>
-    </div>
-    <h4 class="docs-page__h4 sd-margin-y--3">Examples</h4>
-    <img class="sd-shadow--z2" src="/example__top-bar--01.png" alt="Top bar example">
-    <p class="docs-page__paragraph"></p>
-    
-    <h3 class="docs-page__h3" id="sideBar">Left side-bar</h3>
-    <p class="docs-page__paragraph">This is a persistent navigation menu consisting of icon buttons inside a fixed-width bar. 
-        It is for navigating the main user workspace, each button will open a specific screen inside the workspace. The content 
-        of the left side-bar can differ from user to user, as it is based on user rights and preferences. It will stay the same 
-        for a single user though, indicating only which screen is active.</p>
-    <div class="docs-page__content-block">
-        <div class="docs-page__content-block-item">
-            <figure class="docs-page__figure-media">
-                <img src="/application-frame__side-tabs.png" alt="Side bar">
-            </figure>
-        </div>
-    </div>
-    <h4 class="docs-page__h4 sd-margin-y--3">Example</h4>
-    <img class="sd-shadow--z2" src="/example__left_side-bar--01.png" alt="Left side-bar example">
-    <p class="docs-page__paragraph"></p>
-
-    <h3 class="docs-page__h3" id="subNav">Sub-navigation toolbar</h3>
-    <p class="docs-page__paragraph">Contextual navigation bar with various content options. Usually, it contains a diverse combination 
-        of button groups that control the content area below it. It is possible to have multiple levels of Sub-navigation toolbars on one page.</p>
-    <div class="docs-page__content-block">
-        <div class="docs-page__content-block-item">
-            <figure class="docs-page__figure-media">
-                <img src="/application-frame__sub-nav.png" alt="Sub-nav">
-            </figure>
-        </div>
-    </div>
-    <h4 class="docs-page__h4 sd-margin-y--3">Examples</h4>
-    <img class="sd-shadow--z2" src="/example__sub-nav--01.png" alt="Sub-navigation toolbar example one">
-    <img class="sd-shadow--z2 sd-margin-t--3" src="/example__sub-nav--02.png" alt="Sub-navigation toolbar example two">
-    <img class="sd-shadow--z2 sd-margin-t--3" src="/example__sub-nav--03.png" alt="Sub-navigation toolbar example three">
-    <p class="docs-page__paragraph"></p>
-
-    <h3 class="docs-page__h3" id="leftPane">Left-side panel</h3>
-    <p class="docs-page__paragraph">A closable panel that will push the main content area to the right when open. It is mostly used to contain 
-        advanced controls of the main content area (e.g. advanced search filters and similar).</p>
-    <div class="docs-page__content-block">
-        <div class="docs-page__content-block-item">
-            <figure class="docs-page__figure-media">
-                <doc-gif-img src="/application-frame__left-panel.gif"></doc-gif-img>
-            </figure>
-        </div>
-    </div>
-    <h4 class="docs-page__h4 sd-margin-y--3">Example</h4>
-    <img class="sd-shadow--z2" src="/example__left-side_panel--01.png" alt="Left-side panel example">
-    <p class="docs-page__paragraph"></p>
-
-    <h3 class="docs-page__h3" id="mainContent">Main Content area</h3>
-    <p class="docs-page__paragraph">The title explains it all - main content area. This is the place where the content is, which in most cases 
-        are different types of list or grid views.</p>
-    <div class="docs-page__content-block">
-        <div class="docs-page__content-block-item">
-            <figure class="docs-page__figure-media">
-                <doc-gif-img src="/application-frame__main-content.gif"></doc-gif-img>
-            </figure>
-        </div>
-    </div>
-    <h4 class="docs-page__h4 sd-margin-y--3">Example</h4>
-    <img class="sd-shadow--z2" src="/example__main-content--01.png" alt="Main Content example">
-    <p class="docs-page__paragraph"></p>
-    
-    <h3 class="docs-page__h3" id="rightPane">Right-side panel</h3>
-    <p class="docs-page__paragraph">The right-side panel has a similar behaviour as the left-side panel with the difference that it appears 
-        at the right side. The opening is usually controlled from the items in the main content area whereas the closing is performed directly 
-        from the panel. Most commonly it is used as a detailed preview of content items. In some areas, it can also serve as an edit panel 
-        (eg. user management, parts of the Settings section).</p>
-    <div class="docs-page__content-block">
-        <div class="docs-page__content-block-item">
-            <figure class="docs-page__figure-media">
-                <doc-gif-img src="/application-frame__right-panel.gif"></doc-gif-img>
-            </figure>
-        </div>
-    </div>
-    <h4 class="docs-page__h4 sd-margin-y--3">Example</h4>
-    <img class="sd-shadow--z2" src="/example__right_side-panel--02.png" style="max-width: 100%;" alt="Right-side panel example">
-    <p class="docs-page__paragraph"></p>
-    
-    <h3 class="docs-page__h3" id="bottomBar">Bottom bar</h3>
-    <p class="docs-page__paragraph">The bottom bar is a fixed bar that is present in the user workspace. Open items, the ones that the user is 
-        still working on, will appear there. It is possible to close or maximise individual items from the bar for editing.</p>
-    <div class="docs-page__content-block">
-        <div class="docs-page__content-block-item">
-            <figure class="docs-page__figure-media">
-                <img src="/application-frame__bottom-bar.png" alt="Bottom bar">
-            </figure>
-        </div>
-    </div>
-    <h4 class="docs-page__h4 sd-margin-y--3">Example</h4>
-    <img class="sd-shadow--z2" src="/example__bottom-bar--01.png" alt="Bottom bar example">
-    <p class="docs-page__paragraph"></p>
-</section>
-
-
-
-
-
-
-
-
-
-
-

package/examples/pages/design/buttons.html

@@ -1,34 +0,0 @@
-<section class="docs-page__container">
-    <h2 class="docs-page__h2">Button usage guidlines</h2>
-    <div class="docs-page__content-block">
-        <div class="docs-page__content-block-item">
-            <figure class="docs-page__figure-media">
-                <img src="/buttons--dont-01.png" alt="Buttons - Don't">
-            </figure>
-            <figcaption class="docs-page__figure-caption">
-                <p class="docs-page__caption-heading docs-page__caption-heading--dont">Don't.</p>
-                <p class="docs-page__caption-text">Don't use multiple high-emphasis buttons in a single component. Try to identify the most important command in the component and use the primary button only for this.</p>
-            </figcaption>
-        </div>
-        <div class="docs-page__content-block-item">
-            <figure class="docs-page__figure-media">
-                <img src="/buttons--do-02.png" alt="Buttons - Do">
-            </figure>
-            <figcaption class="docs-page__figure-caption">
-                <p class="docs-page__caption-heading docs-page__caption-heading--do">Do.</p>
-                <p class="docs-page__caption-text">Mix different button styles to give a sense of hierarchy to the available actions. In this example, hollow buttons are combined with a primary button making it easy to distinguish between high, medium and low emphasis.</p>
-            </figcaption>
-        </div>
-    </div>
-    <div class="docs-page__button-grid">
-        <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>
-            <label class="docs-page__graphic-btn-label">
-                <span>View react component</span>
-                <span class="docs-page__small-text">React components</span>
-            </label>
-        </a>
-    </div>
-</section>

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

@@ -1,64 +0,0 @@
-<section class="docs-page__container">
-        <h2 class="docs-page__h2">Checkbox &amp; Radio usage</h2>
-        <p class="docs-page__paragraph">Same rules apply for checkboxes and radio buttons. Shown examples are mixed and apply to both.</p>
-        <div class="docs-page__content-block">
-            <div class="docs-page__content-block-item">
-                <figure class="docs-page__figure-media">
-                    <img src="/checkbox--do-01.png" alt="Checkbox - Do">
-                </figure>
-                <figcaption class="docs-page__figure-caption">
-                    <p class="docs-page__caption-heading docs-page__caption-heading--do">Do.</p>
-                    <p class="docs-page__caption-text">List checkboxes or radio buttons in a vertical list with labels on the right side of the box.</p>
-                </figcaption>
-            </div>
-            <div class="docs-page__content-block-item">
-                <figure class="docs-page__figure-media">
-                    <img src="/radio--dont-02.png" alt="Checkbox - Don't">
-                </figure>
-                <figcaption class="docs-page__figure-caption">
-                    <p class="docs-page__caption-heading docs-page__caption-heading--dont">Don't.</p>
-                    <p class="docs-page__caption-text">Don't separate checkboxes from labels in any way.</p>
-                </figcaption>
-            </div>
-        </div>
-        <div class="docs-page__content-block">
-            <div class="docs-page__content-block-item">
-                <figure class="docs-page__figure-media">
-                    <img src="/radio--dont-03.png" alt="Radio - Don't">
-                </figure>
-                <figcaption class="docs-page__figure-caption">
-                    <p class="docs-page__caption-heading docs-page__caption-heading--dont">Don't.</p>
-                    <p class="docs-page__caption-text">Don't ever use labels on the left in a vertical list, it doesn't give a good visual overview of selected items to the user. Left side labels should be avoided in general, use them only in right-aligned text blocks.</p>
-                </figcaption>
-            </div>
-            <div class="docs-page__content-block-item">
-                <figure class="docs-page__figure-media">
-                    <img src="/checkbox--dont-02.png" alt="Checkbox - Caution">
-                </figure>
-                <figcaption class="docs-page__figure-caption">
-                    <p class="docs-page__caption-heading docs-page__caption-heading--caution">Caution.</p>
-                    <p class="docs-page__caption-text">It is OK to use horizontally aligned checkboxes and radio buttons in cases there are no more than 2-3 items and they fit in one line. In cases where the items occupy multiple lines use a vertical listing or consider using button-style checkboxes or radio buttons.</p>
-                </figcaption>
-            </div>
-        </div>
-        <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--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/radiogroup" target="_blank">
-                <figure class="docs-page__graphic-btn-graphic">
-                    <img src="/illustration-small--react.svg" alt="Components">
-                </figure>
-                <label class="docs-page__graphic-btn-label">
-                    <span>View Radio component</span>
-                    <span class="docs-page__small-text">Components</span>
-                </label>
-            </a>
-        </div>
-    </section>