Fix collapse shadow and statuses (#505)

soramitsu · Mar 10, 2023 · a4ca6cb · a4ca6cb
1 parent f5c2d79
commit a4ca6cb
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 25 deletions.
diff --git a/config/storybook/neu-theme-variables.scss b/config/storybook/neu-theme-variables.scss
@@ -30,12 +30,14 @@ $s-color-utility-body: #F7F3F4;
 $s-color-utility-surface: #FDF7FB;
 $s-color-utility-overlay: rgba(42, 23, 31, 0.1);
 // Status colors
-$s-color-status-success: #34AD87;
-$s-color-status-warning: #479AEF;
-$s-color-status-error: #F754A3;
-$s-color-status-success-background: #B9EBDB;
-$s-color-status-warning-background: #C6E2FF;
-$s-color-status-error-background: #FFD8EB;
+$s-color-status-success: #34AD87 !default;
+$s-color-status-warning: #EBA332 !default;
+$s-color-status-error: #F754A3 !default;
+$s-color-status-info: #479AEF !default;
+$s-color-status-success-background: #B9EBDB !default;
+$s-color-status-warning-background: #FCEEBD !default;
+$s-color-status-error-background: #FFD8EB !default;
+$s-color-status-info-background: #C6E2FF !default;
 // Shadows
 $s-shadow-surface: 1px 1px 5px var(--s-shadow-color-dark), inset 1px 1px 1px var(--s-shadow-color-dark); // container
 // Size
@@ -71,9 +73,11 @@ $s-size-mini: 24px;
   --s-color-status-success: #{$s-color-status-success};
   --s-color-status-warning: #{$s-color-status-warning};
   --s-color-status-error: #{$s-color-status-error};
+  --s-color-status-info: #{$s-color-status-info};
   --s-color-status-success-background: #{$s-color-status-success-background};
   --s-color-status-warning-background: #{$s-color-status-warning-background};
   --s-color-status-error-background: #{$s-color-status-error-background};
+  --s-color-status-info-background: #{$s-color-status-info-background};
   // Shadows
   --s-shadow-surface: #{$s-shadow-surface};
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "1.0.42",
+  "version": "1.0.43",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"

diff --git a/src/mixins/StatusMixin.ts b/src/mixins/StatusMixin.ts
@@ -5,7 +5,7 @@ import { Status } from '../types'
 @Component
 export default class StatusMixin extends Vue {
   /**
-   * Status of component. Possible values: `"default"`, `"success"`, `"warning"`, `"error"`.
+   * Status of component. Possible values: `"default"`, `"success"`, `"warning"`, `"error"`, `"info"`.
    *
    * By default it's set to `"default"`
    */

diff --git a/src/styles/collapse.scss b/src/styles/collapse.scss
@@ -30,18 +30,26 @@
     }
     .el-icon-arrow-right {
       &,
-      &:before {
+      &::before {
         font-family: var(--s-font-family-icons);
       }
+      &::before {
+        position: absolute;
+        transition: transform 0.25s ease-in-out;
+      }
       @extend .s-icon-chevron-down-rounded-16;
       font-size: var(--s-icon-font-size-mini);
-      padding: 8px;
+      padding: 0 8px;
       width: 32px;
       height: 32px;
+      line-height: 32px;
       background-color: var(--s-color-base-background);
       border-radius: var(--s-border-radius-small);
       &.is-active {
-        transform: scale(1, -1);
+        transform: none;
+        &::before {
+          transform: scale(1, -1);
+        }
       }
       &:hover,
       &:focus {

diff --git a/src/styles/neumorphism/card.scss b/src/styles/neumorphism/card.scss
@@ -16,9 +16,10 @@
   background: var(--s-color-base-background);
   border: none;
 
-  @include status;
+  @include status('success');
   @include status('warning');
   @include status('error');
+  @include status('info');
 
   .el-card {
     &__header, &__body {

diff --git a/src/styles/neumorphism/collapse.scss b/src/styles/neumorphism/collapse.scss
@@ -3,17 +3,24 @@ $neu-collapse-button-border-width: 0px !default;
 $neu-collapse-button-border-style: solid !default !default;
 $neu-collapse-button-background-color: var(--s-color-utility-body) !default;
 $neu-collapse-button-text-color: var(--s-color-base-content-tertiary) !default;
+$neu-collapse-button-text-color-hover: var(--s-color-base-content-secondary) !default;
 $neu-collapse-button-border-color: transparent !default;
 $neu-collapse-button-box-shadow: var(--s-shadow-element-pressed) !default;
 $neu-collapse-button-font-size: 28px !default;
-.el-collapse.neumorphic .el-icon-arrow-right {
-  width: $neu-collapse-button-size;
-  height: $neu-collapse-button-size;
-  background: $neu-collapse-button-background-color;
-  border-color: $neu-collapse-button-border-color;
-  border-style: $neu-collapse-button-border-style;
-  border-width: $neu-collapse-button-border-width;
-  box-shadow: $neu-collapse-button-box-shadow;
-  color: $neu-collapse-button-text-color;
-  font-size: $neu-collapse-button-font-size;
+.el-collapse.neumorphic .el-collapse-item__header {
+  .el-icon-arrow-right {
+    width: $neu-collapse-button-size;
+    height: $neu-collapse-button-size;
+    line-height: $neu-collapse-button-size;
+    background: $neu-collapse-button-background-color;
+    border-color: $neu-collapse-button-border-color;
+    border-style: $neu-collapse-button-border-style;
+    border-width: $neu-collapse-button-border-width;
+    box-shadow: $neu-collapse-button-box-shadow;
+    color: $neu-collapse-button-text-color;
+    font-size: $neu-collapse-button-font-size;
+  }
+  &:hover .el-icon-arrow-right {
+    color: $neu-collapse-button-text-color-hover;
+  }
 }
diff --git a/src/styles/root.scss b/src/styles/root.scss
@@ -27,9 +27,11 @@
   --s-color-status-success: #{$s-color-status-success};
   --s-color-status-warning: #{$s-color-status-warning};
   --s-color-status-error: #{$s-color-status-error};
+  --s-color-status-info: #{$s-color-status-info};
   --s-color-status-success-background: #{$s-color-status-success-background};
   --s-color-status-warning-background: #{$s-color-status-warning-background};
   --s-color-status-error-background: #{$s-color-status-error-background};
+  --s-color-status-info-background: #{$s-color-status-info-background};
   // Dark theme
   --s-color-theme-accent--dark: #{$s-color-theme-accent--dark};
   --s-color-theme-accent-hover--dark: #{$s-color-theme-accent-hover--dark};
@@ -58,9 +60,11 @@
   --s-color-status-success--dark: #{$s-color-status-success--dark};
   --s-color-status-warning--dark: #{$s-color-status-warning--dark};
   --s-color-status-error--dark: #{$s-color-status-error--dark};
+  --s-color-status-info--dark: #{$s-color-status-info--dark};
   --s-color-status-success-background--dark: #{$s-color-status-success-background--dark};
   --s-color-status-warning-background--dark: #{$s-color-status-warning-background--dark};
   --s-color-status-error-background--dark: #{$s-color-status-error-background--dark};
+  --s-color-status-info-background--dark: #{$s-color-status-info-background--dark};
   --s-shadow-color-light--dark: #{$s-shadow-color-light--dark};
   --s-shadow-color-light-darken--dark: #{$s-shadow-color-light-darken--dark};
   --s-shadow-color-light-dark--dark: #{$s-shadow-color-light-dark--dark};

diff --git a/src/styles/theme/dark.scss b/src/styles/theme/dark.scss
@@ -29,11 +29,13 @@ $s-color-utility-surface--dark: #592D71 !default;
 $s-color-utility-overlay--dark: rgba(41, 0, 71, 0.9) !default;
 // Status colors
 $s-color-status-success--dark: #34AD87 !default;
-$s-color-status-warning--dark: #479AEF !default;
+$s-color-status-warning--dark: #EBA332 !default;
 $s-color-status-error--dark: #F754A3 !default;
+$s-color-status-info--dark: #479AEF !default;
 $s-color-status-success-background--dark: #34AD87 !default;
-$s-color-status-warning-background--dark: #479AEF !default;
+$s-color-status-warning-background--dark: #EBA332 !default;
 $s-color-status-error-background--dark: #F754A3 !default;
+$s-color-status-info-background--dark: #479AEF !default;
 // Shadow
 // dark variations
 $s-shadow-color-dark--dark: rgba(41, 0, 71, 0.33) !default;

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -31,9 +31,11 @@ $s-color-utility-overlay: rgba(0, 0, 0, 0.45) !default;
 $s-color-status-success: #009900 !default;
 $s-color-status-warning: #FF9900 !default;
 $s-color-status-error: #FF0000 !default;
+$s-color-status-info: #1070CA !default;
 $s-color-status-success-background: #CCEDCC !default;
 $s-color-status-warning-background: #FFE3B8 !default;
 $s-color-status-error-background: #FFF9FA !default;
+$s-color-status-info-background: #DBE4FF !default;
 // Shadow
 $s-shadow-color-dark: rgba(0, 0, 0, 0.1) !default;
 $s-shadow-color-dark-light: rgba(0, 0, 0, 0.02) !default;

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -17,6 +17,7 @@ export enum Status {
   SUCCESS = 'success',
   WARNING = 'warning',
   ERROR = 'error',
+  INFO = 'info',
 }
 
 export enum Direction {
@@ -51,9 +52,11 @@ export enum Colors {
   StatusSuccess = 'status-success',
   StatusWarning = 'status-warning',
   StatusError = 'status-error',
+  StatusInfo = 'status-info',
   StatusSuccessBackground = 'status-success-background',
   StatusWarningBackground = 'status-warning-background',
   StatusErrorBackground = 'status-error-background',
+  StatusInfoBackground = 'status-info-background',
   ButtonTertiaryColor = 'button-tertiary-color',
   ButtonTertiaryColorActive = 'button-tertiary-color-active',
   ButtonTertiaryBackground = 'button-tertiary-background',
@@ -106,9 +109,11 @@ export enum StatusColors {
   StatusSuccess = Colors.StatusSuccess,
   StatusWarning = Colors.StatusWarning,
   StatusError = Colors.StatusError,
+  StatusInfo = Colors.StatusInfo,
   StatusSuccessBackground = Colors.StatusSuccessBackground,
   StatusWarningBackground = Colors.StatusWarningBackground,
-  StatusErrorBackground = Colors.StatusErrorBackground
+  StatusErrorBackground = Colors.StatusErrorBackground,
+  StatusInfoBackground = Colors.StatusInfoBackground,
 }
 
 export enum TertiaryButtonColors {