@weni/unnnic-system 1.2.2 → 1.3.0

package/src/assets/scss/grid.scss

@@ -1,52 +1,52 @@
-.unnnic-grid-xs {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fill, calc((1/4)*100% - (16px * 3/4)));
-    padding: 0 16px;
-}
-
-.unnnic-grid-sm {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fill, calc((1/4)*100% - (16px * 3/4)));
-    padding: 0 16px;
-    box-sizing: border-box;
-}
-
-.unnnic-grid-md {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fill, calc((1/6)*100% - (16px * 5/6)));
-    padding: 0 48px;
-    box-sizing: border-box;
-}
-
-.unnnic-grid-lg {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
-    padding: 0 64px;
-    box-sizing: border-box;
-}
-
-.unnnic-grid-xl {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
-    padding: 0 176px;
-    box-sizing: border-box;
-}
-
-.unnnic-grid-giant {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
-    padding: 0 24px;
-    box-sizing: border-box;
-}
-
-@for $i from 1 to 13 {
-    .unnnic-grid-span-#{$i} {
-        grid-column: span #{$i};
-    }
+.unnnic-grid-xs {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/4)*100% - (16px * 3/4)));
+    padding: 0 16px;
+}
+
+.unnnic-grid-sm {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/4)*100% - (16px * 3/4)));
+    padding: 0 16px;
+    box-sizing: border-box;
+}
+
+.unnnic-grid-md {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/6)*100% - (16px * 5/6)));
+    padding: 0 48px;
+    box-sizing: border-box;
+}
+
+.unnnic-grid-lg {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
+    padding: 0 64px;
+    box-sizing: border-box;
+}
+
+.unnnic-grid-xl {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
+    padding: 0 176px;
+    box-sizing: border-box;
+}
+
+.unnnic-grid-giant {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
+    padding: 0 24px;
+    box-sizing: border-box;
+}
+
+@for $i from 1 to 13 {
+    .unnnic-grid-span-#{$i} {
+        grid-column: span #{$i};
+    }
 }

package/src/assets/scss/spacing.scss

