@weni/unnnic-system 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "main": "./dist/unnnic.common.js",
   "files": [
     "dist/*",

package/src/components/CardNumber/CardNumber.vue

@@ -0,0 +1,61 @@
+<template>
+  <div :class="['unnnic-card-number', { 'v-full': fullSize }]">
+    <h4>{{ description }}</h4>
+    <span>{{ number }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    description: {
+      type: String,
+      default: '',
+    },
+
+    number: {
+      type: String,
+      default: '',
+    },
+
+    fullSize: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/scss/unnnic.scss";
+
+.unnnic-card-number {
+  background-color: $unnnic-color-background-carpet;
+  border-radius: $unnnic-border-radius-md;
+  padding: $unnnic-inset-sm;
+  font-family: $unnnic-font-family-secondary;
+
+  width: 100%;
+  max-width: 179px;
+
+  &.v-full {
+    max-width: unset;
+  }
+
+  h4 {
+    margin: 0 0 $unnnic-spacing-stack-xs 0;
+    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-cloudy;
+  }
+
+  span {
+    font-weight: $unnnic-font-weight-black;
+    font-size: $unnnic-font-size-title-lg;
+    color: $unnnic-color-neutral-black;
+    line-height: $unnnic-font-size-title-lg + $unnnic-line-height-md;
+  }
+}
+</style>

package/src/components/CardProject/CardProject.vue

@@ -129,7 +129,7 @@ export default {
       align-items: center;
 
       .action {
-        margin: $unnnic-spacing-inset-xs;
+        margin: $unnnic-spacing-inset-nano;
       }
     }
   }

package/src/components/ChartRainbow/ChartRainbow.vue

@@ -0,0 +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>

package/src/components/index.js

@@ -49,6 +49,8 @@ import ImportCard from './ImportCard/ImportCard.vue';
 import DateFilter from './DateFilter/DateFilter.vue';
 import ChatText from './ChatText/ChatText.vue';
 import TextArea from './TextArea/TextArea.vue';
+import CardNumber from './CardNumber/CardNumber.vue';
+import chartRainbow from './ChartRainbow/ChartRainbow.vue';
 
 const components = {
   unnnicInput: input,
@@ -100,6 +102,8 @@ const components = {
   unnnicDateFilter: DateFilter,
   unnnicChatText: ChatText,
   unnnicTextArea: TextArea,
+  unnnicCardNumber: CardNumber,
+  unnnicChartRainbow: chartRainbow,
 };
 
 Object.keys(components).forEach((name) => {
@@ -157,3 +161,5 @@ export const unnnicImportCard = ImportCard;
 export const unnnicDateFilter = DateFilter;
 export const unnnicChatText = ChatText;
 export const unnnicTextArea = TextArea;
+export const unnnicCardNumber = CardNumber;
+export const unnnicChartRainbow = chartRainbow;

package/src/stories/CardNumber.stories.js

@@ -0,0 +1,35 @@
+import unnnicCardNumber from '../components/CardNumber/CardNumber.vue';
+
+export default {
+  title: 'example/CardNumber',
+  component: unnnicCardNumber,
+  argTypes: {},
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+
+  components: {
+    unnnicCardNumber,
+  },
+
+  data() {
+    return {};
+  },
+
+  template: `
+    <div>
+      <unnnic-card-number v-bind="$props">
+      </unnnic-card-number>
+    </div>
+  `,
+
+  methods: {},
+});
+
+export const Default = Template.bind({});
+
+Default.args = {
+  description: 'Description',
+  number: '00',
+};

package/src/stories/ChartRainbow.stories.js

@@ -0,0 +1,34 @@
+import unnnicChartRainbow from '../components/ChartRainbow/ChartRainbow.vue';
+
+export default {
+  title: 'example/ChartRainbow',
+  component: unnnicChartRainbow,
+  argTypes: {},
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+
+  components: {
+    unnnicChartRainbow,
+  },
+
+  data() {
+    return {};
+  },
+
+  template: `
+    <div>
+      <unnnic-chart-rainbow v-bind="$props" />
+    </div>
+  `,
+
+  methods: {},
+});
+
+export const Default = Template.bind({});
+
+Default.args = {
+  value: 50,
+  description: 'Description',
+};