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

package/src/components/ChartRainbow/ChartRainbow.vue

@@ -1,160 +1,160 @@
-<template>
-  <div class="unnnic-chart-rainbow">
-    <svg width="332" height="166" class="semicircle">
-      <defs xmlns="http://www.w3.org/2000/svg">
-        <linearGradient
-          id="paint0_linear_10224_36584"
-          x1="178"
-          y1="45"
-          x2="28"
-          y2="198"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stop-color="#00DED2"/>
-          <stop offset="1" stop-color="#00DED2" stop-opacity="0"/>
-        </linearGradient>
-      </defs>
-
-      <path
-        id="path"
-        fill="none"
-        stroke-linecap="round"
-        ref="background"
-        class="background"
-        stroke-width="26.56px"
-      >
-      </path>
-
-      <path
-        id="path"
-        fill="none"
-        stroke-linecap="round"
-        ref="front"
-        class="front"
-        stroke-width="26.56px"
-      >
-      </path>
-    </svg>
-
-    <div class="content">
-      <div class="percentage">
-        <span class="number">{{ value }}</span><span class="symbol">%</span>
-      </div>
-
-      <div v-if="description" class="description">{{ description }}</div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  components: {},
-
-  props: {
-    value: {
-      type: Number,
-      default: 0,
-    },
-
-    description: {
-      type: String,
-    },
-  },
-
-  mounted() {
-    function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
-      const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
-
-      return {
-        x: centerX + radius * Math.cos(angleInRadians),
-        y: centerY + radius * Math.sin(angleInRadians),
-      };
-    }
-
-    function describeArc(x, y, innerRadius, outerRadius, startAngle, endAngle) {
-      const radius = innerRadius;
-      const spread = outerRadius - innerRadius;
-      const outerStart = polarToCartesian(x, y, radius + spread, endAngle);
-      const outerEnd = polarToCartesian(x, y, radius + spread, startAngle);
-
-      const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
-
-      const d = [
-        'M',
-        outerStart.x,
-        outerStart.y,
-        'A',
-        radius + spread,
-        radius + spread,
-        0,
-        largeArcFlag,
-        0,
-        outerEnd.x,
-        outerEnd.y,
-      ].join(' ');
-
-      return d;
-    }
-
-    const path = describeArc(166, 166, 139.44, 152.72, -85, 85);
-
-    this.$refs.background.setAttribute('d', path);
-
-    this.$refs.front.setAttribute('d', describeArc(166, 166, 139.44, 152.72, -85, -85 + ((this.value / 100) * 170)));
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
-
-.unnnic-chart-rainbow {
-  position: relative;
-  width: fit-content;
-
-  .semicircle {
-    display: block;
-  }
-
-  .background {
-    stroke: $unnnic-color-background-sky;
-  }
-
-  .front {
-    stroke: url(#paint0_linear_10224_36584);
-  }
-
-  .content {
-    position: absolute;
-    bottom: 0;
-    text-align: center;
-    width: 100%;
-
-    .percentage {
-      font-family: $unnnic-font-family-secondary;
-      font-weight: $unnnic-font-weight-black;
-
-      .number {
-        color: $unnnic-color-neutral-black;
-        font-size: $unnnic-font-size-h3;
-        line-height: $unnnic-font-size-h3 + $unnnic-line-height-md;
-      }
-
-      .symbol {
-        color: $unnnic-color-neutral-soft;
-        font-size: $unnnic-font-size-h4;
-        line-height: $unnnic-font-size-h4 + $unnnic-line-height-md;
-      }
-    }
-
-    .description {
-      color: $unnnic-color-neutral-cleanest;
-      font-family: $unnnic-font-family-secondary;
-      font-size: $unnnic-font-size-body-lg;
-      line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
-      font-weight: $unnnic-font-weight-regular;
-      margin-top: $unnnic-spacing-stack-nano;
-    }
-  }
-}
-</style>
+<template>
+  <div class="unnnic-chart-rainbow">
+    <svg width="332" height="166" class="semicircle">
+      <defs xmlns="http://www.w3.org/2000/svg">
+        <linearGradient
+          id="paint0_linear_10224_36584"
+          x1="178"
+          y1="45"
+          x2="28"
+          y2="198"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#00DED2"/>
+          <stop offset="1" stop-color="#00DED2" stop-opacity="0"/>
+        </linearGradient>
+      </defs>
+
+      <path
+        id="path"
+        fill="none"
+        stroke-linecap="round"
+        ref="background"
+        class="background"
+        stroke-width="26.56px"
+      >
+      </path>
+
+      <path
+        id="path"
+        fill="none"
+        stroke-linecap="round"
+        ref="front"
+        class="front"
+        stroke-width="26.56px"
+      >
+      </path>
+    </svg>
+
+    <div class="content">
+      <div class="percentage">
+        <span class="number">{{ value }}</span><span class="symbol">%</span>
+      </div>
+
+      <div v-if="description" class="description">{{ description }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+
+  props: {
+    value: {
+      type: Number,
+      default: 0,
+    },
+
+    description: {
+      type: String,
+    },
+  },
+
+  mounted() {
+    function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
+      const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
+
+      return {
+        x: centerX + radius * Math.cos(angleInRadians),
+        y: centerY + radius * Math.sin(angleInRadians),
+      };
+    }
+
+    function describeArc(x, y, innerRadius, outerRadius, startAngle, endAngle) {
+      const radius = innerRadius;
+      const spread = outerRadius - innerRadius;
+      const outerStart = polarToCartesian(x, y, radius + spread, endAngle);
+      const outerEnd = polarToCartesian(x, y, radius + spread, startAngle);
+
+      const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
+
+      const d = [
+        'M',
+        outerStart.x,
+        outerStart.y,
+        'A',
+        radius + spread,
+        radius + spread,
+        0,
+        largeArcFlag,
+        0,
+        outerEnd.x,
+        outerEnd.y,
+      ].join(' ');
+
+      return d;
+    }
+
+    const path = describeArc(166, 166, 139.44, 152.72, -85, 85);
+
+    this.$refs.background.setAttribute('d', path);
+
+    this.$refs.front.setAttribute('d', describeArc(166, 166, 139.44, 152.72, -85, -85 + ((this.value / 100) * 170)));
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/scss/unnnic.scss";
+
+.unnnic-chart-rainbow {
+  position: relative;
+  width: fit-content;
+
+  .semicircle {
+    display: block;
+  }
+
+  .background {
+    stroke: $unnnic-color-background-sky;
+  }
+
+  .front {
+    stroke: url(#paint0_linear_10224_36584);
+  }
+
+  .content {
+    position: absolute;
+    bottom: 0;
+    text-align: center;
+    width: 100%;
+
+    .percentage {
+      font-family: $unnnic-font-family-secondary;
+      font-weight: $unnnic-font-weight-black;
+
+      .number {
+        color: $unnnic-color-neutral-black;
+        font-size: $unnnic-font-size-h3;
+        line-height: $unnnic-font-size-h3 + $unnnic-line-height-md;
+      }
+
+      .symbol {
+        color: $unnnic-color-neutral-soft;
+        font-size: $unnnic-font-size-h4;
+        line-height: $unnnic-font-size-h4 + $unnnic-line-height-md;
+      }
+    }
+
+    .description {
+      color: $unnnic-color-neutral-cleanest;
+      font-family: $unnnic-font-family-secondary;
+      font-size: $unnnic-font-size-body-lg;
+      line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
+      font-weight: $unnnic-font-weight-regular;
+      margin-top: $unnnic-spacing-stack-nano;
+    }
+  }
+}
+</style>

package/src/components/ChatText/ChatText.vue

@@ -1,156 +1,156 @@
-<template>
-  <div :class="['unnnic-chat-text', size]">
-    <div class="header">
-      <div :class="['title', titleColor]">
-        {{ title }}
-
-        <unnnic-tool-tip v-if="info" side="top" :text="info" enabled>
-          <unnnic-icon
-            class="info"
-            icon="information-circle-4"
-            size="sm"
-            scheme="neutral-clean"
-          ></unnnic-icon>
-        </unnnic-tool-tip>
-      </div>
-
-      <slot name="actions" />
-    </div>
-
-    <div class="description" ref="description">
-      <slot name="description" />
-
-      <div v-if="isScrollable" class="scrollable-gradient"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-import UnnnicToolTip from '../ToolTip/ToolTip.vue';
-import UnnnicIcon from '../Icon.vue';
-
-export default {
-  components: {
-    UnnnicToolTip,
-    UnnnicIcon,
-  },
-
-  props: {
-    size: {
-      type: String,
-      default: 'normal',
-    },
-
-    title: {
-      type: String,
-    },
-
-    titleColor: {
-      type: String,
-      default: 'brand-weni-soft',
-    },
-
-    info: {
-      type: String,
-    },
-  },
-
-  data() {
-    return {
-      isScrollable: false,
-    };
-  },
-
-  mounted() {
-    const
-      areaScrollable = this.$refs.description.scrollHeight - this.$refs.description.offsetHeight;
-
-    this.isScrollable = areaScrollable;
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
-
-.unnnic-chat-text {
-  border-radius: $unnnic-border-radius-lg;
-  background-color: $unnnic-color-background-snow;
-  max-width: 31.25 * $unnnic-font-size;
-  padding: $unnnic-spacing-inset-md;
-  box-sizing: border-box;
-  border: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
-  max-height: 15.625 * $unnnic-font-size;
-  display: flex;
-  flex-direction: column;
-
-  .header {
-    margin-bottom: $unnnic-spacing-stack-md;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .title {
-      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;
-      flex: 1;
-
-      .info {
-        margin-left: $unnnic-spacing-inline-nano;
-      }
-
-      @each $name, $color in $scheme-colors {
-        &.#{$name} {
-          color: $color;
-        }
-      }
-    }
-  }
-
-  .description {
-    font-family: $unnnic-font-family-primary;
-    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-darkest;
-    overflow: hidden;
-    position: relative;
-
-    .intent {
-      background-color: rgba($unnnic-color-aux-purple, $unnnic-opacity-level-light);
-      padding: $unnnic-line-height-md / 2 0;
-    }
-
-    .scrollable-gradient {
-      position: absolute;
-      background-image: linear-gradient(transparent, $unnnic-color-background-snow);
-      width: 100%;
-      height: 5 * $unnnic-font-size;
-      bottom: 0;
-      left: 0;
-      pointer-events: none;
-    }
-  }
-
-  &.small {
-    border-radius: $unnnic-border-radius-md;
-    padding: $unnnic-spacing-inset-sm;
-    max-height: 7.1875 * $unnnic-font-size;
-
-    .header {
-      margin-bottom: $unnnic-spacing-stack-xs;
-    }
-
-    .description {
-      font-size: $unnnic-font-size-body-md;
-      line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
-
-      .scrollable-gradient {
-        height: 2 * $unnnic-font-size;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div :class="['unnnic-chat-text', size]">
+    <div class="header">
+      <div :class="['title', titleColor]">
+        {{ title }}
+
+        <unnnic-tool-tip v-if="info" side="top" :text="info" enabled>
+          <unnnic-icon
+            class="info"
+            icon="information-circle-4"
+            size="sm"
+            scheme="neutral-clean"
+          ></unnnic-icon>
+        </unnnic-tool-tip>
+      </div>
+
+      <slot name="actions" />
+    </div>
+
+    <div class="description" ref="description">
+      <slot name="description" />
+
+      <div v-if="isScrollable" class="scrollable-gradient"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import UnnnicToolTip from '../ToolTip/ToolTip.vue';
+import UnnnicIcon from '../Icon.vue';
+
+export default {
+  components: {
+    UnnnicToolTip,
+    UnnnicIcon,
+  },
+
+  props: {
+    size: {
+      type: String,
+      default: 'normal',
+    },
+
+    title: {
+      type: String,
+    },
+
+    titleColor: {
+      type: String,
+      default: 'brand-weni-soft',
+    },
+
+    info: {
+      type: String,
+    },
+  },
+
+  data() {
+    return {
+      isScrollable: false,
+    };
+  },
+
+  mounted() {
+    const
+      areaScrollable = this.$refs.description.scrollHeight - this.$refs.description.offsetHeight;
+
+    this.isScrollable = areaScrollable;
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/scss/unnnic.scss";
+
+.unnnic-chat-text {
+  border-radius: $unnnic-border-radius-lg;
+  background-color: $unnnic-color-background-snow;
+  max-width: 31.25 * $unnnic-font-size;
+  padding: $unnnic-spacing-inset-md;
+  box-sizing: border-box;
+  border: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
+  max-height: 15.625 * $unnnic-font-size;
+  display: flex;
+  flex-direction: column;
+
+  .header {
+    margin-bottom: $unnnic-spacing-stack-md;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .title {
+      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;
+      flex: 1;
+
+      .info {
+        margin-left: $unnnic-spacing-inline-nano;
+      }
+
+      @each $name, $color in $scheme-colors {
+        &.#{$name} {
+          color: $color;
+        }
+      }
+    }
+  }
+
+  .description {
+    font-family: $unnnic-font-family-primary;
+    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-darkest;
+    overflow: hidden;
+    position: relative;
+
+    .intent {
+      background-color: rgba($unnnic-color-aux-purple, $unnnic-opacity-level-light);
+      padding: $unnnic-line-height-md / 2 0;
+    }
+
+    .scrollable-gradient {
+      position: absolute;
+      background-image: linear-gradient(transparent, $unnnic-color-background-snow);
+      width: 100%;
+      height: 5 * $unnnic-font-size;
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+    }
+  }
+
+  &.small {
+    border-radius: $unnnic-border-radius-md;
+    padding: $unnnic-spacing-inset-sm;
+    max-height: 7.1875 * $unnnic-font-size;
+
+    .header {
+      margin-bottom: $unnnic-spacing-stack-xs;
+    }
+
+    .description {
+      font-size: $unnnic-font-size-body-md;
+      line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
+
+      .scrollable-gradient {
+        height: 2 * $unnnic-font-size;
+      }
+    }
+  }
+}
+</style>