@@ -1,92 +1,92 @@
-// Icon size
-$unnnic-icon-size-xl: 2.5rem;
-$unnnic-icon-size-lg: 2rem;
-$unnnic-icon-size-md: 1.5rem;
-$unnnic-icon-size-ant: 1.25rem;
-$unnnic-icon-size-sm: 1rem;
-$unnnic-icon-size-xs: 0.75rem;
-
-// Avatar size
-$unnnic-avatar-size-lg: 6.5rem;
-$unnnic-avatar-size-md: 4.5rem;
-$unnnic-avatar-size-sm: 2.5rem;
-$unnnic-avatar-size-xs: 2rem;
-$unnnic-avatar-size-nano: 1.25rem;
-
-// Border radius
-$unnnic-border-radius-sm: 0.25rem;
-$unnnic-border-radius-md: 0.5rem;
-$unnnic-border-radius-lg: 1rem;
-$unnnic-border-radius-pill: 37.5rem;
-
-// Border width
-$unnnic-border-width-thinner: 0.0625rem;
-$unnnic-border-width-thin: 0.125rem;
-$unnnic-border-width-thick: 0.25rem;
-
-// Shadow levels
-$unnnic-shadow-level-near: 0rem 0.25rem 8px rgba(0, 0, 0, .12);
-$unnnic-shadow-level-separated: 0px 8px 16px rgba(0, 0, 0, .08);
-$unnnic-shadow-level-far: 0px 12px 32px rgba(0, 0, 0, .04);
-$unnnic-shadow-level-distant: 0px 20px 40px rgba(0, 0, 0, .06);
-
-// Opacity levels
-$unnnic-opacity-level-darkest: 0.8;
-$unnnic-opacity-level-dark: 0.64;
-$unnnic-opacity-level-clarifying: 0.48;
-$unnnic-opacity-level-overlay: 0.4;
-$unnnic-opacity-level-clear: 0.32;
-$unnnic-opacity-level-light: 0.16;
-$unnnic-opacity-level-extra-light: 0.08;
-
-// Spacing
-$unnnic-inset-nano: 0.5rem;
-$unnnic-inset-xs: 0.75rem;
-$unnnic-inset-sm: 1rem;
-$unnnic-inset-md: 1.5rem;
-$unnnic-inset-lg: 2rem;
-$unnnic-spacing-inset-nano: $unnnic-inset-nano;
-$unnnic-spacing-inset-xs: $unnnic-inset-xs;
-$unnnic-spacing-inset-sm: $unnnic-inset-sm;
-$unnnic-spacing-inset-md: $unnnic-inset-md;
-$unnnic-spacing-inset-lg: $unnnic-inset-lg;
-
-// Squish
-$unnnic-squish-nano: 0.5rem 1rem;
-$unnnic-squish-xs: 0.75rem 1rem;
-$unnnic-squish-sm: 0.75rem 1.5rem;
-$unnnic-squish-md: 1rem 1.5rem;
-$unnnic-squish-lg: 1.5rem 2rem;
-
-// Inline
-$unnnic-inline-nano: 0.25rem;
-$unnnic-inline-xs: 0.5rem;
-$unnnic-inline-ant: 0.75rem;
-$unnnic-inline-sm: 1rem;
-$unnnic-inline-md: 1.5rem;
-$unnnic-inline-lg: 2rem;
-$unnnic-inline-xl: 2.5rem;
-$unnnic-inline-giant: 3rem;
-$unnnic-inline-xgiant: 4rem;
-$unnnic-inline-awesome: 5rem;
-$unnnic-spacing-inline-nano: $unnnic-inline-nano;
-$unnnic-spacing-inline-xs: $unnnic-inline-xs;
-$unnnic-spacing-inline-ant: $unnnic-inline-ant;
-$unnnic-spacing-inline-sm: $unnnic-inline-sm;
-$unnnic-spacing-inline-md: $unnnic-inline-md;
-$unnnic-spacing-inline-lg: $unnnic-inline-lg;
-$unnnic-spacing-inline-xl: $unnnic-inline-xl;
-$unnnic-spacing-inline-giant: $unnnic-inline-giant;
-$unnnic-spacing-inline-xgiant: $unnnic-inline-xgiant;
-$unnnic-spacing-inline-awesome: $unnnic-inline-awesome;
-
-// Stack
-$unnnic-spacing-stack-nano: 0.25rem;
-$unnnic-spacing-stack-xs: 0.5rem;
-$unnnic-spacing-stack-sm: 1rem;
-$unnnic-spacing-stack-md: 1.5rem;
-$unnnic-spacing-stack-lg: 2rem;
-$unnnic-spacing-stack-xl: 2.5rem;
-$unnnic-spacing-stack-giant: 3rem;
-$unnnic-spacing-stack-xgiant: 4rem;
-$unnnic-spacing-stack-awesome: 5rem;
+// Icon size
+$unnnic-icon-size-xl: 2.5rem;
+$unnnic-icon-size-lg: 2rem;
+$unnnic-icon-size-md: 1.5rem;
+$unnnic-icon-size-ant: 1.25rem;
+$unnnic-icon-size-sm: 1rem;
+$unnnic-icon-size-xs: 0.75rem;
+
+// Avatar size
+$unnnic-avatar-size-lg: 6.5rem;
+$unnnic-avatar-size-md: 4.5rem;
+$unnnic-avatar-size-sm: 2.5rem;
+$unnnic-avatar-size-xs: 2rem;
+$unnnic-avatar-size-nano: 1.25rem;
+
+// Border radius
+$unnnic-border-radius-sm: 0.25rem;
+$unnnic-border-radius-md: 0.5rem;
+$unnnic-border-radius-lg: 1rem;
+$unnnic-border-radius-pill: 37.5rem;
+
+// Border width
+$unnnic-border-width-thinner: 0.0625rem;
+$unnnic-border-width-thin: 0.125rem;
+$unnnic-border-width-thick: 0.25rem;
+
+// Shadow levels
+$unnnic-shadow-level-near: 0rem 0.25rem 8px rgba(0, 0, 0, .12);
+$unnnic-shadow-level-separated: 0px 8px 16px rgba(0, 0, 0, .08);
+$unnnic-shadow-level-far: 0px 12px 32px rgba(0, 0, 0, .04);
+$unnnic-shadow-level-distant: 0px 20px 40px rgba(0, 0, 0, .06);
+
+// Opacity levels
+$unnnic-opacity-level-darkest: 0.8;
+$unnnic-opacity-level-dark: 0.64;
+$unnnic-opacity-level-clarifying: 0.48;
+$unnnic-opacity-level-overlay: 0.4;
+$unnnic-opacity-level-clear: 0.32;
+$unnnic-opacity-level-light: 0.16;
+$unnnic-opacity-level-extra-light: 0.08;
+
+// Spacing
+$unnnic-inset-nano: 0.5rem;
+$unnnic-inset-xs: 0.75rem;
+$unnnic-inset-sm: 1rem;
+$unnnic-inset-md: 1.5rem;
+$unnnic-inset-lg: 2rem;
+$unnnic-spacing-inset-nano: $unnnic-inset-nano;
+$unnnic-spacing-inset-xs: $unnnic-inset-xs;
+$unnnic-spacing-inset-sm: $unnnic-inset-sm;
+$unnnic-spacing-inset-md: $unnnic-inset-md;
+$unnnic-spacing-inset-lg: $unnnic-inset-lg;
+
+// Squish
+$unnnic-squish-nano: 0.5rem 1rem;
+$unnnic-squish-xs: 0.75rem 1rem;
+$unnnic-squish-sm: 0.75rem 1.5rem;
+$unnnic-squish-md: 1rem 1.5rem;
+$unnnic-squish-lg: 1.5rem 2rem;
+
+// Inline
+$unnnic-inline-nano: 0.25rem;
+$unnnic-inline-xs: 0.5rem;
+$unnnic-inline-ant: 0.75rem;
+$unnnic-inline-sm: 1rem;
+$unnnic-inline-md: 1.5rem;
+$unnnic-inline-lg: 2rem;
+$unnnic-inline-xl: 2.5rem;
+$unnnic-inline-giant: 3rem;
+$unnnic-inline-xgiant: 4rem;
+$unnnic-inline-awesome: 5rem;
+$unnnic-spacing-inline-nano: $unnnic-inline-nano;
+$unnnic-spacing-inline-xs: $unnnic-inline-xs;
+$unnnic-spacing-inline-ant: $unnnic-inline-ant;
+$unnnic-spacing-inline-sm: $unnnic-inline-sm;
+$unnnic-spacing-inline-md: $unnnic-inline-md;
+$unnnic-spacing-inline-lg: $unnnic-inline-lg;
+$unnnic-spacing-inline-xl: $unnnic-inline-xl;
+$unnnic-spacing-inline-giant: $unnnic-inline-giant;
+$unnnic-spacing-inline-xgiant: $unnnic-inline-xgiant;
+$unnnic-spacing-inline-awesome: $unnnic-inline-awesome;
+
+// Stack
+$unnnic-spacing-stack-nano: 0.25rem;
+$unnnic-spacing-stack-xs: 0.5rem;
+$unnnic-spacing-stack-sm: 1rem;
+$unnnic-spacing-stack-md: 1.5rem;
+$unnnic-spacing-stack-lg: 2rem;
+$unnnic-spacing-stack-xl: 2.5rem;
+$unnnic-spacing-stack-giant: 3rem;
+$unnnic-spacing-stack-xgiant: 4rem;
+$unnnic-spacing-stack-awesome: 5rem;

