From 25705902b4e6bcab7764a8458d332d55e8f8cb54 Mon Sep 17 00:00:00 2001
From: Jedrzej <jedrzej.markowski@sap.com>
Date: Mon, 17 Feb 2020 11:29:57 +0100
Subject: [PATCH 1/2] Docs: Add RTL support for examples of scrolll spy

---
 .../scroll-spy-custom-example.component.html  |  2 +-
 .../scroll-spy-custom-example.component.scss  | 23 +++++++++----------
 .../scroll-spy-custom-example.component.ts    |  8 +++----
 .../scroll-spy-offset-example.component.html  |  2 +-
 .../scroll-spy-offset-example.component.scss  | 12 ----------
 .../scroll-spy-offset-example.component.ts    |  8 +++----
 .../scroll-spy-example.component.html         |  2 +-
 .../scroll-spy/scroll-spy-docs.component.html |  2 +-
 apps/docs/src/styles.scss                     | 22 ++++++++++++++++++
 9 files changed, 45 insertions(+), 36 deletions(-)

diff --git a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.html b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.html
index 261adf2ddc7..c2e1340726d 100644
--- a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.html
+++ b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.html
@@ -1,6 +1,6 @@
 <div class="header-container">
     <div class="header-item" *ngFor="let item of items" [ngClass]="{'selected': selectedSpy === item.id}">
-        <span class="icon">
+        <span class="fd-scroll-spy-example-icon-class icon">
             <fd-icon [glyph]="'arrow-right'" [size]="'xs'"></fd-icon>
         </span>
         {{item.name}}
diff --git a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.scss b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.scss
index 271d7776860..5b97f182396 100644
--- a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.scss
+++ b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.scss
@@ -32,18 +32,6 @@
     }
 }
 
-.icon {
-    left: -4px;
-    opacity: 0;
-}
-
-.selected {
-    font-weight: bold;
-    .icon {
-        opacity: 1;
-    }
-}
-
 .middle-marker-container {
     position: absolute;
     top: 50%;
@@ -55,3 +43,14 @@
         border: 0.5px dashed black;
     }
 }
+
+.icon {
+    opacity: 0;
+}
+
+.selected {
+    font-weight: bold;
+    .icon {
+        opacity: 1;
+    }
+}
diff --git a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.ts b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.ts
index 63c1188a273..dea2d0c12e2 100644
--- a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.ts
+++ b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'fd-scroll-spy-custom-example',
-  templateUrl: './scroll-spy-custom-example.component.html',
-  styleUrls: ['./scroll-spy-custom-example.component.scss']
+    selector: 'fd-scroll-spy-custom-example',
+    templateUrl: './scroll-spy-custom-example.component.html',
+    styleUrls: ['./scroll-spy-custom-example.component.scss']
 })
 export class ScrollSpyCustomExampleComponent implements OnInit {
 
@@ -16,7 +16,7 @@ export class ScrollSpyCustomExampleComponent implements OnInit {
 
     generateItems(count: number): void {
         for (let i = 0; i < count; ++i) {
-            this.items.push({name: 'Element ' + i, id: 'element-' + i});
+            this.items.push({ name: 'Element ' + i, id: 'element-' + i });
         }
     }
 
diff --git a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.html b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.html
index ec83a82ad18..d8ba4e56a8b 100644
--- a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.html
+++ b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.html
@@ -1,6 +1,6 @@
 <div class="header-container">
     <div class="header-item" *ngFor="let item of items" [ngClass]="{'selected': selectedSpy === item.id}">
-        <span class="icon">
+        <span class="fd-scroll-spy-example-icon-class icon">
             <fd-icon [glyph]="'arrow-right'" [size]="'xs'"></fd-icon>
         </span>
         {{item.name}}
diff --git a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.scss b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.scss
index 271d7776860..2c067874b6e 100644
--- a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.scss
+++ b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.scss
@@ -43,15 +43,3 @@
         opacity: 1;
     }
 }
