From 5cce4e583c1ecc8e4ca6c51e38fb8df2ea5274e7 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Tue, 11 Aug 2020 14:13:03 +0400
Subject: [PATCH 1/9] Add divider component

---
 src/components/Button/consts.ts           |  2 +-
 src/components/Checkbox/consts.ts         |  2 +-
 src/components/Divider/SDivider.vue       | 38 +++++++++++++++++++++++
 src/components/Divider/consts.ts          |  9 ++++++
 src/components/Divider/index.ts           |  3 ++
 src/components/Dropdown/consts.ts         |  2 +-
 src/components/Form/consts.ts             |  2 +-
 src/components/Layout/Container/consts.ts |  7 ++---
 src/components/Table/consts.ts            |  2 +-
 src/components/index.ts                   |  2 ++
 src/index.ts                              |  3 ++
 src/plugins/elementUI.ts                  |  2 ++
 src/types/components.ts                   |  1 +
 src/types/index.ts                        | 10 ++++++
 src/types/size.ts                         |  5 ---
 15 files changed, 76 insertions(+), 14 deletions(-)
 create mode 100644 src/components/Divider/SDivider.vue
 create mode 100644 src/components/Divider/consts.ts
 create mode 100644 src/components/Divider/index.ts
 create mode 100644 src/types/index.ts
 delete mode 100644 src/types/size.ts

