feat(navbar): Dropdown item (#34)

commitlint.config.js

@@ -1,14 +1,14 @@
 module.exports = {
     extends: ['@ptsecurity/commitlint-config'],
     rules: {
-        'scope-enum': [ 
+        'scope-enum': [
             2,
             'always',
             [
                 'build',
                 'docs',
                 'chore',
-                'cdk', 
+                'cdk',
                 'common',
                 'typography',
                 'button',
@@ -28,7 +28,8 @@ module.exports = {
                 'progress-bar',
                 'datepicker',
                 'timepicker',
-                'visual'
+                'visual',
+                'navbar'
             ]
         ]
     }

src/lib-dev/navbar/module.ts

@@ -1,10 +1,11 @@
-import { FormsModule } from '@angular/forms';
 import { Component, NgModule, ViewChild, ViewEncapsulation } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { McNavbarModule, McNavbar } from '../../lib/navbar/';
+import { McButtonModule } from '../../lib/button';
 import { McIconModule } from '../../lib/icon';
+import { McNavbarModule, McNavbar, IMcNavbarDropdownItem } from '../../lib/navbar/';
 
 
 @Component({
@@ -20,6 +21,23 @@ export class NavbarDemoComponent {
 
     readonly minNavbarWidth: number = 940;
 
+    dropdownItems: IMcNavbarDropdownItem[] = [
+        { link: '#1', text: 'Очень длинный список для проверки ширины' },
+        { link: '#2', text: 'Общие сведения' },
+        { link: '#3', text: 'Еще один пункт' }
+    ];
+
+    buttonDropdownItems: IMcNavbarDropdownItem[] = [
+        { text: 'Пример кастомного компонента 1' },
+        { text: 'Пример кастомного компонента 2' },
+        { text: 'Пример кастомного компонента 3' }
+    ];
+
+    rightDropdownItems: IMcNavbarDropdownItem[] = [
+        { link: '#4', text: 'Пункт в правой части navbar 1' },
+        { link: '#5', text: 'Пункт в правой части navbar 2' }
+    ];
+
     private _collapsedNavbarWidth: number = 1280;
 
     get collapsedNavbarWidth(): number {
@@ -50,6 +68,7 @@ export class NavbarDemoComponent {
     imports: [
         BrowserModule,
         McNavbarModule,
+        McButtonModule,
         McIconModule,
         FormsModule
     ],

src/lib-dev/navbar/template.html

@@ -28,13 +28,6 @@ <h3>Common example</h3>
                 <mc-navbar-title>Right Icon</mc-navbar-title>
                 <i mc-icon="mc-search_16"></i>
             </mc-navbar-item>
-            <mc-navbar-item (click)="onItemClick($event)">
-                <div mc-dropdown>
-                    <span class="dropdown-text">mc-dropdown</span>
-                    <i mc-icon="mc-angle-M_16"></i>
-                </div>
-            </mc-navbar-item>
-
             <mc-navbar-item (click)="onItemClick($event)">
                 <i mc-icon="mc-gear_16"></i>
             </mc-navbar-item>
@@ -59,6 +52,33 @@ <h3>Common example</h3>
     </mc-navbar>
 </div>
 
+<h3>Dropdowns exmaple</h3>
+<div>
+    <mc-navbar>
+        <mc-navbar-container position="left">
+            <mc-navbar-item [dropdownItems]="dropdownItems">
+                <mc-navbar-title>Dropdown items</mc-navbar-title>
+            </mc-navbar-item>
+            <mc-navbar-item [dropdownItems]="buttonDropdownItems">
+                <mc-navbar-title>Custom dropdown items</mc-navbar-title>
+                <ng-template #dropdownItemTmpl let-item>
+                    <button mc-icon-button>
+                        {{ item.text }}
+                        <i mc-icon="mc-check_16"></i>
+                    </button>
+                </ng-template>
+            </mc-navbar-item>
+        </mc-navbar-container>
+
+        <mc-navbar-container position="right">
+            <mc-navbar-item [dropdownItems]="rightDropdownItems">
+                <mc-navbar-title>Right dropdown items</mc-navbar-title>
+            </mc-navbar-item>
+        </mc-navbar-container>
+    </mc-navbar>
+</div>
+
+
 <h3>Collapse example</h3>
 <div style="margin-bottom: 20px;">
     <label>Navbar width (min = 940; please use arrow up and arrow down in Chrome for comfortable testing):</label>

src/lib/navbar/README.md

@@ -19,8 +19,9 @@ We strongly recommend adhere to use our child components until it is possible bu
 	- menu item container **mc-navbar-item**
 	  - icon **[mc-icon]** (another PT Mosaic component, out of the scope of this)
 	  - title **mc-navbar-title**
-    - dropdown **[mc-dropdown]** (another PT Mosaic component, out of the scope of this)
-	  - any markup
+    - menu item dropdown container **mc-navbar-item** with property **[dropdownItems]**
+      - any markup for title dropdown container
+	  - **ng-temaplate** with custom component for dropdown item
 	- any markup
 - any markup
 
@@ -38,4 +39,4 @@ Disable state also could be combined with other states but it is **disabled** at
 In the case that absence of space the following elements is collapsed:
 
 -  mc-navbar-item is collapsed to [mc-icon] if exists (if not then the item is not collapsed). The title attribute is added for [mc-icon] from mc-navbar-item's [collapsedTitle] input value;
--  mc-navbar-item is collapsed to [mc-icon] if exists (if not then the item is not collapsed). 
+-  mc-navbar-item is collapsed to [mc-icon] if exists (if not then the item is not collapsed). 

src/lib/navbar/_navbar-base.scss

@@ -2,6 +2,9 @@
 $mc-navbar-h-padding: 0px;
 $mc-navbar-height: 48px;
 $mc-navbar-item-h-padding: 16px;
+$mc-navbar-dropdown-v-padding: 4px;
+$mc-navbar-dropdown-link-v-padding: 6px;
+$mc-navbar-dropdown-link-h-padding: 16px;
 $mc-navbar-brand-h-padding: 12px;
 $mc-navbar-brand-margin-right: 24px;
 $mc-navbar-title-icon-space: 8px;
@@ -44,6 +47,8 @@ $mc-navbar-icon-min-width: 15px;
     align-items: center;
     padding-left: $mc-navbar-item-h-padding;
     padding-right: $mc-navbar-item-h-padding;
+    background-color: transparent;
+    border: none;
 }
 
 %mc-navbar-brand-base {

src/lib/navbar/_navbar-theme.scss

@@ -63,6 +63,34 @@
             opacity: 0.5;
         }
     }
+
+    .mc-navbar-dropdown {
+        background-color: #fff;
+        border-color: mc-color($mc-grey, 300);
+        box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
+
+        &-link {
+            color: mc-color($mc-grey, 700);
+            outline: none;
+
+            &:hover {
+                background-color: $black-6-opacity;
+            }
+
+            &.cdk-focused {
+                border-color: mc-color($palette, 500);
+            }
+
+            &:active,
+            &.is-active {
+                background-color: mc-color($palette, 100);
+
+                &:hover::before {
+                    background-color: $black-6-opacity;
+                }
+            }
+        }
+    }
 }
 
 @mixin mc-navbar-theme($theme) {
@@ -72,7 +100,8 @@
 }
 
 @mixin mc-navbar-typography($config) {
-    .mc-navbar-title {
+    .mc-navbar-title,
+    .mc-navbar-dropdown {
         @include mc-typography-level-to-styles($config, body);
     }
 

src/lib/navbar/navbar.component.spec.html

@@ -48,6 +48,10 @@
                 <i mc-icon="mc-error_16"></i>
                 <mc-navbar-title>Left icon</mc-navbar-title>
             </mc-navbar-item>
+            <mc-navbar-item [dropdownItems]="dropdownItems">
+                <span class="dropdown-text">Dropdown item</span>
+                <i mc-icon="mc-angle-M_16"></i>
+            </mc-navbar-item>
         </mc-navbar-container>
 
         <mc-navbar-container position="right">

src/lib/navbar/navbar.component.spec.ts

@@ -2,8 +2,11 @@ import { Component, ViewChild } from '@angular/core';
 import { fakeAsync, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
-import { McNavbarModule, McNavbar } from './index';
+import { SPACE } from '@ptsecurity/cdk/keycodes';
+import { createKeyboardEvent, createFakeEvent } from '@ptsecurity/cdk/testing';
+
 import { McIconModule } from './../icon/icon.module';
+import { McNavbarModule, McNavbar, IMcNavbarDropdownItem } from './index';
 
 
 const FONT_RENDER_TIMEOUT_MS = 10;
@@ -105,6 +108,81 @@ describe('McNavbar', () => {
 
         expect(testComponent.counter).toBe(0);
     });
+
+    it('dropdown item by default should render list links', () => {
+        const fixture = TestBed.createComponent(TestApp);
+
+        fixture.detectChanges();
+
+        const dropdowns = fixture.debugElement.queryAll(By.css('[ng-reflect-dropdown-items]'));
+
+        dropdowns.forEach((dropdown) => {
+            const links = dropdown.queryAll(By.css('.mc-navbar-dropdown-link'));
+            expect(links.length).toBeGreaterThan(0);
+        });
+    });
+
+    it('dropdown content should open by click on navbar-item', () => {
+        const fixture = TestBed.createComponent(TestApp);
+
+        fixture.detectChanges();
+
+        const dropdown = fixture.debugElement.query(By.css('[ng-reflect-dropdown-items]'));
+        const dropdownToggler = dropdown.query(By.css('.mc-navbar-item'));
+        const dropdownContent = dropdown.query(By.css('.mc-navbar-dropdown')).nativeElement as HTMLElement;
+
+        dropdownToggler.nativeElement.click();
+
+        fixture.detectChanges();
+
+        const isOpened = !dropdownContent.classList.contains('is-collapsed');
+
+        expect(isOpened).toBeTruthy();
+    });
+
+    it('dropdown content should open by keydown SPACE on navbar-item', () => {
+        const fixture = TestBed.createComponent(TestApp);
+
+        fixture.detectChanges();
+
+        const dropdown = fixture.debugElement.query(By.css('[ng-reflect-dropdown-items]'));
+        const dropdownToggler = dropdown.query(By.css('.mc-navbar-item')).nativeElement as HTMLElement;
+        const dropdownContent = dropdown.query(By.css('.mc-navbar-dropdown')).nativeElement as HTMLElement;
+
+        const keydownEvent = createKeyboardEvent('keydown', SPACE, dropdownToggler);
+
+        dropdownToggler.dispatchEvent(keydownEvent);
+
+        fixture.detectChanges();
+
+        const isOpened = !dropdownContent.classList.contains('is-collapsed');
+
+        expect(isOpened).toBeTruthy();
+    });
+
+    it('dropdown content should close by blur event from <mc-navbar-item>', () => {
+        const fixture = TestBed.createComponent(TestApp);
+
+        fixture.detectChanges();
+
+        const dropdown = fixture.debugElement.query(By.css('[ng-reflect-dropdown-items]'));
+        const dropdownToggler = dropdown.query(By.css('.mc-navbar-item'));
+        const dropdownContent = dropdown.query(By.css('.mc-navbar-dropdown')).nativeElement as HTMLElement;
+
+        const keydownEvent = createFakeEvent('blur');
+
+        dropdownToggler.nativeElement.click();
+
+        fixture.detectChanges();
+
+        dropdown.nativeElement.dispatchEvent(keydownEvent);
+
+        fixture.detectChanges();
+
+        const isClosed = dropdownContent.classList.contains('is-collapsed');
+
+        expect(isClosed).toBeTruthy();
+    });
 });
 
 @Component({
@@ -118,6 +196,12 @@ class TestApp {
     counter: number = 0;
     navbarContainerWidth: number = 915;
 
+    dropdownItems: IMcNavbarDropdownItem[] = [
+        { link: '#', text: 'Очень длинный список для проверки ширины' },
+        { link: '#', text: 'Общие сведения' },
+        { link: '#', text: 'Еще один пункт' }
+    ];
+
     onItemClick() {
         this.counter++;
     }