@weni/unnnic-system 3.5.1-alpha.0 → 3.5.1-alpha.2

package/src/assets/icons/SwitchDefault.vue

@@ -0,0 +1,31 @@
+<template>
+  <svg
+    id="default"
+    width="80"
+    height="40"
+    viewBox="0 0 80 40"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      x="4.20013"
+      y="2.10046"
+      width="71.6"
+      height="35.8"
+      rx="17.9"
+      class="primary"
+    />
+    <circle
+      id="default-circle"
+      cx="22.5"
+      cy="20.0005"
+      r="12.5"
+      fill="white"
+    ></circle>
+  </svg>
+</template>
+
+<style scoped>
+rect {
+  transition: fill 0.2s ease;
+}
+</style>

package/src/assets/icons/SwitchDefaultDisabled.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+    width="48"
+    height="24"
+    viewBox="0 0 48 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      x="2.51953"
+      y="1.2605"
+      width="42.96"
+      height="21.48"
+      rx="10.74"
+      fill="#E2E6ED"
+      class="primary"
+    />
+    <circle
+      cx="13.5"
+      cy="12.0005"
+      r="7.5"
+      fill="#D0D3D9"
+    />
+  </svg>
+</template>

package/src/assets/icons/SwitchSelected.vue

@@ -0,0 +1,31 @@
+<template>
+  <svg
+    id="selected"
+    width="80"
+    height="40"
+    viewBox="0 0 80 40"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      x="4.20013"
+      y="2.10046"
+      width="71.6"
+      height="35.8"
+      rx="17.9"
+      class="primary"
+    />
+    <circle
+      id="selected-circle"
+      cx="57.5"
+      cy="20.0005"
+      r="12.5"
+      fill="white"
+    ></circle>
+  </svg>
+</template>
+
+<style type="text/css" scoped>
+rect {
+  transition: fill 0.2s ease;
+}
+</style>

package/src/assets/icons/SwitchSelectedDisabled.vue

@@ -0,0 +1,23 @@
+<template>
+  <svg
+    width="48"
+    height="24"
+    viewBox="0 0 48 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      width="42.96"
+      height="21.48"
+      rx="10.74"
+      transform="matrix(-1 0 0 1 45.4805 1.2605)"
+      fill="#E2E6ED"
+      class="primary"
+    />
+    <circle
+      r="7.5"
+      transform="matrix(-1 0 0 1 34.5 12.0005)"
+      fill="#D0D3D9"
+    />
+  </svg>
+</template>

package/src/assets/icons/TransferMessage.vue

@@ -0,0 +1,24 @@
+<template>
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M27.9441 19.6156C28.156 19.3431 28.5487 19.294 28.8211 19.506L34.4461 23.881C34.5984 23.9994 34.6874 24.1814 34.6874 24.3743C34.6874 24.5672 34.5984 24.7492 34.4461 24.8676L28.8211 29.2426C28.5487 29.4546 28.156 29.4055 27.9441 29.133C27.7322 28.8605 27.7813 28.4679 28.0537 28.256L33.0444 24.3743L28.0537 20.4926C27.7813 20.2807 27.7322 19.8881 27.9441 19.6156Z"
+      fill="#3B414D"
+      class="primary"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5.31257 16.2505C5.31257 9.92097 11.5972 5.00049 19.0626 5.00049C26.5279 5.00049 32.8126 9.91967 32.8126 16.2505V16.2584L32.8125 16.2584C32.8068 16.7154 32.7669 17.1714 32.6931 17.6225C32.6375 17.9632 32.3162 18.1942 31.9755 18.1386C31.6349 18.0829 31.4038 17.7616 31.4595 17.4209C31.523 17.0326 31.5574 16.6401 31.5626 16.2466C31.5599 10.8416 26.0955 6.25049 19.0626 6.25049C12.031 6.25049 6.56736 10.841 6.56257 16.2434C6.59434 17.5923 6.92716 18.9171 7.53673 20.1209C8.14738 21.3268 9.02026 22.3807 10.0913 23.2052C10.3199 23.3812 10.3984 23.6908 10.2812 23.9543L8.43275 28.1129L13.972 25.5579C14.114 25.4925 14.2753 25.4826 14.4241 25.5302C15.9229 26.0093 17.4871 26.2524 19.0606 26.2505C19.7268 26.2465 20.3921 26.1995 21.0523 26.1099C21.3943 26.0635 21.7092 26.3031 21.7556 26.6452C21.8021 26.9872 21.5624 27.3021 21.2204 27.3486C20.5064 27.4455 19.7868 27.4962 19.0663 27.5005L19.0634 27.5005C17.4414 27.5025 15.8286 27.2642 14.2774 26.7937L7.44934 29.943C7.21306 30.052 6.93398 30.0032 6.74871 29.8205C6.56344 29.6378 6.51076 29.3594 6.61645 29.1216L8.94423 23.8847C7.90009 22.9979 7.04192 21.9107 6.42156 20.6856C5.72661 19.3132 5.34774 17.8026 5.31273 16.2647L5.31241 16.2505H5.31257ZM23.9423 26.1302C25.4661 24.6065 27.5327 23.7505 29.6876 23.7505H34.0626C34.4077 23.7505 34.6876 24.0303 34.6876 24.3755C34.6876 24.7207 34.4077 25.0005 34.0626 25.0005H29.6876C27.8642 25.0005 26.1155 25.7248 24.8262 27.0141C23.5369 28.3034 22.8126 30.0521 22.8126 31.8755V34.3755C22.8126 34.7207 22.5327 35.0005 22.1876 35.0005C21.8424 35.0005 21.5626 34.7207 21.5626 34.3755V31.8755C21.5626 29.7206 22.4186 27.654 23.9423 26.1302Z"
+      fill="#3B414D"
+      class="primary"
+    />
+  </svg>
+</template>

