Design system review issues

package.json

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

src/components/Button/SButton.vue

@@ -37,9 +37,9 @@ export default class SButton extends Vue {
   /**
    * Type of button. Possible values: `"primary"`, `"secondary"`, `"tertiary"`, `"action"`, `"link"`.
    *
-   * By default it's set to `"primary"`
+   * By default it's set to `"secondary"`
    */
-  @Prop({ default: ButtonTypes.PRIMARY, type: String }) readonly type!: string
+  @Prop({ default: ButtonTypes.SECONDARY, type: String }) readonly type!: string
   /**
    * Rounded property for `type="action"` buttons.
    *
@@ -49,9 +49,9 @@ export default class SButton extends Vue {
   /**
    * Size of button. Possible values: `"big"`, `"medium"`, `"small"`.
    *
-   * By default it's set to `"big"`
+   * By default it's set to `"medium"`
    */
-  @Prop({ default: ButtonSize.BIG, type: String }) readonly size!: string
+  @Prop({ default: ButtonSize.MEDIUM, type: String }) readonly size!: string
   /**
    * Icon name from icon collection of this library
    */

src/components/Divider/SDivider.vue

@@ -7,10 +7,16 @@
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator'
 
-import { DividerDirection, ContentPosition } from './consts'
+import { DividerDirection, ContentPosition, DividerType } from './consts'
 
 @Component
 export default class SDivider extends Vue {
+  /**
+   * Divider type property. Can be `"primary"` or `"secondary"`.
+   *
+   * By default it's set to `"secondary"`
+   */
+  @Prop({ default: DividerType.SECONDARY, type: String }) readonly type!: string
   /**
    * Divider direction property. Can be `"horizontal"` or `"vertical"`.
    *
@@ -23,5 +29,13 @@ export default class SDivider extends Vue {
    * By default it's set to `"center"`
    */
   @Prop({ default: ContentPosition.CENTER, type: String }) readonly contentPosition!: string
+
+  mounted (): void {
+    this.$watch('type', (value) => {
+      const el = this.$el as Element
+      el.classList.remove('s-divider-primary', 's-divider-secondary')
+      el.classList.add(`s-divider-${this.type}`)
+    }, { immediate: true })
+  }
 }
 </script>

src/components/Divider/consts.ts

@@ -6,4 +6,9 @@ export enum ContentPosition {
   CENTER = 'center'
 }
 
+export enum DividerType {
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary'
+}
+
 export const DividerDirection = Direction

src/components/Divider/index.ts

@@ -1,3 +1,4 @@
 import SDivider from './SDivider.vue'
+import { ContentPosition, DividerType, DividerDirection } from './consts'
 
-export { SDivider }
+export { SDivider, ContentPosition, DividerDirection, DividerType }

src/stories/Intro/Customization.stories.ts

@@ -1,6 +1,6 @@
 import { withKnobs } from '@storybook/addon-knobs'
 
-import { Colors } from '../../types'
+import { AccentColors, ContentColors, MiscColors, SecondaryColors, StatusColors, TertiaryButtonColors, UtilityColors } from '../../types'
 import { SRow, SButton, SInput, SCol, SDivider } from '../../components'
 import { differentTypeButtonsData } from '../SButton.stories'
 
@@ -10,10 +10,20 @@ export default {
   excludeStories: /.*Data$/
 }
 
-export const colorsData = Object.values(Colors).map(color => ({
-  label: color,
-  value: getComputedStyle(document.documentElement).getPropertyValue(color)
-}))
+const getColorsData = (colors) => Object.values(colors).map(color => {
+  const value = getComputedStyle(document.documentElement).getPropertyValue(`--s-color-${color}`)
+  const isRgb = value.includes('rgb')
+  return { label: color, value, isRgb }
+})
+export const colorsSectionsData = [
+  { title: 'Theme / Accent', colors: getColorsData(AccentColors) },
+  { title: 'Theme / Secondary', colors: getColorsData(SecondaryColors) },
+  { title: 'Base / Content', colors: getColorsData(ContentColors) },
+  { title: 'Base / Misc.', colors: getColorsData(MiscColors) },
+  { title: 'Utility', colors: getColorsData(UtilityColors) },
+  { title: 'Status', colors: getColorsData(StatusColors) },
+  { title: 'Button / Tertiary', colors: getColorsData(TertiaryButtonColors) }
+]
 export const themeInputsData = [
   'text',
   'textarea',
@@ -25,13 +35,22 @@ export const configurable = () => ({
              <s-row>
                <s-col
                  class="s-flex"
-                 style="align-items: center;"
-                 v-for="color in colors"
-                 :key="color.label"
-                 :span="4"
+                 style="flex-direction: column;"
+                 v-for="section in sections"
+                 :key="section.title"
+                 :lg="4" :md="4" :sm="6" :xs="12"
                >
-                 <span style="padding-right: 10px;">{{ color.label }}</span>
-                 <el-color-picker size="small" v-model="color.value" @change="(value) => handleColorChange(color.label, value)" />
+                 <span style="padding-right: 10px; font-weight: bold;">{{ section.title }}</span>
+                 <div v-for="color in section.colors" :key="color.label" class="s-flex" style="align-items: center;">
+                   <span style="padding-right: 10px;">{{ color.label }}</span>
+                   <el-color-picker
+                     style="flex: 1; text-align: right; padding-right: 20%;"
+                     :show-alpha="color.isRgb"
+                     size="small"
+                     v-model="color.value"
+                     @change="(value) => handleColorChange(color.label, value)"
+                   />
+                 </div>
                </s-col>
              </s-row>
              <s-divider />
@@ -59,7 +78,7 @@ export const configurable = () => ({
              <h4>You can also check another components, these colors are applied to the whole library</h4>
              </div>`,
   data: () => ({
-    colors: colorsData,
+    sections: colorsSectionsData,
     buttons: differentTypeButtonsData,
     inputs: themeInputsData
   }),

src/stories/SDivider.stories.ts

@@ -1,7 +1,7 @@
 import { withKnobs, select } from '@storybook/addon-knobs'
 
 import { SDivider, SRow } from '../components'
-import { DividerDirection, ContentPosition } from '../components/Divider/consts'
+import { ContentPosition, DividerDirection, DividerType } from '../components/Divider'
 
 export default {
   component: SDivider,
@@ -15,6 +15,7 @@ export const configurable = () => ({
                <span>First text paragraph</span>
                <s-divider
                  :style="direction === 'vertical' ? { height: '56px' } : {}"
+                 :type="type"
                  :direction="direction"
                  :content-position="contentPosition"
                >
@@ -23,6 +24,9 @@ export const configurable = () => ({
                <span>Second text paragraph</span>
              </s-row>`,
   props: {
+    type: {
+      default: select('Type', Object.values(DividerType), DividerType.SECONDARY)
+    },
     direction: {
       default: select('Direction', Object.values(DividerDirection), DividerDirection.HORIZONTAL)
     },

src/styles/button.scss

@@ -1,5 +1,21 @@
 @import "./variables";
 
+$s-color-button-tertiary-color: var(--s-color-base-content-primary) !default;
+$s-color-button-tertiary-color-active: var(--s-color-theme-accent) !default;
+$s-color-button-tertiary-background: var(--s-color-base-background) !default;
+$s-color-button-tertiary-background-hover: var(--s-color-base-background) !default;
+$s-color-button-tertiary-background-pressed: var(--s-color-base-background) !default;
+$s-color-button-tertiary-background-focused: var(--s-color-base-background) !default;
+
+:root {
+  --s-color-button-tertiary-color: #{$s-color-button-tertiary-color};
+  --s-color-button-tertiary-color-active: #{$s-color-button-tertiary-color-active};
+  --s-color-button-tertiary-background: #{$s-color-button-tertiary-background};
+  --s-color-button-tertiary-background-hover: #{$s-color-button-tertiary-background-hover};
+  --s-color-button-tertiary-background-pressed: #{$s-color-button-tertiary-background-pressed};
+  --s-color-button-tertiary-background-focused: #{$s-color-button-tertiary-background-focused};
+}
+
 .s-loading {
   padding: 12px 17.5px;
   i {
@@ -78,13 +94,23 @@
   }
 }
 .s-tertiary {
-  color: var(--s-color-base-content-primary);
-  border-color: var(--s-color-base-background);
-  background-color: var(--s-color-base-background);
+  color: var(--s-color-button-tertiary-color);
+  border-color: var(--s-color-button-tertiary-background);
+  background-color: var(--s-color-button-tertiary-background);
   &:hover, &:active, &:focus {
-    color: var(--s-color-theme-accent);
-    background-color: var(--s-color-base-background);
-    border-color: var(--s-color-base-background);
+    color: var(--s-color-button-tertiary-color-active);
+  }
+  &:hover {
+    background-color: var(--s-color-button-tertiary-background-hover);
+    border-color: var(--s-color-button-tertiary-background-hover);
+  }
+  &:active {
+    background-color: var(--s-color-button-tertiary-background-pressed);
+    border-color: var(--s-color-button-tertiary-background-pressed);
+  }
+  &:focus {
+    background-color: var(--s-color-button-tertiary-background-focused);
+    border-color: var(--s-color-button-tertiary-background-focused);
   }
   &:disabled, &:disabled:hover {
     color: var(--s-color-base-content-quaternary);
@@ -120,24 +146,28 @@
   background-color: var(--s-color-base-background);
   border-color: var(--s-color-base-background);
   border-radius: 8px;
-  &:hover, &:active, &:focus, &:disabled, &:disabled:hover {
+  &:hover, &:active, &:focus {
     color: var(--s-color-base-content-primary);
     background-color: var(--s-color-base-background-hover);
     border-color: var(--s-color-base-background-hover);
   }
   &:disabled, &:disabled:hover {
     color: var(--s-color-base-content-quaternary);
+    background-color: var(--s-color-base-disabled);
+    border-color: var(--s-color-base-disabled);
   }
   &.s-alternative {
     background-color: var(--s-color-base-on-accent);
     border-color: var(--s-color-base-border-primary);
-    &:hover, &:active, &:focus, &:disabled, &:disabled:hover {
+    &:hover, &:active, &:focus {
       color: var(--s-color-base-content-primary);
       background-color: var(--s-color-base-background);
       border-color: var(--s-color-base-background);
     }
     &:disabled, &:disabled:hover {
       color: var(--s-color-base-content-quaternary);
+      background-color: var(--s-color-base-disabled);
+      border-color: var(--s-color-base-disabled);
     }
   }
 }

src/styles/checkbox.scss

@@ -4,7 +4,7 @@
 .el-checkbox {
   color: var(--s-color-base-content-primary);
   &.is-bordered {
-    &, &.is-disabled {
+    &, &.is-disabled, &.is-disabled.is-checked {
       border-color: var(--s-color-base-border-primary);
     }
     &.is-checked {
@@ -83,7 +83,7 @@
       border-color: var(--s-color-base-border-primary);
     }
     & + span.el-checkbox__label {
-      color: var(--s-color-base-content-quaternary);
+      color: var(--s-color-base-on-disabled);
     }
   }
   &.is-focus > .el-checkbox__inner {
@@ -98,7 +98,7 @@
       background-color: var(--s-color-base-disabled);
       border-color: var(--s-color-base-border-primary);
       &::after {
-        border-color: var(--s-color-base-content-quaternary);
+        border-color: var(--s-color-base-on-disabled);
       }
     }
     & + .el-checkbox__label {

src/styles/collapse.scss

@@ -1,5 +1,4 @@
 @import "./variables";
-@import "./icons";
 
 .el-collapse {
   border-top-color: var(--s-color-base-border-secondary);
@@ -25,8 +24,8 @@
       border-bottom-color: transparent;
     }
     .el-icon-arrow-right {
-      font-family: 'soramitsu-icons' !important;
-      @extend .s-icon-chevron-top;
+      font-family: $s-font-family-icons;
+      @extend .s-icon-chevron-bottom;
       font-size: 16px;
       padding: 8px;
       width: 32px;

src/styles/common.scss

@@ -2,7 +2,7 @@
 
 [class^="el-"]:not(i):not([class*='el-icon']),
 [class*="el-"]:not(i):not([class*='el-icon']) {
-  font-family: $font-family-default;
+  font-family: $s-font-family-default;
 }
 
 html {
@@ -16,37 +16,37 @@ html {
 
 /* Typography */
 h1 {
-  font-family: $font-family-default;
+  font-family: $s-font-family-default;
   font-weight: normal;
   font-size: 36px;
 }
 
 h2 {
-  font-family: $font-family-default;
+  font-family: $s-font-family-default;
   font-weight: normal;
   font-size: 30px;
 }
 
 h3 {
-  font-family: $font-family-default;
+  font-family: $s-font-family-default;
   font-weight: normal;
   font-size: 24px;
 }
 
 h4 {
-  font-family: $font-family-default;
+  font-family: $s-font-family-default;
   font-weight: normal;
   font-size: 18px;
 }
 
 h5 {
-  font-family: $font-family-default;
+  font-family: $s-font-family-default;
   font-weight: bold;
   font-size: 16px;
 }
 
 h6 {
-  font-family: $font-family-default;
+  font-family: $s-font-family-default;
   font-weight: bold;
   font-size: 14px;
 }

src/styles/datepicker.scss

@@ -1,7 +1,7 @@
 @import "./variables";
 
 .s-date-picker {
-  font-family: $font-family-default;
+  font-family: $s-font-family-default;
   width: 100%;
   position: relative;
   .el-date-editor {
@@ -252,20 +252,20 @@
 .el-date-table.is-week-mode .el-date-table__row {
   &.current, &:hover {
     div {
-      background-color: var(--s-color-theme-secondary-hover);
+      background-color: var(--s-color-base-background-hover);
     }
   }
 }
 .el-month-table td.in-range div {
-  background-color: var(--s-color-theme-secondary-hover);
+  background-color: var(--s-color-base-background-hover);
   &:hover {
-    background-color: var(--s-color-theme-secondary-hover);
+    background-color: var(--s-color-base-background-hover);
   }
 }
 .el-date-table td.in-range div {
-  background-color: var(--s-color-theme-secondary-hover);
+  background-color: var(--s-color-base-background-hover);
   &:hover {
-    background-color: var(--s-color-theme-secondary-hover);
+    background-color: var(--s-color-base-background-hover);
   }
 }
 .el-date-range-picker__content.is-left {