Release/0.9.2

package.json

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

src/components/Button/SButton.vue

@@ -9,7 +9,7 @@
       :disabled="disabled"
       :loading="isLoading"
       :autofocus="autofocus"
-      :circle="type === ButtonTypes.ACTION && rounded"
+      :circle="isRounded"
       :icon="elementIcon"
       @click="handleClick"
     >
@@ -134,7 +134,7 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design
     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)) {
+    if (!!this.availableIcon && (Object.values(ButtonIconPosition) as Array<string>).includes(this.iconPosition)) {
       cssClasses.push(`s-i-position-${this.iconPosition}`)
     }
     if (this.isLoading) {
@@ -169,8 +169,14 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design
     return this.icon
   }
 
+  get isRounded (): boolean {
+    if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array<string>).includes(this.type)) return false
+
+    return this.rounded
+  }
+
   get isLoading (): boolean {
-    if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array<string>).includes(this.type)) {
+    if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array<string>).includes(this.type) || this.isRounded) {
       return false
     }
     return this.loading

src/components/Input/SFloatInput.vue

@@ -8,7 +8,11 @@
       input: handleInput,
       blur: onBlur
     }"
-  />
+  >
+    <template v-for="(_, scopedSlotName) in $scopedSlots" v-slot:[scopedSlotName]="slotData">
+      <slot :name="scopedSlotName" v-bind="slotData" />
+    </template>
+  </s-input>
 </template>
 
 <script lang="ts">

src/components/Input/SInput.vue

@@ -37,7 +37,10 @@
           @focus="handleFocus"
           @paste.native="handlePaste"
         >
+          <slot slot="prefix" name="prefix"></slot>
           <slot slot="suffix" name="suffix"></slot>
+          <slot slot="prepend" name="prepend"></slot>
+          <slot slot="append" name="append"></slot>
         </el-input>
         <template v-if="type === InputType.TEXT_FILE">
           <s-icon name="file-file-upload-24" />

src/stories/SButton.stories.ts

@@ -1,6 +1,6 @@
 import { text, boolean, select, withKnobs } from '@storybook/addon-knobs'
 
-import { SButton, SButtonGroup, SRow, SCol, SMain, SDesignSystemProvider } from '../components'
+import { SButton, SButtonGroup, SRow, SCol, SMain, SIcon, SDesignSystemProvider } from '../components'
 import { Size, BorderRadius } from '../types'
 import { ButtonTypes, ButtonIconPosition } from '../components/Button'
 import { DesignSystemTypes } from '../utils/DesignSystem'
@@ -13,22 +13,22 @@ export default {
 }
 
 export const configurable = () => ({
-  components: { SButton, SDesignSystemProvider },
+  components: { SButton, SIcon, SDesignSystemProvider },
   template: `
             <s-design-system-provider :value="designSystem">
               <s-button
                :disabled="disabled"
                :loading="loading"
                :tooltip="tooltip"
-               :icon="type === 'action' ? 'arrows-swap-24' : ''"
                :type="type"
                :size="size"
                :border-radius="borderRadius"
                :rounded="rounded"
                :alternative="alternative"
                @click="handleClick"
               >
-               {{ type !== 'action' ? 'Default' : '' }}
+                <span v-if="content">{{ content }}</span>
+                <s-icon v-else :name="icon"/>
               </s-button>
             </s-design-system-provider>`,
   props: {
@@ -58,6 +58,12 @@ export const configurable = () => ({
     },
     tooltip: {
       default: text('Tooltip', '')
+    },
+    content: {
+      default: text('Button text', 'Default')
+    },
+    icon: {
+      default: text('Button icon', 'arrows-swap-24')
     }
   },
   methods: {

src/stories/SFloatInput.stories.ts

@@ -20,7 +20,12 @@ export const configurable = () => ({
                  :hasLocaleString="hasLocaleString"
                  :delimiters="delimiters"
                  :max="max"
-               />
+               >
+                <div v-if="top" slot="top">{{ top }}</div>
+                <div v-if="bottom" slot="bottom">{{ bottom }}</div>
+                <div v-if="left" slot="left">{{ left }}</div>
+                <div v-if="right" slot="right">{{ right }}</div>
+               </s-float-input>
               </s-row>
             </s-design-system-provider>`,
   data: () => ({
@@ -47,6 +52,18 @@ export const configurable = () => ({
           decimal: '.'
         }
       )
+    },
+    top: {
+      default: text('Top slot content', '')
+    },
+    bottom: {
+      default: text('Bottom slot content', '')
+    },
+    left: {
+      default: text('Left slot content', '')
+    },
+    right: {
+      default: text('Right slot content', '')
     }
   }
 })

src/styles/neumorphism/button.scss

@@ -95,6 +95,11 @@ $neu-button-action-box-shadow-hover: $neu-button-action-box-shadow !default;
 $neu-button-action-box-shadow-pressed: 1px 1px 2px #FFFFFF, inset 1px 1px 2px rgba(0, 0, 0, 0.1) !default;
 $neu-button-action-box-shadow-alternative: none !default;
 
+$neu-button-padding-big: 7px 13px !default;
+$neu-button-padding-medium: 5px 13px !default;
+$neu-button-padding-small: 4px 6px !default;
+$neu-button-padding-mini: 3px 6px !default;
+
 @mixin disabled (
   $border-width: $neu-button-border-width,
   $background-color: $neu-button-background-color-disabled,
@@ -109,9 +114,26 @@ $neu-button-action-box-shadow-alternative: none !default;
   }
 }
 
+@mixin size ($suffix: 'big', $padding: $neu-button-padding-big) {
+  &.s-#{$suffix} {
+    padding: $padding;
+    height: var(--neu-size-#{$suffix});
+
+    &.is-circle {
+      width: var(--neu-size-#{$suffix});
+      padding: 7px;
+    }
+  }
+}
+
 .el-button.neumorphic {
   transition: $neu-button-transition;
 
+  @include size('big', $neu-button-padding-big);
+  @include size('medium', $neu-button-padding-medium);
+  @include size('small', $neu-button-padding-small);
+  @include size('mini', $neu-button-padding-mini);
+
   &.s-primary {
     background: $neu-button-primary-background-color;
     border-color: $neu-button-primary-border-color;

src/styles/neumorphism/variables.scss

@@ -37,6 +37,11 @@ $neu-color-status-warning-background: #C6E2FF !default; // Warning state backgro
 $neu-color-status-error: #F754A3 !default; // Error text and icon
 $neu-color-status-error-background: #FFD8EB !default; // Error state background
 
+$neu-size-big: 46px !default;
+$neu-size-medium: 42px !default;
+$neu-size-small: 32px !default;
+$neu-size-mini: 24px !default;
+
 :root {
   --neu-brand-pinky: #{neu-brand-pinky};
   --neu-brand-blue: #{neu-brand-blue};
@@ -67,4 +72,8 @@ $neu-color-status-error-background: #FFD8EB !default; // Error state background
   --neu-color-status-warning-background: #{$neu-color-status-warning-background};
   --neu-color-status-error: #{$neu-color-status-error};
   --neu-color-status-error-background: #{$neu-color-status-error-background};
+  --neu-size-big: #{$neu-size-big};
+  --neu-size-medium: #{$neu-size-medium};
+  --neu-size-small: #{$neu-size-small};
+  --neu-size-mini: #{$neu-size-mini};
 }