feat(docs): added navbar and tabs (#UIM-326) (#366)

positive-js · Dec 16, 2019 · 88d1da7 · 88d1da7
1 parent 39be15c
commit 88d1da7
Show file tree

Hide file tree

Showing 29 changed files with 229 additions and 52 deletions.
diff --git a/packages/docs/src/app/components/navbar/_navbar-theme.scss b/packages/docs/src/app/components/navbar/_navbar-theme.scss
@@ -1,4 +1,4 @@
-@mixin mc-navbar-theme($theme) {
+@mixin mc-docs-navbar-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
     $primary: map-get($theme, primary);

diff --git a/packages/docs/src/app/shared/documentation-items/documentation-items.ts b/packages/docs/src/app/shared/documentation-items/documentation-items.ts
@@ -155,6 +155,18 @@ const DOCS: { [key: string]: DocCategory[] } = {
                     name: 'Autocomplete',
                     summary: '',
                     examples: ['autocomplete-types']
+                },
+                {
+                    id: 'tags-input',
+                    name: 'Tags input',
+                    summary: '',
+                    examples: ['tags-input-types']
+                },
+                {
+                    id: 'tags-autocomplete',
+                    name: 'Tags autocomplete',
+                    summary: '',
+                    examples: ['tags-autocomplete-types']
                 }
             ]
         },
@@ -199,6 +211,12 @@ const DOCS: { [key: string]: DocCategory[] } = {
                     name: 'Divider',
                     summary: '',
                     examples: ['divider-types']
+                },
+                {
+                    id: 'tabs',
+                    name: 'Tabs',
+                    summary: '',
+                    examples: ['tabs-types']
                 }
             ]
         },
@@ -256,6 +274,12 @@ const DOCS: { [key: string]: DocCategory[] } = {
                     name: 'Tree',
                     summary: '',
                     examples: ['tree-types']
+                },
+                {
+                    id: 'tags-list',
+                    name: 'Tags list',
+                    summary: '',
+                    examples: ['tags-list-types']
                 }
             ]
         }