package/src/assets/icons/USA.vue

@@ -0,0 +1,192 @@
+<template>
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      x="5"
+      y="8.75049"
+      width="30"
+      height="20.625"
+      fill="#EEF3F8"
+    />
+    <rect
+      x="5"
+      y="8.75049"
+      width="16.875"
+      height="13.125"
+      fill="#41479B"
+    />
+    <rect
+      x="21.875"
+      y="8.75049"
+      width="13.125"
+      height="1.875"
+      fill="#DC251C"
+    />
+    <rect
+      x="21.875"
+      y="12.5005"
+      width="13.125"
+      height="1.875"
+      fill="#DC251C"
+    />
+    <rect
+      x="21.875"
+      y="16.2505"
+      width="13.125"
+      height="1.875"
+      fill="#DC251C"
+    />
+    <rect
+      x="21.875"
+      y="20.0005"
+      width="13.125"
+      height="1.875"
+      fill="#DC251C"
+    />
+    <rect
+      x="5"
+      y="23.7505"
+      width="30"
+      height="1.875"
+      fill="#DC251C"
+    />
+    <rect
+      x="5"
+      y="27.5005"
+      width="30"
+      height="1.875"
+      fill="#DC251C"
+    />
+    <rect
+      x="6.875"
+      y="10.6255"
+      width="1.875"
+      height="1.875"
+      fill="#C5D0EC"
+    />
+    <rect
+      x="10.625"
+      y="10.6255"
+      width="1.875"
+      height="1.875"
+      fill="#C5D0EC"
+    />
+    <rect
+      x="14.375"
+      y="10.6255"
+      width="1.875"
+      height="1.875"
+      fill="#C5D0EC"
+    />
+    <rect
+      x="18.125"
+      y="10.6255"
+      width="1.875"
+      height="1.875"
+      fill="#C5D0EC"
+    />
+    <rect
+      x="6.875"
+      y="14.3755"
+      width="1.875"
+      height="1.875"
+      fill="#C5D0EC"
+    />
+    <rect
+      x="10.625"
+      y="14.3755"
+      width="1.875"
+      height="1.875"
+      fill="#C5D0EC"
+    />
+    <rect
+      x="14.375"
+      y="14.3755"
+      width="1.875"
+      height="1.875"
+      fill="#C5D0EC"
+    />
+    <rect
+      x="8.75"
+      y="16.2505"
+      width="1.875"
+      height="1.875"
+      fill="#C5D0EC"
+    />
+    <rect
+      x="12.5"
+      y="16.2505"
+      width="1.875"
+      height="1.875"
+      fill="#C5D0EC"
+    />
+    <rect
+      x="16.25"
+      y="16.2505"
+      width="1.875"
+      height="1.875"
+      fill="#C5D0EC"
+    />
+    <rect
+      x="8.75"
+      y="12.5005"
+      width="1.875"
+      height="1.875"
+      fill="#C5D0EC"
+    />
+    <rect
+      x="12.5"
+      y="12.5005"
+      width="1.875"
+      height="1.875"
+      fill="#C5D0EC"
+    />
+    <rect
+      x="16.25"
+      y="12.5005"
+      width="1.875"
+      height="1.875"
+      fill="#C5D0EC"
+    />
+    <rect
+      x="18.125"
+      y="14.3755"
+      width="1.875"
+      height="1.875"
+      fill="#C5D0EC"
+    />
+    <rect
+      x="6.875"
+      y="18.1255"
+      width="1.875"
+      height="1.875"
+      fill="#C5D0EC"
+    />
+    <rect
+      x="10.625"
+      y="18.1255"
+      width="1.875"
+      height="1.875"
+      fill="#C5D0EC"
+    />
+    <rect
+      x="14.375"
+      y="18.1255"
+      width="1.875"
+      height="1.875"
+      fill="#C5D0EC"
+    />
+    <rect
+      x="18.125"
+      y="18.1255"
+      width="1.875"
+      height="1.875"
+      fill="#C5D0EC"
+    />
+  </svg>
+</template>