package/src/assets/scss/unnnic.scss

@@ -1,10 +1,10 @@
-@import './colors.scss';
-@import './fonts.scss';
-@import './spacing.scss';
-@import './grid.scss';
-
-.unnnic {
-    &--clickable {
-        cursor: pointer;
-    }
-}
+@import './colors.scss';
+@import './fonts.scss';
+@import './spacing.scss';
+@import './grid.scss';
+
+.unnnic {
+    &--clickable {
+        cursor: pointer;
+    }
+}

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

@@ -50,6 +50,7 @@ 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,
@@ -102,6 +103,7 @@ const components = {
   unnnicChatText: ChatText,
   unnnicTextArea: TextArea,
   unnnicCardNumber: CardNumber,
+  unnnicChartRainbow: chartRainbow,
 };
 
 Object.keys(components).forEach((name) => {
@@ -160,3 +162,4 @@ export const unnnicDateFilter = DateFilter;
 export const unnnicChatText = ChatText;
 export const unnnicTextArea = TextArea;
 export const unnnicCardNumber = CardNumber;
+export const unnnicChartRainbow = chartRainbow;

package/src/locales/en.json

@@ -1,15 +1,15 @@
-{
-  "upload_area": {
-    "title": {
-      "text": "Drag your file here or",
-      "highlight": "search it"
-    },
-    "invalid": {
-      "subtitle": "File not supported, select supported formats:"
-    },
-    "subtitle": "Supported formats:"
-  },
-  "import_card": {
-    "importing": "Importing"
-  }
-}
+{
+  "upload_area": {
+    "title": {
+      "text": "Drag your file here or",
+      "highlight": "search it"
+    },
+    "invalid": {
+      "subtitle": "File not supported, select supported formats:"
+    },
+    "subtitle": "Supported formats:"
+  },
+  "import_card": {
+    "importing": "Importing"
+  }
+}

package/src/locales/es.json

@@ -1,15 +1,15 @@
-{
-  "upload_area": {
-    "title": {
-      "text": "Arrastra tu archivo aquí o",
-      "highlight": "búscalo"
-    },
-    "invalid": {
-      "subtitle": "Archivo no compatible, seleccione los formatos compatibles:"
-    },
-    "subtitle": "Formatos compatibles:"
-  },
-  "import_card": {
-    "importing": "Importando"
-  }
-}
+{
+  "upload_area": {
+    "title": {
+      "text": "Arrastra tu archivo aquí o",
+      "highlight": "búscalo"
+    },
+    "invalid": {
+      "subtitle": "Archivo no compatible, seleccione los formatos compatibles:"
+    },
+    "subtitle": "Formatos compatibles:"
+  },
+  "import_card": {
+    "importing": "Importando"
+  }
+}

package/src/locales/pt_br.json

@@ -1,15 +1,15 @@
-{
-  "upload_area": {
-    "title": {
-      "text": "Arraste seu arquivo aqui, ou",
-      "highlight": "procure-o"
-    },
-    "invalid": {
-      "subtitle": "Arquivo não compatível, selecione formatos suportados:"
-    },
-    "subtitle": "Formatos suportados:"
-  },
-  "import_card": {
-    "importing": "Importando"
-  }
-}
+{
+  "upload_area": {
+    "title": {
+      "text": "Arraste seu arquivo aqui, ou",
+      "highlight": "procure-o"
+    },
+    "invalid": {
+      "subtitle": "Arquivo não compatível, selecione formatos suportados:"
+    },
+    "subtitle": "Formatos suportados:"
+  },
+  "import_card": {
+    "importing": "Importando"
+  }
+}

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',
+};