fix(ids): genera ids unicos en iconos (#650)

Author: Jonathangarrido

src/atoms/Icons/ArrowRight.tsx

@@ -1,11 +1,13 @@
+import { uniqueId } from '@/services'
 import { Base, BaseProps } from './Base'
 
 export function ArrowRight(props: BaseProps): JSX.Element {
+  const id = `clip-${uniqueId()}`
   return (
     <Base {...props}>
-      <g clipPath="url(#clip0)">
+      <g clipPath={`url(#${id})`}>
         <mask
-          id="mask0"
+          id={`mask-${id}`}
           style={{ maskType: 'alpha' }}
           width="16"
           height="16"
@@ -15,12 +17,12 @@ export function ArrowRight(props: BaseProps): JSX.Element {
         >
           <path fill="#fff" d="M16 16H32V32H16z" transform="rotate(180 16 16)" />
         </mask>
-        <g mask="url(#mask0)">
+        <g mask={`url(#mask-${id})`}>
           <path fill="currentColor" d="M6.074 14L12 8 6.074 2 4 4.1 7.852 8 4 11.9 6.074 14z" />
         </g>
       </g>
       <defs>
-        <clipPath id="clip0">
+        <clipPath id={id}>
           <path fill="#fff" d="M0 0H16V16H0z" />
         </clipPath>
       </defs>

src/atoms/Icons/Loader.tsx

@@ -1,3 +1,5 @@
+import { uniqueId } from '@/services'
+
 interface props {
   fill?: string
 }
@@ -6,7 +8,7 @@ export function Loader({ fill = '#fff' }: props): JSX.Element {
   return (
     <div className="loaderAsync" data-testid="loaderAsync">
       <svg
-        id="prefix__eXySq0EBKm11"
+        id={uniqueId()}
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 38 20"
         shapeRendering="geometricPrecision"

src/atoms/Icons/TinyAlertError.tsx

@@ -1,9 +1,11 @@
+import { uniqueId } from '@/services'
 import { Base, BaseProps } from './Base'
 
 export function TinyAlertError(props: BaseProps): JSX.Element {
+  const id = `clip${uniqueId()}`
   return (
     <Base {...props} w="12px" h="12px" viewBox="0 0 12 12">
-      <g clipPath="url(#clip0_2165_6683)">
+      <g clipPath={`url(#${id})`}>
         <circle cx="6" cy="6" r="6" fill="#CC0000" />
         <path
           fillRule="evenodd"
@@ -13,7 +15,7 @@ export function TinyAlertError(props: BaseProps): JSX.Element {
         />
       </g>
       <defs>
-        <clipPath id="clip0_2165_6683">
+        <clipPath id={id}>
           <rect width="12px" height="12px" fill="white" />
         </clipPath>
       </defs>

src/atoms/Icons/TinyAlertSuccess.tsx

@@ -1,9 +1,11 @@
+import { uniqueId } from '@/services'
 import { Base, BaseProps } from './Base'
 
 export function TinyAlertSuccess(props: BaseProps): JSX.Element {
+  const id = `clip${uniqueId()}`
   return (
     <Base {...props} w="12px" h="12px" viewBox="0 0 12 12">
-      <g clipPath="url(#clip0_2191_1138)">
+      <g clipPath={`url(#${id})`}>
         <circle cx="6" cy="6" r="6" fill="#28A745" />
         <path
           fillRule="evenodd"
@@ -13,7 +15,7 @@ export function TinyAlertSuccess(props: BaseProps): JSX.Element {
         />
       </g>
       <defs>
-        <clipPath id="clip0_2191_1138">
+        <clipPath id={id}>
           <rect width="12" height="12" fill="white" />
         </clipPath>
       </defs>

src/molecules/Buttons/Btn.tsx

@@ -51,7 +51,7 @@ export function Btn({
   color = vars('colors-neutral-white'),
   disabled = false,
   fillLoader = vars('colors-neutral-white'),
-  id,
+  id = undefined,
   isFullWidth = false,
   isLoading = false,
   leftIcon,

src/organisms/Resources/Icons/Avi.tsx

@@ -1,7 +1,10 @@
 import { FC } from 'react'
 import { Icon } from '@chakra-ui/react'
 
+import { uniqueId } from '@/services'
+
 export const Avi: FC = () => {
+  const id = `clip${uniqueId()}`
   return (
     <Icon
       width="32px"
@@ -10,7 +13,7 @@ export const Avi: FC = () => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clipPath="url(#clip0_2871_5797)">
+      <g clipPath={`url(#${id})`}>
         <path d="M20 1V9H28" stroke="#B0CFE0" strokeWidth="2" strokeMiterlimit="10" />
         <path
           d="M28 13V9L20 1H4V13"
@@ -44,7 +47,7 @@ export const Avi: FC = () => {
         />
       </g>
       <defs>
-        <clipPath id="clip0_2871_5797">
+        <clipPath id={id}>
           <rect width="32" height="32" fill="white" />
         </clipPath>
       </defs>

src/organisms/Resources/Icons/Csv.tsx

@@ -1,7 +1,10 @@
 import { FC } from 'react'
 import { Icon } from '@chakra-ui/react'
 
+import { uniqueId } from '@/services'
+
 export const Csv: FC = () => {
+  const id = `clip${uniqueId()}`
   return (
     <Icon
       width="32px"
@@ -10,7 +13,7 @@ export const Csv: FC = () => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clipPath="url(#clip0_2871_5770)">
+      <g clipPath={`url(#${id})`}>
         <path d="M20 1V9H28" stroke="#B0CFE0" strokeWidth="2" strokeMiterlimit="10" />
         <path
           d="M28 13V9L20 1H4V13"
@@ -47,7 +50,7 @@ export const Csv: FC = () => {
         />
       </g>
       <defs>
-        <clipPath id="clip0_2871_5770">
+        <clipPath id={id}>
           <rect width="32" height="32" fill="white" />
         </clipPath>
       </defs>

src/organisms/Resources/Icons/Doc.tsx

@@ -1,7 +1,10 @@
 import { FC } from 'react'
 import { Icon } from '@chakra-ui/react'
 
+import { uniqueId } from '@/services'
+
 export const Doc: FC = () => {
+  const id = `clip${uniqueId()}`
   return (
     <Icon
       width="32px"
@@ -10,7 +13,7 @@ export const Doc: FC = () => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clipPath="url(#clip0_2871_5732)">
+      <g clipPath={`url(#${id})`}>
         <path d="M20 1V9H28" stroke="#B0CFE0" strokeWidth="2" strokeMiterlimit="10" />
         <path
           d="M28 13V9L20 1H4V13"
@@ -47,7 +50,7 @@ export const Doc: FC = () => {
         />
       </g>
       <defs>
-        <clipPath id="clip0_2871_5732">
+        <clipPath id={id}>
           <rect width="32" height="32" fill="white" />
         </clipPath>
       </defs>

src/organisms/Resources/Icons/Docx.tsx

@@ -1,7 +1,10 @@
 import { FC } from 'react'
 import { Icon } from '@chakra-ui/react'
 
+import { uniqueId } from '@/services'
+
 export const Docx: FC = () => {
+  const id = `clip${uniqueId()}`
   return (
     <Icon
       width="32px"
@@ -10,7 +13,7 @@ export const Docx: FC = () => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clipPath="url(#clip0_2871_5741)">
+      <g clipPath={`url(#${id})`}>
         <path d="M20 1V9H28" stroke="#B0CFE0" strokeWidth="2" strokeMiterlimit="10" />
         <path
           d="M28 13V9L20 1H4V13"
@@ -51,7 +54,7 @@ export const Docx: FC = () => {
         />
       </g>
       <defs>
-        <clipPath id="clip0_2871_5741">
+        <clipPath id={id}>
           <rect width="32" height="32" fill="white" />
         </clipPath>
       </defs>

src/organisms/Resources/Icons/Gif.tsx

@@ -1,7 +1,10 @@
 import { FC } from 'react'
 import { Icon } from '@chakra-ui/react'
 
+import { uniqueId } from '@/services'
+
 export const Gif: FC = () => {
+  const id = `clip${uniqueId()}`
   return (
     <Icon
       width="32px"
@@ -10,7 +13,7 @@ export const Gif: FC = () => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clipPath="url(#clip0_2871_5704)">
+      <g clipPath={`url(#${id})`}>
         <path d="M20 1V9H28" stroke="#B0CFE0" strokeWidth="2" strokeMiterlimit="10" />
         <path
           d="M28 13V9L20 1H4V13"
@@ -41,7 +44,7 @@ export const Gif: FC = () => {
         />
       </g>
       <defs>
-        <clipPath id="clip0_2871_5704">
+        <clipPath id={id}>
           <rect width="32" height="32" fill="white" />
         </clipPath>
       </defs>