Collapse components

src/components/Collapse/SCollapse.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-collapse
+    :value="value"
+    :accordion="accordion"
+    @change="handleChange"
+  >
+    <slot></slot>
+  </el-collapse>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+@Component
+export default class SCollapse extends Vue {
+  /**
+   * Value of the collapse component. Can be `string / number / Array (non-accordion mode)`
+   */
+  @Prop() readonly value!: string | number | Array<string | number>
+  /**
+   * Accordion mode of the collapse component.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly accordion!: boolean
+
+  handleChange (activeNames: string | number | Array<string | number>): void {
+    this.$emit('change', activeNames)
+  }
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables.scss";
+
+.el-collapse {
+  border-top-color: $color-neutral-hover;
+  border-bottom-color: $color-neutral-hover;
+}
+</style>

src/components/Collapse/SCollapseItem.vue

@@ -0,0 +1,70 @@
+<template>
+  <el-collapse-item
+    :title="title"
+    :name="name"
+    :disabled="disabled"
+  >
+    <slot slot="title" name="title"></slot>
+    <slot></slot>
+  </el-collapse-item>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+@Component
+export default class SCollapseItem extends Vue {
+  /**
+   * Title for the panel of collapse item. Slot `title` can be used as well
+   */
+  @Prop({ default: '', type: String }) readonly title!: string
+  /**
+   * Unique identification for the panel of the collapse item. It can be `string/number`
+   */
+  @Prop() readonly name!: string | number
+  /**
+   * Disable state of the collapse item.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables.scss";
+@import "../../styles/icons.scss";
+
+.el-collapse-item__ {
+  &wrap {
+    border-bottom-color: $color-neutral-hover;
+  }
+  &header {
+    color: $color-basic-black;
+    border-bottom-color: $color-neutral-hover;
+    &.is-active {
+      border-bottom-color: transparent;
+    }
+    .el-icon-arrow-right {
+      @extend .s-icon-arrow-top;
+      padding: 8px;
+      width: 32px;
+      height: 32px;
+      background-color: $color-neutral-placeholder;
+      border-radius: 50%;
+      &::before {
+        content: '';
+      }
+      &.is-active {
+        transform: rotate(180deg);
+      }
+    }
+  }
+  &content {
+    color: $color-basic-black;
+  }
+}
+.el-collapse-item.is-disabled .el-collapse-item__header {
+  color: $color-neutral-inactive;
+}
+</style>

src/components/Collapse/index.ts

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

src/components/Dropdown/SDropdown.vue

@@ -45,8 +45,7 @@ import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
 import { ElDropdown } from 'element-ui/types/dropdown'
 
 import { DropdownType, DropdownSize, DropdownPlacement, DropdownTrigger } from './consts'
-import { ButtonTypes } from '../Button'
-import { SButton } from '../../components'
+import { ButtonTypes, SButton } from '../Button'
 
 @Component({
   components: {

src/components/Layout/App/SApp.vue

@@ -7,6 +7,7 @@
       <s-header v-if="this.$slots.header">
         <slot name="header" />
       </s-header>
+      <slot></slot>
       <s-main v-if="this.$slots.main">
         <slot name="main" />
       </s-main>

src/components/index.ts

@@ -7,6 +7,7 @@ import { SButton, SButtonGroup } from './Button'
 import { SCard } from './Card'
 import { SCheckbox } from './Checkbox'
 import { SCol } from './Layout/Col'
+import { SCollapse, SCollapseItem } from './Collapse'
 import { SContainer } from './Layout/Container'
 import { SDropdown, SDropdownItem } from './Dropdown'
 import { SFooter } from './Layout/Footer'
@@ -27,6 +28,8 @@ export {
   SCard,
   SCheckbox,
   SCol,
+  SCollapse,
+  SCollapseItem,
   SContainer,
   SDropdown,
   SDropdownItem,

src/index.ts

@@ -8,6 +8,8 @@ import {
   SCard,
   SCheckbox,
   SCol,
+  SCollapse,
+  SCollapseItem,
   SContainer,
   SFooter,
   SForm,
@@ -35,6 +37,8 @@ const elements = [
   { component: SCard, name: Components.SCard },
   { component: SCheckbox, name: Components.SCheckbox },
   { component: SCol, name: Components.SCol },
+  { component: SCollapse, name: Components.SCollapse },
+  { component: SCollapseItem, name: Components.SCollapseItem },
   { component: SContainer, name: Components.SContainer },
   { component: SFooter, name: Components.SFooter },
   { component: SForm, name: Components.SForm },
@@ -71,6 +75,8 @@ export {
   SCard,
   SCheckbox,
   SCol,
+  SCollapse,
+  SCollapseItem,
   SContainer,
   SFooter,
   SForm,

src/plugins/elementUI.ts

@@ -6,6 +6,8 @@ import {
   ButtonGroup,
   Card,
   Checkbox,
+  Collapse,
+  CollapseItem,
   Container,
   DatePicker,
   Dialog,
@@ -44,6 +46,8 @@ import {
 // import lang from 'element-ui/lib/locale/lang/en'
 // import locale from 'element-ui/lib/locale'
 
+Vue.use(Collapse)
+Vue.use(CollapseItem)
 Vue.use(Dialog)
 Vue.use(Footer)
 Vue.use(Menu)

src/stories/Collapse/SCollapse.stories.ts

@@ -0,0 +1,42 @@
+import { withKnobs, boolean } from '@storybook/addon-knobs'
+
+import { SCollapse, SCollapseItem } from '../../components'
+
+export default {
+  component: SCollapse,
+  title: 'Design System/Collapse',
+  decorators: [withKnobs]
+}
+
+export const configurable = () => ({
+  components: { SCollapse, SCollapseItem },
+  template: `<s-collapse :accordion="accordion" @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>
+               </s-collapse-item>
+               <s-collapse-item title="Feedback" name="2">
+                 <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
+                 <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
+               </s-collapse-item>
+               <s-collapse-item title="Efficiency" name="3">
+                 <div>Simplify the process: keep operating process simple and intuitive;</div>
+                 <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
+                 <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
+               </s-collapse-item>
+               <s-collapse-item title="Controllability" name="4">
+                 <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
+                 <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
+               </s-collapse-item>
+             </s-collapse>`,
+  props: {
+    accordion: {
+      default: boolean('Accordion', false)
+    }
+  },
+  methods: {
+    handleChange: (activeNames: string | number | Array<string | number>) => {
+      console.log(activeNames)
+    }
+  }
+})

src/stories/Collapse/SCollapseItem.stories.ts

@@ -0,0 +1,30 @@
+import { withKnobs, boolean, text } from '@storybook/addon-knobs'
+
+import { SCollapse, SCollapseItem } from '../../components'
+
+export default {
+  component: SCollapseItem,
+  title: 'Design System/Collapse/Collapse Item',
+  decorators: [withKnobs]
+}
+
+export const configurable = () => ({
+  components: { SCollapse, SCollapseItem },
+  template: `<s-collapse style="flex: 1;">
+               <s-collapse-item :title="title" :name="name" :disabled="disabled">
+                 <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>
+               </s-collapse-item>
+             </s-collapse>`,
+  props: {
+    title: {
+      default: text('Title', 'Consistency')
+    },
+    name: {
+      default: text('Name', '1')
+    },
+    disabled: {
+      default: boolean('Disabled', false)
+    }
+  }
+})

src/styles/icons.scss

@@ -64,4 +64,10 @@
     background-repeat: no-repeat;
     background-position: 2px center;
   }
+
+  &arrow-top {
+    background-image: url('~@/assets/icons/arrow-top.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+  }
 }

src/types/components.ts

@@ -6,6 +6,8 @@ export enum Components {
   SCard = 'SCard',
   SCheckbox = 'SCheckbox',
   SCol= 'SCol',
+  SCollapse = 'SCollapse',
+  SCollapseItem = 'SCollapseItem',
   SContainer = 'SContainer',
   SFooter = 'SFooter',
   SForm = 'SForm',