Skip to content

Commit 959f1da

Browse files
JonathangarridoJonathangarrido
authored
fix(ids): genera ids unicos en iconos (#650)
1 parent 1d8d0b1 commit 959f1da

File tree

23 files changed

+102
-42
lines changed

23 files changed

+102
-42
lines changed

‎src/atoms/Icons/ArrowRight.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1+
import { uniqueId } from '@/services'
12
import { Base, BaseProps } from './Base'
23

34
export function ArrowRight(props: BaseProps): JSX.Element {
5+
const id = `clip-${uniqueId()}`
46
return (
57
<Base {...props}>
6-
<g clipPath="url(#clip0)">
8+
<g clipPath={`url(#${id})`}>
79
<mask
8-
id="mask0"
10+
id={`mask-${id}`}
911
style={{ maskType: 'alpha' }}
1012
width="16"
1113
height="16"
@@ -15,12 +17,12 @@ export function ArrowRight(props: BaseProps): JSX.Element {
1517
>
1618
<path fill="#fff" d="M16 16H32V32H16z" transform="rotate(180 16 16)" />
1719
</mask>
18-
<g mask="url(#mask0)">
20+
<g mask={`url(#mask-${id})`}>
1921
<path fill="currentColor" d="M6.074 14L12 8 6.074 2 4 4.1 7.852 8 4 11.9 6.074 14z" />
2022
</g>
2123
</g>
2224
<defs>
23-
<clipPath id="clip0">
25+
<clipPath id={id}>
2426
<path fill="#fff" d="M0 0H16V16H0z" />
2527
</clipPath>
2628
</defs>

‎src/atoms/Icons/Loader.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { uniqueId } from '@/services'
2+
13
interface props {
24
fill?: string
35
}
@@ -6,7 +8,7 @@ export function Loader({ fill = '#fff' }: props): JSX.Element {
68
return (
79
<div className="loaderAsync" data-testid="loaderAsync">
810
<svg
9-
id="prefix__eXySq0EBKm11"
11+
id={uniqueId()}
1012
xmlns="http://www.w3.org/2000/svg"
1113
viewBox="0 0 38 20"
1214
shapeRendering="geometricPrecision"

‎src/atoms/Icons/TinyAlertError.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
import { uniqueId } from '@/services'
12
import { Base, BaseProps } from './Base'
23

34
export function TinyAlertError(props: BaseProps): JSX.Element {
5+
const id = `clip${uniqueId()}`
46
return (
57
<Base {...props} w="12px" h="12px" viewBox="0 0 12 12">
6-
<g clipPath="url(#clip0_2165_6683)">
8+
<g clipPath={`url(#${id})`}>
79
<circle cx="6" cy="6" r="6" fill="#CC0000" />
810
<path
911
fillRule="evenodd"
@@ -13,7 +15,7 @@ export function TinyAlertError(props: BaseProps): JSX.Element {
1315
/>
1416
</g>
1517
<defs>
16-
<clipPath id="clip0_2165_6683">
18+
<clipPath id={id}>
1719
<rect width="12px" height="12px" fill="white" />
1820
</clipPath>
1921
</defs>

‎src/atoms/Icons/TinyAlertSuccess.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
import { uniqueId } from '@/services'
12
import { Base, BaseProps } from './Base'
23

34
export function TinyAlertSuccess(props: BaseProps): JSX.Element {
5+
const id = `clip${uniqueId()}`
46
return (
57
<Base {...props} w="12px" h="12px" viewBox="0 0 12 12">
6-
<g clipPath="url(#clip0_2191_1138)">
8+
<g clipPath={`url(#${id})`}>
79
<circle cx="6" cy="6" r="6" fill="#28A745" />
810
<path
911
fillRule="evenodd"
@@ -13,7 +15,7 @@ export function TinyAlertSuccess(props: BaseProps): JSX.Element {
1315
/>
1416
</g>
1517
<defs>
16-
<clipPath id="clip0_2191_1138">
18+
<clipPath id={id}>
1719
<rect width="12" height="12" fill="white" />
1820
</clipPath>
1921
</defs>

‎src/molecules/Buttons/Btn.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export function Btn({
5151
color = vars('colors-neutral-white'),
5252
disabled = false,
5353
fillLoader = vars('colors-neutral-white'),
54-
id,
54+
id = undefined,
5555
isFullWidth = false,
5656
isLoading = false,
5757
leftIcon,

‎src/organisms/Resources/Icons/Avi.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import { FC } from 'react'
22
import { Icon } from '@chakra-ui/react'
33

4+
import { uniqueId } from '@/services'
5+
46
export const Avi: FC = () => {
7+
const id = `clip${uniqueId()}`
58
return (
69
<Icon
710
width="32px"
@@ -10,7 +13,7 @@ export const Avi: FC = () => {
1013
fill="none"
1114
xmlns="http://www.w3.org/2000/svg"
1215
>
13-
<g clipPath="url(#clip0_2871_5797)">
16+
<g clipPath={`url(#${id})`}>
1417
<path d="M20 1V9H28" stroke="#B0CFE0" strokeWidth="2" strokeMiterlimit="10" />
1518
<path
1619
d="M28 13V9L20 1H4V13"
@@ -44,7 +47,7 @@ export const Avi: FC = () => {
4447
/>
4548
</g>
4649
<defs>
47-
<clipPath id="clip0_2871_5797">
50+
<clipPath id={id}>
4851
<rect width="32" height="32" fill="white" />
4952
</clipPath>
5053
</defs>

‎src/organisms/Resources/Icons/Csv.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import { FC } from 'react'
22
import { Icon } from '@chakra-ui/react'
33

4+
import { uniqueId } from '@/services'
5+
46
export const Csv: FC = () => {
7+
const id = `clip${uniqueId()}`
58
return (
69
<Icon
710
width="32px"
@@ -10,7 +13,7 @@ export const Csv: FC = () => {
1013
fill="none"
1114
xmlns="http://www.w3.org/2000/svg"
1215
>
13-
<g clipPath="url(#clip0_2871_5770)">
16+
<g clipPath={`url(#${id})`}>
1417
<path d="M20 1V9H28" stroke="#B0CFE0" strokeWidth="2" strokeMiterlimit="10" />
1518
<path
1619
d="M28 13V9L20 1H4V13"
@@ -47,7 +50,7 @@ export const Csv: FC = () => {
4750
/>
4851
</g>
4952
<defs>
50-
<clipPath id="clip0_2871_5770">
53+
<clipPath id={id}>
5154
<rect width="32" height="32" fill="white" />
5255
</clipPath>
5356
</defs>

‎src/organisms/Resources/Icons/Doc.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import { FC } from 'react'
22
import { Icon } from '@chakra-ui/react'
33

4+
import { uniqueId } from '@/services'
5+
46
export const Doc: FC = () => {
7+
const id = `clip${uniqueId()}`
58
return (
69
<Icon
710
width="32px"
@@ -10,7 +13,7 @@ export const Doc: FC = () => {
1013
fill="none"
1114
xmlns="http://www.w3.org/2000/svg"
1215
>
13-
<g clipPath="url(#clip0_2871_5732)">
16+
<g clipPath={`url(#${id})`}>
1417
<path d="M20 1V9H28" stroke="#B0CFE0" strokeWidth="2" strokeMiterlimit="10" />
1518
<path
1619
d="M28 13V9L20 1H4V13"
@@ -47,7 +50,7 @@ export const Doc: FC = () => {
4750
/>
4851
</g>
4952
<defs>
50-
<clipPath id="clip0_2871_5732">
53+
<clipPath id={id}>
5154
<rect width="32" height="32" fill="white" />
5255
</clipPath>
5356
</defs>

‎src/organisms/Resources/Icons/Docx.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import { FC } from 'react'
22
import { Icon } from '@chakra-ui/react'
33

4+
import { uniqueId } from '@/services'
5+
46
export const Docx: FC = () => {
7+
const id = `clip${uniqueId()}`
58
return (
69
<Icon
710
width="32px"
@@ -10,7 +13,7 @@ export const Docx: FC = () => {
1013
fill="none"
1114
xmlns="http://www.w3.org/2000/svg"
1215
>
13-
<g clipPath="url(#clip0_2871_5741)">
16+
<g clipPath={`url(#${id})`}>
1417
<path d="M20 1V9H28" stroke="#B0CFE0" strokeWidth="2" strokeMiterlimit="10" />
1518
<path
1619
d="M28 13V9L20 1H4V13"
@@ -51,7 +54,7 @@ export const Docx: FC = () => {
5154
/>
5255
</g>
5356
<defs>
54-
<clipPath id="clip0_2871_5741">
57+
<clipPath id={id}>
5558
<rect width="32" height="32" fill="white" />
5659
</clipPath>
5760
</defs>

‎src/organisms/Resources/Icons/Gif.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import { FC } from 'react'
22
import { Icon } from '@chakra-ui/react'
33

4+
import { uniqueId } from '@/services'
5+
46
export const Gif: FC = () => {
7+
const id = `clip${uniqueId()}`
58
return (
69
<Icon
710
width="32px"
@@ -10,7 +13,7 @@ export const Gif: FC = () => {
1013
fill="none"
1114
xmlns="http://www.w3.org/2000/svg"
1215
>
13-
<g clipPath="url(#clip0_2871_5704)">
16+
<g clipPath={`url(#${id})`}>
1417
<path d="M20 1V9H28" stroke="#B0CFE0" strokeWidth="2" strokeMiterlimit="10" />
1518
<path
1619
d="M28 13V9L20 1H4V13"
@@ -41,7 +44,7 @@ export const Gif: FC = () => {
4144
/>
4245
</g>
4346
<defs>
44-
<clipPath id="clip0_2871_5704">
47+
<clipPath id={id}>
4548
<rect width="32" height="32" fill="white" />
4649
</clipPath>
4750
</defs>

0 commit comments

Comments
 (0)