feat(improvements): Improvements on doc pages, deprecate angular comp…

…onent

examples/css/docs-page.css

@@ -509,7 +509,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     background-color: var(--sd-colour-interactive--alpha-20);
 }
 
-.docs-page__nav-item.docs-page__nav-item--active {
+.docs-page__nav-item a.docs-page__nav-item--active {
     border-color: var(--sd-colour-interactive);
     background-color: var(--docs-page-color-bg-00);
     font-weight: 400;

examples/index.js

@@ -444,11 +444,8 @@ export default angular.module('ui-docs', [
             .when('/components/:name*', {
                 template: require('../examples/pages/components.html')
             })
-            .when('/react', {
-                template: require('../examples/pages/react.html')
-            })
-            .when('/react/:name*', {
-                template: require('../examples/pages/react.html')
+            .when('/design-patterns', {
+                template: require('../examples/pages/design-patterns.html')
             })
             .when('/playgrounds', {
                 template: require('../examples/pages/playgrounds.html')

examples/js/doc.js

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

examples/js/react.js

@@ -6,7 +6,7 @@ import LineNumbers from 'prismjs/plugins/line-numbers/prism-line-numbers';
 import Markdown from 'prismjs/components/prism-markdown';
 import JSX from 'prismjs/components/prism-jsx';
 
-import { Link } from 'react-router-dom';
+import { Link, NavLink } from 'react-router-dom';
 
 class ReactNav extends React.PureComponent {
     render() {
@@ -17,7 +17,7 @@ class ReactNav extends React.PureComponent {
             <ul className="docs-page__nav--sub-level">
                 {Object.keys(pages[group].items).map((page) =>
                     <li key={page} className="docs-page__nav-item">
-                        <Link to={{ pathname: '/react/' + page }}>{pages[group].items[page].name}</Link>
+                        <NavLink to={{ pathname: '/components/' + page }} activeClassName="docs-page__nav-item--active">{pages[group].items[page].name}</NavLink>
                     </li>
                 )}
             </ul>

examples/pages/components.html

@@ -5,34 +5,13 @@ <h1 class="docs-page__h1">Superdesk UI</h1>
         <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="#/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>

examples/pages/react/Index.tsx → examples/pages/components/Index.tsx

@@ -344,66 +344,66 @@ class ReactDoc extends React.Component<IProps, IState> {
                         </Dropdown>
                     </div>
                     <Switch>
-                        <Route path="/react/buttons" component={ButtonsDoc} />
-                        <Route path="/react/icon-buttons" component={IconButtonDoc} />
-                        <Route path="/react/button-groups" component={ButtonGroupsDoc} />
-                        <Route path="/react/labels" component={LabelsDoc} />
-                        <Route path="/react/icon-labels" component={IconLabelDoc} />
-                        <Route path="/react/badges" component={BadgesDoc} />
-                        <Route path="/react/alerts" component={AlertDoc} />
-                        <Route path="/react/avatar" component={AvatarDoc} />
-                        <Route path="/react/tooltips" component={TooltipDoc} />
-                        <Route path="/react/tags" component={TagDoc} />
-                        <Route path="/react/inputs" component={InputsDoc} />
-                        <Route path="/react/autocomplete" component={AutocompleteDoc} />
-                        <Route path="/react/select" component={SelectsDoc} />
-                        <Route path="/react/select-with-template" component={SelectWithTemplateDocs} />
-                        <Route path="/react/with-size-observer" component={WithSizeObserverDocs} />
-                        <Route path="/react/multiselect" component={MultiselectDocs} />
-                        <Route path="/react/treeselect" component={TreeSelectDocs} />
-                        <Route path="/react/treemenu" component={TreeMenuDocs} />
-                        <Route path="/react/duration-input" component={DurationInputDoc} />
-                        <Route path="/react/with-pagination" component={WithPaginationDocs} />
-                        <Route path="/react/popover" component={PopoverDoc} />
-                        <Route path="/react/date-picker" component={DatePickerDoc} />
-                        <Route path="/react/time-picker" component={TimePickerDoc} />
-                        <Route path="/react/switch" component={SwitchDoc} />
-                        <Route path="/react/radiogroup" component={RadioGroupDoc} />
-                        <Route path="/react/checkbox" component={CheckboxsDoc} />
-                        <Route path="/react/tab" component={TabsDoc} />
-                        <Route path="/react/left-navigation" component={LeftNavigationsDoc} />
-                        <Route path="/react/Quick-navigation-bar" component={QuickNavBarDoc} />
-                        <Route path="/react/nav-buttons" component={NavButtonsDoc} />
-                        <Route path="/react/icon-font" component={IconFontDoc} />
-                        <Route path="/react/big-icon-font" component={BigIconFontDoc} />
-                        <Route path="/react/sub-navigation" component={SubNavDoc} />
-                        <Route path="/react/dropdowns" component={DropdownDoc} />
-                        <Route path="/react/toast" component={ToastsDoc} />
-                        <Route path="/react/drag-handle" component={DragHandleDocs} />
-                        <Route path="/react/tag-input" component={TagInputDocs} />
-                        <Route path="/react/empty-states" component={EmptyStateDoc} />
-                        <Route path="/react/grid-list" component={GridListDoc} />
-                        <Route path="/react/grid-item" component={GridItemDoc} />
-                        <Route path="/react/modal" component={ModalDoc} />
-                        <Route path="/react/carousel" component={CarouselDoc} />
-                        <Route path="/react/content-divider" component={ContentDividerDoc} />
-                        <Route path="/react/menu" component={MenuDocs} />
-                        <Route path="/react/togglebox" component={ToggleboxDocs} />
-                        <Route path="/react/list-items" component={ListItemsDoc} />
-                        <Route path="/react/panel" component={PanelDoc} />
-                        <Route path="/react/select-grid" component={SelectGridDocs} />
-                        <Route path="/react/icon-picker" component={IconPickerDocs} />
-                        <Route path="/react/simple-list" component={SimpleListDoc} />
-                        <Route path="/react/boxed-list" component={BoxedListDoc} />
-                        <Route path="/react/table-list" component={TableListDoc} />
-                        <Route path="/react/content-list" component={ContentListDoc} />
-                        <Route path="/react/heading" component={HeadingDoc} />
-                        <Route path="/react/text" component={TextDoc} />
-                        <Route path="/react/container" component={ContainerDoc} />
-                        <Route path="/react/dropzone" component={DropZoneDoc} />
-                        <Route path="/react/create-button" component={CreateButtonDoc} />
-                        <Route path="/react/resizable-panels" component={ResizablePanelsDoc} />
-                        <Route path="/react/illustration-button" component={IllustrationButtonDoc} />
+                        <Route path="/components/buttons" component={ButtonsDoc} />
+                        <Route path="/components/icon-buttons" component={IconButtonDoc} />
+                        <Route path="/components/button-groups" component={ButtonGroupsDoc} />
+                        <Route path="/components/labels" component={LabelsDoc} />
+                        <Route path="/components/icon-labels" component={IconLabelDoc} />
+                        <Route path="/components/badges" component={BadgesDoc} />
+                        <Route path="/components/alerts" component={AlertDoc} />
+                        <Route path="/components/avatar" component={AvatarDoc} />
+                        <Route path="/components/tooltips" component={TooltipDoc} />
+                        <Route path="/components/tags" component={TagDoc} />
+                        <Route path="/components/inputs" component={InputsDoc} />
+                        <Route path="/components/autocomplete" component={AutocompleteDoc} />
+                        <Route path="/components/select" component={SelectsDoc} />
+                        <Route path="/components/select-with-template" component={SelectWithTemplateDocs} />
+                        <Route path="/components/with-size-observer" component={WithSizeObserverDocs} />
+                        <Route path="/components/multiselect" component={MultiselectDocs} />
+                        <Route path="/components/treeselect" component={TreeSelectDocs} />
+                        <Route path="/components/treemenu" component={TreeMenuDocs} />
+                        <Route path="/components/duration-input" component={DurationInputDoc} />
+                        <Route path="/components/with-pagination" component={WithPaginationDocs} />
+                        <Route path="/components/popover" component={PopoverDoc} />
+                        <Route path="/components/date-picker" component={DatePickerDoc} />
+                        <Route path="/components/time-picker" component={TimePickerDoc} />
+                        <Route path="/components/switch" component={SwitchDoc} />
+                        <Route path="/components/radiogroup" component={RadioGroupDoc} />
+                        <Route path="/components/checkbox" component={CheckboxsDoc} />
+                        <Route path="/components/tab" component={TabsDoc} />
+                        <Route path="/components/left-navigation" component={LeftNavigationsDoc} />
+                        <Route path="/components/Quick-navigation-bar" component={QuickNavBarDoc} />
+                        <Route path="/components/nav-buttons" component={NavButtonsDoc} />
+                        <Route path="/components/icon-font" component={IconFontDoc} />
+                        <Route path="/components/big-icon-font" component={BigIconFontDoc} />
+                        <Route path="/components/sub-navigation" component={SubNavDoc} />
+                        <Route path="/components/dropdowns" component={DropdownDoc} />
+                        <Route path="/components/toast" component={ToastsDoc} />
+                        <Route path="/components/drag-handle" component={DragHandleDocs} />
+                        <Route path="/components/tag-input" component={TagInputDocs} />
+                        <Route path="/components/empty-states" component={EmptyStateDoc} />
+                        <Route path="/components/grid-list" component={GridListDoc} />
+                        <Route path="/components/grid-item" component={GridItemDoc} />
+                        <Route path="/components/modal" component={ModalDoc} />
+                        <Route path="/components/carousel" component={CarouselDoc} />
+                        <Route path="/components/content-divider" component={ContentDividerDoc} />
+                        <Route path="/components/menu" component={MenuDocs} />
+                        <Route path="/components/togglebox" component={ToggleboxDocs} />
+                        <Route path="/components/list-items" component={ListItemsDoc} />
+                        <Route path="/components/panel" component={PanelDoc} />
+                        <Route path="/components/select-grid" component={SelectGridDocs} />
+                        <Route path="/components/icon-picker" component={IconPickerDocs} />
+                        <Route path="/components/simple-list" component={SimpleListDoc} />
+                        <Route path="/components/boxed-list" component={BoxedListDoc} />
+                        <Route path="/components/table-list" component={TableListDoc} />
+                        <Route path="/components/content-list" component={ContentListDoc} />
+                        <Route path="/components/heading" component={HeadingDoc} />
+                        <Route path="/components/text" component={TextDoc} />
+                        <Route path="/components/container" component={ContainerDoc} />
+                        <Route path="/components/dropzone" component={DropZoneDoc} />
+                        <Route path="/components/create-button" component={CreateButtonDoc} />
+                        <Route path="/components/resizable-panels" component={ResizablePanelsDoc} />
+                        <Route path="/components/illustration-button" component={IllustrationButtonDoc} />
                         <Route path="/" component={ReactDefault} />
                     </Switch>
                 </main>
@@ -420,7 +420,7 @@ class ReactPlayground extends React.Component<IProps> {
     render() {
         return (
             <Switch>
-                <Route path="/playgrounds/react/:id" render={(props) => parsePlayground(props, this.props.playgrounds)} />
+                <Route path="/playgrounds/components/:id" render={(props) => parsePlayground(props, this.props.playgrounds)} />
             </Switch>
         )
     }

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"><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="#/design-patterns">Design Patterns</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>