From 81a9e16686ed6212bc672feea0c1904682ddcb07 Mon Sep 17 00:00:00 2001
From: Iakovleva Margarita <naruyaoi@yandex.ru>
Date: Tue, 30 Jul 2019 13:43:00 +0300
Subject: [PATCH] feat(docs): anchors component was added (#191)

---
 .../components/anchors/anchors.component.html |  9 +++++
 .../components/anchors/anchors.component.ts   | 27 +++++++++++++++
 .../app/components/anchors/anchors.module.ts  | 10 ++++++
 .../src/app/components/anchors/anchors.scss   | 33 +++++++++++++++++++
 .../main-layout/main-layout.component.html    |  1 +
 .../main-layout/main-layout.component.scss    |  3 +-
 .../main-layout/main-layout.module.ts         |  3 ++
 7 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 packages/docs/src/app/components/anchors/anchors.component.html
 create mode 100644 packages/docs/src/app/components/anchors/anchors.component.ts
 create mode 100644 packages/docs/src/app/components/anchors/anchors.module.ts
 create mode 100644 packages/docs/src/app/components/anchors/anchors.scss

diff --git a/packages/docs/src/app/components/anchors/anchors.component.html b/packages/docs/src/app/components/anchors/anchors.component.html
new file mode 100644
index 000000000..5f098ca87
--- /dev/null
+++ b/packages/docs/src/app/components/anchors/anchors.component.html
@@ -0,0 +1,9 @@
+<div class="anchors-menu">
+    <div class="anchors-menu__container">
+        <div class="anchors-menu__list" >
+            <div *ngFor="let anchor of anchors; let i = index" [attr.class] = "i == activeAnchor? activeClass : inactiveClass"    >
+                <a href="{{anchor.href}}" (click)="setActiveAnchor(i)">{{anchor.name}}</a>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/packages/docs/src/app/components/anchors/anchors.component.ts b/packages/docs/src/app/components/anchors/anchors.component.ts
new file mode 100644
index 000000000..acf8c25fb
--- /dev/null
+++ b/packages/docs/src/app/components/anchors/anchors.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+
+
+@Component({
+    selector: 'anchors',
+    templateUrl: './anchors.component.html',
+    styleUrls: ['./anchors.scss']
+})
+export class AnchorsComponent {
+
+    activeAnchor: number = 0;
+    activeClass: string = "anchors-menu__list-element anchors-menu__list-element_active";
+    anchors: {href: string, name: string }[]  = [
+        {href: "#variants", name: "Variants"},
+        {href: "#colors", name: "Colors"},
+        {href: "#progress-indication", name: "Progress indication"},
+    ];
+    inactiveClass: string = "anchors-menu__list-element";
+
+    ngAfterViewInit() {
+        // TODO: collect real anchors data
+    }
+
+    setActiveAnchor ( index ) {
+        this.activeAnchor = index;
+    }
+}
diff --git a/packages/docs/src/app/components/anchors/anchors.module.ts b/packages/docs/src/app/components/anchors/anchors.module.ts
new file mode 100644
index 000000000..f93dc9e44
--- /dev/null
+++ b/packages/docs/src/app/components/anchors/anchors.module.ts
@@ -0,0 +1,10 @@
+import { AnchorsComponent } from "./anchors.component";
+import {CommonModule} from "@angular/common";
+import { NgModule } from '@angular/core';
+
+@NgModule({
+    imports: [CommonModule],
+    exports: [AnchorsComponent],
+    declarations: [AnchorsComponent]
+})
+export class AnchorsModule { }
diff --git a/packages/docs/src/app/components/anchors/anchors.scss b/packages/docs/src/app/components/anchors/anchors.scss
new file mode 100644
index 000000000..f7ff7baa2
--- /dev/null
+++ b/packages/docs/src/app/components/anchors/anchors.scss
@@ -0,0 +1,33 @@
+@mixin box-shadow ($shadow) {
+    -webkit-box-shadow: $shadow;
+    -moz-box-shadow: $shadow;
+    -o-box-shadow: $shadow;
+    box-shadow: $shadow;
+}
+
+.anchors-menu {
+    position: fixed;
+    top: 64px;
+    width: 350px;
+    right: 0;
+    bottom: 0;
+
+    &__list {
+        display: flex;
+        flex-direction: column;
+        margin-top: 25px;
+    }
+
+    &__list-element {
+        list-style-type: none;
+        padding: 6px 16px;
+        line-height: 20px;
+        font-size: 15px;
+        color: #2f2f33;
+
+        &:hover { @include box-shadow( inset 3px 0 0 rgba(140,148,158,0.2) ); }
+
+        &_active { @include box-shadow( inset 3px 0 0 #2f80ed ); }
+    }
+}
+
diff --git a/packages/docs/src/app/components/main-layout/main-layout.component.html b/packages/docs/src/app/components/main-layout/main-layout.component.html
index e470b41b4..6a4c1d1e1 100644
--- a/packages/docs/src/app/components/main-layout/main-layout.component.html
+++ b/packages/docs/src/app/components/main-layout/main-layout.component.html
@@ -7,4 +7,5 @@
             <router-outlet></router-outlet>
         </div>
     </article>
+    <anchors></anchors>
 </main>
diff --git a/packages/docs/src/app/components/main-layout/main-layout.component.scss b/packages/docs/src/app/components/main-layout/main-layout.component.scss
index effe540d4..6821f7591 100644
--- a/packages/docs/src/app/components/main-layout/main-layout.component.scss
+++ b/packages/docs/src/app/components/main-layout/main-layout.component.scss
@@ -7,9 +7,10 @@
 .content {
 
     margin-left: 360px;
+    margin-top: 64px;
     padding-left: 48px;
     padding-top: 20px;
-    padding-right: 300px;
+    padding-right: 350px;
 
     &__wrapper{
         padding: 10px 0;
diff --git a/packages/docs/src/app/components/main-layout/main-layout.module.ts b/packages/docs/src/app/components/main-layout/main-layout.module.ts
index 988ddfc87..96470c245 100644
--- a/packages/docs/src/app/components/main-layout/main-layout.module.ts
+++ b/packages/docs/src/app/components/main-layout/main-layout.module.ts
@@ -1,3 +1,4 @@
+import { AnchorsModule } from '../anchors/anchors.module';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
@@ -14,6 +15,8 @@ import { MainLayoutComponent } from './main-layout.component';
 
 @NgModule({
     imports: [
+        AnchorsModule,
+
         CommonModule,
         RouterModule,