package/src/assets/icons/Unpin.vue

@@ -0,0 +1,33 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+  >
+    <mask
+      id="mask0_142_1060"
+      style="mask-type: alpha"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="20"
+      height="20"
+    >
+      <rect
+        width="20"
+        height="20"
+        fill="#D9D9D9"
+        class="primary"
+      />
+    </mask>
+    <g mask="url(#mask0_142_1060)">
+      <path
+        d="M11.6329 9.52871L6.51604 4.41183C6.43701 4.33281 6.38063 4.25267 6.34687 4.17142C6.31326 4.09031 6.29646 4.01072 6.29646 3.93267C6.29646 3.7885 6.34618 3.66642 6.44563 3.56642C6.54493 3.46656 6.68111 3.41663 6.85417 3.41663H13.0417C13.191 3.41663 13.3185 3.46982 13.4244 3.57621C13.5303 3.68246 13.5833 3.81058 13.5833 3.96058C13.5833 4.11392 13.5385 4.25683 13.4487 4.38933C13.359 4.52183 13.2233 4.55871 13.0417 4.49996H12.5833V9.13142C12.5833 9.37753 12.4693 9.54961 12.2413 9.64767C12.0131 9.74572 11.8103 9.70607 11.6329 9.52871ZM9.45833 17.4166V13.0833H6.71167C6.43347 13.0833 6.20951 12.9938 6.03979 12.8148C5.87021 12.6359 5.78542 12.4289 5.78542 12.1939C5.78542 12.0764 5.8116 11.9566 5.86396 11.8345C5.91632 11.7126 5.99375 11.6 6.09625 11.4968L7.41667 10.1762V8.94871L2.86062 4.4085C2.74521 4.29322 2.6875 4.16774 2.6875 4.03204C2.6875 3.89635 2.74576 3.77024 2.86229 3.65371C2.98188 3.53413 3.11035 3.47433 3.24771 3.47433C3.38493 3.47433 3.51389 3.53468 3.63458 3.65538L16.0529 16.0737C16.1629 16.1837 16.2206 16.3066 16.2258 16.4423C16.2313 16.5779 16.1762 16.7041 16.0608 16.8206C15.9454 16.9402 15.8164 16.9986 15.6738 16.9958C15.5313 16.9932 15.4023 16.9341 15.2869 16.8187L11.5513 13.0833H10.5417V17.4166C10.5417 17.5659 10.4887 17.6935 10.3827 17.7993C10.2767 17.9053 10.1491 17.9583 9.99979 17.9583C9.85035 17.9583 9.72278 17.9053 9.61708 17.7993C9.51125 17.6935 9.45833 17.5659 9.45833 17.4166Z"
+        fill="#67738B"
+        class="primary"
+      />
+    </g>
+  </svg>
+</template>

package/src/components/Icon/OldIconsMap.json