diff --git a/src/components/Button/consts.ts b/src/components/Button/consts.ts
index 6105f843..78f1e9da 100644
--- a/src/components/Button/consts.ts
+++ b/src/components/Button/consts.ts
@@ -1,4 +1,4 @@
-import { Size } from '../../types/size'
+import { Size } from '../../types'
 
 export enum ButtonTypes {
   PRIMARY = 'primary',
diff --git a/src/components/Checkbox/consts.ts b/src/components/Checkbox/consts.ts
index 96554de5..f7d55fd0 100644
--- a/src/components/Checkbox/consts.ts
+++ b/src/components/Checkbox/consts.ts
@@ -1,3 +1,3 @@
-import { Size } from '../../types/size'
+import { Size } from '../../types'
 
 export const CheckboxSize = Size
diff --git a/src/components/Divider/SDivider.vue b/src/components/Divider/SDivider.vue
new file mode 100644
index 00000000..6517e44c
--- /dev/null
+++ b/src/components/Divider/SDivider.vue
@@ -0,0 +1,38 @@
+<template>
+  <el-divider :direction="direction" :content-position="contentPosition">
+    <slot></slot>
+  </el-divider>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+import { DividerDirection, ContentPosition } from './consts'
+
+@Component
+export default class SDivider extends Vue {
+  /**
+   * Divider direction property. Can be `"horizontal"` or `"vertical"`.
+   *
+   * By default it's set to `"horizontal"`
+   */
+  @Prop({ default: DividerDirection.HORIZONTAL, type: String }) readonly direction!: string
+  /**
+   * Position of the content. Can be `"left"`, `"right"` or `"center"`.
+   *
+   * By default it's set to `"center"`
+   */
+  @Prop({ default: ContentPosition.CENTER, type: String }) readonly contentPosition!: string
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables.scss";
+
+.el-divider {
+  background-color: #F5F5F5;
+}
+.el-divider--horizontal {
+  margin: 20px 0;
+}
+</style>
diff --git a/src/components/Divider/consts.ts b/src/components/Divider/consts.ts
new file mode 100644
index 00000000..10f7624d
--- /dev/null
+++ b/src/components/Divider/consts.ts
@@ -0,0 +1,9 @@
+import { Direction } from '../../types'
+
+export enum ContentPosition {
+  LEFT = 'left',
+  RIGHT = 'right',
+  CENTER = 'center'
+}
+
+export const DividerDirection = Direction
diff --git a/src/components/Divider/index.ts b/src/components/Divider/index.ts
new file mode 100644
index 00000000..7426c29d
--- /dev/null
+++ b/src/components/Divider/index.ts
@@ -0,0 +1,3 @@
+import SDivider from './SDivider.vue'
+
+export { SDivider }
diff --git a/src/components/Dropdown/consts.ts b/src/components/Dropdown/consts.ts
index c6d7fb5f..8fd34a23 100644
--- a/src/components/Dropdown/consts.ts
+++ b/src/components/Dropdown/consts.ts
@@ -1,4 +1,4 @@
-import { Size } from '../../types/size'
+import { Size } from '../../types'
 
 export enum DropdownType {
   DEFAULT = 'default',
diff --git a/src/components/Form/consts.ts b/src/components/Form/consts.ts
index 722d430f..0b7baf42 100644
--- a/src/components/Form/consts.ts
+++ b/src/components/Form/consts.ts
@@ -1,4 +1,4 @@
-import { Size } from '../../types/size'
+import { Size } from '../../types'
 
 export enum LabelPosition {
   LEFT = 'left',
diff --git a/src/components/Layout/Container/consts.ts b/src/components/Layout/Container/consts.ts
index 1865dc9b..fc6aae38 100644
--- a/src/components/Layout/Container/consts.ts
+++ b/src/components/Layout/Container/consts.ts
@@ -1,4 +1,3 @@
-export enum ContainerDirection {
-  VERTICAL = 'vertical',
-  HORIZONTAL = 'horizontal'
-}
+import { Direction } from '../../../types'
+
+export const ContainerDirection = Direction
diff --git a/src/components/Table/consts.ts b/src/components/Table/consts.ts
index ec3b1914..bb5ff572 100644
--- a/src/components/Table/consts.ts
+++ b/src/components/Table/consts.ts
@@ -1,4 +1,4 @@
-import { Size } from '../../types/size'
+import { Size } from '../../types'
 import { TooltipPlacement } from '../Tooltip'
 
 export enum ColumnType {
diff --git a/src/components/index.ts b/src/components/index.ts
index 16e8ad4e..4180e66b 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -11,6 +11,7 @@ import { SCol } from './Layout/Col'
 import { SCollapse, SCollapseItem } from './Collapse'
 import { SContainer } from './Layout/Container'
 import { SDialog } from './Dialog'
+import { SDivider } from './Divider'
 import { SDropdown, SDropdownItem } from './Dropdown'
 import { SFooter } from './Layout/Footer'
 import { SForm, SFormItem } from './Form'
@@ -37,6 +38,7 @@ export {
   SCollapseItem,
   SContainer,
   SDialog,
+  SDivider,
   SDropdown,
   SDropdownItem,
   SFooter,
diff --git a/src/index.ts b/src/index.ts
index 12c29690..e5f97622 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -14,6 +14,7 @@ import {
   SCollapseItem,
   SContainer,
   SDialog,
+  SDivider,
   SDropdown,
   SDropdownItem,
   SFooter,
@@ -51,6 +52,7 @@ const elements = [
   { component: SCollapseItem, name: Components.SCollapseItem },
   { component: SContainer, name: Components.SContainer },
   { component: SDialog, name: Components.SDialog },
+  { component: SDivider, name: Components.SDivider },
   { component: SDropdown, name: Components.SDropdown },
   { component: SDropdownItem, name: Components.SDropdownItem },
   { component: SFooter, name: Components.SFooter },
@@ -99,6 +101,7 @@ export {
   SCollapseItem,
   SContainer,
   SDialog,
+  SDivider,
   SDropdown,
   SDropdownItem,
   SFooter,
diff --git a/src/plugins/elementUI.ts b/src/plugins/elementUI.ts
index 8ffc0b74..aa090194 100644
--- a/src/plugins/elementUI.ts
+++ b/src/plugins/elementUI.ts
@@ -13,6 +13,7 @@ import {
   Container,
   DatePicker,
   Dialog,
+  Divider,
   Dropdown,
   DropdownItem,
   DropdownMenu,
@@ -53,6 +54,7 @@ Vue.use(BreadcrumbItem)
 Vue.use(Collapse)
 Vue.use(CollapseItem)
 Vue.use(Dialog)
+Vue.use(Divider)
 Vue.use(Footer)
 Vue.use(Menu)
 Vue.use(MenuItem)
diff --git a/src/types/components.ts b/src/types/components.ts
index ed91efee..91d0df47 100644
--- a/src/types/components.ts
+++ b/src/types/components.ts
@@ -12,6 +12,7 @@ export enum Components {
   SCollapseItem = 'SCollapseItem',
   SContainer = 'SContainer',
   SDialog = 'SDialog',
+  SDivider = 'SDivider',
   SDropdown = 'SDropdown',
   SDropdownItem = 'SDropdownItem',
   SFooter = 'SFooter',
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 00000000..70855221
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,10 @@
+export enum Size {
+  BIG = 'big',
+  MEDIUM = 'medium',
+  SMALL = 'small'
+}
+
+export enum Direction {
+  HORIZONTAL = 'horizontal',
+  VERTICAL = 'vertical'
+}
diff --git a/src/types/size.ts b/src/types/size.ts
deleted file mode 100644
index 4c1784de..00000000
--- a/src/types/size.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export enum Size {
-  BIG = 'big',
-  MEDIUM = 'medium',
-  SMALL = 'small'
-}

From b116354e20cdd21a3a4b8020ad212514907cc15b Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Tue, 11 Aug 2020 14:13:32 +0400
Subject: [PATCH 2/9] Add story for divider component

---
 src/stories/SDivider.stories.ts | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/stories/SDivider.stories.ts

diff --git a/src/stories/SDivider.stories.ts b/src/stories/SDivider.stories.ts
new file mode 100644
index 00000000..1c43f88a
--- /dev/null
+++ b/src/stories/SDivider.stories.ts
@@ -0,0 +1,33 @@
+import { withKnobs, select } from '@storybook/addon-knobs'
+
+import { SDivider, SRow } from '../components'
+import { DividerDirection, ContentPosition } from '../components/Divider/consts'
+
+export default {
+  component: SDivider,
+  title: 'Design System/Divider',
+  decorators: [withKnobs]
+}
+
+export const configurable = () => ({
+  components: { SRow, SDivider },
+  template: `<s-row class="flex" style="flex: 1; flex-direction: column;">
+               <span>First text paragraph</span>
+               <s-divider
+                 :style="direction === 'vertical' ? { height: '56px' } : {}"
+                 :direction="direction"
+                 :content-position="contentPosition"
+               >
+                 Content between divider
+               </s-divider>
+               <span>Second text paragraph</span>
+             </s-row>`,
+  props: {
+    direction: {
+      default: select('Direction', Object.values(DividerDirection), DividerDirection.HORIZONTAL)
+    },
+    contentPosition: {
+      default: select('Content position', Object.values(ContentPosition), ContentPosition.CENTER)
+    }
+  }
+})

From 55ac70748dc202540d3a25ed94e4f3f227816830 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Fri, 14 Aug 2020 13:35:08 +0400
Subject: [PATCH 3/9] Fix breaking rule for words in dialog component

---
 src/components/Dialog/SDialog.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/Dialog/SDialog.vue b/src/components/Dialog/SDialog.vue
index 4c933ba3..a40d0c01 100644
--- a/src/components/Dialog/SDialog.vue
+++ b/src/components/Dialog/SDialog.vue
@@ -168,5 +168,8 @@ export default class SDialog extends Vue {
     font-size: 16px;
     color: $color-basic-black;
   }
+  > * {
+    word-break: break-word;
+  }
 }
 </style>

From a17826f4fea5812162a713ea5c47ca0606a87ef3 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Fri, 14 Aug 2020 14:26:57 +0400
Subject: [PATCH 4/9] Add divider prop for scroll section component

---
 .../ScrollSections/SScrollSectionItem.vue      | 18 ++++++++++++++++--
 .../ScrollSections/SScrollSections.vue         | 12 ++++++++++--
 .../SScrollSectionItem.stories.ts              |  1 +
 .../ScrollSections/SScrollSections.stories.ts  | 13 ++++++++++---
 4 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/components/ScrollSections/SScrollSectionItem.vue b/src/components/ScrollSections/SScrollSectionItem.vue
index 43406972..68c9dceb 100644
--- a/src/components/ScrollSections/SScrollSectionItem.vue
+++ b/src/components/ScrollSections/SScrollSectionItem.vue
@@ -3,13 +3,18 @@
     <span v-if="title" class="title">{{ title }}</span>
     <slot v-if="this.$slots.title && !title" name="title"></slot>
     <slot></slot>
+    <s-divider v-if="withDivider" style="margin: 20px 0 0 0;"></s-divider>
   </section>
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Vue, Component, Prop, Inject } from 'vue-property-decorator'
 
-@Component
+import { SDivider } from '../Divider'
+
+@Component({
+  components: { SDivider }
+})
 export default class SScrollSectionItem extends Vue {
   /**
    * Required section property of scroll section item. It should be unique.
@@ -28,6 +33,12 @@ export default class SScrollSectionItem extends Vue {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
+
+  @Inject({ default: '', from: 'sScrollSections' }) sScrollSections
+
+  get withDivider (): boolean {
+    return this.sScrollSections?.withDivider
+  }
 }
 </script>
 
@@ -39,6 +50,9 @@ export default class SScrollSectionItem extends Vue {
   }
   &:last-child {
     margin-bottom: 10px;
+    .el-divider.el-divider--horizontal {
+      height: 0;
+    }
   }
   .title {
     font-weight: bold;
diff --git a/src/components/ScrollSections/SScrollSections.vue b/src/components/ScrollSections/SScrollSections.vue
index 18ec3e78..b8422df1 100644
--- a/src/components/ScrollSections/SScrollSections.vue
+++ b/src/components/ScrollSections/SScrollSections.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Vue, Component, Prop, Provide } from 'vue-property-decorator'
 import VueRouter from 'vue-router'
 
 @Component
@@ -75,7 +75,15 @@ export default class SScrollSections extends Vue {
    *
    * `{ menu: 1, sections: 2 }` by default
    */
-  @Prop({ type: Object, default: { menu: 1, sections: 2 } }) readonly flexSize!: any
+  @Prop({ type: Object, default: () => ({ menu: 1, sections: 2 }) }) readonly flexSize!: any
+  /**
+   * Will dividers be displayed.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly withDivider!: boolean
+
+  @Provide('sScrollSections') sScrollSections = this
 
   menuItems: Vue[] = []
   activeSection = ''
diff --git a/src/stories/ScrollSections/SScrollSectionItem.stories.ts b/src/stories/ScrollSections/SScrollSectionItem.stories.ts
index b713ab5a..db980f2c 100644
--- a/src/stories/ScrollSections/SScrollSectionItem.stories.ts
+++ b/src/stories/ScrollSections/SScrollSectionItem.stories.ts
@@ -1,4 +1,5 @@
 import StoryRouter from 'storybook-vue-router'
+
 import { SScrollSectionItem, SScrollSections } from '../../components'
 
 export default {
diff --git a/src/stories/ScrollSections/SScrollSections.stories.ts b/src/stories/ScrollSections/SScrollSections.stories.ts
index aa8e59a6..1607c1c8 100644
--- a/src/stories/ScrollSections/SScrollSections.stories.ts
+++ b/src/stories/ScrollSections/SScrollSections.stories.ts
@@ -1,15 +1,17 @@
+import { boolean, withKnobs } from '@storybook/addon-knobs'
 import StoryRouter from 'storybook-vue-router'
+
 import { SScrollSectionItem, SScrollSections } from '../../components'
 
 export default {
   component: SScrollSections,
   title: 'Design System/Scroll Sections',
-  decorators: [StoryRouter({}, { initialEntry: '/' })]
+  decorators: [StoryRouter({}, { initialEntry: '/' }), withKnobs]
 }
 
 export const defaultUsage = () => ({
   components: { SScrollSections, SScrollSectionItem },
-  template: `<s-scroll-sections :router="this.$router">
+  template: `<s-scroll-sections :router="this.$router" :with-divider="withDivider">
                <s-scroll-section-item
                  v-for="index in 11"
                  :key="index"
@@ -18,5 +20,10 @@ export const defaultUsage = () => ({
                >
                  <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>`
+             </s-scroll-sections>`,
+  props: {
+    withDivider: {
+      default: boolean('With Divider', false)
+    }
+  }
 })

From e5ad2ef2f7df594e2f47009692e7387b2e6bb32c Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Fri, 14 Aug 2020 14:29:43 +0400
Subject: [PATCH 5/9] Fix issues

---
 src/components/ScrollSections/SScrollSectionItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ScrollSections/SScrollSectionItem.vue b/src/components/ScrollSections/SScrollSectionItem.vue
index 68c9dceb..915db4dc 100644
--- a/src/components/ScrollSections/SScrollSectionItem.vue
+++ b/src/components/ScrollSections/SScrollSectionItem.vue
@@ -37,7 +37,7 @@ export default class SScrollSectionItem extends Vue {
   @Inject({ default: '', from: 'sScrollSections' }) sScrollSections
 
   get withDivider (): boolean {
-    return this.sScrollSections?.withDivider
+    return !!(this.sScrollSections || {}).withDivider
   }
 }
 </script>

From 0b819f6530da77f12fea020f4c7c64f16ad0a2a3 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Fri, 14 Aug 2020 15:12:39 +0400
Subject: [PATCH 6/9] Add borders prop for Collapse component

---
 src/components/Collapse/SCollapse.vue     | 19 ++++++++++++++++++-
 src/components/Collapse/SCollapseItem.vue | 18 +++++++++++++++++-
 src/stories/Collapse/SCollapse.stories.ts |  5 ++++-
 3 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/components/Collapse/SCollapse.vue b/src/components/Collapse/SCollapse.vue
index d1feb8db..296779b9 100644
--- a/src/components/Collapse/SCollapse.vue
+++ b/src/components/Collapse/SCollapse.vue
@@ -2,6 +2,7 @@
   <el-collapse
     :value="value"
     :accordion="accordion"
+    :style="computedStyles"
     @change="handleChange"
   >
     <slot></slot>
@@ -9,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Vue, Component, Prop, Provide } from 'vue-property-decorator'
 
 @Component
 export default class SCollapse extends Vue {
@@ -23,6 +24,22 @@ export default class SCollapse extends Vue {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly accordion!: boolean
+  /**
+   * Will borders be shown.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly withBorders!: boolean
+
+  @Provide('sCollapse') sCollapse = this
+
+  get computedStyles (): object {
+    const styles = {} as any
+    if (!this.withBorders) {
+      styles.border = 'none'
+    }
+    return styles
+  }
 
   handleChange (activeNames: string | number | Array<string | number>): void {
     this.$emit('change', activeNames)
diff --git a/src/components/Collapse/SCollapseItem.vue b/src/components/Collapse/SCollapseItem.vue
index c55719ad..c53efa32 100644
--- a/src/components/Collapse/SCollapseItem.vue
+++ b/src/components/Collapse/SCollapseItem.vue
@@ -3,6 +3,7 @@
     :title="title"
     :name="name"
     :disabled="disabled"
+    :class="computedClasses"
   >
     <slot slot="title" name="title"></slot>
     <slot></slot>
@@ -10,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Vue, Component, Prop, Inject } from 'vue-property-decorator'
 
 @Component
 export default class SCollapseItem extends Vue {
@@ -28,6 +29,16 @@ export default class SCollapseItem extends Vue {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
+
+  @Inject({ default: '', from: 'sCollapse' }) sCollapse
+
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (!(this.sCollapse || {}).withBorders) {
+      cssClasses.push('without-border')
+    }
+    return cssClasses
+  }
 }
 </script>
 
@@ -35,6 +46,11 @@ export default class SCollapseItem extends Vue {
 @import "../../styles/variables.scss";
 // @import "../../styles/icons.scss";
 
+.without-border .el-collapse-item__ {
+  &wrap, &header {
+    border: none;
+  }
+}
 .el-collapse-item__ {
   &wrap {
     border-bottom-color: $color-neutral-hover;
diff --git a/src/stories/Collapse/SCollapse.stories.ts b/src/stories/Collapse/SCollapse.stories.ts
index fdc90126..d7506470 100644
--- a/src/stories/Collapse/SCollapse.stories.ts
+++ b/src/stories/Collapse/SCollapse.stories.ts
@@ -10,7 +10,7 @@ export default {
 
 export const configurable = () => ({
   components: { SCollapse, SCollapseItem },
-  template: `<s-collapse :accordion="accordion" @change="handleChange" style="flex: 1;">
+  template: `<s-collapse :accordion="accordion" :with-borders="withBorders" @change="handleChange" style="flex: 1;">
                <s-collapse-item title="Consistency" name="1">
                  <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
                  <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
@@ -32,6 +32,9 @@ export const configurable = () => ({
   props: {
     accordion: {
       default: boolean('Accordion', false)
+    },
+    withBorders: {
+      default: boolean('With Borders', true)
     }
   },
   methods: {

From a2d3abfd38edfcc77aeaf72cb45293936cc6468a Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Fri, 14 Aug 2020 16:02:59 +0400
Subject: [PATCH 7/9] Fix border color for collapse component

---
 src/components/Collapse/SCollapse.vue     | 4 ++--
 src/components/Collapse/SCollapseItem.vue | 9 +++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/Collapse/SCollapse.vue b/src/components/Collapse/SCollapse.vue
index 296779b9..08f6f736 100644
--- a/src/components/Collapse/SCollapse.vue
+++ b/src/components/Collapse/SCollapse.vue
@@ -51,7 +51,7 @@ export default class SCollapse extends Vue {
 @import "../../styles/variables.scss";
 
 .el-collapse {
-  border-top-color: $color-neutral-hover;
-  border-bottom-color: $color-neutral-hover;
+  border-top-color: #F5F5F5;
+  border-bottom-color: #F5F5F5;
 }
 </style>
diff --git a/src/components/Collapse/SCollapseItem.vue b/src/components/Collapse/SCollapseItem.vue
index c53efa32..1864efd4 100644
--- a/src/components/Collapse/SCollapseItem.vue
+++ b/src/components/Collapse/SCollapseItem.vue
@@ -46,18 +46,19 @@ export default class SCollapseItem extends Vue {
 @import "../../styles/variables.scss";
 // @import "../../styles/icons.scss";
 
-.without-border .el-collapse-item__ {
-  &wrap, &header {
+.without-border {
+  > div > .el-collapse-item__header,
+  > .el-collapse-item__wrap {
     border: none;
   }
 }
 .el-collapse-item__ {
   &wrap {
-    border-bottom-color: $color-neutral-hover;
+    border-bottom-color: #F5F5F5;
   }
   &header {
     color: $color-basic-black;
-    border-bottom-color: $color-neutral-hover;
+    border-bottom-color: #F5F5F5;
     &.is-active {
       border-bottom-color: transparent;
     }

From 34766735cab316d511cdc1d78571481520d9ba77 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Mon, 17 Aug 2020 10:52:02 +0400
Subject: [PATCH 8/9] Add without padding property for Collapse component

---
 src/components/Collapse/SCollapseItem.vue         | 12 ++++++++++++
 src/components/Layout/Header/SHeader.vue          |  1 +
 src/components/ScrollSections/SScrollSections.vue |  4 ++++
 3 files changed, 17 insertions(+)

diff --git a/src/components/Collapse/SCollapseItem.vue b/src/components/Collapse/SCollapseItem.vue
index 1864efd4..bd66155f 100644
--- a/src/components/Collapse/SCollapseItem.vue
+++ b/src/components/Collapse/SCollapseItem.vue
@@ -29,6 +29,12 @@ export default class SCollapseItem extends Vue {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
+  /**
+   * Will bottom padding be hidden.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly withoutPadding!: boolean
 
   @Inject({ default: '', from: 'sCollapse' }) sCollapse
 
@@ -37,6 +43,9 @@ export default class SCollapseItem extends Vue {
     if (!(this.sCollapse || {}).withBorders) {
       cssClasses.push('without-border')
     }
+    if (this.withoutPadding) {
+      cssClasses.push('without-padding')
+    }
     return cssClasses
   }
 }
@@ -52,6 +61,9 @@ export default class SCollapseItem extends Vue {
     border: none;
   }
 }
+.without-padding > .el-collapse-item__wrap > .el-collapse-item__content {
+  padding-bottom: 0;
+}
 .el-collapse-item__ {
   &wrap {
     border-bottom-color: #F5F5F5;
diff --git a/src/components/Layout/Header/SHeader.vue b/src/components/Layout/Header/SHeader.vue
index 2715d822..8fb34577 100644
--- a/src/components/Layout/Header/SHeader.vue
+++ b/src/components/Layout/Header/SHeader.vue
@@ -24,5 +24,6 @@ export default class SHeader extends Vue {
   padding: 12px;
   box-shadow: 0px 0px 8px rgba(45, 41, 38, 0.2);
   font-size: 18px;
+  z-index: 1;
 }
 </style>
diff --git a/src/components/ScrollSections/SScrollSections.vue b/src/components/ScrollSections/SScrollSections.vue
index b8422df1..fe3bc35f 100644
--- a/src/components/ScrollSections/SScrollSections.vue
+++ b/src/components/ScrollSections/SScrollSections.vue
@@ -237,5 +237,9 @@ export default class SScrollSections extends Vue {
 }
 .s-scroll-content {
   padding-bottom: 90%;
+  color: $color-basic-black;
+  .title {
+    font-size: 16px;
+  }
 }
 </style>

From beca01885d0616f667b18d2c870646833b416fd7 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Tue, 18 Aug 2020 14:01:58 +0400
Subject: [PATCH 9/9] Rename withBorders -> borders

---
 src/components/Collapse/SCollapse.vue     | 4 ++--
 src/components/Collapse/SCollapseItem.vue | 2 +-
 src/stories/Collapse/SCollapse.stories.ts | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Collapse/SCollapse.vue b/src/components/Collapse/SCollapse.vue
index 08f6f736..7d16c283 100644
--- a/src/components/Collapse/SCollapse.vue
+++ b/src/components/Collapse/SCollapse.vue
@@ -29,13 +29,13 @@ export default class SCollapse extends Vue {
    *
    * `false` by default
    */
-  @Prop({ default: false, type: Boolean }) readonly withBorders!: boolean
+  @Prop({ default: false, type: Boolean }) readonly borders!: boolean
 
   @Provide('sCollapse') sCollapse = this
 
   get computedStyles (): object {
     const styles = {} as any
-    if (!this.withBorders) {
+    if (!this.borders) {
       styles.border = 'none'
     }
     return styles
diff --git a/src/components/Collapse/SCollapseItem.vue b/src/components/Collapse/SCollapseItem.vue
index bd66155f..bc1ad26f 100644
--- a/src/components/Collapse/SCollapseItem.vue
+++ b/src/components/Collapse/SCollapseItem.vue
@@ -40,7 +40,7 @@ export default class SCollapseItem extends Vue {
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
-    if (!(this.sCollapse || {}).withBorders) {
+    if (!(this.sCollapse || {}).borders) {
       cssClasses.push('without-border')
     }
     if (this.withoutPadding) {
diff --git a/src/stories/Collapse/SCollapse.stories.ts b/src/stories/Collapse/SCollapse.stories.ts
index d7506470..fb86361b 100644
--- a/src/stories/Collapse/SCollapse.stories.ts
+++ b/src/stories/Collapse/SCollapse.stories.ts
@@ -10,7 +10,7 @@ export default {
 
 export const configurable = () => ({
   components: { SCollapse, SCollapseItem },
-  template: `<s-collapse :accordion="accordion" :with-borders="withBorders" @change="handleChange" style="flex: 1;">
+  template: `<s-collapse :accordion="accordion" :borders="borders" @change="handleChange" style="flex: 1;">
                <s-collapse-item title="Consistency" name="1">
                  <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
                  <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
@@ -33,8 +33,8 @@ export const configurable = () => ({
     accordion: {
       default: boolean('Accordion', false)
     },
-    withBorders: {
-      default: boolean('With Borders', true)
+    borders: {
+      default: boolean('Borders', true)
     }
   },
   methods: {