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

package/src/components/ImportCard/ImportCard.vue

@@ -1,199 +1,199 @@
-<template>
-  <div class="unnnic-import-card">
-    <div class="unnnic-import-card__data">
-      <div v-if="isImporting" class="unnnic-import-card__data__title">
-        {{ $t('import_card.importing') }}...
-      </div>
-      <div v-else class="unnnic-import-card__data__title">
-        {{ title }}
-      </div>
-
-      <div v-if="subtitle && isImporting" class="unnnic-import-card__data__subtitle">
-        <div v-if="subtitle && isImporting" class="unnnic-import-card__data__subtitle__text">
-          {{ subtitle }}
-        </div>
-        <div v-if="subtitle && isImporting" class="unnnic-import-card__data__subtitle__progress">
-          &nbsp;- {{ importProgress }}%
-        </div>
-      </div>
-    </div>
-
-    <div class="unnnic-import-card__buttons">
-      <unnnic-button
-        v-if="canImport"
-        class="unnnic-import-card__buttons__import"
-        size="small"
-        :icon-center="uploadIcon"
-        type="primary"
-        @click="importFile"
-      >
-        <input
-          type="file"
-          ref="file"
-          :accept="acceptedFormats"
-          @change="handleFileChange"
-          style="display: none;"
-        />
-      </unnnic-button>
-
-      <unnnic-button
-        v-if="canDelete"
-        class="unnnic-import-card__buttons__delete"
-        size="small"
-        :icon-center="`close-1`"
-        type="primary"
-        @click="emitDeletion"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import unnnicButton from '../Button/Button.vue';
-
-export default {
-  name: 'ImportCard',
-  components: {
-    unnnicButton,
-  },
-  props: {
-    title: {
-      type: String,
-      default: '',
-    },
-    subtitle: {
-      type: String,
-      default: '',
-    },
-    importProgress: {
-      type: Number,
-      default: 0,
-    },
-    isImporting: {
-      type: Boolean,
-      default: false,
-    },
-    canImport: {
-      type: Boolean,
-      default: true,
-    },
-    canDelete: {
-      type: Boolean,
-      default: true,
-    },
-    acceptedFormats: {
-      type: String,
-      default: '*',
-    },
-    uploadIcon: {
-      type: String,
-      default: 'upload-bottom-1',
-    },
-  },
-  methods: {
-    importFile() {
-      this.$refs.file.click();
-    },
-    handleFileChange(event) {
-      const { files } = event.target;
-      let file;
-
-      if (files.length > 0) {
-        [file] = event.target.files;
-      }
-
-      if (file) {
-        this.$emit('modifiedFile', file);
-      }
-    },
-    emitDeletion() {
-      this.$emit('delete');
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
-
-.unnnic-import-card {
-  display: flex;
-
-  border: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
-  border-radius: $unnnic-border-radius-md;
-
-  background-color: $unnnic-color-background-snow;
-  padding: $unnnic-squish-md;
-
-  &__data {
-    align-self: center;
-
-    flex: 1;
-    gap: $unnnic-spacing-stack-nano;
-
-    font-family: $unnnic-font-family-secondary;
-
-    &__title {
-      color: $unnnic-color-neutral-darkest;
-      font-size: $unnnic-font-size-body-gt;
-      line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
-      font-weight: $unnnic-font-weight-bold;
-    }
-
-    &__subtitle {
-      color: $unnnic-color-neutral-cloudy;
-      font-size: $unnnic-font-size-body-md;
-      line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
-      font-weight: $unnnic-font-weight-regular;
-
-      display: inline-flex;
-
-      &__text {
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        word-break: break-all;
-      }
-
-      &__progress {
-        min-width: fit-content;
-      }
-    }
-  }
-
-  &__buttons {
-    display: flex;
-    gap: $unnnic-spacing-inline-xs;
-
-    margin-left: $unnnic-spacing-inline-xs;
-
-    align-self: center;
-
-    &__import {
-      background-color: rgba($unnnic-color-brand-weni, $unnnic-opacity-level-light);
-
-      ::v-deep .unnnic-icon {
-        svg {
-          & .primary {
-            fill: $unnnic-color-brand-weni;
-          }
-        }
-      }
-    }
-
-    &__delete {
-      background-color: rgba($unnnic-color-feedback-red, $unnnic-opacity-level-light);
-
-      ::v-deep .unnnic-icon {
-        svg {
-          & .primary {
-            fill: $unnnic-color-feedback-red;
-          }
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="unnnic-import-card">
+    <div class="unnnic-import-card__data">
+      <div v-if="isImporting" class="unnnic-import-card__data__title">
+        {{ $t('import_card.importing') }}...
+      </div>
+      <div v-else class="unnnic-import-card__data__title">
+        {{ title }}
+      </div>
+
+      <div v-if="subtitle && isImporting" class="unnnic-import-card__data__subtitle">
+        <div v-if="subtitle && isImporting" class="unnnic-import-card__data__subtitle__text">
+          {{ subtitle }}
+        </div>
+        <div v-if="subtitle && isImporting" class="unnnic-import-card__data__subtitle__progress">
+          &nbsp;- {{ importProgress }}%
+        </div>
+      </div>
+    </div>
+
+    <div class="unnnic-import-card__buttons">
+      <unnnic-button
+        v-if="canImport"
+        class="unnnic-import-card__buttons__import"
+        size="small"
+        :icon-center="uploadIcon"
+        type="primary"
+        @click="importFile"
+      >
+        <input
+          type="file"
+          ref="file"
+          :accept="acceptedFormats"
+          @change="handleFileChange"
+          style="display: none;"
+        />
+      </unnnic-button>
+
+      <unnnic-button
+        v-if="canDelete"
+        class="unnnic-import-card__buttons__delete"
+        size="small"
+        :icon-center="`close-1`"
+        type="primary"
+        @click="emitDeletion"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import unnnicButton from '../Button/Button.vue';
+
+export default {
+  name: 'ImportCard',
+  components: {
+    unnnicButton,
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    subtitle: {
+      type: String,
+      default: '',
+    },
+    importProgress: {
+      type: Number,
+      default: 0,
+    },
+    isImporting: {
+      type: Boolean,
+      default: false,
+    },
+    canImport: {
+      type: Boolean,
+      default: true,
+    },
+    canDelete: {
+      type: Boolean,
+      default: true,
+    },
+    acceptedFormats: {
+      type: String,
+      default: '*',
+    },
+    uploadIcon: {
+      type: String,
+      default: 'upload-bottom-1',
+    },
+  },
+  methods: {
+    importFile() {
+      this.$refs.file.click();
+    },
+    handleFileChange(event) {
+      const { files } = event.target;
+      let file;
+
+      if (files.length > 0) {
+        [file] = event.target.files;
+      }
+
+      if (file) {
+        this.$emit('modifiedFile', file);
+      }
+    },
+    emitDeletion() {
+      this.$emit('delete');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/unnnic.scss';
+
+.unnnic-import-card {
+  display: flex;
+
+  border: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
+  border-radius: $unnnic-border-radius-md;
+
+  background-color: $unnnic-color-background-snow;
+  padding: $unnnic-squish-md;
+
+  &__data {
+    align-self: center;
+
+    flex: 1;
+    gap: $unnnic-spacing-stack-nano;
+
+    font-family: $unnnic-font-family-secondary;
+
+    &__title {
+      color: $unnnic-color-neutral-darkest;
+      font-size: $unnnic-font-size-body-gt;
+      line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
+      font-weight: $unnnic-font-weight-bold;
+    }
+
+    &__subtitle {
+      color: $unnnic-color-neutral-cloudy;
+      font-size: $unnnic-font-size-body-md;
+      line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
+      font-weight: $unnnic-font-weight-regular;
+
+      display: inline-flex;
+
+      &__text {
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-all;
+      }
+
+      &__progress {
+        min-width: fit-content;
+      }
+    }
+  }
+
+  &__buttons {
+    display: flex;
+    gap: $unnnic-spacing-inline-xs;
+
+    margin-left: $unnnic-spacing-inline-xs;
+
+    align-self: center;
+
+    &__import {
+      background-color: rgba($unnnic-color-brand-weni, $unnnic-opacity-level-light);
+
+      ::v-deep .unnnic-icon {
+        svg {
+          & .primary {
+            fill: $unnnic-color-brand-weni;
+          }
+        }
+      }
+    }
+
+    &__delete {
+      background-color: rgba($unnnic-color-feedback-red, $unnnic-opacity-level-light);
+
+      ::v-deep .unnnic-icon {
+        svg {
+          & .primary {
+            fill: $unnnic-color-feedback-red;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/Indicator/Indicator.vue

@@ -1,108 +1,108 @@
-<template>
-  <div class="weni-step-indicator">
-    <div
-      v-for="step in numberOfSteps"
-      :class="{
-        'weni-step-indicator__step__wrapper': true,
-        'weni-step-indicator--has-separator': step > 1,
-      }"
-      :key="step"
-    >
-      <div
-        v-if="step !== 1"
-        :class="{
-          'weni-step-indicator__step__separator': true,
-          'weni-step-indicator__step__separator--active': step <= currentStep,
-        }"
-      />
-      <div
-        :class="{
-          'weni-step-indicator__step': true,
-          'weni-step-indicator__step--active': step <= currentStep,
-        }"
-      >
-        <span class="weni-step-indicator__label"> {{ titleForStep(step) }} </span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'unnnic-indicator',
-  props: {
-    numberOfSteps: {
-      type: Number,
-      required: true,
-    },
-    titles: {
-      type: Array,
-      default: () => [],
-    },
-    currentStep: {
-      type: Number,
-      default: 0,
-    },
-  },
-  methods: {
-    titleForStep(step) {
-      try {
-        return this.titles[step - 1];
-      } catch (e) {
-        return null;
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
-
-.weni-step-indicator {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  &--has-separator {
-    flex: 1;
-  }
-  &__step {
-    border-radius: 50%;
-    height: $unnnic-avatar-size-nano;
-    width: $unnnic-avatar-size-nano;
-    border: $unnnic-border-width-thick solid $unnnic-color-neutral-lightest;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-    position: relative;
-    &__wrapper {
-      display: flex;
-      align-items: center;
-    }
-    &--active {
-      background-color: $unnnic-color-brand-weni;
-      border: 4px solid rgba(0, 222, 210, 0.24);
-      background-clip: content-box;
-    }
-    &__separator {
-      border: $unnnic-border-width-thin solid $unnnic-color-neutral-lightest;
-      margin: 0 $unnnic-inline-xs;
-      border-radius: 3px;
-      flex: 1;
-      &--active {
-        border: 2px solid $unnnic-color-brand-weni;
-      }
-    }
-  }
-  &__label {
-    position: absolute;
-    white-space: nowrap;
-    text-align: center;
-    transform: translateX(-50%);
-    left: 50%;
-    top: 100%;
-    margin: $unnnic-inline-xs 0 0 0;
-    color: $unnnic-color-neutral-cleanest;
-    font-size: $unnnic-font-size-body-gt;
-    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
-  }
-}
-</style>
+<template>
+  <div class="weni-step-indicator">
+    <div
+      v-for="step in numberOfSteps"
+      :class="{
+        'weni-step-indicator__step__wrapper': true,
+        'weni-step-indicator--has-separator': step > 1,
+      }"
+      :key="step"
+    >
+      <div
+        v-if="step !== 1"
+        :class="{
+          'weni-step-indicator__step__separator': true,
+          'weni-step-indicator__step__separator--active': step <= currentStep,
+        }"
+      />
+      <div
+        :class="{
+          'weni-step-indicator__step': true,
+          'weni-step-indicator__step--active': step <= currentStep,
+        }"
+      >
+        <span class="weni-step-indicator__label"> {{ titleForStep(step) }} </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'unnnic-indicator',
+  props: {
+    numberOfSteps: {
+      type: Number,
+      required: true,
+    },
+    titles: {
+      type: Array,
+      default: () => [],
+    },
+    currentStep: {
+      type: Number,
+      default: 0,
+    },
+  },
+  methods: {
+    titleForStep(step) {
+      try {
+        return this.titles[step - 1];
+      } catch (e) {
+        return null;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/scss/unnnic.scss";
+
+.weni-step-indicator {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  &--has-separator {
+    flex: 1;
+  }
+  &__step {
+    border-radius: 50%;
+    height: $unnnic-avatar-size-nano;
+    width: $unnnic-avatar-size-nano;
+    border: $unnnic-border-width-thick solid $unnnic-color-neutral-lightest;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    position: relative;
+    &__wrapper {
+      display: flex;
+      align-items: center;
+    }
+    &--active {
+      background-color: $unnnic-color-brand-weni;
+      border: 4px solid rgba(0, 222, 210, 0.24);
+      background-clip: content-box;
+    }
+    &__separator {
+      border: $unnnic-border-width-thin solid $unnnic-color-neutral-lightest;
+      margin: 0 $unnnic-inline-xs;
+      border-radius: 3px;
+      flex: 1;
+      &--active {
+        border: 2px solid $unnnic-color-brand-weni;
+      }
+    }
+  }
+  &__label {
+    position: absolute;
+    white-space: nowrap;
+    text-align: center;
+    transform: translateX(-50%);
+    left: 50%;
+    top: 100%;
+    margin: $unnnic-inline-xs 0 0 0;
+    color: $unnnic-color-neutral-cleanest;
+    font-size: $unnnic-font-size-body-gt;
+    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
+  }
+}
+</style>