-
-.middle-marker-container {
-    position: absolute;
-    top: 50%;
-    right: 0;
-    height: 0;
-    width: calc(100% - 140px);
-    .marker {
-        height: 1px;
-        border: 0.5px dashed black;
-    }
-}
diff --git a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.ts b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.ts
index fe4410f1f16..318a718bd12 100644
--- a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.ts
+++ b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'fd-scroll-spy-offset-example',
-  templateUrl: './scroll-spy-offset-example.component.html',
-  styleUrls: ['./scroll-spy-offset-example.component.scss']
+    selector: 'fd-scroll-spy-offset-example',
+    templateUrl: './scroll-spy-offset-example.component.html',
+    styleUrls: ['./scroll-spy-offset-example.component.scss']
 })
 export class ScrollSpyOffsetExampleComponent implements OnInit {
 
@@ -16,7 +16,7 @@ export class ScrollSpyOffsetExampleComponent implements OnInit {
 
     generateItems(count: number): void {
         for (let i = 0; i < count; ++i) {
-            this.items.push({name: 'Element ' + i, id: 'element-' + i});
+            this.items.push({ name: 'Element ' + i, id: 'element-' + i });
         }
     }
 
diff --git a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-example/scroll-spy-example.component.html b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-example/scroll-spy-example.component.html
index 20a23cb959f..35f632e42ba 100644
--- a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-example/scroll-spy-example.component.html
+++ b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-example/scroll-spy-example.component.html
@@ -1,6 +1,6 @@
 <div class="header-container">
     <div class="header-item" *ngFor="let item of items" [ngClass]="{'selected': selectedSpy === item.id}">
-        <span class="icon">
+        <span class="fd-scroll-spy-example-icon-class icon">
             <fd-icon [glyph]="'arrow-right'" [size]="'xs'"></fd-icon>
         </span>
         {{item.name}}
diff --git a/apps/docs/src/app/core/component-docs/scroll-spy/scroll-spy-docs.component.html b/apps/docs/src/app/core/component-docs/scroll-spy/scroll-spy-docs.component.html
index 61cacc8566e..ba12e392e46 100644
--- a/apps/docs/src/app/core/component-docs/scroll-spy/scroll-spy-docs.component.html
+++ b/apps/docs/src/app/core/component-docs/scroll-spy/scroll-spy-docs.component.html
@@ -33,7 +33,7 @@
     The <code>targetOffset</code> property allows you to add the offset to the detection. The value is measured in pixels,
     so for example if there is <code>[targetOffset]="100"</code>, the event will be fired for element, that is 100px below.
 </description>
-<component-example [name]="'ex2'">
+<component-example [name]="'ex3'">
     <fd-scroll-spy-offset-example></fd-scroll-spy-offset-example>
 </component-example>
 <code-example [exampleFiles]="scrollSpyCustom"></code-example>
diff --git a/apps/docs/src/styles.scss b/apps/docs/src/styles.scss
index 7fc50fe52e0..5469ba30743 100644
--- a/apps/docs/src/styles.scss
+++ b/apps/docs/src/styles.scss
@@ -78,6 +78,28 @@ fd-card {
     width: 95%;
 }
 
+.fd-scroll-spy-example-icon-class {
+    position: relative;
+    display: inline-block;
+    @at-root {
+        [dir="rtl"] &,
+        &[dir="rtl"] {
+            transform: rotate(180deg);
+            bottom: 2px;
+        }
+    }
+}
+
+.middle-marker-container {
+    @at-root {
+        [dir="rtl"] &,
+        &[dir="rtl"] {
+            right: initial !important;
+            left: 0 !important;
+        }
+    }
+}
+
 pre {
     margin: 0;
     white-space: pre-wrap;

From 63890624f2338e3f9c67befd3cc75105693b4921 Mon Sep 17 00:00:00 2001
From: Jedrzej <jedrzej.markowski@sap.com>
Date: Wed, 19 Feb 2020 16:17:15 +0100
Subject: [PATCH 2/2] Make scroll-spy mirrored on rtl

---
 .../scroll-spy-custom-example.component.html                   | 3 +--
 .../scroll-spy-offset-example.component.html                   | 3 +--
 .../scroll-spy-offset-example.component.scss                   | 1 -
 .../scroll-spy-example/scroll-spy-example.component.html       | 3 +--
 .../scroll-spy-example/scroll-spy-example.component.scss       | 1 -
 apps/docs/src/styles.scss                                      | 3 +++
 6 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.html b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.html
index c2e1340726d..74f2fee4fe2 100644
--- a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.html
+++ b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.html
@@ -2,8 +2,7 @@
     <div class="header-item" *ngFor="let item of items" [ngClass]="{'selected': selectedSpy === item.id}">
         <span class="fd-scroll-spy-example-icon-class icon">
             <fd-icon [glyph]="'arrow-right'" [size]="'xs'"></fd-icon>
-        </span>
-        {{item.name}}
+        </span>{{item.name}}
     </div>
 </div>
 
diff --git a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.html b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.html
index d8ba4e56a8b..76b4c0a3ebe 100644
--- a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.html
+++ b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.html
@@ -2,8 +2,7 @@
     <div class="header-item" *ngFor="let item of items" [ngClass]="{'selected': selectedSpy === item.id}">
         <span class="fd-scroll-spy-example-icon-class icon">
             <fd-icon [glyph]="'arrow-right'" [size]="'xs'"></fd-icon>
-        </span>
-        {{item.name}}
+        </span>{{item.name}}
     </div>
 </div>
 
diff --git a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.scss b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.scss
index 2c067874b6e..f7606028e25 100644
--- a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.scss
+++ b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.scss
@@ -33,7 +33,6 @@
 }
 
 .icon {
-    left: -4px;
     opacity: 0;
 }
 
diff --git a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-example/scroll-spy-example.component.html b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-example/scroll-spy-example.component.html
index 35f632e42ba..7fb952a6203 100644
--- a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-example/scroll-spy-example.component.html
+++ b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-example/scroll-spy-example.component.html
@@ -2,8 +2,7 @@
     <div class="header-item" *ngFor="let item of items" [ngClass]="{'selected': selectedSpy === item.id}">
         <span class="fd-scroll-spy-example-icon-class icon">
             <fd-icon [glyph]="'arrow-right'" [size]="'xs'"></fd-icon>
-        </span>
-        {{item.name}}
+        </span>{{item.name}}
     </div>
 </div>
 
diff --git a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-example/scroll-spy-example.component.scss b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-example/scroll-spy-example.component.scss
index 87dfc08e9e0..757b69b0dbf 100644
--- a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-example/scroll-spy-example.component.scss
+++ b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-example/scroll-spy-example.component.scss
@@ -32,7 +32,6 @@
 }
 
 .icon {
-    left: -4px;
     opacity: 0;
 }
 
diff --git a/apps/docs/src/styles.scss b/apps/docs/src/styles.scss
index 5469ba30743..b781673da50 100644
--- a/apps/docs/src/styles.scss
+++ b/apps/docs/src/styles.scss
@@ -81,9 +81,12 @@ fd-card {
 .fd-scroll-spy-example-icon-class {
     position: relative;
     display: inline-block;
+    margin-right: 4px;
     @at-root {
         [dir="rtl"] &,
         &[dir="rtl"] {
+            margin-right: 0;
+            margin-left: 4px;
             transform: rotate(180deg);
             bottom: 2px;
         }