diff --git a/packages/docs/src/app/shared/example-viewer/example-viewer.scss b/packages/docs/src/app/shared/example-viewer/example-viewer.scss
@@ -91,6 +91,8 @@
 
 .docs-example-viewer-body {
     padding: 16px;
+
+    overflow: auto;
 }
 
 .docs-example-source__switcher_hide {

diff --git a/packages/docs/src/main.scss b/packages/docs/src/main.scss
@@ -32,10 +32,12 @@ $typography: mc-typography-config();
 
 @mixin docs-component-theme($theme) {
     @include mosaic-theme($theme);
+    @include layouts_for_breakpoint();
+    @include layout-padding-margin();
     @include mosaic-docs-app-theme($theme);
     @include layout-padding-margin();
     @include mc-anchors-theme($theme);
-    @include mc-navbar-theme($theme);
+    @include mc-docs-navbar-theme($theme);
     @include mc-footer-theme($theme);
     @include mc-main-layout-theme($theme);
     @include mc-sidenav-theme($theme);

diff --git a/packages/mosaic-examples/mosaic/alerts/alerts-overview/alerts-overview-example.css b/packages/mosaic-examples/mosaic/alerts/alerts-overview/alerts-overview-example.css
@@ -6,20 +6,6 @@
     max-height: 100%;
 }
 
-.flex-50 {
-    flex: 1 1 100%;
-    max-width: 50%;
-    max-height: 100%;
-    box-sizing: border-box;
-}
-
-.flex-33 {
-    flex: 1 1 100%;
-    max-width: 33.33%;
-    max-height: 100%;
-    box-sizing: border-box;
-}
-
 .mc-column-container {
     margin-left: 15px;
     margin-right: 15px;

diff --git a/packages/mosaic-examples/mosaic/navbar/module.ts b/packages/mosaic-examples/mosaic/navbar/module.ts
@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { McIconModule } from '@ptsecurity/mosaic/icon';
+import { McNavbarModule } from '@ptsecurity/mosaic/navbar';
+
+import { NavbarOverviewExample } from './navbar-overview/navbar-overview-example';
+
+
+const EXAMPLES = [
+    NavbarOverviewExample
+];
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        McNavbarModule,
+        McIconModule
+    ],
+    declarations: EXAMPLES,
+    exports: EXAMPLES
+})
+export class NavbarExamplesModule {
+}
diff --git a/packages/mosaic-examples/mosaic/navbar/navbar-overview/navbar-overview-example.css b/packages/mosaic-examples/mosaic/navbar/navbar-overview/navbar-overview-example.css
@@ -0,0 +1,7 @@
+.logo {
+    margin-top: 5px;
+}
+
+.demo-container {
+    margin-bottom: 10px;
+}
diff --git a/packages/mosaic-examples/mosaic/navbar/navbar-overview/navbar-overview-example.html b/packages/mosaic-examples/mosaic/navbar/navbar-overview/navbar-overview-example.html
@@ -0,0 +1,50 @@
+<div class="demo-container">
+    <mc-navbar>
+        <mc-navbar-container position="left">
+            <mc-navbar-item>
+                <i mc-icon="mc-hamburger_16"></i>
+            </mc-navbar-item>
+            <mc-navbar-brand>
+                <mc-navbar-logo>
+                    <svg class="logo" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m0 32h32v-32h-32z" fill="#c00"/><path d="m11.7013126 2.13713398h3.4056699v5.22500971c.0083884 1.2815534 1.0494758 2.31984466 2.3304078 2.32543689v-1.89825242c-.2370486-.00528156-.4296699-.19231068-.432466-.42718447v-5.22500971h3.4050485v-1.89794175h-8.7086602zm-3.29065629-1.89806602h-5.95976699-.0167767c-1.28062136.00590291-2.3192233 1.04978641-2.32481553 2.33351456h1.89794174c.00590292-.23735922.19262136-.42407767.42687379-.43557281h5.97654369c.24295146 0 .44054369.19821359.44054369.44427184v.97646602c0 .23735923-.19759223.43867961-.44054369.43867961l-5.97654369.00248544c-1.28062136.01118447-2.3192233 1.04667961-2.32481553 2.33071845v3.35782524h1.89794174v-3.35782524c.00590292-.23207767.19262136-.42438835.42687379-.42718447h5.97654369c1.28932039 0 2.34190289-1.05227184 2.34190289-2.34469903v-.97646602c0-1.29242718-1.0525825-2.34221359-2.34190289-2.34221359" fill="#fff" transform="translate(5.592 10.889)"/></g></svg>
+                </mc-navbar-logo>
+                <mc-navbar-title>Brand</mc-navbar-title>
+            </mc-navbar-brand>
+            <mc-navbar-item class="mc-navbar-item-active">
+                <i mc-icon="mc-info_16"></i>
+                <mc-navbar-title>Left icon</mc-navbar-title>
+            </mc-navbar-item>
+            <mc-navbar-item>
+                <i mc-icon="mc-calendar_16"></i>
+                <mc-navbar-title>Left icon</mc-navbar-title>
+            </mc-navbar-item>
+            <mc-navbar-item class="mc-progress">
+                <i mc-icon="mc-download_16"></i>
+                <mc-navbar-title>In-progress</mc-navbar-title>
+            </mc-navbar-item>
+            <mc-navbar-item class="mc-progress" disabled>
+                <i mc-icon="mc-clock_16"></i>
+                <mc-navbar-title>Disabled in-progress</mc-navbar-title>
+            </mc-navbar-item>
+            <mc-navbar-item disabled>
+                <mc-navbar-title>Right Icon</mc-navbar-title>
+                <i mc-icon="mc-search_16"></i>
+            </mc-navbar-item>
+
+            <mc-navbar-item>
+                <i mc-icon="mc-gear_16"></i>
+            </mc-navbar-item>
+        </mc-navbar-container>
+
+        <mc-navbar-container position="right">
+            <mc-navbar-item [collapsedTitle]="'custom title'">
+                <mc-navbar-title>Right Icon</mc-navbar-title>
+                <i mc-icon="mc-search_16"></i>
+            </mc-navbar-item>
+
+            <mc-navbar-item>
+                <i mc-icon="mc-gear_16"></i>
+            </mc-navbar-item>
+        </mc-navbar-container>
+    </mc-navbar>
+</div>
diff --git a/packages/mosaic-examples/mosaic/navbar/navbar-overview/navbar-overview-example.ts b/packages/mosaic-examples/mosaic/navbar/navbar-overview/navbar-overview-example.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+
+/**
+ * @title Navbar
+ */
+@Component({
+    selector: 'navbar-overview-example',
+    templateUrl: 'navbar-overview-example.html',
+    styleUrls: ['navbar-overview-example.css']
+})
+export class NavbarOverviewExample {}
diff --git a/packages/mosaic-examples/mosaic/splitter/splitter-fixed/splitter-fixed-example.css b/packages/mosaic-examples/mosaic/splitter/splitter-fixed/splitter-fixed-example.css
@@ -12,7 +12,3 @@ mc-splitter {
 div[mc-splitter-area] {
     background: #c5c0c0
 }
-
-.flex {
-    flex: 1;
-}
diff --git a/packages/mosaic-examples/mosaic/splitter/splitter-nested/splitter-nested-example.css b/packages/mosaic-examples/mosaic/splitter/splitter-nested/splitter-nested-example.css
@@ -19,11 +19,3 @@ mc-splitter.without-border {
 .nested-splitter > div[mc-splitter-area] {
     background: #9f9f9f;
 }
-
-.flex {
-    flex: 1;
-}
-
-.layout-column {
-    flex-direction: column;
-}
diff --git a/packages/mosaic-examples/mosaic/splitter/splitter-overview/splitter-overview-example.css b/packages/mosaic-examples/mosaic/splitter/splitter-overview/splitter-overview-example.css
@@ -7,7 +7,3 @@ mc-splitter {
 div[mc-splitter-area] {
     background: #c5c0c0
 }
-
-.flex {
-    flex: 1;
-}
diff --git a/packages/mosaic-examples/mosaic/splitter/splitter-vertical/splitter-vertical-example.css b/packages/mosaic-examples/mosaic/splitter/splitter-vertical/splitter-vertical-example.css
@@ -12,7 +12,3 @@ mc-splitter {
 div[mc-splitter-area] {
     background: #c5c0c0
 }
-
-.flex {
-    flex: 1;
-}
diff --git a/packages/mosaic-examples/mosaic/tabs/module.ts b/packages/mosaic-examples/mosaic/tabs/module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { McTabsModule } from '@ptsecurity/mosaic/tabs';
+
+import { TabsLightExample } from './tabs-light-overview/tabs-light-example';
+import { TabsOverviewExample } from './tabs-overview/tabs-overview-example';
+import { TabsStretchExample } from './tabs-stretch-overview/tabs-stretch-example';
+
+
+const EXAMPLES = [
+    TabsOverviewExample,
+    TabsLightExample,
+    TabsStretchExample
+];
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        McTabsModule
+    ],
+    declarations: EXAMPLES,
+    exports: EXAMPLES
+})
+export class TabsExamplesModule {}
diff --git a/packages/mosaic-examples/mosaic/tabs/tabs-light-overview/tabs-light-example.css b/packages/mosaic-examples/mosaic/tabs/tabs-light-overview/tabs-light-example.css
diff --git a/packages/mosaic-examples/mosaic/tabs/tabs-light-overview/tabs-light-example.html b/packages/mosaic-examples/mosaic/tabs/tabs-light-overview/tabs-light-example.html
@@ -0,0 +1,11 @@
+<mc-tab-group mc-light-tabs>
+    <mc-tab label="Fact 4">
+        Chuck Norris counted to infinity. Twice.
+    </mc-tab>
+    <mc-tab label="Fact 5">
+        Chuck Norris can speak braille.
+    </mc-tab>
+    <mc-tab [disabled]="true" label="Fact 6">
+        nothing
+    </mc-tab>
+</mc-tab-group>
diff --git a/packages/mosaic-examples/mosaic/tabs/tabs-light-overview/tabs-light-example.ts b/packages/mosaic-examples/mosaic/tabs/tabs-light-overview/tabs-light-example.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+
+/**
+ * @title Navbar
+ */
+@Component({
+    selector: 'tabs-light-example',
+    templateUrl: 'tabs-light-example.html',
+    styleUrls: ['tabs-light-example.css']
+})
+export class TabsLightExample {}
diff --git a/packages/mosaic-examples/mosaic/tabs/tabs-overview/tabs-overview-example.css b/packages/mosaic-examples/mosaic/tabs/tabs-overview/tabs-overview-example.css
diff --git a/packages/mosaic-examples/mosaic/tabs/tabs-overview/tabs-overview-example.html b/packages/mosaic-examples/mosaic/tabs/tabs-overview/tabs-overview-example.html
@@ -0,0 +1,14 @@
+<mc-tab-group>
+    <mc-tab>
+        <ng-template mc-tab-label>Fact 1</ng-template>
+        Chuck Norris can hear sign language.
+    </mc-tab>
+    <mc-tab>
+        <ng-template mc-tab-label>Fact 2</ng-template>
+        Chuck Norris makes onions cry.
+    </mc-tab>
+    <mc-tab [disabled]="true">
+        <ng-template mc-tab-label>Fact 3</ng-template>
+        nothing
+    </mc-tab>
+</mc-tab-group>
diff --git a/packages/mosaic-examples/mosaic/tabs/tabs-overview/tabs-overview-example.ts b/packages/mosaic-examples/mosaic/tabs/tabs-overview/tabs-overview-example.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+
+/**
+ * @title Navbar
+ */
+@Component({
+    selector: 'tabs-overview-example',
+    templateUrl: 'tabs-overview-example.html',
+    styleUrls: ['tabs-overview-example.css']
+})
+export class TabsOverviewExample {}
diff --git a/packages/mosaic-examples/mosaic/tabs/tabs-stretch-overview/tabs-stretch-example.css b/packages/mosaic-examples/mosaic/tabs/tabs-stretch-overview/tabs-stretch-example.css
diff --git a/packages/mosaic-examples/mosaic/tabs/tabs-stretch-overview/tabs-stretch-example.html b/packages/mosaic-examples/mosaic/tabs/tabs-stretch-overview/tabs-stretch-example.html
@@ -0,0 +1,11 @@
+<mc-tab-group mc-stretch-tabs>
+    <mc-tab label="Fact 7">
+        Chuck Norris knows Victoria's secret.
+    </mc-tab>
+    <mc-tab label="Fact 7">
+        Chuck Norris can drown a fish.
+    </mc-tab>
+    <mc-tab label="Fact 7">
+        Chuck Norris narrates Morgan Freeman's life.
+    </mc-tab>
+</mc-tab-group>
diff --git a/packages/mosaic-examples/mosaic/tabs/tabs-stretch-overview/tabs-stretch-example.ts b/packages/mosaic-examples/mosaic/tabs/tabs-stretch-overview/tabs-stretch-example.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+
+/**
+ * @title Navbar
+ */
+@Component({
+    selector: 'tabs-stretch-example',
+    templateUrl: 'tabs-stretch-example.html',
+    styleUrls: ['tabs-stretch-example.css']
+})
+export class TabsStretchExample {}
diff --git a/packages/mosaic/navbar/navbar.md b/packages/mosaic/navbar/navbar.md
@@ -0,0 +1 @@
+<!-- example(navbar-overview) -->
diff --git a/packages/mosaic/tabs/tabs.md b/packages/mosaic/tabs/tabs.md
@@ -1,8 +1,8 @@
-| Attribute          | Description                                                                 |
-|--------------------|-----------------------------------------------------------------------------|
-| `mc-tab-group`          |                                                                             |
-| `mc-tab`           |                                                                             |
+#### Default tabs
+<!-- example(tabs-overview) -->
 
-### Theming
+### Light tabs
+<!-- example(tabs-light) -->
 
-### Accessibility
+### Stretch tabs
+<!-- example(tabs-stretch) -->
diff --git a/packages/mosaic/tags/tags-autocomplete.md b/packages/mosaic/tags/tags-autocomplete.md
@@ -0,0 +1 @@
+<!-- example(tags-autocomplete) -->
diff --git a/packages/mosaic/tags/tags-input.md b/packages/mosaic/tags/tags-input.md
@@ -0,0 +1 @@
+<!-- example(tags-input) -->
diff --git a/packages/mosaic/tags/tags-list.md b/packages/mosaic/tags/tags-list.md
@@ -0,0 +1 @@
+<!-- example(tags-list) -->
diff --git a/packages/mosaic/tags/tags.md b/packages/mosaic/tags/tags.md
@@ -1,11 +1,2 @@
 #### Simple Tags
-<!-- example(tags-overview) -->
-
-### Tags list
-<!-- example(tags-list) -->
-
-### Input tags
-<!-- example(tags-input) -->
-
-### Autocomplete tags
-<!-- example(tags-autocomplete) -->
+<!-- example(tags-overview) -->