Scroll sections implementation

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": {

src/components/ScrollSections/SScrollSectionItem.vue

@@ -0,0 +1,49 @@
+<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. 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>
+
+<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>

src/components/ScrollSections/SScrollSections.vue

@@ -0,0 +1,175 @@
+<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.disabled) ? '#' + item.section : null"
+            :class="{
+              'active': item.section === activeSection,
+              'disabled': item.disabled
+            }"
+            @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'
+import VueRouter from 'vue-router'
+
+@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!: VueRouter
+
+  menuItems: Vue[] = []
+  activeSection = ''
+
+  mounted (): void {
+    this.$nextTick(() => {
+      if (this.$children.length === 0) {
+        return
+      }
+      this.menuItems = this.$children
+      window.addEventListener('scroll', this.handleScroll)
+      this.handleInitialState()
+    })
+  }
+
+  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 {
+    if (this.router && this.router.currentRoute.hash) {
+      this.menuItems.forEach((sectionComponent: any) => {
+        if (this.router.currentRoute.hash === `#${sectionComponent.section}`) {
+          (sectionComponent.$el as HTMLElement).scrollIntoView()
+        }
+      })
+    } 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) {
+        return
+      }
+      this.router.push({ hash: `#${this.activeSection}` })
+    }
+  }
+
+  private handleScroll (): void {
+    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
+      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}`) {
+          this.router.push({ hash: `#${this.activeSection}` })
+        }
+      } else {
+        section.classList.remove('active')
+      }
+    })
+  }
+
+  goTo (section: string): void {
+    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>
+
+<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);
+      }
+      &.disabled {
+        cursor: not-allowed;
+        pointer-events: none;
+        color: $color-neutral-inactive;
+        border-left: none;
+      }
+    }
+  }
+}
+.s-scroll-content {
+  flex: 2;
+}
+</style>

src/components/ScrollSections/index.ts

@@ -0,0 +1,4 @@
+import SScrollSectionItem from './SScrollSectionItem.vue'
+import SScrollSections from './SScrollSections.vue'
+
+export { SScrollSectionItem, SScrollSections }

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
 }

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
 }

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>`
+})

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>`
+})

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'
 }

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"