PSS-211: Design System: Button: add icon position prop

package.json

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

src/components/Button/SButton.vue

@@ -13,8 +13,9 @@
       :icon="elementIcon"
       @click="handleClick"
     >
-      <s-icon v-if="availableIcon" :name="availableIcon" />
+      <s-icon v-if="availableIcon && iconPosition === IconPosition.LEFT" :name="availableIcon" />
       <slot></slot>
+      <s-icon v-if="availableIcon && iconPosition === IconPosition.RIGHT" :name="availableIcon" />
     </el-button>
   </s-tooltip>
 </template>
@@ -29,12 +30,13 @@ import SizeMixin from '../../mixins/SizeMixin'
 import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { SIcon } from '../Icon'
 import { STooltip, TooltipPlacement } from '../Tooltip'
-import { ButtonTypes, ButtonNativeTypes } from './consts'
+import { ButtonTypes, ButtonNativeTypes, ButtonIconPosition } from './consts'
 
 @Component({
   components: { SIcon, STooltip }
 })
 export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin) {
+  readonly IconPosition = ButtonIconPosition
   readonly ButtonTypes = ButtonTypes
   /**
    * Type of button. Possible values: `"primary"`, `"secondary"`, `"tertiary"`, `"action"`, `"link"`.
@@ -52,6 +54,12 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin) {
    * Icon name from icon collection of this library
    */
   @Prop({ default: '', type: String }) readonly icon!: string
+  /**
+   * Icon position within the text. Possible values: `"left"`, `"right"`.
+   *
+   * By default it's set to `"left"`
+   */
+  @Prop({ default: ButtonIconPosition.LEFT, type: String }) readonly iconPosition!: string
   /**
    * Disable state
    */
@@ -122,6 +130,9 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin) {
     if ((Object.values(ButtonTypes) as Array<string>).includes(this.type)) {
       cssClasses.push(`s-${this.type}`)
     }
+    if ((Object.values(ButtonIconPosition) as Array<string>).includes(this.iconPosition)) {
+      cssClasses.push(`s-i-position-${this.iconPosition}`)
+    }
     if (this.isLoading) {
       cssClasses.push('s-loading')
     }

src/components/Button/consts.ts

@@ -11,3 +11,8 @@ export enum ButtonNativeTypes {
   SUBMIT = 'submit',
   RESET = 'reset'
 }
+
+export enum ButtonIconPosition {
+  LEFT = 'left',
+  RIGHT = 'right'
+}

src/components/Button/index.ts

@@ -1,5 +1,11 @@
 import SButton from './SButton.vue'
 import SButtonGroup from './SButtonGroup.vue'
-import { ButtonTypes, ButtonNativeTypes } from './consts'
+import { ButtonTypes, ButtonNativeTypes, ButtonIconPosition } from './consts'
 
-export { SButton, SButtonGroup, ButtonTypes, ButtonNativeTypes }
+export {
+  SButton,
+  SButtonGroup,
+  ButtonTypes,
+  ButtonNativeTypes,
+  ButtonIconPosition
+}

src/stories/SButton.stories.ts

@@ -2,7 +2,7 @@ import { text, boolean, select, withKnobs } from '@storybook/addon-knobs'
 
 import { SButton, SButtonGroup, SRow, SCol, SMain } from '../components'
 import { Size, BorderRadius } from '../types'
-import { ButtonTypes } from '../components/Button'
+import { ButtonTypes, ButtonIconPosition } from '../components/Button'
 
 export default {
   component: SButton,
@@ -176,17 +176,17 @@ export const withIcon = () => ({
   template: `<s-main>
                <s-row :gutter="20">
                  <s-col :span="6" v-for="item in differentTypesData" :key="item.type" style="padding-bottom: 20px;">
-                   <s-button size="big" icon="refresh" :type="item.type" :tooltip="item.tooltip">
+                   <s-button size="big" icon="refresh" :icon-position="iconPosition" :type="item.type" :tooltip="item.tooltip">
                      {{ item.label }}
                    </s-button>
                  </s-col>
                  <s-col :span="6" v-for="item in differentTypesData" :key="item.type + 'Disabled'" style="padding-bottom: 20px;">
-                   <s-button size="big" icon="refresh" :type="item.type" :tooltip="item.tooltip" disabled>
+                   <s-button size="big" icon="refresh" :icon-position="iconPosition" :type="item.type" :tooltip="item.tooltip" disabled>
                      {{ item.label }}
                    </s-button>
                  </s-col>
                  <s-col :span="4" v-for="item in differentSizeData" :key="item.size">
-                   <s-button :size="item.size" icon="refresh">
+                   <s-button :size="item.size" icon="refresh" :icon-position="iconPosition">
                      {{ item.label }}
                    </s-button>
                  </s-col>
@@ -198,6 +198,9 @@ export const withIcon = () => ({
     },
     differentTypesData: {
       default: () => differentTypeButtonsData
+    },
+    iconPosition: {
+      default: select('IconPosition', Object.values(ButtonIconPosition), ButtonIconPosition.LEFT)
     }
   }
 })

src/styles/button.scss

@@ -161,9 +161,16 @@ button {
       color: inherit;
     }
   }
-  &:not(.s-action) > span > i {
-    &[class^=s-icon-], &[class^=el-icon-] {
-      margin-right: 6px;
+  &:not(.s-action).s-i-position {
+    &-left > span > i {
+      &[class^=s-icon-], &[class^=el-icon-] {
+        margin-right: 6px;
+      }
+    }
+    &-right > span > i {
+      &[class^=s-icon-], &[class^=el-icon-] {
+        margin-left: 6px;
+      }
     }
   }
 }