@formixru/b2b-ui 1.0.0

package/src/components/total/index.scss

@@ -0,0 +1,162 @@
+@use '../../variables' as *;
+
+$b: '.total';
+
+#{$b} {
+    background-color: $total-bg;
+    border-radius: $total-radius;
+    display: flex;
+    flex-direction: column;
+    padding: 4px * 6 4px * 4;
+
+    @include dark-border;
+    @include font($total-font);
+
+    @media (--tablet-landscape-up) {
+        align-items: center;
+        flex-direction: row;
+        justify-content: space-between;
+        padding-left: 4px * 8;
+        padding-right: 4px * 8;
+    }
+
+    &_shadow {
+        box-shadow: $total-shadow;
+    }
+
+    &__title {
+        @include font($total-title-mobile-font);
+
+        @media (--tablet-landscape-up) {
+            @include font($total-title-desktop-font);
+        }
+    }
+
+    &__wrapper {
+        display: flex;
+        flex-direction: column;
+        margin-top: 4px * 6;
+
+        @media (--tablet-landscape-up) {
+            flex-direction: row;
+            margin-left: 4px * 8;
+            margin-top: 0;
+        }
+    }
+
+    &__specs-list {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    &__specs-item {
+        align-items: baseline;
+        display: flex;
+        justify-content: space-between;
+
+        &:not(:first-child) {
+            margin-top: 4px * 3;
+        }
+    }
+
+    &__specs-label {
+        color: $total-specs-label-color;
+        margin-right: 4px * 6;
+
+        @include font($total-specs-label-font);
+
+        @media (--tablet-landscape-up) {
+            max-width: 4px * 25;
+        }
+    }
+
+    &__specs-value {
+        text-align: right;
+
+        @include font($total-specs-value-font);
+
+        &_error {
+            color: $total-specs-value-error-color;
+        }
+    }
+
+    &__amount-list {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        &:not(:first-child) {
+            margin-top: 4px * 3;
+
+            @media (--tablet-landscape-up) {
+                border-left: $total-amount-list-separator-width solid $total-amount-list-separator-color;
+                margin-left: 4px * 6;
+                margin-top: 0;
+                padding-left: 4px * 6;
+            }
+        }
+    }
+
+    &__amount-item {
+        align-items: baseline;
+        display: flex;
+        justify-content: space-between;
+
+        &:not(:first-child) {
+            margin-top: 4px * 4;
+        }
+
+        &_big {
+            align-items: flex-start;
+        }
+    }
+
+    &__amount-label {
+        color: $total-amount-label-color;
+        margin-right: 4px * 6;
+
+        @include font($total-amount-label-font);
+    }
+
+    &__amount-value {
+        color: $total-amount-value-color;
+        text-align: right;
+
+        @include font($total-amount-value-font);
+
+        > b {
+            color: $total-amount-value-b-color;
+
+            @include font($total-amount-value-b-mobile-font);
+
+            @media (--tablet-landscape-up) {
+                @include font($total-amount-value-b-desktop-font);
+            }
+        }
+
+        > s {
+            color: $total-amount-value-s-color;
+            display: block;
+
+            @include font($total-amount-value-s-font);
+        }
+    }
+
+    &__amount-tax {
+        color: $total-amount-tax-color;
+        margin-top: 2px;
+
+        @media (--tablet-portrait-down) {
+            @include font($total-amount-tax-font);
+        }
+    }
+
+    &__promocode {
+        margin-top: 4px * 4;
+
+        @media (--tablet-landscape-up) {
+            width: 4px * 85;
+        }
+    }
+}

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

