From 91da8df4822b877bc55d09af5d91bab616fd9621 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 15 Jul 2020 12:31:31 +0400
Subject: [PATCH 1/5] Add ScrollSections components

---
 .../ScrollSections/SScrollSectionItem.vue     |  43 +++++
 .../ScrollSections/SScrollSections.vue        | 164 ++++++++++++++++++
 src/components/ScrollSections/index.ts        |   4 +
 src/components/index.ts                       |   3 +
 src/index.ts                                  |   6 +
 src/types/components.ts                       |   2 +
 6 files changed, 222 insertions(+)
 create mode 100644 src/components/ScrollSections/SScrollSectionItem.vue
 create mode 100644 src/components/ScrollSections/SScrollSections.vue
 create mode 100644 src/components/ScrollSections/index.ts

diff --git a/src/components/ScrollSections/SScrollSectionItem.vue b/src/components/ScrollSections/SScrollSectionItem.vue
new file mode 100644
index 00000000..00018bb3
--- /dev/null
+++ b/src/components/ScrollSections/SScrollSectionItem.vue
@@ -0,0 +1,43 @@
+<template>
+  <section :id="section" class="s-scroll-section-item">
+    <span v-if="title" class="title">{{ title }}</span>
+    <slot v-if="this.$slots.title && !title" name="title"></slot>
+    <slot></slot>
+  </section>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+@Component
+export default class SScrollSectionItem extends Vue {
+  /**
+   * Required section property of scroll section item. It should be unique.
+   *
+   * For, instance, if you want to go to the `your-url#article`,
+   * you should set `section="article"`
+   */
+  @Prop({ default: '', type: String, required: true }) readonly section!: string
+  /**
+   * Title of scroll section item.
+   */
+  @Prop({ default: '', type: String }) readonly title!: string
+}
+</script>
+
+<style lang="scss">
+.s-scroll-section-item {
+  padding: 10px 20px;
+  &:first-child {
+    margin-top: 10px;
+  }
+  &:last-child {
+    margin-bottom: 120%;
+  }
+  .title {
+    font-weight: bold;
+    display: block;
+    padding-bottom: 12px;
+  }
+}
+</style>
diff --git a/src/components/ScrollSections/SScrollSections.vue b/src/components/ScrollSections/SScrollSections.vue
new file mode 100644
index 00000000..4d467b83
--- /dev/null
+++ b/src/components/ScrollSections/SScrollSections.vue
@@ -0,0 +1,164 @@
+<template>
+  <div
+    class="s-scroll-sections flex"
+  >
+    <nav class="s-scroll-menu" v-if="menuItems.length > 0">
+      <ul :style="computedStyles">
+        <li class="s-scroll-item" v-for="item in menuItems" :key="item.section">
+          <a
+            :href="!router ? '#' + item.section : null"
+            :class="{'active': item.section === activeSection}"
+            @click="goTo(item.section)"
+          >
+            {{ item.title }}
+          </a>
+        </li>
+      </ul>
+    </nav>
+    <div class="s-scroll-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+@Component
+export default class SScrollSections extends Vue {
+  /**
+   * Text color of scroll menu in hex format.
+   *
+   * By default it's set to `"#75787B"`
+   */
+  @Prop({ default: '#75787B', type: String }) readonly textColor!: string
+  /**
+   * Active text color of scroll menu in hex format.
+   *
+   * By default it's set to `"#D0021B"`
+   */
+  @Prop({ default: '#D0021B', type: String }) readonly activeTextColor!: string
+  /**
+   * Active hover color of scroll menu in hex format.
+   *
+   * By default it's set to `"#D0021B"`
+   */
+  @Prop({ default: '#D0021B', type: String }) readonly hoverColor!: string
+  /**
+   * `VueRouter` instance from `vue-router`. If it's null, then routing will be unavailable while scrolling.
+   */
+  @Prop({ type: Object }) readonly router!: any
+
+  menuItems: Vue[] = []
+  activeSection = ''
+
+  mounted (): void {
+    this.$nextTick(() => {
+      if (this.$children.length === 0) {
+        return
+      }
+      this.handleInitialState()
+      window.addEventListener('scroll', this.handleScroll)
+    })
+  }
+
+  get computedStyles (): object {
+    const styles = {} as any
+    if (this.textColor) {
+      styles['--s-menu-color-text'] = this.textColor
+    }
+    if (this.activeTextColor) {
+      styles['--s-menu-color-text-active'] = this.activeTextColor
+    }
+    if (this.hoverColor) {
+      styles['--s-menu-color-hover'] = this.hoverColor
+    }
+    return styles
+  }
+
+  private handleInitialState (): void {
+    this.menuItems = this.$children
+    if (this.router && this.router.currentRoute.hash) {
+      this.menuItems.forEach((sectionComponent: any) => {
+        if (this.router.currentRoute.hash === `#${sectionComponent.section}`) {
+          (sectionComponent.$el as HTMLElement).scrollIntoView()
+          this.activeSection = sectionComponent.section
+        }
+      })
+    } else if (window.scrollY <= (this.menuItems[0].$el as HTMLElement).offsetTop) {
+      this.activeSection = (this.menuItems[0] as any).section
+      this.menuItems[0].$el.classList.add('active')
+      if (this.router) {
+        this.router.push({ hash: `#${this.activeSection}` })
+      }
+    }
+  }
+
+  private handleScroll (): void {
+    const fromTop = window.scrollY
+    this.menuItems.forEach((sectionComponent, index) => {
+      const section = sectionComponent.$el as HTMLElement
+      const upperBound = section.offsetTop <= fromTop
+      const lowerBound = section.offsetTop + section.offsetHeight > fromTop
+      if ((index === 0 && !upperBound) || (upperBound && lowerBound)) {
+        this.activeSection = (sectionComponent as any).section
+        section.classList.add('active')
+        if (this.router && this.router.currentRoute.hash !== `#${this.activeSection}`) {
+          this.router.push({ hash: `#${this.activeSection}` })
+        }
+      } else {
+        section.classList.remove('active')
+      }
+    })
+  }
+
+  goTo (section: string): void {
+    if (this.router && this.router.currentRoute.hash !== `#${section}`) {
+      this.router.push({ hash: `#${section}` })
+      this.activeSection = section
+      const component = this.menuItems.filter((component: any) => component.section === section)[0] as any
+      (component.$el as HTMLElement).scrollIntoView({ behavior: 'smooth' })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables.scss";
+
+.s-scroll-sections {
+  font-family: $font-family-default;
+  font-size: 14px;
+}
+.s-scroll-menu {
+  font-weight: 600;
+  flex: 1;
+  ul {
+    position: sticky;
+    top: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .s-scroll-item {
+    text-decoration: none;
+    a {
+      display: block;
+      padding: 8px 16px;
+      text-decoration: none;
+      cursor: pointer;
+      color: var(--s-menu-color-text);
+      &:hover {
+        color: var(--s-menu-color-hover);
+      }
+      &.active {
+        color: var(--s-menu-color-text-active);
+        border-left: 2px solid var(--s-menu-color-text-active);
+      }
+    }
+  }
+}
+.s-scroll-content {
+  flex: 2;
+}
+</style>
diff --git a/src/components/ScrollSections/index.ts b/src/components/ScrollSections/index.ts
new file mode 100644
index 00000000..66f1ecbf
--- /dev/null
+++ b/src/components/ScrollSections/index.ts
@@ -0,0 +1,4 @@
+import SScrollSectionItem from './SScrollSectionItem.vue'
+import SScrollSections from './SScrollSections.vue'
+
+export { SScrollSectionItem, SScrollSections }
diff --git a/src/components/index.ts b/src/components/index.ts
index 2243316c..0da7b7bc 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -15,6 +15,7 @@ import { SInput, SJsonInput } from './Input'
 import { SMain } from './Layout/Main'
 import { SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from './Menu'
 import { SRow } from './Layout/Row'
+import { SScrollSectionItem, SScrollSections } from './ScrollSections'
 import { STooltip } from './Tooltip'
 
 export {
@@ -38,6 +39,8 @@ export {
   SMenuItem,
   SMenuItemGroup,
   SRow,
+  SScrollSectionItem,
+  SScrollSections,
   SSubmenu,
   STooltip
 }
diff --git a/src/index.ts b/src/index.ts
index 404b2f53..cfcf50c0 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -19,6 +19,8 @@ import {
   SMenuItem,
   SMenuItemGroup,
   SRow,
+  SScrollSectionItem,
+  SScrollSections,
   SSubmenu,
   STooltip
 } from './components'
@@ -43,6 +45,8 @@ const elements = [
   { component: SMenuItem, name: Components.SMenuItem },
   { component: SMenuItemGroup, name: Components.SMenuItemGroup },
   { component: SRow, name: Components.SRow },
+  { component: SScrollSectionItem, name: Components.SScrollSectionItem },
+  { component: SScrollSections, name: Components.SScrollSections },
   { component: SSubmenu, name: Components.SSubmenu },
   { component: STooltip, name: Components.STooltip }
 ]
@@ -76,6 +80,8 @@ export {
   SMenuItem,
   SMenuItemGroup,
   SRow,
+  SScrollSectionItem,
+  SScrollSections,
   SSubmenu,
   STooltip
 }
diff --git a/src/types/components.ts b/src/types/components.ts
index cb207ddb..659eef9d 100644
--- a/src/types/components.ts
+++ b/src/types/components.ts
@@ -17,6 +17,8 @@ export enum Components {
   SMenuItem = 'SMenuItem',
   SMenuItemGroup = 'SMenuItemGroup',
   SRow = 'SRow',
+  SScrollSectionItem = 'SScrollSectionItem',
+  SScrollSections = 'SScrollSections',
   SSubmenu = 'SSubmenu',
   STooltip = 'STooltip'
 }

From e24a92dd1dad0da86b7ceea35d6b6b72605bac69 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 15 Jul 2020 13:03:21 +0400
Subject: [PATCH 2/5] Add disabled state for scroll section item

---
 .../ScrollSections/SScrollSectionItem.vue       |  8 +++++++-
 .../ScrollSections/SScrollSections.vue          | 17 ++++++++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/ScrollSections/SScrollSectionItem.vue b/src/components/ScrollSections/SScrollSectionItem.vue
index 00018bb3..fee3d230 100644
--- a/src/components/ScrollSections/SScrollSectionItem.vue
+++ b/src/components/ScrollSections/SScrollSectionItem.vue
@@ -19,9 +19,15 @@ export default class SScrollSectionItem extends Vue {
    */
   @Prop({ default: '', type: String, required: true }) readonly section!: string
   /**
-   * Title of scroll section item.
+   * Title of scroll section item. Slot `title` can be used as well
    */
   @Prop({ default: '', type: String }) readonly title!: string
+  /**
+   * Disabled state of scroll section item for menu.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
 }
 </script>
 
diff --git a/src/components/ScrollSections/SScrollSections.vue b/src/components/ScrollSections/SScrollSections.vue
index 4d467b83..7a3eb2e4 100644
--- a/src/components/ScrollSections/SScrollSections.vue
+++ b/src/components/ScrollSections/SScrollSections.vue
@@ -1,13 +1,14 @@
 <template>
-  <div
-    class="s-scroll-sections flex"
-  >
+  <div class="s-scroll-sections flex">
     <nav class="s-scroll-menu" v-if="menuItems.length > 0">
       <ul :style="computedStyles">
         <li class="s-scroll-item" v-for="item in menuItems" :key="item.section">
           <a
-            :href="!router ? '#' + item.section : null"
-            :class="{'active': item.section === activeSection}"
+            :href="!(router || item.disabled) ? '#' + item.section : null"
+            :class="{
+              'active': item.section === activeSection,
+              'disabled': item.disabled
+            }"
             @click="goTo(item.section)"
           >
             {{ item.title }}
@@ -155,6 +156,12 @@ export default class SScrollSections extends Vue {
         color: var(--s-menu-color-text-active);
         border-left: 2px solid var(--s-menu-color-text-active);
       }
+      &.disabled {
+        cursor: not-allowed;
+        pointer-events: none;
+        color: $color-neutral-inactive;
+        border-left: none;
+      }
     }
   }
 }

From 03b7ad39f747bad3aa12d63003edfde639e69061 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 15 Jul 2020 13:05:23 +0400
Subject: [PATCH 3/5] Add stories for scroll sections component

---
 package.json                                  |  2 ++
 .../ScrollSections/SScrollSections.vue        |  3 ++-
 .../SScrollSectionItem.stories.ts             | 23 +++++++++++++++++++
 .../ScrollSections/SScrollSections.stories.ts | 22 ++++++++++++++++++
 yarn.lock                                     | 10 ++++++++
 5 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 src/stories/ScrollSections/SScrollSectionItem.stories.ts
 create mode 100644 src/stories/ScrollSections/SScrollSections.stories.ts

diff --git a/package.json b/package.json
index 6a0abb70..ba63f08f 100644
--- a/package.json
+++ b/package.json
@@ -69,9 +69,11 @@
     "rollup-plugin-typescript2": "^0.25.2",
     "rollup-plugin-vue": "^5.1.4",
     "sass-loader": "^8.0.2",
+    "storybook-vue-router": "^1.0.7",
     "ts-jest": "^26.0.0",
     "typescript": "~3.8.3",
     "vue-cli-plugin-storybook": "~1.2.2",
+    "vue-router": "^3.3.4",
     "vue-template-compiler": "^2.6.11"
   },
   "postcss": {
diff --git a/src/components/ScrollSections/SScrollSections.vue b/src/components/ScrollSections/SScrollSections.vue
index 7a3eb2e4..d80dc2bb 100644
--- a/src/components/ScrollSections/SScrollSections.vue
+++ b/src/components/ScrollSections/SScrollSections.vue
@@ -24,6 +24,7 @@
 
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator'
+import VueRouter from 'vue-router'
 
 @Component
 export default class SScrollSections extends Vue {
@@ -48,7 +49,7 @@ export default class SScrollSections extends Vue {
   /**
    * `VueRouter` instance from `vue-router`. If it's null, then routing will be unavailable while scrolling.
    */
-  @Prop({ type: Object }) readonly router!: any
+  @Prop({ type: Object }) readonly router!: VueRouter
 
   menuItems: Vue[] = []
   activeSection = ''
diff --git a/src/stories/ScrollSections/SScrollSectionItem.stories.ts b/src/stories/ScrollSections/SScrollSectionItem.stories.ts
new file mode 100644
index 00000000..b713ab5a
--- /dev/null
+++ b/src/stories/ScrollSections/SScrollSectionItem.stories.ts
@@ -0,0 +1,23 @@
+import StoryRouter from 'storybook-vue-router'
+import { SScrollSectionItem, SScrollSections } from '../../components'
+
+export default {
+  component: SScrollSectionItem,
+  title: 'Design System/Scroll Sections/Scroll Section Item',
+  decorators: [StoryRouter({}, { initialEntry: '/' })]
+}
+
+export const defaultUsage = () => ({
+  components: { SScrollSections, SScrollSectionItem },
+  template: `<s-scroll-sections :router="this.$router">
+               <s-scroll-section-item
+                 v-for="index in 11"
+                 :key="index"
+                 :section="'section' + index"
+                 :title="'Section ' + index"
+                 :disabled="index % 2 === 0"
+               >
+                 <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?</p>
+               </s-scroll-section-item>
+             </s-scroll-sections>`
+})
diff --git a/src/stories/ScrollSections/SScrollSections.stories.ts b/src/stories/ScrollSections/SScrollSections.stories.ts
new file mode 100644
index 00000000..aa8e59a6
--- /dev/null
+++ b/src/stories/ScrollSections/SScrollSections.stories.ts
@@ -0,0 +1,22 @@
+import StoryRouter from 'storybook-vue-router'
+import { SScrollSectionItem, SScrollSections } from '../../components'
+
+export default {
+  component: SScrollSections,
+  title: 'Design System/Scroll Sections',
+  decorators: [StoryRouter({}, { initialEntry: '/' })]
+}
+
+export const defaultUsage = () => ({
+  components: { SScrollSections, SScrollSectionItem },
+  template: `<s-scroll-sections :router="this.$router">
+               <s-scroll-section-item
+                 v-for="index in 11"
+                 :key="index"
+                 :section="'section' + index"
+                 :title="'Section ' + index"
+               >
+                 <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?</p>
+               </s-scroll-section-item>
+             </s-scroll-sections>`
+})
diff --git a/yarn.lock b/yarn.lock
index 62a5f715..6881c4bb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14190,6 +14190,11 @@ store2@^2.7.1:
   resolved "https://registry.yarnpkg.com/store2/-/store2-2.11.2.tgz#a298e5e97b21b3ce7419b732540bc7c79cb007db"
   integrity sha512-TQMKs+C6n9idtzLpxluikmDCYiDJrTbbIGn9LFxMg0BVTu+8JZKSlXTWYRpOFKlfKD5HlDWLVpJJyNGZ2e9l1A==
 
+storybook-vue-router@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/storybook-vue-router/-/storybook-vue-router-1.0.7.tgz#366451212149d9d0a32557545b244667bb01768e"
+  integrity sha512-R+DYARQ40YVbMbV5moLDmQvodJX5FQPVy5cULb782P1gD5rAkulWtgt8yrM7pmjYru+LTPdLS4blrFPnWlb0sQ==
+
 stream-browserify@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"
@@ -15652,6 +15657,11 @@ vue-property-decorator@^8.4.1:
   dependencies:
     vue-class-component "^7.1.0"
 
+vue-router@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.3.4.tgz#4e38abc34a11c41b6c3d8244449a2e363ba6250b"
+  integrity sha512-SdKRBeoXUjaZ9R/8AyxsdTqkOfMcI5tWxPZOUX5Ie1BTL5rPSZ0O++pbiZCeYeythiZIdLEfkDiQPKIaWk5hDg==
+
 vue-runtime-helpers@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vue-runtime-helpers/-/vue-runtime-helpers-1.1.2.tgz#446b7b820888ab0c5264d2c3a32468e72e4100f3"

From c5792317626bebd7e1ca2ab181ba10d3e1d85a44 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 15 Jul 2020 20:22:17 +0400
Subject: [PATCH 4/5] Fix issues

---
 .../ScrollSections/SScrollSections.vue        | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/ScrollSections/SScrollSections.vue b/src/components/ScrollSections/SScrollSections.vue
index d80dc2bb..a897bf4b 100644
--- a/src/components/ScrollSections/SScrollSections.vue
+++ b/src/components/ScrollSections/SScrollSections.vue
@@ -59,8 +59,9 @@ export default class SScrollSections extends Vue {
       if (this.$children.length === 0) {
         return
       }
-      this.handleInitialState()
+      this.menuItems = this.$children
       window.addEventListener('scroll', this.handleScroll)
+      this.handleInitialState()
     })
   }
 
@@ -79,20 +80,19 @@ export default class SScrollSections extends Vue {
   }
 
   private handleInitialState (): void {
-    this.menuItems = this.$children
     if (this.router && this.router.currentRoute.hash) {
       this.menuItems.forEach((sectionComponent: any) => {
         if (this.router.currentRoute.hash === `#${sectionComponent.section}`) {
           (sectionComponent.$el as HTMLElement).scrollIntoView()
-          this.activeSection = sectionComponent.section
         }
       })
     } else if (window.scrollY <= (this.menuItems[0].$el as HTMLElement).offsetTop) {
       this.activeSection = (this.menuItems[0] as any).section
       this.menuItems[0].$el.classList.add('active')
-      if (this.router) {
-        this.router.push({ hash: `#${this.activeSection}` })
+      if (!this.router) {
+        return
       }
+      this.router.push({ hash: `#${this.activeSection}` })
     }
   }
 
@@ -115,12 +115,12 @@ export default class SScrollSections extends Vue {
   }
 
   goTo (section: string): void {
-    if (this.router && this.router.currentRoute.hash !== `#${section}`) {
-      this.router.push({ hash: `#${section}` })
-      this.activeSection = section
-      const component = this.menuItems.filter((component: any) => component.section === section)[0] as any
-      (component.$el as HTMLElement).scrollIntoView({ behavior: 'smooth' })
+    if (!this.router || this.router.currentRoute.hash === `#${section}`) {
+      return
     }
+    this.router.push({ hash: `#${section}` })
+    const component = this.menuItems.filter((component: any) => component.section === section)[0] as any
+    (component.$el as HTMLElement).scrollIntoView({ behavior: 'smooth' })
   }
 }
 </script>

From cb981c81737defe5937833a7f91238a8a055322d Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Mon, 20 Jul 2020 13:39:33 +0400
Subject: [PATCH 5/5] Fix boundary cases

---
 src/components/ScrollSections/SScrollSections.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/ScrollSections/SScrollSections.vue b/src/components/ScrollSections/SScrollSections.vue
index a897bf4b..9248319a 100644
--- a/src/components/ScrollSections/SScrollSections.vue
+++ b/src/components/ScrollSections/SScrollSections.vue
@@ -97,12 +97,15 @@ export default class SScrollSections extends Vue {
   }
 
   private handleScroll (): void {
-    const fromTop = window.scrollY
+    const fromTop = Math.round(window.scrollY)
     this.menuItems.forEach((sectionComponent, index) => {
       const section = sectionComponent.$el as HTMLElement
       const upperBound = section.offsetTop <= fromTop
       const lowerBound = section.offsetTop + section.offsetHeight > fromTop
-      if ((index === 0 && !upperBound) || (upperBound && lowerBound)) {
+      const underLowerBound = fromTop >= section.offsetTop + section.offsetHeight
+      if ((index === 0 && !upperBound) ||
+        (upperBound && lowerBound) ||
+        (index === this.menuItems.length - 1 && underLowerBound)) {
         this.activeSection = (sectionComponent as any).section
         section.classList.add('active')
         if (this.router && this.router.currentRoute.hash !== `#${this.activeSection}`) {