Release 0.2.8

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"

src/components/Button/SButton.vue

@@ -13,7 +13,7 @@
       :icon="elementIcon"
       @click="handleClick"
     >
-      <i v-if="availableIcon" :class="[availableIcon]"></i>
+      <s-icon v-if="availableIcon" :name="availableIcon" />
       <slot></slot>
     </el-button>
   </s-tooltip>
@@ -24,11 +24,12 @@ import { Vue, Component, Prop, Inject } from 'vue-property-decorator'
 import { ElForm } from 'element-ui/types/form'
 import { ElFormItem } from 'element-ui/types/form-item'
 
+import { SIcon } from '../Icon'
 import { STooltip } from '../Tooltip'
 import { ButtonTypes, ButtonSize, ButtonNativeTypes } from './consts'
 
 @Component({
-  components: { STooltip }
+  components: { SIcon, STooltip }
 })
 export default class SButton extends Vue {
   readonly ButtonTypes = ButtonTypes
@@ -138,9 +139,8 @@ export default class SButton extends Vue {
       this.elementIcon = this.icon
       return ''
     }
-    // TODO: add checks for invalid icons
     this.elementIcon = ''
-    return `s-icon-${this.icon}`
+    return this.icon
   }
 
   get isLoading (): boolean {
@@ -235,31 +235,60 @@ export default class SButton extends Vue {
 .action {
   &.big {
     width: $size-big;
+    i {
+      font-size: 20px;
+    }
   }
   &.medium {
     width: $size-medium;
+    i {
+      font-size: 18px;
+    }
   }
   &.small {
     width: $size-small;
+    i {
+      font-size: 16px;
+      margin-left: -2px;
+      margin-top: -2px;
+    }
   }
+  color: $color-basic-black;
   background-color: $color-neutral-placeholder;
   border-color: $color-neutral-placeholder;
   &:hover, &:active, &:focus, &:disabled, &:disabled:hover {
+    color: $color-basic-black;
     background-color: $color-neutral-hover;
     border-color: $color-neutral-hover;
   }
+  &:disabled, &:disabled:hover {
+    color: $color-neutral-inactive;
+  }
   &.alternative {
     background-color: $color-basic-white;
     border-color: $color-neutral-border;
     &:hover, &:active, &:focus, &:disabled, &:disabled:hover {
+      color: $color-basic-black;
       background-color: $color-neutral-placeholder;
       border-color: $color-neutral-placeholder;
     }
+    &:disabled, &:disabled:hover {
+      color: $color-neutral-inactive;
+    }
   }
 }
 
-button > span > i {
-  top: -10px;
-  left: -10px;
+button {
+  > span > i {
+    &[class^=s-icon-], &[class^=el-icon-] {
+      display: inline-block;
+      color: inherit;
+    }
+  }
+  &:not(.action) > span > i {
+    &[class^=s-icon-], &[class^=el-icon-] {
+      margin-right: 6px;
+    }
+  }
 }
 </style>

src/components/Button/consts.ts

@@ -1,4 +1,4 @@
-import { Size } from '../../types/size'
+import { Size } from '../../types'
 
 export enum ButtonTypes {
   PRIMARY = 'primary',

src/components/Checkbox/consts.ts

@@ -1,3 +1,3 @@
-import { Size } from '../../types/size'
+import { Size } from '../../types'
 
 export const CheckboxSize = Size

src/components/Collapse/SCollapse.vue

@@ -2,14 +2,15 @@
   <el-collapse
     :value="value"
     :accordion="accordion"
+    :style="computedStyles"
     @change="handleChange"
   >
     <slot></slot>
   </el-collapse>
 </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 borders!: boolean
+
+  @Provide('sCollapse') sCollapse = this
+
+  get computedStyles (): object {
+    const styles = {} as any
+    if (!this.borders) {
+      styles.border = 'none'
+    }
+    return styles
+  }
 
   handleChange (activeNames: string | number | Array<string | number>): void {
     this.$emit('change', activeNames)
@@ -34,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>

src/components/Collapse/SCollapseItem.vue

@@ -3,14 +3,15 @@
     :title="title"
     :name="name"
     :disabled="disabled"
+    :class="computedClasses"
   >
     <slot slot="title" name="title"></slot>
     <slot></slot>
   </el-collapse-item>
 </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,41 +29,62 @@ 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
+
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (!(this.sCollapse || {}).borders) {
+      cssClasses.push('without-border')
+    }
+    if (this.withoutPadding) {
+      cssClasses.push('without-padding')
+    }
+    return cssClasses
+  }
 }
 </script>
 
 <style lang="scss">
 @import "../../styles/variables.scss";
-// @import "../../styles/icons.scss";
+@import "../../styles/icons.scss";
 
+.without-border {
+  > div > .el-collapse-item__header,
+  > .el-collapse-item__wrap {
+    border: none;
+  }
+}
+.without-padding > .el-collapse-item__wrap > .el-collapse-item__content {
+  padding-bottom: 0;
+}
 .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;
     }
-    // TODO: fix it. @extend doesn't work in the current implementation
     .el-icon-arrow-right {
-      // @extend .s-icon-arrow-top;
-      padding: 10px;
-      // padding: 8px;
+      font-family: 'soramitsu-icons' !important;
+      @extend .s-icon-chevron-top;
+      font-size: 16px;
+      padding: 8px;
       width: 32px;
       height: 32px;
       background-color: $color-neutral-placeholder;
       border-radius: 50%;
-      &::before {
-        // content: '';
-        color: $color-basic-black; // TODO: remove these lines
-        font-weight: bold;
-      }
-      transform: rotate(90deg); // TODO: remove it
       &.is-active {
-        // transform: rotate(180deg);
-        transform: rotate(270deg);
+        transform: rotate(180deg);
       }
     }
   }

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>