@@ -0,0 +1,170 @@
+@use '../../variables' as *;
+
+$b: '.warning-message';
+
+#{$b} {
+    align-items: flex-start;
+    background-color: $warning-message-bg;
+    border-radius: $warning-message-radius;
+    box-shadow: $warning-message-shadow;
+    display: flex;
+    padding-bottom: 4px * 6;
+    padding-left: 4px * 4;
+    padding-right: 4px * 4;
+    padding-top: 4px * 4;
+
+    @include dark-border;
+
+    @media (--tablet-landscape-up) {
+        padding-bottom: 4px * 8;
+        padding-left: 4px * 6;
+        padding-right: 4px * 6;
+        padding-top: 4px * 6;
+    }
+
+    &_small {
+        padding-bottom: 4px * 6;
+        padding-left: 4px * 4;
+        padding-right: 4px * 4;
+        padding-top: 4px * 4;
+    }
+
+    &_success {
+    }
+
+    &_info {
+    }
+
+    &_error {
+    }
+
+    &_solid {
+        background-color: $warning-message-color;
+
+        &#{$b}_success {
+            background-color: $warning-message-success-color;
+        }
+
+        &#{$b}_info {
+            background-color: $warning-message-info-color;
+        }
+
+        &#{$b}_error {
+            background-color: $warning-message-error-color;
+        }
+    }
+
+    &__icon {
+        fill: $warning-message-color;
+        flex-shrink: 0;
+        height: 4px * 6;
+        margin-right: 4px * 2;
+        width: 4px * 6;
+
+        #{$b}_small & {
+            height: 4px * 5;
+            width: 4px * 5;
+        }
+
+        #{$b}_solid & {
+            fill: $warning-message-solid-color !important;
+        }
+
+        #{$b}_success & {
+            fill: $warning-message-success-color;
+        }
+
+        #{$b}_info & {
+            fill: $warning-message-info-color;
+        }
+
+        #{$b}_error & {
+            fill: $warning-message-error-color;
+        }
+    }
+
+    &__wrapper {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        position: relative;
+        top: 2px;
+
+        @media (--tablet-landscape-up) {
+            flex-direction: row;
+        }
+
+        #{$b}_small & {
+            top: 3px;
+        }
+    }
+
+    &__content {
+        flex-grow: 1;
+
+        @media (--tablet-portrait-down) {
+            text-align: center;
+        }
+
+        #{$b}__icon + #{$b}__wrapper & {
+            @media (--tablet-portrait-down) {
+                text-align: left;
+            }
+        }
+    }
+
+    &__title {
+        color: $warning-message-color;
+
+        @include font($warning-message-title-font);
+
+        #{$b}_small & {
+            @include font($warning-message-small-title-font);
+        }
+
+        #{$b}_solid & {
+            color: $warning-message-solid-color !important;
+        }
+
+        #{$b}_success & {
+            color: $warning-message-success-color;
+        }
+
+        #{$b}_info & {
+            color: $warning-message-info-color;
+        }
+
+        #{$b}_error & {
+            color: $warning-message-error-color;
+        }
+    }
+
+    &__descr {
+        color: $warning-message-descr-color;
+
+        @include font($warning-message-descr-font);
+
+        &:not(:first-child) {
+            margin-top: 4px * 2;
+        }
+
+        #{$b}_small & {
+            @include font($warning-message-small-descr-font);
+        }
+
+        #{$b}_solid & {
+            color: $warning-message-solid-descr-color;
+        }
+    }
+
+    &__action {
+        flex-shrink: 0;
+        margin-top: 4px * 4;
+
+        @media (--tablet-landscape-up) {
+            margin-left: 4px * 6;
+            margin-top: 0;
+        }
+    }
+}

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

@@ -0,0 +1,94 @@
+<template>
+    <div class="warning-message" :class="classes">
+        <svg 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>
+                <div v-if="descr" class="warning-message__descr" v-html="descr"></div>
+            </div>
+            <a
+                v-if="actionUrl.length > 0"
+                class="warning-message__action button"
+                :class="{ button_inverted: solid, button_alt: !solid }"
+                :href="actionUrl"
+            >
+                <svg v-if="actionIcon.length > 0" class="button__icon">
+                    <use :href="`${ICONS_PATH}#${actionIcon}`" />
+                </svg>
+                Ссылка
+            </a>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed, toRefs } from 'vue';
+
+const ICONS_PATH = window.ICONS_PATH;
+
+const props = defineProps({
+    type: {
+        type: String,
+        default: 'warning',
+        validator(value) {
+            return ['warning', 'success', 'info', 'error'].includes(value);
+        },
+    },
+    small: {
+        type: Boolean,
+    },
+    solid: {
+        type: Boolean,
+    },
+    title: {
+        type: String,
+        default: '',
+    },
+    descr: {
+        type: String,
+        default: '',
+    },
+    actionUrl: {
+        type: String,
+        default: '',
+    },
+    actionIcon: {
+        type: String,
+        default: '',
+    },
+});
+
+const { type, small, solid, title, descr } = toRefs(props);
+
+const classes = computed(() => {
+    return {
+        warning_small: small.value,
+        warning_solid: solid.value,
+        warning_success: type.value === 'success',
+        warning_info: type.value === 'info',
+        warning_error: type.value === 'error',
+    };
+});
+
+const icon = computed(() => {
+    let icon;
+    switch (type.value) {
+        case 'success': {
+            icon = 'check';
+            break;
+        }
+        case 'info': {
+            icon = 'info';
+            break;
+        }
+        case 'error': {
+            icon = 'delete';
+            break;
+        }
+        default: {
+            icon = 'warning';
+        }
+    }
+    return icon;
+});
+</script>