@@ -1,5 +1,6 @@
 {
   "lock-2-1": "lock",
+  "lock-2-2": "lock",
   "view-1-1": "visibility",
   "view-off-1": "visibility_off",
   "read-email-at-1": "alternate_email",
@@ -7,7 +8,10 @@
   "loading-circle-1": "progress_activity",
   "close-1": "close",
   "alert-circle-1": "error",
+  "alert-circle-1-1": "error",
   "check-circle-1-1": "check_circle",
+  "check-circle-1-1-1": "check_circle",
+  "check-2": "check",
   "search-1": "search",
   "house-1-1": "some",
   "gauge-dashboard-2": "speed",
@@ -27,6 +31,8 @@
   "graph-stats-descend-2": "trending_down",
   "messages-bubble-1": "chat_bubble",
   "chat-translate-1": "translate",
+  "translate-1": "translate",
+  "translate-2": "translate",
   "arrow-button-up-1": "expand_less",
   "delete-1": "error",
   "button-refresh-arrow-1": "refresh",
@@ -34,9 +40,11 @@
   "synchronize-arrow-clock-4": "update",
   "flash-1-3": "bolt",
   "phone-3": "call",
+  "phone-4": "call",
   "layout-dashboard-1": "dashboard",
   "check-square-1": "task_alt",
   "cog-1": "settings",
+  "cog-2": "settings",
   "download-bottom-1": "download",
   "charger-1": "cloud",
   "upload-bottom-1": "upload",
@@ -47,22 +55,26 @@
   "button-refresh-arrows-1": "refresh",
   "keyboard-return-1": "keyboard_return",
   "delete-1-1": "dangerous",
+  "delete-2-1": "dangerous",
   "keyboard-arrow-left-1": "keyboard_backspace",
   "graph-stats-circle-1": "vital_signs",
   "graph-stats-1": "vital_signs",
   "paginate-filter-text-1": "article",
   "keyboard-arrow-down-1": "south",
+  "keyboard-arrow-right-1": "arrow_right_alt",
   "study-light-idea-1": "lightbulb",
   "folder-1": "folder",
   "export-1": "open_in_new",
   "add-circle-1": "add_circle",
   "subtract-circle-1": "do_not_disturb_on",
+  "subtract-1": "remove",
   "button-play-1": "play_circle",
   "lock-unlock-1-1": "lock_open_right",
   "video-file-mp4-1": "video_file",
   "office-file-pdf-1-1": "picture_as_pdf",
   "send-email-3-1": "send",
   "rating-star-1": "star",
+  "rating-star-1-1": "star",
   "floppy-disk-1": "save",
   "common-file-empty-1": "check_box_outline_blank",
   "currency-dollar-circle-1": "paid",
@@ -93,5 +105,7 @@
   "bookmark-tag-1": "sell",
   "move-expand-vertical-1": "unfold_more",
   "text-underline": "format_underlined",
-  "unordered-list": "list"
+  "unordered-list": "list",
+  "filter": "filter_alt",
+  "typing-1": "text_select_start"
 }

package/src/components/Icon.vue

@@ -16,6 +16,22 @@
     @mouseup="(event) => $emit('mouseup', event)"
   />
 
+  <component
+    :is="customSvgIcon"
+    v-else-if="customSvgIcon"
+    :class="[
+      'unnnic-icon',
+      `unnnic-icon--size-svg-${size}`,
+      `unnnic-icon__size--${size}`,
+      clickable ? 'unnnic--clickable' : '',
+      scheme ? `unnnic-icon-scheme--${scheme}` : '',
+    ]"
+    data-testid="old-map-icons"
+    @click="onClick"
+    @mousedown="(event) => $emit('mousedown', event)"
+    @mouseup="(event) => $emit('mouseup', event)"
+  />
+
   <span
     v-else-if="materialSymbolsName"
     :class="[
@@ -23,6 +39,7 @@
       'material-symbols-rounded',
       `unnnic-icon-scheme--${scheme}`,
       `unnnic-icon-size--${size}`,
+      `unnnic-icon__size--${size}`,
       {
         'unnnic--clickable': clickable,
         'material-symbols-rounded--filled': filled,
@@ -41,7 +58,10 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { Icon } from '@iconify/vue';
+
+import icons from '../utils/icons';
 import OldIconsMap from './Icon/OldIconsMap.json';
+
 import type { IconProps, IconSize } from './Icon/types';
 import type { SchemeColor } from '@/types/scheme-colors';
 
@@ -65,16 +85,16 @@ const emit = defineEmits<{
   mouseup: [event: Event];
 }>();
 
-const isIconify = computed(() => {
-  return props.icon?.includes(':') ?? false;
-});
+const isIconify = computed(
+  () => (props.icon as string)?.includes(':') ?? false,
+);
 
-const materialSymbolsName = computed(() => {
-  if (isIconify.value) return null;
-  return (
-    (OldIconsMap as Record<string, string>)[props.icon as string] || props.icon
-  );
-});
+const customSvgIcon = computed(() => icons[props.icon as string] ?? null);
+
+const materialSymbolsName = computed(
+  () =>
+    (OldIconsMap as Record<string, string>)[props.icon as string] || props.icon,
+);
 
 const onClick = (event: Event) => {
   if (!props.clickable) return;
@@ -133,6 +153,14 @@ $icon-sizes:
   @each $name, $color in $unnnic-scheme-colors {
     &.unnnic-icon-scheme--#{$name} {
       color: $color;
+
+      & .primary {
+        fill: $color;
+      }
+
+      & .primary-stroke {
+        stroke: $color;
+      }
     }
   }
 
@@ -140,6 +168,11 @@ $icon-sizes:
     &.unnnic-icon-size--#{$name} {
       font-size: $size;
     }
