@weni/unnnic-system 1.16.17 → 1.16.19-develop.0

package/src/components/AvatarIcon/AvatarIcon.vue

@@ -1,90 +1,90 @@
-<template>
-  <div :class="['unnnic-avatar-icon', scheme, size, { disabled: !enabled }]">
-    <unnnic-icon :icon="icon" :scheme="enabled ? scheme : 'neutral-cloudy'" :size="iconSize" />
-  </div>
-</template>
-
-<script>
-import UnnnicIcon from '../Icon.vue';
-
-export default {
-  components: {
-    UnnnicIcon,
-  },
-
-  props: {
-    enabled: {
-      type: Boolean,
-      default: true,
-    },
-
-    icon: {
-      type: String,
-      default: 'graph-stats-1',
-    },
-
-    size: {
-      type: String,
-      default: 'sm',
-      validator(value) {
-        return ['nano', 'xs', 'sm', 'lg', 'xl'].indexOf(value) !== -1;
-      },
-    },
-
-    scheme: {
-      type: String,
-      default: 'aux-blue',
-    },
-  },
-
-  computed: {
-    iconSize() {
-      return {
-        nano: 'xs',
-        xs: 'sm',
-        sm: 'md',
-        lg: 'lg',
-        xl: 'xl',
-      }[this.size];
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
-
-$scheme-colors:
-  'feedback-red' $unnnic-color-feedback-red,
-  'feedback-green' $unnnic-color-feedback-green,
-  'feedback-yellow' $unnnic-color-feedback-yellow,
-  'feedback-blue' $unnnic-color-feedback-blue,
-  'feedback-grey' $unnnic-color-feedback-grey,
-   'aux-blue' $unnnic-color-aux-blue,
-   'aux-purple' $unnnic-color-aux-purple,
-   'aux-orange' $unnnic-color-aux-orange,
-   'aux-lemon' $unnnic-color-aux-lemon,
-   'aux-pink' $unnnic-color-aux-pink;
-
-@each $name, $color in $scheme-colors {
-  .unnnic-avatar-icon {
-    &.#{$name} {
-      background-color: rgba($color, $unnnic-opacity-level-extra-light);
-    }
-  }
-}
-
-.unnnic-avatar-icon.disabled {
-  background-color: $unnnic-color-background-grass;
-}
-
-.unnnic-avatar-icon {
-  border-radius: $unnnic-border-radius-sm;
-  padding: $unnnic-spacing-inset-nano;
-  display: inline-flex;
-
-  &.nano, &.xs {
-    padding: $unnnic-spacing-stack-nano $unnnic-spacing-inline-nano;
-  }
-}
-</style>
+<template>
+  <div :class="['unnnic-avatar-icon', scheme, size, { disabled: !enabled }]">
+    <unnnic-icon :icon="icon" :scheme="enabled ? scheme : 'neutral-cloudy'" :size="iconSize" />
+  </div>
+</template>
+
+<script>
+import UnnnicIcon from '../Icon.vue';
+
+export default {
+  components: {
+    UnnnicIcon,
+  },
+
+  props: {
+    enabled: {
+      type: Boolean,
+      default: true,
+    },
+
+    icon: {
+      type: String,
+      default: 'graph-stats-1',
+    },
+
+    size: {
+      type: String,
+      default: 'sm',
+      validator(value) {
+        return ['nano', 'xs', 'sm', 'lg', 'xl'].indexOf(value) !== -1;
+      },
+    },
+
+    scheme: {
+      type: String,
+      default: 'aux-blue',
+    },
+  },
+
+  computed: {
+    iconSize() {
+      return {
+        nano: 'xs',
+        xs: 'sm',
+        sm: 'md',
+        lg: 'lg',
+        xl: 'xl',
+      }[this.size];
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/unnnic.scss';
+
+$scheme-colors:
+  'feedback-red' $unnnic-color-feedback-red,
+  'feedback-green' $unnnic-color-feedback-green,
+  'feedback-yellow' $unnnic-color-feedback-yellow,
+  'feedback-blue' $unnnic-color-feedback-blue,
+  'feedback-grey' $unnnic-color-feedback-grey,
+   'aux-blue' $unnnic-color-aux-blue,
+   'aux-purple' $unnnic-color-aux-purple,
+   'aux-orange' $unnnic-color-aux-orange,
+   'aux-lemon' $unnnic-color-aux-lemon,
+   'aux-pink' $unnnic-color-aux-pink;
+
+@each $name, $color in $scheme-colors {
+  .unnnic-avatar-icon {
+    &.#{$name} {
+      background-color: rgba($color, $unnnic-opacity-level-extra-light);
+    }
+  }
+}
+
+.unnnic-avatar-icon.disabled {
+  background-color: $unnnic-color-background-grass;
+}
+
+.unnnic-avatar-icon {
+  border-radius: $unnnic-border-radius-sm;
+  padding: $unnnic-spacing-inset-nano;
+  display: inline-flex;
+
+  &.nano, &.xs {
+    padding: $unnnic-spacing-stack-nano $unnnic-spacing-inline-nano;
+  }
+}
+</style>

package/src/components/Banner/Banner.vue

@@ -1,80 +1,80 @@
-<template>
-  <component
-    class="unnnic-banner-component"
-    :is="currentComponent"
-    :v-bind="$attrs"
-    :firstTitle="firstTitle"
-    :secondTitle="secondTitle"
-    :thirdTitle="thirdTitle"
-    :firstDescription="firstDescription"
-    :secondDescription="secondDescription"
-    :thirdDescription="thirdDescription"
-    :subtitle="subtitle"
-    :rating="rating"
-    @ratingAction="emitRatingAction"
-  />
-</template>
-
-<script>
-import InfoBanner from './InfoBanner.vue';
-
-export default {
-  name: 'unnnic-banner',
-  props: {
-    type: {
-      type: String,
-      default: 'info',
-      validator(value) {
-        return ['info'].indexOf(value) !== -1;
-      },
-    },
-    firstTitle: {
-      type: String,
-      default: null,
-    },
-    secondTitle: {
-      type: String,
-      default: null,
-    },
-    thirdTitle: {
-      type: String,
-      default: null,
-    },
-    firstDescription: {
-      type: String,
-      default: null,
-    },
-    secondDescription: {
-      type: String,
-      default: null,
-    },
-    thirdDescription: {
-      type: String,
-      default: null,
-    },
-    subtitle: {
-      type: String,
-      default: null,
-    },
-    rating: {
-      type: Number,
-      default: 0,
-    },
-  },
-  computed: {
-    currentComponent() {
-      if (this.type === 'info') return InfoBanner;
-      return InfoBanner;
-    },
-  },
-  methods: {
-    emitRatingAction(star) {
-      this.$emit('ratingAction', star);
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import '../../assets/scss/unnnic.scss';
-</style>
+<template>
+  <component
+    class="unnnic-banner-component"
+    :is="currentComponent"
+    :v-bind="$attrs"
+    :firstTitle="firstTitle"
+    :secondTitle="secondTitle"
+    :thirdTitle="thirdTitle"
+    :firstDescription="firstDescription"
+    :secondDescription="secondDescription"
+    :thirdDescription="thirdDescription"
+    :subtitle="subtitle"
+    :rating="rating"
+    @ratingAction="emitRatingAction"
+  />
+</template>
+
+<script>
+import InfoBanner from './InfoBanner.vue';
+
+export default {
+  name: 'unnnic-banner',
+  props: {
+    type: {
+      type: String,
+      default: 'info',
+      validator(value) {
+        return ['info'].indexOf(value) !== -1;
+      },
+    },
+    firstTitle: {
+      type: String,
+      default: null,
+    },
+    secondTitle: {
+      type: String,
+      default: null,
+    },
+    thirdTitle: {
+      type: String,
+      default: null,
+    },
+    firstDescription: {
+      type: String,
+      default: null,
+    },
+    secondDescription: {
+      type: String,
+      default: null,
+    },
+    thirdDescription: {
+      type: String,
+      default: null,
+    },
+    subtitle: {
+      type: String,
+      default: null,
+    },
+    rating: {
+      type: Number,
+      default: 0,
+    },
+  },
+  computed: {
+    currentComponent() {
+      if (this.type === 'info') return InfoBanner;
+      return InfoBanner;
+    },
+  },
+  methods: {
+    emitRatingAction(star) {
+      this.$emit('ratingAction', star);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../assets/scss/unnnic.scss';
+</style>

package/src/components/Banner/InfoBanner.vue

@@ -1,158 +1,158 @@
-<template>
-  <div class="unnnic-banner-info">
-    <section class="unnnic-banner-info__section">
-      <div class="unnnic-banner-info__title">{{ firstTitle }}</div>
-      <div class="unnnic-banner-info__description">{{ firstDescription }}</div>
-    </section>
-    <div class="unnnic-banner-info__divider" />
-    <section class="unnnic-banner-info__section">
-      <div class="unnnic-banner-info__title">{{ secondTitle }}</div>
-      <div class="unnnic-banner-info__description">{{ secondDescription }}</div>
-      <div class="unnnic-banner-info__subtitle">{{ subtitle }}</div>
-    </section>
-    <div class="unnnic-banner-info__divider" />
-    <section class="unnnic-banner-info__section">
-      <div class="unnnic-banner-info__title">{{ thirdTitle }}</div>
-      <div class="unnnic-banner-info__description">{{ thirdDescription }}</div>
-      <div class="unnnic-banner-info__rating">
-        <unnnic-icon-svg
-          :key="index"
-          v-for="index in 5"
-          @click.native="emitRatingAction(index)"
-          @mouseover.native="starOver(index)"
-          @mouseout.native="starOut"
-          :class="{
-            'unnnic-banner-info__rating__star': true,
-            'unnnic-banner-info__rating__star__active': index <= baseRating,
-          }"
-          :scheme="starScheme(index)"
-          icon="rating-star-1"
-          size="ant"
-        />
-      </div>
-    </section>
-  </div>
-</template>
-
-<script>
-import UnnnicIconSvg from '../Icon.vue';
-
-export default {
-  name: 'unnnic-banner',
-  components: { UnnnicIconSvg },
-  props: {
-    firstTitle: {
-      type: String,
-      default: null,
-    },
-    secondTitle: {
-      type: String,
-      default: null,
-    },
-    thirdTitle: {
-      type: String,
-      default: null,
-    },
-    firstDescription: {
-      type: String,
-      default: null,
-    },
-    secondDescription: {
-      type: String,
-      default: null,
-    },
-    thirdDescription: {
-      type: String,
-      default: null,
-    },
-    subtitle: {
-      type: String,
-      default: null,
-    },
-    rating: {
-      type: Number,
-      default: 0,
-    },
-  },
-  data() {
-    return {
-      tempRating: null,
-      baseRating: this.rating,
-    };
-  },
-  methods: {
-    emitRatingAction(star) {
-      this.$emit('ratingAction', star);
-    },
-    starScheme(star) {
-      return star <= this.baseRating ? 'feedback-yellow' : 'neutral-clean';
-    },
-    starOver(star) {
-      this.tempRating = this.baseRating;
-      this.baseRating = star;
-    },
-    starOut() {
-      this.baseRating = this.tempRating;
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import '../../assets/scss/unnnic.scss';
-
-.unnnic-banner-info {
-  display: flex;
-  flex-direction: row;
-
-  border-radius: $unnnic-border-radius-sm;
-  padding: $unnnic-squish-md;
-  background-color: $unnnic-color-background-carpet;
-  text-align: center;
-  justify-content: center;
-
-  &__section {
-    flex: 1;
-  }
-
-  &__title {
-    font-family: $unnnic-font-family-secondary;
-    font-weight: $unnnic-font-weight-regular;
-    font-size: $unnnic-font-size-body-lg;
-    line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
-    color: $unnnic-color-neutral-cloudy;
-    margin-bottom: $unnnic-spacing-stack-nano;
-  }
-
-  &__description {
-    font-family: $unnnic-font-family-secondary;
-    font-weight: $unnnic-font-weight-bold;
-    font-size: $unnnic-font-size-title-md;
-    line-height: $unnnic-font-size-title-md + $unnnic-line-height-md;
-    color: $unnnic-color-neutral-dark;
-  }
-
-  &__subtitle {
-    font-family: $unnnic-font-family-secondary;
-    font-weight: $unnnic-font-weight-regular;
-    font-size: $unnnic-font-size-body-lg;
-    line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
-    color: $unnnic-color-neutral-cloudy;
-    margin-top: $unnnic-spacing-stack-nano;
-  }
-
-  &__divider {
-    align-self: center;
-
-    border-left: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
-    height: 36px;
-    margin: 0 $unnnic-inline-md;
-  }
-
-  &__rating {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-  }
-}
-</style>
+<template>
+  <div class="unnnic-banner-info">
+    <section class="unnnic-banner-info__section">
+      <div class="unnnic-banner-info__title">{{ firstTitle }}</div>
+      <div class="unnnic-banner-info__description">{{ firstDescription }}</div>
+    </section>
+    <div class="unnnic-banner-info__divider" />
+    <section class="unnnic-banner-info__section">
+      <div class="unnnic-banner-info__title">{{ secondTitle }}</div>
+      <div class="unnnic-banner-info__description">{{ secondDescription }}</div>
+      <div class="unnnic-banner-info__subtitle">{{ subtitle }}</div>
+    </section>
+    <div class="unnnic-banner-info__divider" />
+    <section class="unnnic-banner-info__section">
+      <div class="unnnic-banner-info__title">{{ thirdTitle }}</div>
+      <div class="unnnic-banner-info__description">{{ thirdDescription }}</div>
+      <div class="unnnic-banner-info__rating">
+        <unnnic-icon-svg
+          :key="index"
+          v-for="index in 5"
+          @click.native="emitRatingAction(index)"
+          @mouseover.native="starOver(index)"
+          @mouseout.native="starOut"
+          :class="{
+            'unnnic-banner-info__rating__star': true,
+            'unnnic-banner-info__rating__star__active': index <= baseRating,
+          }"
+          :scheme="starScheme(index)"
+          icon="rating-star-1"
+          size="ant"
+        />
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import UnnnicIconSvg from '../Icon.vue';
+
+export default {
+  name: 'unnnic-banner',
+  components: { UnnnicIconSvg },
+  props: {
+    firstTitle: {
+      type: String,
+      default: null,
+    },
+    secondTitle: {
+      type: String,
+      default: null,
+    },
+    thirdTitle: {
+      type: String,
+      default: null,
+    },
+    firstDescription: {
+      type: String,
+      default: null,
+    },
+    secondDescription: {
+      type: String,
+      default: null,
+    },
+    thirdDescription: {
+      type: String,
+      default: null,
+    },
+    subtitle: {
+      type: String,
+      default: null,
+    },
+    rating: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      tempRating: null,
+      baseRating: this.rating,
+    };
+  },
+  methods: {
+    emitRatingAction(star) {
+      this.$emit('ratingAction', star);
+    },
+    starScheme(star) {
+      return star <= this.baseRating ? 'feedback-yellow' : 'neutral-clean';
+    },
+    starOver(star) {
+      this.tempRating = this.baseRating;
+      this.baseRating = star;
+    },
+    starOut() {
+      this.baseRating = this.tempRating;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../assets/scss/unnnic.scss';
+
+.unnnic-banner-info {
+  display: flex;
+  flex-direction: row;
+
+  border-radius: $unnnic-border-radius-sm;
+  padding: $unnnic-squish-md;
+  background-color: $unnnic-color-background-carpet;
+  text-align: center;
+  justify-content: center;
+
+  &__section {
+    flex: 1;
+  }
+
+  &__title {
+    font-family: $unnnic-font-family-secondary;
+    font-weight: $unnnic-font-weight-regular;
+    font-size: $unnnic-font-size-body-lg;
+    line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
+    color: $unnnic-color-neutral-cloudy;
+    margin-bottom: $unnnic-spacing-stack-nano;
+  }
+
+  &__description {
+    font-family: $unnnic-font-family-secondary;
+    font-weight: $unnnic-font-weight-bold;
+    font-size: $unnnic-font-size-title-md;
+    line-height: $unnnic-font-size-title-md + $unnnic-line-height-md;
+    color: $unnnic-color-neutral-dark;
+  }
+
+  &__subtitle {
+    font-family: $unnnic-font-family-secondary;
+    font-weight: $unnnic-font-weight-regular;
+    font-size: $unnnic-font-size-body-lg;
+    line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
+    color: $unnnic-color-neutral-cloudy;
+    margin-top: $unnnic-spacing-stack-nano;
+  }
+
+  &__divider {
+    align-self: center;
+
+    border-left: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
+    height: 36px;
+    margin: 0 $unnnic-inline-md;
+  }
+
+  &__rating {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+  }
+}
+</style>