@mozaic-ds/vue 0.36.1 → 0.37.1-beta.0

package/src/components/kpi/MKpi.vue

@@ -1,465 +1,261 @@
 <template>
-  <div class="mc-kpi">
-    <div v-if="size === 's'" class="mc-kpi-small">
-      <div
-        :class="'mc-kpi-small__value-' + [classForTheme]"
-        class="mc-kpi-small__value"
-      >
-        {{ value }}
-      </div>
-      <div v-if="showIcon && icon" class="mc-kpi-small__icon">
-        <m-icon :name="icon" />
-      </div>
-    </div>
-    <div v-else-if="size === 'm'" class="mc-kpi-medium">
-      <div class="mc-kpi-medium__data">
-        <div class="mc-kpi-medium__label">
-          {{ label }}
-        </div>
-      </div>
-      <div
-        class="mc-kpi-medium__container"
-        :class="'mc-kpi-medium__container-' + classForTheme"
-      >
-        <div
-          class="mc-kpi-medium__value"
-          :class="[
-            'mc-kpi-medium__value-' + classForTheme,
-            classExpectedValueWithoutIcon,
-          ]"
-        >
-          {{ value }}
-        </div>
-        <div v-if="showIcon && icon" class="mc-kpi-medium__icon">
-          <div>
-            <m-icon :name="icon" />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div v-else class="mc-kpi-large" :class="'mc-kpi-large-' + classForTheme">
-      <div
-        class="mc-kpi-large__data"
-        :class="[classDetailsBarActive, 'mc-kpi-large__data-' + classForTheme]"
-      >
-        <div class="mc-kpi-large__container">
-          <div
-            class="mc-kpi-large__label"
-            :class="'mc-kpi-large__label-' + classForTheme"
-          >
-            {{ label }}
-          </div>
-          <div
-            class="mc-kpi-large__value"
-            :class="'mc-kpi-large__value-' + classForTheme"
-          >
-            {{ value }}
-          </div>
-        </div>
-      </div>
-      <div v-if="showDetailsBar" class="mc-kpi-large__details">
-        <div
-          v-if="showExpectedValue"
-          class="mc-kpi-large__expected"
-          :class="classExpectedValueWithoutIcon"
-        >
-          {{ expected }}
-        </div>
-        <div
-          v-if="showIcon && icon"
-          class="mc-kpi-large__icon"
-          :class="classIconWithoutExpectedValue"
-        >
-          <m-icon :name="icon" />
-        </div>
+  <div class="mc-kpi" :class="classObject">
+    <span v-if="label" class="mc-kpi__label">{{ label }}</span>
+    <div class="mc-kpi__content">
+      <div class="mc-kpi__value">{{ value }}</div>
+      <div v-if="icon || detail" class="mc-kpi__details">
+        <span v-if="detail" class="mc-kpi__text">
+          {{ detail }}
+        </span>
+        <MIcon v-if="icon" :name="icon" class="mc-kpi__icon" color="black" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import {
-    responsiveModifierValidators,
-} from '../../utils/mozaicClasses';
 import MIcon from '../icon/MIcon.vue';
 export default {
   name: 'MKpi',
-
   components: {
     MIcon,
   },
-
   props: {
-    label: {
-        type: String,
-        default: 'Label',
-    },
     value: {
-        type: String,
-        default: '99.99%'
-    },
-    theme: {
-        type: String,
-        default: 'info',
-    },
-    expected: {
-        type: String,
-        default: '> 10% expected'
-    },
-    size: {
-        type: String,
-        default: 'l',
-        validator: (value) =>
-            responsiveModifierValidators(value, ['s', 'm', 'l',]),
+      type: String,
+      required: true,
     },
     icon: {
-        type: String,
-        default: 'ArrowArrowTopRight16',
+      type: String,
+      required: true,
     },
-    showDetailsBar: {
-        type: Boolean,
-        default: true,
+    label: {
+      type: String,
+      default: undefined,
     },
-    showExpectedValue: {
-        type: Boolean,
-        default: true,
+    type: {
+      type: String,
+      default: 'information',
+      validator: (value) =>
+        ['information', 'warning', 'danger', 'success', 'neutral'].includes(
+          value
+        ),
     },
-    showIcon: {
-        type: Boolean,
-        default: true,
+    detail: {
+      type: String,
+      default: undefined,
     },
   },
-
   computed: {
-    classDetailsBarActive() {
-      return !this.showDetailsBar ? 'mc-kpi__without-details-bar' : '';
-    },
-    classExpectedValueWithoutIcon() {
-      return !this.showIcon ? 'mc-kpi__without-icon' : '';
-    },
-    classIconWithoutExpectedValue() {
-      return !this.showExpectedValue ? 'mc-kpi__without-expected-value' : '';
+    getSize() {
+      let size = 'small';
+
+      if (this.label && !this.detail) {
+        size = 'medium';
+      } else if (this.detail) {
+        size = 'large';
+      }
+
+      return size;
     },
-    classForTheme() {
-      return this.theme;
+    classObject() {
+      return {
+        [`mc-kpi--${this.getSize}`]: this.getSize,
+        [`mc-kpi--${this.type}`]: this.type,
+      };
     },
   },
-
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import 'settings-tools/all-settings';
 
-.mc-kpi {
+$kpi-type: (
+  'information': (
+    'background': #daeff7,
+    'border': #007bb4,
+    'text': #005c91,
+  ),
+  'warning': (
+    'background': #fdf1e8,
+    'border': #c65200,
+    'text': #8c3500,
+  ),
+  'danger': (
+    'background': #fdeaea,
+    'border': #c61112,
+    'text': #8c0003,
+  ),
+  'success': (
+    'background': #ebf5de,
+    'border': #188803,
+    'text': #006902,
+  ),
+  'neutral': (
+    'background': #e6e6e6,
+    'border': #666666,
+    'text': #4d4d4d,
+  ),
+);
+
+$color-kpi-background: var(
+  --color-kpi-background,
+  map-deep-get($kpi-type, 'information', 'background')
+);
+$color-kpi-border: var(
+  --color-kpi-border,
+  map-deep-get($kpi-type, 'information', 'border')
+);
+$color-kpi-text: var(
+  --color-kpi-text,
+  map-deep-get($kpi-type, 'information', 'text')
+);
+
+@mixin set-kpi-container() {
+  background-color: $color-kpi-background;
+  border: 1px solid $color-kpi-border;
+  border-radius: 4px;
+  overflow: hidden;
+}
 
-    &__expected-without-icon {
-        width: 100% !important;
-        text-align: center;
-        border-radius: 4px 4px 4px 4px !important;
-        margin: 0;
+.mc-kpi {
+  $parent: get-parent-selector(&);
+
+  color: $color-kpi-text;
+  display: inline-block;
+
+  // label
+  &__label {
+    @include set-font-scale('04', 'm');
+
+    display: block;
+  }
+
+  // content
+  &__content {
+    display: flex;
+  }
+
+  // value
+  &__value {
+    @include set-font-scale('04', 'm');
+    @include set-font-weight('semi-bold');
+
+    text-align: center;
+  }
+
+  &__details {
+    align-items: center;
+    background-color: $color-grey-000;
+    color: $color-font-dark;
+    display: flex;
+    justify-content: center;
+  }
+
+  &__text {
+    @include set-font-scale('04', 'm');
+  }
+
+  &__icon {
+    display: block;
+    height: $mu100;
+    width: $mu100;
+  }
+
+  // Modifier Size — Small
+  &--small {
+    #{$parent} {
+      &__content {
+        gap: $mu050;
+      }
+
+      &__value {
+        @include set-kpi-container();
+
+        padding: px-to-rem(3) px-to-rem(7);
+      }
+
+      &__details {
+        background-color: transparent;
+      }
     }
+  }
+
+  // Modifier Size — Medium
+  &--medium {
+    #{$parent} {
+      &__label {
+        color: $color-grey-999;
+        margin-bottom: px-to-rem(6);
+      }
+
+      &__content {
+        @include set-kpi-container();
+      }
+
+      &__value {
+        @include set-font-scale('05', 'm');
+
+        padding: $mu050 $mu050 $mu050 px-to-rem(7);
+        flex-grow: 1;
+      }
+
+      &__details {
+        padding-left: $mu075;
+        padding-right: px-to-rem(11);
+      }
+    }
+  }
+
+  // Modifier Size — Large
+  &--large {
+    @include set-kpi-container();
 
-    &__icon-without-expected-value {
-        width: 100% !important;
+    #{$parent} {
+      &__label,
+      &__value {
+        padding-right: px-to-rem(15);
+        padding-left: px-to-rem(15);
+      }
+
+      &__label {
+        @include set-font-scale('05', 'm');
+
+        padding-top: $mu100;
         text-align: center;
-        margin: 0;
-    }
+      }
 
-    &__without-details-bar {
-        height: 100% !important;
-    }
+      &__content {
+        flex-direction: column;
+        width: 100%;
+      }
 
-    /* size S */
-    &-small {
-        display: flex;
-        max-width: 100px;
-        height: 24px;
-        justify-content: space-between;
-        align-items: center;
-
-        &__value {
-            height: 100%;
-            width: 75%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: 700;
-            font-size: 14px;
-            line-height: 18px;
-            border-radius: 4px;
-            border: 1px solid $color-info-500;
-            background-color: $color-info-100;
-            color: $color-info-700;
-
-            &-info {
-                border: 1px solid $color-info-600;
-                background-color: $color-info-100;
-                color: $color-info-700;
-            }
-
-            &-success {
-                border: 1px solid $color-success-600;
-                background-color: $color-success-100;
-                color: $color-success-700;
-            }
-
-            &-danger {
-                border: 1px solid $color-danger-600;
-                background-color: $color-danger-100;
-                color: $color-danger-700;
-            }
-
-            &-neutral {
-                border: 1px solid $color-grey-600;
-                background-color: $color-grey-100;
-                color: $color-grey-700;
-            }
-
-            &-warning {
-                border: 1px solid $color-warning-600;
-                background-color: $color-warning-100;
-                color: $color-warning-700;
-            }
-
-        }
-
-        &__icon {
-            height: 100%;
-            width: 25%;
-            display: flex;
-            justify-content: end;
-            align-items: center;
-        }
-    }
+      &__value {
+        @include set-font-scale('09', 'm');
 
-    /* size M */
-    &-medium {
-        max-width: 167px;
-        height: 64px;
-
-        &__container {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            height: 60%;
-            width: 100%;
-            border-radius: 4px;
-            border: 1px solid $color-info-500;
-
-            &-info {
-                border: 1px solid $color-info-600;
-            }
-
-            &-success {
-                border: 1px solid $color-success-600;
-            }
-
-            &-danger {
-                border: 1px solid $color-danger-600;
-            }
-
-            &-neutral {
-                border: 1px solid $color-grey-600;
-            }
-
-            &-warning {
-                border: 1px solid $color-warning-600;
-            }
-
-        }
-
-        &__label {
-            height: 40%;
-            font-size: 14px;
-            line-height: 18px;
-            overflow-wrap: break-word;
-            width: 100%;
-            display: inline-block;
-            white-space: nowrap;
-            overflow: hidden !important;
-            text-overflow: ellipsis;
-        }
-
-        &__value {
-            color: $color-info-700;
-            font-weight: 700;
-            font-size: 16px;
-            line-height: 22px;
-            height: 100%;
-            width: 75%;
-            text-align: center;
-            align-items: center;
-            display: flex;
-            justify-content: center;
-            border-radius: 4px 0px 0px 4px;
-            background-color: $color-info-100;
-
-            &-info {
-                background-color: $color-info-100;
-                color: $color-info-700;
-            }
-
-            &-success {
-                background-color: $color-success-100;
-                color: $color-success-700;
-            }
-
-            &-danger {
-                background-color: $color-danger-100;
-                color: $color-danger-700;
-            }
-
-            &-neutral {
-                background-color: $color-grey-100;
-                color: $color-grey-700;
-            }
-
-            &-warning {
-                background-color: $color-warning-100;
-                color: $color-warning-700;
-            }
-
-        }
-
-        &__icon {
-            width: 25%;
-            text-align: center;
-        }
-    }
+        padding-bottom: $mu100;
+      }
 
-    /* size L or default */
-    &-large {
-        max-width: 167px;
-        height: 147px;
-        border-radius: 4px 4px 4px 4px;
-        border: 1px solid $color-info-500;
-
-        &__data {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 100%;
-            height: 70%;
-            border-radius: 4px 4px 0px 0px;
-            background-color: $color-info-100;
-
-            &-info {
-                background-color: $color-info-100;
-            }
-
-            &-success {
-                background-color: $color-success-100;
-            }
-
-            &-danger {
-                background-color: $color-danger-100;
-            }
-
-            &-neutral {
-                background-color: $color-grey-100;
-            }
-
-            &-warning {
-                background-color: $color-warning-100;
-            }
-        }
-
-        &__container {
-            width: 100%;
-            text-align: center;
-        }
-
-        &__label {
-            font-weight: 400;
-            font-size: 16px;
-            line-height: 22px;
-            overflow-wrap: break-word;
-            width: 80%;
-            justify-content: center;
-            display: inline-block;
-            white-space: nowrap;
-            overflow: hidden !important;
-            text-overflow: ellipsis;
-            color: $color-info-700;
-        }
-
-        &__value {
-            overflow-wrap: break-word;
-            width: 80%;
-            font-weight: 700;
-            font-size: 34px;
-            line-height: 44px;
-            justify-content: center;
-            display: inline-block;
-            white-space: nowrap;
-            overflow: hidden !important;
-            text-overflow: ellipsis;
-            margin: 0;
-            color: $color-info-700;
-        }
-
-        &__label,
-        &__value {
-
-            &-info {
-                color: $color-info-700;
-            }
-
-            &-success {
-                color: $color-success-700;
-            }
-
-            &-danger {
-                color: $color-danger-700;
-            }
-
-            &-neutral {
-                color: $color-grey-700;
-            }
-
-            &-warning {
-                color: $color-warning-700;
-            }
-        }
-
-        &__details {
-            margin: 0 10px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            height: 30%;
-        }
-
-        &__expected {
-            display: inline-block;
-            width: 80%;
-            white-space: nowrap;
-            overflow: hidden !important;
-            text-overflow: ellipsis;
-        }
-
-        &-info {
-            border: 1px solid $color-info-600;
-        }
-
-        &-success {
-            border: 1px solid $color-success-600;
-        }
-
-        &-danger {
-            border: 1px solid $color-danger-600;
-        }
-
-        &-neutral {
-            border: 1px solid $color-grey-600;
-        }
-
-        &-warning {
-            border: 1px solid $color-warning-600;
-        }
+      &__details {
+        min-height: px-to-rem(47);
+        padding-right: px-to-rem(11);
+        padding-left: px-to-rem(11);
 
+        gap: $mu075;
+      }
     }
-
+  }
+
+  // Modifier Type
+  @each $type, $props in $kpi-type {
+    &--#{$type} {
+      @if ($type != 'information') {
+        --color-kpi-background: #{map-get($props, 'background')};
+        --color-kpi-border: #{map-get($props, 'border')};
+        --color-kpi-text: #{map-get($props, 'text')};
+      }
+    }
+  }
 }
 </style>

package/src/index.js

@@ -34,8 +34,10 @@ export { MField } from './components/field';
 export { MDropdown } from './components/dropdown';
 export { MFileUploader } from './components/fileuploader';
 export { MFlag } from './components/flag';
+export { MHeader } from './components/header';
 export { MHero } from './components/hero';
 export { MIcon } from './components/icon';
+export { MKpi } from './components/kpi';
 export { MLayer } from './components/layer';
 export { MLink } from './components/link';
 export { MListBox, MListBoxActions } from './components/listbox';
@@ -61,4 +63,3 @@ export { MTextArea } from './components/textarea';
 export { MTextInput } from './components/textinput';
 export { MToggle } from './components/toggle';
 export { MTooltip } from './components/tooltip';
-export { MKpi } from './components/kpi';