@formixru/b2b-ui 1.6.1 → 1.7.0

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## v1.7.0
+
+- Добавлен новый вид для WarningMessage (`light-info`)
+
 ## v1.6.1
 
 - Исправление в WarningMessage

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@formixru/b2b-ui",
-    "version": "1.6.1",
+    "version": "1.7.0",
     "type": "module",
     "repository": {
         "type": "git",

package/src/components/warning-message/index.scss

@@ -35,6 +35,9 @@ $b: '.warning-message';
     &_info {
     }
 
+    &_light-info {
+    }
+
     &_error {
     }
 
@@ -49,6 +52,10 @@ $b: '.warning-message';
             background-color: $warning-message-info-color;
         }
 
+        &#{$b}_light-info {
+            background-color: $warning-message-light-info-color;
+        }
+
         &#{$b}_error {
             background-color: $warning-message-error-color;
         }
@@ -67,20 +74,40 @@ $b: '.warning-message';
         }
 
         #{$b}_solid & {
-            fill: $warning-message-solid-color !important;
+            fill: $warning-message-solid-descr-color;
         }
 
         #{$b}_success & {
             fill: $warning-message-success-color;
         }
 
+        #{$b}_solid#{$b}_success & {
+            fill: $warning-message-solid-success-color;
+        }
+
         #{$b}_info & {
             fill: $warning-message-info-color;
         }
 
+        #{$b}_solid#{$b}_info & {
+            fill: $warning-message-solid-info-color;
+        }
+
+        #{$b}_light-info & {
+            fill: $warning-message-light-info-color;
+        }
+
+        #{$b}_solid#{$b}_light-info & {
+            fill: $warning-message-solid-light-info-color;
+        }
+
         #{$b}_error & {
             fill: $warning-message-error-color;
         }
+
+        #{$b}_solid#{$b}_error & {
+            fill: $warning-message-solid-error-color;
+        }
     }
 
     &__wrapper {
@@ -124,20 +151,40 @@ $b: '.warning-message';
         }
 
         #{$b}_solid & {
-            color: $warning-message-solid-color !important;
+            color: $warning-message-solid-color;
         }
 
         #{$b}_success & {
             color: $warning-message-success-color;
         }
 
+        #{$b}_solid#{$b}_success & {
+            color: $warning-message-solid-success-color;
+        }
+
         #{$b}_info & {
             color: $warning-message-info-color;
         }
 
+        #{$b}_solid#{$b}_info & {
+            color: $warning-message-solid-info-color;
+        }
+
+        #{$b}_light-info & {
+            color: $warning-message-light-info-color;
+        }
+
+        #{$b}_solid#{$b}_light-info & {
+            color: $warning-message-solid-light-info-color;
+        }
+
         #{$b}_error & {
             color: $warning-message-error-color;
         }
+
+        #{$b}_solid#{$b}_error & {
+            color: $warning-message-solid-error-color;
+        }
     }
 
     &__descr {
@@ -156,6 +203,22 @@ $b: '.warning-message';
         #{$b}_solid & {
             color: $warning-message-solid-descr-color;
         }
+
+        #{$b}_solid#{$b}_success & {
+            color: $warning-message-solid-success-descr-color;
+        }
+
+        #{$b}_solid#{$b}_info & {
+            color: $warning-message-solid-info-descr-color;
+        }
+
+        #{$b}_solid#{$b}_light-info & {
+            color: $warning-message-solid-light-info-descr-color;
+        }
+
+        #{$b}_solid#{$b}_error & {
+            color: $warning-message-solid-error-descr-color;
+        }
     }
 
     &__action {

package/src/components/warning-message/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="warning-message" :class="classes">
-        <svg class="warning-message__icon"><use :href="`${ICONS_PATH}#${icon}`" /></svg>
+        <svg v-if="!noIcon" class="warning-message__icon"><use :href="`${ICONS_PATH}#${icon}`" /></svg>
         <div class="warning-message__wrapper">
             <div class="warning-message__content">
                 <div v-if="title" class="warning-message__title" v-html="title"></div>
@@ -31,7 +31,7 @@ const props = defineProps({
         type: String,
         default: 'warning',
         validator(value) {
-            return ['warning', 'success', 'info', 'error'].includes(value);
+            return ['warning', 'success', 'info', 'light-info', 'error'].includes(value);
         },
     },
     small: {
@@ -56,6 +56,9 @@ const props = defineProps({
         type: String,
         default: '',
     },
+    noIcon: {
+        type: Boolean,
+    },
 });
 
 const { type, small, solid, title, descr } = toRefs(props);
@@ -66,6 +69,7 @@ const classes = computed(() => {
         'warning-message_solid': solid.value,
         'warning-message_success': type.value === 'success',
         'warning-message_info': type.value === 'info',
+        'warning-message_light-info': type.value === 'light-info',
         'warning-message_error': type.value === 'error',
     };
 });

package/src/variables.scss

@@ -1022,10 +1022,20 @@ $warning-message-small-descr-font: ('font-size': $font-size-xs, 'line-height': $
 
 $warning-message-success-color: $color-success !default;
 $warning-message-info-color: $color-primary !default;
+$warning-message-light-info-color: $color-primary-80 !default;
 $warning-message-error-color: $color-error !default;
 
 $warning-message-solid-color: $font-color-inverted !default;
+$warning-message-solid-success-color: $warning-message-solid-color !default;
+$warning-message-solid-info-color: $warning-message-solid-color !default;
+$warning-message-solid-light-info-color: $font-color-secondary !default;
+$warning-message-solid-error-color: $warning-message-solid-color !default;
+
 $warning-message-solid-descr-color: $warning-message-solid-color !default;
+$warning-message-solid-success-descr-color: $warning-message-solid-success-color !default;
+$warning-message-solid-info-descr-color: $warning-message-solid-info-color !default;
+$warning-message-solid-light-info-descr-color: $warning-message-solid-light-info-color !default;
+$warning-message-solid-error-descr-color: $warning-message-solid-error-color !default;
 
 /********** Панель пустого состояния (.empty-list) **********/