Release 0.4.0

config/storybook/preview.js

@@ -20,7 +20,7 @@ addParameters({
 
 addDecorator(withA11y)
 addDecorator(() => ({
-  template: `<div class="flex" style="padding: 20px;">
+  template: `<div class="s-flex" style="padding: 20px;">
                <story/>
              </div>`
 }))

package.json

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

src/components/Breadcrumb/SBreadcrumb.vue

@@ -15,11 +15,3 @@ export default class SBreadcrumb extends Vue {
   @Prop({ default: '/', type: String }) readonly separator!: string
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-.el-breadcrumb__separator {
-  color: $color-neutral-secondary;
-  font-weight: normal;
-}
-</style>

src/components/Breadcrumb/SBreadcrumbItem.vue

@@ -24,17 +24,3 @@ export default class SBreadcrumbItem extends Vue {
   @Prop({ default: false, type: Boolean }) readonly replace!: boolean
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-.el-breadcrumb__inner {
-  color: $color-neutral-secondary;
-  &.is-link {
-    color: $color-neutral-secondary;
-    font-weight: normal;
-  }
-}
-.el-breadcrumb__item:last-child {
-  pointer-events: none;
-}
-</style>

src/components/Button/SButton.vue

@@ -9,7 +9,7 @@
       :disabled="disabled"
       :loading="isLoading"
       :autofocus="autofocus"
-      :circle="type === ButtonTypes.ACTION"
+      :circle="type === ButtonTypes.ACTION && rounded"
       :icon="elementIcon"
       @click="handleClick"
     >
@@ -40,6 +40,12 @@ export default class SButton extends Vue {
    * By default it's set to `"primary"`
    */
   @Prop({ default: ButtonTypes.PRIMARY, type: String }) readonly type!: string
+  /**
+   * Rounded property for `type="action"` buttons.
+   *
+   * By default it's set to `false`
+   */
+  @Prop({ default: false, type: Boolean }) readonly rounded!: boolean
   /**
    * Size of button. Possible values: `"big"`, `"medium"`, `"small"`.
    *
@@ -117,18 +123,18 @@ export default class SButton extends Vue {
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if ((this.elForm || this.elFormItem || {}).size) {
-      cssClasses.push((this.elForm || this.elFormItem).size)
+      cssClasses.push(`s-${(this.elForm || this.elFormItem).size}`)
     } else if ((Object.values(ButtonSize) as Array<string>).includes(this.size)) {
-      cssClasses.push(this.size)
+      cssClasses.push(`s-${this.size}`)
     }
     if ((Object.values(ButtonTypes) as Array<string>).includes(this.type)) {
-      cssClasses.push(this.type)
+      cssClasses.push(`s-${this.type}`)
     }
     if (this.isLoading) {
-      cssClasses.push('loading')
+      cssClasses.push('s-loading')
     }
     if (this.alternative) {
-      cssClasses.push('alternative')
+      cssClasses.push('s-alternative')
     }
     return cssClasses
   }
@@ -176,148 +182,3 @@ export default class SButton extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.loading {
-  padding: 12px 17.5px;
-  i {
-    position: absolute;
-    left: var(--s-button-loading-left);
-  }
-  &.small {
-    padding: 9px 15px;
-    i {
-      left: calc(var(--s-button-loading-left) + 2px);
-    }
-  }
-  > :not(i) {
-    color: transparent;
-  }
-}
-
-.primary {
-  &:hover, &:active, &:focus {
-    background-color: $color-main-hover;
-    border-color: $color-main-hover;
-  }
-  &:disabled, &:disabled:hover {
-    background-color: $color-main-inactive;
-    border-color: $color-main-inactive;
-  }
-}
-
-.secondary {
-  &:hover, &:active, &:focus {
-    color: $color-main-brand;
-    background-color: $color-basic-white;
-    border-color: $color-main-brand;
-  }
-  &:disabled, &:disabled:hover {
-    color: $color-neutral-inactive;
-    border-color: $color-neutral-border;
-  }
-  &.alternative {
-    &:hover, &:active, &:focus {
-      color: $color-basic-black;
-      background-color: $color-neutral-hover;
-      border-color: $color-neutral-hover;
-    }
-    &:disabled, &:disabled:hover {
-      color: $color-neutral-inactive;
-      border-color: $color-neutral-border;
-      background-color: $color-basic-white;
-    }
-  }
-}
-
-.link {
-  color: $color-basic-black;
-  border: none;
-  background-color: transparent;
-  &:hover, &:active, &:focus {
-    color: $color-main-brand;
-    background-color: transparent;
-  }
-  &:disabled, &:disabled:hover {
-    color: $color-neutral-inactive;
-  }
-}
-
-.tertiary {
-  color: $color-basic-black;
-  border-color: $color-neutral-placeholder;
-  background-color: $color-neutral-placeholder;
-  &:hover, &:active, &:focus {
-    color: $color-main-brand;
-    background-color: $color-neutral-placeholder;
-    border-color: $color-neutral-placeholder;
-  }
-  &:disabled, &:disabled:hover {
-    color: $color-neutral-inactive;
-    background-color: $color-neutral-placeholder;
-    border-color: $color-neutral-placeholder;
-  }
-}
-
-.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 {
-    &[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/Card/SCard.vue

@@ -1,7 +1,7 @@
 <template>
   <el-card
     class="s-card"
-    :class="{ clickable }"
+    :class="{ 's-clickable': clickable }"
     :header="header"
     :body-style="bodyStyle"
     :shadow="shadow"
@@ -57,27 +57,3 @@ export default class SCard extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.s-card {
-  color: $color-basic-black;
-  border-radius: 8px;
-  border-color: $color-neutral-border;
-  &.clickable {
-    cursor: pointer;
-  }
-  &:hover, &:focus {
-    border-color: $color-basic-white;
-  }
-  .el-card__header {
-    border-bottom-color: $color-basic-white;
-    padding-bottom: 0;
-    text-align: left;
-  }
-  .el-card__body {
-    padding: 18px 20px;
-  }
-}
-</style>

src/components/Checkbox/SCheckbox.vue

@@ -88,7 +88,7 @@ export default class SCheckbox extends Vue {
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if ((Object.values(CheckboxSize) as Array<string>).includes(this.size)) {
-      cssClasses.push(this.size)
+      cssClasses.push(`s-${this.size}`)
     }
     return cssClasses
   }
@@ -98,93 +98,3 @@ export default class SCheckbox extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-@import "../../styles/common.scss";
-
-.el-checkbox {
-  &.big {
-    @extend .big;
-    padding: 17px 0 9px 0;
-    &.is-bordered {
-      padding: 17px 20px 9px 15px;
-    }
-  }
-  &.medium {
-    @extend .medium;
-    &, &.is-bordered {
-      padding: 9px 15px 7px 10px;
-      .el-checkbox__inner {
-        height: 16px;
-        width: 16px;
-        &::after {
-          top: 0;
-          left: 4px;
-          height: 8px;
-          width: 4px;
-        }
-      }
-    }
-    & {
-      padding: 9px 0 7px 0;
-    }
-  }
-  &.small {
-    @extend .small;
-    border-radius: 4px;
-    .el-checkbox__label {
-      font-size: 12px;
-    }
-    &, &.is-bordered {
-      padding: 5px 15px 5px 10px;
-      .el-checkbox__inner {
-        height: 14px;
-        width: 14px;
-        &::after {
-          top: 1px;
-          left: 4px;
-          height: 6px;
-          width: 2px;
-        }
-      }
-    }
-    & {
-      padding: 5px 0;
-    }
-  }
-}
-.el-checkbox__inner {
-  border-color: $color-neutral-inactive;
-  border-radius: 4px;
-  width: 20px;
-  height: 20px;
-  &::after {
-    border-width: 2px;
-    height: 10px;
-    left: 6px;
-    width: 5px;
-  }
-}
-.el-checkbox__input {
-  &.is-disabled {
-    .el-checkbox__inner {
-      background-color: $color-neutral-placeholder;
-    }
-    & + span.el-checkbox__label {
-      color: $color-neutral-inactive;
-    }
-  }
-  &.is-checked {
-    &.is-disabled > .el-checkbox__inner {
-      background-color: $color-neutral-placeholder;
-      &::after {
-        border-color: $color-neutral-inactive;
-      }
-    }
-    & + .el-checkbox__label {
-      color: $color-basic-black;
-    }
-  }
-}
-</style>

src/components/Collapse/SCollapse.vue

@@ -46,12 +46,3 @@ export default class SCollapse extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.el-collapse {
-  border-top-color: #F5F5F5;
-  border-bottom-color: #F5F5F5;
-}
-</style>