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

package/src/components/Card/CardData.vue

@@ -1,117 +1,117 @@
-<template>
-  <div class="card">
-    <div class="header">
-      <div class="title">{{ title }}</div>
-
-      <div v-if="checked" class="check">
-        <unnnic-icon
-          size="md"
-          icon="check-circle-1-1-1"
-          scheme="feedback-green"
-        />
-      </div>
-    </div>
-
-    <div class="description">{{ description }}</div>
-
-    <div v-if="score || info" class="footer">
-      <div class="evaluation">
-        <unnnic-icon
-          v-if="score"
-          size="sm"
-          icon="rating-star-1"
-          scheme="feedback-yellow"
-        />
-
-        {{ score }}
-
-        <span class="info">{{ info }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import unnnicIcon from '../Icon.vue';
-
-export default {
-  components: { unnnicIcon },
-
-  props: {
-    title: {
-      type: String,
-    },
-
-    description: {
-      type: String,
-    },
-
-    score: {
-      type: String,
-    },
-
-    info: {
-      type: String,
-    },
-
-    checked: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
-
-.card {
-  background-color: $unnnic-color-background-snow;
-  padding: $unnnic-spacing-inset-sm - $unnnic-border-width-thinner;
-  border: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
-  border-radius: $unnnic-border-radius-md;
-
-  .header {
-    margin-bottom: $unnnic-spacing-stack-nano;
-    display: flex;
-
-    .title {
-      font-family: $unnnic-font-family-secondary;
-      font-weight: $unnnic-font-weight-bold;
-      font-size: $unnnic-font-size-body-lg;
-      line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
-      color: $unnnic-color-neutral-darkest;
-      flex: 1;
-    }
-
-    .check {
-      margin-left: $unnnic-spacing-inline-xs;
-    }
-  }
-
-  .description {
-    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;
-  }
-
-  .footer {
-    margin-top: $unnnic-spacing-stack-nano;
-
-    .evaluation {
-      font-family: $unnnic-font-family-secondary;
-      font-weight: $unnnic-font-weight-bold;
-      font-size: $unnnic-font-size-body-gt;
-      line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
-      color: $unnnic-color-neutral-darkest;
-
-      .info {
-        font-weight: $unnnic-font-weight-regular;
-        color: $unnnic-color-neutral-cloudy;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="card">
+    <div class="header">
+      <div class="title">{{ title }}</div>
+
+      <div v-if="checked" class="check">
+        <unnnic-icon
+          size="md"
+          icon="check-circle-1-1-1"
+          scheme="feedback-green"
+        />
+      </div>
+    </div>
+
+    <div class="description">{{ description }}</div>
+
+    <div v-if="score || info" class="footer">
+      <div class="evaluation">
+        <unnnic-icon
+          v-if="score"
+          size="sm"
+          icon="rating-star-1"
+          scheme="feedback-yellow"
+        />
+
+        {{ score }}
+
+        <span class="info">{{ info }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import unnnicIcon from '../Icon.vue';
+
+export default {
+  components: { unnnicIcon },
+
+  props: {
+    title: {
+      type: String,
+    },
+
+    description: {
+      type: String,
+    },
+
+    score: {
+      type: String,
+    },
+
+    info: {
+      type: String,
+    },
+
+    checked: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/scss/unnnic.scss";
+
+.card {
+  background-color: $unnnic-color-background-snow;
+  padding: $unnnic-spacing-inset-sm - $unnnic-border-width-thinner;
+  border: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
+  border-radius: $unnnic-border-radius-md;
+
+  .header {
+    margin-bottom: $unnnic-spacing-stack-nano;
+    display: flex;
+
+    .title {
+      font-family: $unnnic-font-family-secondary;
+      font-weight: $unnnic-font-weight-bold;
+      font-size: $unnnic-font-size-body-lg;
+      line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
+      color: $unnnic-color-neutral-darkest;
+      flex: 1;
+    }
+
+    .check {
+      margin-left: $unnnic-spacing-inline-xs;
+    }
+  }
+
+  .description {
+    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;
+  }
+
+  .footer {
+    margin-top: $unnnic-spacing-stack-nano;
+
+    .evaluation {
+      font-family: $unnnic-font-family-secondary;
+      font-weight: $unnnic-font-weight-bold;
+      font-size: $unnnic-font-size-body-gt;
+      line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
+      color: $unnnic-color-neutral-darkest;
+
+      .info {
+        font-weight: $unnnic-font-weight-regular;
+        color: $unnnic-color-neutral-cloudy;
+      }
+    }
+  }
+}
+</style>

package/src/components/Card/CardStatusesContainer.vue

@@ -1,222 +1,222 @@
-<template>
-  <div class="unnnic-card-container">
-    <div class="header">
-      <div class="title">
-        <span class="name" :title="name.length > 25 ? name : null">
-          {{ name }}
-        </span>
-
-        <div v-if="subtitle" class="subtitle">
-          {{ subtitle }}
-        </div>
-      </div>
-
-      <slot name="header-buttons" />
-    </div>
-
-    <div v-if="description" class="description">
-      {{ description }}
-    </div>
-
-    <div v-if="descriptionRow || descriptionRowInfo" class="description-row-container">
-      <div v-if="descriptionRow" class="description-row">
-        {{ descriptionRow }}
-      </div>
-
-      <unnnic-tool-tip v-if="descriptionRowInfo" side="top" :text="descriptionRowInfo" enabled>
-        <unnnic-icon
-          class="info"
-          icon="information-circle-4"
-          size="sm"
-          scheme="neutral-soft"
-        ></unnnic-icon>
-      </unnnic-tool-tip>
-    </div>
-
-    <div class="separator" />
-
-    <slot name="content" />
-
-    <div
-      class="statuses"
-      :style="{
-        gridTemplateColumns: `repeat(auto-fit, minmax(${minStatusWidth}, 1fr))`,
-      }"
-    >
-      <div class="status" v-for="(status, index) in statuses" :key="index">
-        <div class="title">{{ status.title }}</div>
-
-        <div class="content">
-          <unnnic-avatar-icon :icon="status.icon" :scheme="status.scheme" size="xs" />
-
-          <div class="number">
-            {{ status.count }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import UnnnicAvatarIcon from '../AvatarIcon/AvatarIcon.vue';
-import UnnnicToolTip from '../ToolTip/ToolTip.vue';
-import UnnnicIcon from '../Icon.vue';
-import { unnnicFontSize } from '../config';
-
-export default {
-  components: {
-    UnnnicAvatarIcon,
-    UnnnicToolTip,
-    UnnnicIcon,
-  },
-
-  props: {
-    name: {
-      type: String,
-      default: '',
-    },
-
-    subtitle: {
-      type: String,
-      default: '',
-    },
-
-    description: {
-      type: String,
-      default: '',
-    },
-
-    descriptionRow: {
-      type: String,
-      default: '',
-    },
-
-    descriptionRowInfo: {
-      type: String,
-      default: '',
-    },
-
-    statuses: {
-      type: Array,
-    },
-
-    minStatusWidth: {
-      type: String,
-      default: 5.625 * unnnicFontSize,
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
-
-.unnnic-card-container {
-  padding: $unnnic-inset-sm;
-  border: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
-  border-radius: $unnnic-border-radius-md;
-
-  .separator {
-    height: $unnnic-border-width-thinner;
-    background-color: $unnnic-color-neutral-lightest;
-    margin: $unnnic-spacing-stack-xs 0;
-  }
-
-  &--highlighted {
-    color: $unnnic-color-brand-weni;
-    font-weight: $unnnic-font-weight-bold;
-  }
-
-  .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .title {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      width: calc(100% - #{5 * $unnnic-font-size});
-      margin-right: $unnnic-spacing-inline-xs;
-
-      .name {
-        font-family: $unnnic-font-family-secondary;
-        font-weight: $unnnic-font-weight-bold;
-        font-size: $unnnic-font-size-body-lg;
-        line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
-        color: $unnnic-color-neutral-darkest;
-
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 100%;
-      }
-
-      .subtitle {
-        font-family: $unnnic-font-family-secondary;
-        font-weight: $unnnic-font-weight-regular;
-        font-size: $unnnic-font-size-body-md;
-        line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
-        color: $unnnic-color-neutral-cloudy;
-      }
-    }
-  }
-
-  .description {
-    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: $unnnic-spacing-stack-sm 0;
-  }
-
-  .description-row-container {
-    display: flex;
-
-    .description-row {
-      font-family: $unnnic-font-family-secondary;
-      font-weight: $unnnic-font-weight-bold;
-      font-size: $unnnic-font-size-body-md;
-      line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
-      color: $unnnic-color-neutral-cloudy;
-      margin-right: $unnnic-spacing-inline-xs;
-    }
-  }
-
-  .statuses {
-    display: grid;
-    justify-content: space-between;
-    gap: $unnnic-spacing-inline-xs;
-    grid-template-columns: repeat(auto-fit, minmax(5.625 * $unnnic-font-size, 1fr));
-
-    .status {
-      flex: 1;
-
-      .title {
-        font-family: $unnnic-font-family-secondary;
-        font-weight: $unnnic-font-weight-regular;
-        font-size: $unnnic-font-size-body-gt;
-        line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
-        color: $unnnic-color-neutral-dark;
-      }
-
-      .content {
-        margin-top: $unnnic-spacing-stack-nano;
-        display: flex;
-        align-items: center;
-
-        .number {
-          margin-left: $unnnic-spacing-inline-xs;
-          font-family: $unnnic-font-family-secondary;
-          font-weight: $unnnic-font-weight-black;
-          font-size: $unnnic-font-size-body-gt;
-          line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
-          color: $unnnic-color-neutral-darkest;
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="unnnic-card-container">
+    <div class="header">
+      <div class="title">
+        <span class="name" :title="name.length > 25 ? name : null">
+          {{ name }}
+        </span>
+
+        <div v-if="subtitle" class="subtitle">
+          {{ subtitle }}
+        </div>
+      </div>
+
+      <slot name="header-buttons" />
+    </div>
+
+    <div v-if="description" class="description">
+      {{ description }}
+    </div>
+
+    <div v-if="descriptionRow || descriptionRowInfo" class="description-row-container">
+      <div v-if="descriptionRow" class="description-row">
+        {{ descriptionRow }}
+      </div>
+
+      <unnnic-tool-tip v-if="descriptionRowInfo" side="top" :text="descriptionRowInfo" enabled>
+        <unnnic-icon
+          class="info"
+          icon="information-circle-4"
+          size="sm"
+          scheme="neutral-soft"
+        ></unnnic-icon>
+      </unnnic-tool-tip>
+    </div>
+
+    <div class="separator" />
+
+    <slot name="content" />
+
+    <div
+      class="statuses"
+      :style="{
+        gridTemplateColumns: `repeat(auto-fit, minmax(${minStatusWidth}, 1fr))`,
+      }"
+    >
+      <div class="status" v-for="(status, index) in statuses" :key="index">
+        <div class="title">{{ status.title }}</div>
+
+        <div class="content">
+          <unnnic-avatar-icon :icon="status.icon" :scheme="status.scheme" size="xs" />
+
+          <div class="number">
+            {{ status.count }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import UnnnicAvatarIcon from '../AvatarIcon/AvatarIcon.vue';
+import UnnnicToolTip from '../ToolTip/ToolTip.vue';
+import UnnnicIcon from '../Icon.vue';
+import { unnnicFontSize } from '../config';
+
+export default {
+  components: {
+    UnnnicAvatarIcon,
+    UnnnicToolTip,
+    UnnnicIcon,
+  },
+
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+
+    subtitle: {
+      type: String,
+      default: '',
+    },
+
+    description: {
+      type: String,
+      default: '',
+    },
+
+    descriptionRow: {
+      type: String,
+      default: '',
+    },
+
+    descriptionRowInfo: {
+      type: String,
+      default: '',
+    },
+
+    statuses: {
+      type: Array,
+    },
+
+    minStatusWidth: {
+      type: String,
+      default: 5.625 * unnnicFontSize,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/scss/unnnic.scss";
+
+.unnnic-card-container {
+  padding: $unnnic-inset-sm;
+  border: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
+  border-radius: $unnnic-border-radius-md;
+
+  .separator {
+    height: $unnnic-border-width-thinner;
+    background-color: $unnnic-color-neutral-lightest;
+    margin: $unnnic-spacing-stack-xs 0;
+  }
+
+  &--highlighted {
+    color: $unnnic-color-brand-weni;
+    font-weight: $unnnic-font-weight-bold;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .title {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      width: calc(100% - #{5 * $unnnic-font-size});
+      margin-right: $unnnic-spacing-inline-xs;
+
+      .name {
+        font-family: $unnnic-font-family-secondary;
+        font-weight: $unnnic-font-weight-bold;
+        font-size: $unnnic-font-size-body-lg;
+        line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
+        color: $unnnic-color-neutral-darkest;
+
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100%;
+      }
+
+      .subtitle {
+        font-family: $unnnic-font-family-secondary;
+        font-weight: $unnnic-font-weight-regular;
+        font-size: $unnnic-font-size-body-md;
+        line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
+        color: $unnnic-color-neutral-cloudy;
+      }
+    }
+  }
+
+  .description {
+    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: $unnnic-spacing-stack-sm 0;
+  }
+
+  .description-row-container {
+    display: flex;
+
+    .description-row {
+      font-family: $unnnic-font-family-secondary;
+      font-weight: $unnnic-font-weight-bold;
+      font-size: $unnnic-font-size-body-md;
+      line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
+      color: $unnnic-color-neutral-cloudy;
+      margin-right: $unnnic-spacing-inline-xs;
+    }
+  }
+
+  .statuses {
+    display: grid;
+    justify-content: space-between;
+    gap: $unnnic-spacing-inline-xs;
+    grid-template-columns: repeat(auto-fit, minmax(5.625 * $unnnic-font-size, 1fr));
+
+    .status {
+      flex: 1;
+
+      .title {
+        font-family: $unnnic-font-family-secondary;
+        font-weight: $unnnic-font-weight-regular;
+        font-size: $unnnic-font-size-body-gt;
+        line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
+        color: $unnnic-color-neutral-dark;
+      }
+
+      .content {
+        margin-top: $unnnic-spacing-stack-nano;
+        display: flex;
+        align-items: center;
+
+        .number {
+          margin-left: $unnnic-spacing-inline-xs;
+          font-family: $unnnic-font-family-secondary;
+          font-weight: $unnnic-font-weight-black;
+          font-size: $unnnic-font-size-body-gt;
+          line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
+          color: $unnnic-color-neutral-darkest;
+        }
+      }
+    }
+  }
+}
+</style>