+
+    &--size-svg-#{$name} {
+      width: $size;
+      height: $size;
+    }
   }
 }
 

package/src/stories/Icon.stories.js

@@ -1,6 +1,15 @@
 import UnnnicIcon from '../components/Icon.vue';
 
-const iconsOptions = ['add', 'add-1', 'warning', 'bi:stars'];
+const iconsOptions = [
+  'add',
+  'add-1',
+  'warning',
+  'bi:stars',
+  'indicator',
+  'fitness-biceps-1',
+  'close-1',
+  'check-2',
+];
 
 const schemes = [
   'background-solo',

package/src/utils/icons.js

@@ -0,0 +1,59 @@
+import Brazil from '../assets/icons/Brazil.vue';
+import CheckboxDefault from '../assets/icons/CheckboxDefault.vue';
+import CheckboxDisable from '../assets/icons/CheckboxDisable.vue';
+import CheckboxLess from '../assets/icons/CheckboxLess.vue';
+import CheckboxSelect from '../assets/icons/CheckboxSelect.vue';
+import FitnessBiceps1 from '../assets/icons/FitnessBiceps1.vue';
+import Indicator from '../assets/icons/Indicator.vue';
+import NavigationMenuVertical1 from '../assets/icons/NavigationMenuVertical1.vue';
+import RadioDefault from '../assets/icons/RadioDefault.vue';
+import RadioDisable from '../assets/icons/RadioDisable.vue';
+import RadioSelected from '../assets/icons/RadioSelected.vue';
+import SingleNeutral2 from '../assets/icons/SingleNeutral2.vue';
+import SingleNeutralActions1 from '../assets/icons/SingleNeutralActions1.vue';
+import SocialMediaFacebook1 from '../assets/icons/SocialMediaFacebook1.vue';
+import SocialInstagram1 from '../assets/icons/SocialInstagram1.vue';
+import SortAsc from '../assets/icons/SortAsc.vue';
+import SortDefault from '../assets/icons/SortDefault.vue';
+import SortDesc from '../assets/icons/SortDesc.vue';
+import Spain from '../assets/icons/Spain.vue';
+import SwitchDefault from '../assets/icons/SwitchDefault.vue';
+import SwitchDefaultDisabled from '../assets/icons/SwitchDefaultDisabled.vue';
+import SwitchSelected from '../assets/icons/SwitchSelected.vue';
+import SwitchSelectedDisabled from '../assets/icons/SwitchSelectedDisabled.vue';
+import USA from '../assets/icons/USA.vue';
+import Messages from '../assets/icons/Messages.vue';
+import TransferMessage from '../assets/icons/TransferMessage.vue';
+import Pin from '../assets/icons/Pin.vue';
+import Unpin from '../assets/icons/Unpin.vue';
+
+export default {
+  Brazil,
+  'checkbox-default': CheckboxDefault,
+  'checkbox-disable': CheckboxDisable,
+  'checkbox-less': CheckboxLess,
+  'checkbox-select': CheckboxSelect,
+  'fitness-biceps-1': FitnessBiceps1,
+  indicator: Indicator,
+  'navigation-menu-vertical-1': NavigationMenuVertical1,
+  'radio-default': RadioDefault,
+  'radio-disable': RadioDisable,
+  'radio-selected': RadioSelected,
+  'single-neutral-2': SingleNeutral2,
+  'single-neutral-actions-1': SingleNeutralActions1,
+  'social-media-facebook-1': SocialMediaFacebook1,
+  'social-instagram-1': SocialInstagram1,
+  'sort-asc': SortAsc,
+  'sort-default': SortDefault,
+  'sort-desc': SortDesc,
+  Spain,
+  'switch-default-disabled': SwitchDefaultDisabled,
+  'switch-default': SwitchDefault,
+  'switch-selected-disabled': SwitchSelectedDisabled,
+  'switch-selected': SwitchSelected,
+  USA,
+  messages: Messages,
+  'transfer-message': TransferMessage,
+  pin: Pin,
+  unpin: Unpin,
+};