Skip to content

Commit c12e70f

Browse files
JavieraMunitaJavieraMunita
authored
feat(alerts): nuevos componentes y lógica para alerta embebida y notificación flash (#548)
1 parent ea9c271 commit c12e70f

File tree

17 files changed

+508
-1
lines changed

17 files changed

+508
-1
lines changed

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,8 +124,9 @@
124124
"@emotion/styled": "11.8.1",
125125
"@fontsource/lora": "4.5.13",
126126
"@fontsource/roboto": "4.5.8",
127-
"framer-motion": "6.2.8",
128127
"@types/eclass-api": "git+ssh://git@gitlab.com/eclass/types-eclass-api.git#v3.104.6",
128+
"framer-motion": "6.2.8",
129+
"react-hot-toast": "2.4.1",
129130
"react-ripples": "2.2.1"
130131
}
131132
}

‎src/atoms/Icons/Alerts/ErrorWhite.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Base, BaseProps } from '../Base'
2+
3+
export function ErrorWhite(props: BaseProps): JSX.Element {
4+
return (
5+
<Base {...props} w="52" h="45" viewBox="0 0 52 45">
6+
<svg fill="none">
7+
<path
8+
d="M21.642 44.2419C33.5945 44.2419 43.284 34.5524 43.284 22.5999C43.284 10.6473 33.5945 0.957886 21.642 0.957886C9.68945 0.957886 0 10.6473 0 22.5999C0 34.5524 9.68945 44.2419 21.642 44.2419Z"
9+
fill="white"
10+
/>
11+
<path
12+
d="M18.5 24.1949C19.3284 24.1949 20 23.5233 20 22.6949C20 21.8665 19.3284 21.1949 18.5 21.1949C17.6716 21.1949 17 21.8665 17 22.6949C17 23.5233 17.6716 24.1949 18.5 24.1949Z"
13+
fill="#CC0000"
14+
/>
15+
<path
16+
d="M23.5 24.1949C24.3284 24.1949 25 23.5233 25 22.6949C25 21.8665 24.3284 21.1949 23.5 21.1949C22.6716 21.1949 22 21.8665 22 22.6949C22 23.5233 22.6716 24.1949 23.5 24.1949Z"
17+
fill="#CC0000"
18+
/>
19+
<path
20+
d="M28.5 24.1949C29.3284 24.1949 30 23.5233 30 22.6949C30 21.8665 29.3284 21.1949 28.5 21.1949C27.6716 21.1949 27 21.8665 27 22.6949C27 23.5233 27.6716 24.1949 28.5 24.1949Z"
21+
fill="#CC0000"
22+
/>
23+
<path
24+
d="M43.678 13.9779C40.657 8.72889 34.991 5.19489 28.5 5.19489C18.835 5.19489 11 13.0299 11 22.6949C11 32.3599 18.835 40.1949 28.5 40.1949C34.608 40.1949 39.984 37.0659 43.115 32.3239"
25+
stroke="#808080"
26+
strokeWidth="2"
27+
strokeLinecap="round"
28+
/>
29+
<path
30+
fillRule="evenodd"
31+
clipRule="evenodd"
32+
d="M35.5862 15.7811C36.5625 14.8048 38.1455 14.8048 39.1218 15.7811L43.2105 19.8699L47.2992 15.7811C48.2755 14.8048 49.8585 14.8048 50.8348 15.7811C51.8111 16.7574 51.8111 18.3403 50.8348 19.3167L46.746 23.4054L50.8348 27.4941C51.8111 28.4704 51.8111 30.0533 50.8348 31.0297C49.8585 32.006 48.2755 32.006 47.2992 31.0297L43.2105 26.9409L39.1218 31.0297C38.1455 32.006 36.5625 32.006 35.5862 31.0297C34.6099 30.0533 34.6099 28.4704 35.5862 27.4941L39.675 23.4054L35.5862 19.3167C34.6099 18.3403 34.6099 16.7574 35.5862 15.7811Z"
33+
fill="#CC0000"
34+
/>
35+
</svg>
36+
</Base>
37+
)
38+
}
39+
40+
ErrorWhite.displayName = 'ErrorWhite'

‎src/atoms/Icons/Alerts/InfoWhite.tsx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Base, BaseProps } from '../Base'
2+
3+
export function InfoWhite(props: BaseProps): JSX.Element {
4+
return (
5+
<Base {...props} w="53" h="45" viewBox="0 0 53 45">
6+
<svg fill="none">
7+
<path
8+
d="M21.642 44.047C33.5945 44.047 43.284 34.3575 43.284 22.405C43.284 10.4525 33.5945 0.763 21.642 0.763C9.68945 0.763 0 10.4525 0 22.405C0 34.3575 9.68945 44.047 21.642 44.047Z"
9+
fill="white"
10+
/>
11+
<path
12+
d="M18.5 24C19.3284 24 20 23.3284 20 22.5C20 21.6716 19.3284 21 18.5 21C17.6716 21 17 21.6716 17 22.5C17 23.3284 17.6716 24 18.5 24Z"
13+
fill="#0189FF"
14+
/>
15+
<path
16+
d="M23.5 24C24.3284 24 25 23.3284 25 22.5C25 21.6716 24.3284 21 23.5 21C22.6716 21 22 21.6716 22 22.5C22 23.3284 22.6716 24 23.5 24Z"
17+
fill="#0189FF"
18+
/>
19+
<path
20+
d="M28.5 24C29.3284 24 30 23.3284 30 22.5C30 21.6716 29.3284 21 28.5 21C27.6716 21 27 21.6716 27 22.5C27 23.3284 27.6716 24 28.5 24Z"
21+
fill="#0189FF"
22+
/>
23+
<path
24+
d="M43.678 13.783C40.657 8.534 34.991 5 28.5 5C18.835 5 11 12.835 11 22.5C11 32.165 18.835 40 28.5 40C34.608 40 39.984 36.871 43.115 32.129"
25+
stroke="#808080"
26+
strokeWidth="2"
27+
strokeLinecap="round"
28+
/>
29+
<path
30+
fillRule="evenodd"
31+
clipRule="evenodd"
32+
d="M47 21H50C50.2652 21 50.5196 21.1054 50.7071 21.2929C50.8946 21.4804 51 21.7348 51 22V29.045H51.237C51.4908 29.0531 51.7316 29.1597 51.9082 29.3421C52.0849 29.5245 52.1837 29.7685 52.1837 30.0225C52.1837 30.2765 52.0849 30.5205 51.9082 30.7029C51.7316 30.8853 51.4908 30.9919 51.237 31H46.977C46.7232 30.9919 46.4824 30.8853 46.3058 30.7029C46.1291 30.5205 46.0303 30.2765 46.0303 30.0225C46.0303 29.7685 46.1291 29.5245 46.3058 29.3421C46.4824 29.1597 46.7232 29.0531 46.977 29.045H47V23.123C46.7348 23.123 46.4804 23.0176 46.2929 22.8301C46.1054 22.6426 46 22.3882 46 22.123V22C46 21.7348 46.1054 21.4804 46.2929 21.2929C46.4804 21.1054 46.7348 21 47 21Z"
33+
fill="#0189FF"
34+
/>
35+
<path
36+
d="M49 19C50.3807 19 51.5 17.8807 51.5 16.5C51.5 15.1193 50.3807 14 49 14C47.6193 14 46.5 15.1193 46.5 16.5C46.5 17.8807 47.6193 19 49 19Z"
37+
fill="#0189FF"
38+
/>
39+
</svg>
40+
</Base>
41+
)
42+
}
43+
44+
InfoWhite.displayName = 'InfoWhite'

‎src/atoms/Icons/Alerts/SuccessWhite.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Base, BaseProps } from '../Base'
2+
3+
export function SuccessWhite(props: BaseProps): JSX.Element {
4+
return (
5+
<Base {...props} w="57" h="45" viewBox="0 0 57 45">
6+
<svg fill="none">
7+
<path
8+
d="M21.642 44.094C33.5945 44.094 43.284 34.4045 43.284 22.452C43.284 10.4995 33.5945 0.809998 21.642 0.809998C9.68945 0.809998 0 10.4995 0 22.452C0 34.4045 9.68945 44.094 21.642 44.094Z"
9+
fill="white"
10+
/>
11+
<path
12+
d="M43.678 13.83C40.657 8.581 34.991 5.047 28.5 5.047C18.835 5.047 11 12.882 11 22.547C11 32.212 18.835 40.047 28.5 40.047C34.608 40.047 39.984 36.918 43.115 32.176"
13+
stroke="#808080"
14+
strokeWidth="2"
15+
strokeLinecap="round"
16+
/>
17+
<path
18+
fillRule="evenodd"
19+
clipRule="evenodd"
20+
d="M56.0248 12.8232C57.0011 13.7995 57.0011 15.3825 56.0248 16.3588L44.3118 28.0718C43.8429 28.5406 43.207 28.804 42.544 28.804C41.881 28.804 41.2451 28.5406 40.7762 28.0718L34.2322 21.5278C33.2559 20.5515 33.2559 18.9685 34.2322 17.9922C35.2085 17.0159 36.7915 17.0159 37.7678 17.9922L42.544 22.7685L52.4892 12.8232C53.4655 11.8469 55.0485 11.8469 56.0248 12.8232Z"
21+
fill="#28A745"
22+
/>
23+
<path
24+
d="M18.5 24.047C19.3284 24.047 20 23.3754 20 22.547C20 21.7186 19.3284 21.047 18.5 21.047C17.6716 21.047 17 21.7186 17 22.547C17 23.3754 17.6716 24.047 18.5 24.047Z"
25+
fill="#28A745"
26+
/>
27+
<path
28+
d="M23.5 24.047C24.3284 24.047 25 23.3754 25 22.547C25 21.7186 24.3284 21.047 23.5 21.047C22.6716 21.047 22 21.7186 22 22.547C22 23.3754 22.6716 24.047 23.5 24.047Z"
29+
fill="#28A745"
30+
/>
31+
<path
32+
d="M28.5 24.047C29.3284 24.047 30 23.3754 30 22.547C30 21.7186 29.3284 21.047 28.5 21.047C27.6716 21.047 27 21.7186 27 22.547C27 23.3754 27.6716 24.047 28.5 24.047Z"
33+
fill="#28A745"
34+
/>
35+
</svg>
36+
</Base>
37+
)
38+
}
39+
40+
SuccessWhite.displayName = 'SuccessWhite'

‎src/atoms/Icons/Alerts/WarningWhite.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Base, BaseProps } from '../Base'
2+
3+
export function WarningWhite(props: BaseProps): JSX.Element {
4+
return (
5+
<Base {...props} w="52" h="45" viewBox="0 0 52 45">
6+
<svg fill="none">
7+
<path
8+
d="M21.642 44.282C33.5945 44.282 43.284 34.5925 43.284 22.64C43.284 10.6874 33.5945 0.997986 21.642 0.997986C9.68945 0.997986 0 10.6874 0 22.64C0 34.5925 9.68945 44.282 21.642 44.282Z"
9+
fill="white"
10+
/>
11+
<path
12+
d="M18.5 24.235C19.3284 24.235 20 23.5634 20 22.735C20 21.9066 19.3284 21.235 18.5 21.235C17.6716 21.235 17 21.9066 17 22.735C17 23.5634 17.6716 24.235 18.5 24.235Z"
13+
fill="#FFBC27"
14+
/>
15+
<path
16+
d="M23.5 24.235C24.3284 24.235 25 23.5634 25 22.735C25 21.9066 24.3284 21.235 23.5 21.235C22.6716 21.235 22 21.9066 22 22.735C22 23.5634 22.6716 24.235 23.5 24.235Z"
17+
fill="#FFBC27"
18+
/>
19+
<path
20+
d="M28.5 24.235C29.3284 24.235 30 23.5634 30 22.735C30 21.9066 29.3284 21.235 28.5 21.235C27.6716 21.235 27 21.9066 27 22.735C27 23.5634 27.6716 24.235 28.5 24.235Z"
21+
fill="#FFBC27"
22+
/>
23+
<path
24+
d="M43.678 14.018C40.657 8.76899 34.991 5.23499 28.5 5.23499C18.835 5.23499 11 13.07 11 22.735C11 32.4 18.835 40.235 28.5 40.235C34.608 40.235 39.984 37.106 43.115 32.364"
25+
stroke="#808080"
26+
strokeWidth="2"
27+
strokeLinecap="round"
28+
/>
29+
<path
30+
fillRule="evenodd"
31+
clipRule="evenodd"
32+
d="M48.782 14.053C50.1627 14.053 51.282 15.1723 51.282 16.553V21.12C51.282 22.5007 50.1627 23.62 48.782 23.62C47.4013 23.62 46.282 22.5007 46.282 21.12V16.553C46.282 15.1723 47.4013 14.053 48.782 14.053ZM47.0143 25.7852C47.9906 24.8089 49.5735 24.8089 50.5498 25.7852L50.5958 25.8312C51.5721 26.8076 51.572 28.3905 50.5957 29.3668C49.6194 30.3431 48.0365 30.343 47.0602 29.3667L47.0142 29.3207C46.0379 28.3444 46.0379 26.7615 47.0143 25.7852Z"
33+
fill="#FFBC27"
34+
/>
35+
</svg>
36+
</Base>
37+
)
38+
}
39+
40+
WarningWhite.displayName = 'WarningWhite'

‎src/atoms/Icons/Alerts/index.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export * from './ErrorWhite'
2+
export * from './InfoWhite'
3+
export * from './SuccessWhite'
4+
export * from './WarningWhite'

‎src/atoms/Icons/Close.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Base, BaseProps } from './Base'
2+
3+
export function Close(props: BaseProps): JSX.Element {
4+
return (
5+
<Base {...props} title="close">
6+
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
7+
<path
8+
d="M10.7071 1.29303C10.5196 1.10556 10.2652 1.00024 10.0001 1.00024C9.73492 1.00024 9.48061 1.10556 9.29308 1.29303L6.00008 4.58603L2.70708 1.29303C2.51848 1.11087 2.26588 1.01008 2.00368 1.01236C1.74148 1.01464 1.49067 1.1198 1.30526 1.30521C1.11985 1.49062 1.01469 1.74143 1.01241 2.00363C1.01013 2.26583 1.11092 2.51843 1.29308 2.70703L4.58608 6.00003L1.29308 9.29303C1.19757 9.38528 1.12139 9.49562 1.06898 9.61763C1.01657 9.73963 0.988985 9.87085 0.987831 10.0036C0.986677 10.1364 1.01198 10.2681 1.06226 10.391C1.11254 10.5139 1.18679 10.6255 1.28069 10.7194C1.37458 10.8133 1.48623 10.8876 1.60913 10.9379C1.73202 10.9881 1.8637 11.0134 1.99648 11.0123C2.12926 11.0111 2.26048 10.9835 2.38249 10.9311C2.50449 10.8787 2.61483 10.8025 2.70708 10.707L6.00008 7.41403L9.29308 10.707C9.48168 10.8892 9.73429 10.99 9.99648 10.9877C10.2587 10.9854 10.5095 10.8803 10.6949 10.6948C10.8803 10.5094 10.9855 10.2586 10.9878 9.99643C10.99 9.73423 10.8892 9.48163 10.7071 9.29303L7.41408 6.00003L10.7071 2.70703C10.8946 2.5195 10.9999 2.26519 10.9999 2.00003C10.9999 1.73487 10.8946 1.48056 10.7071 1.29303Z"
9+
fill="#60798E"
10+
/>
11+
</svg>
12+
</Base>
13+
)
14+
}
15+
16+
Close.displayName = 'Close'

‎src/atoms/Icons/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,5 @@ export * from './Pen'
2020
export * from './PlusSign'
2121
export * from './TrashCan'
2222
export * from './TextBubble'
23+
export * from './Alerts'
24+
export * from './Close'

‎src/molecules/Buttons/BtnLink.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export function BtnLink({ children, m = '0', onClick, id }: props): JSX.Element
1515
id={id}
1616
backgroundColor="transparent"
1717
borderStyle="none"
18+
className="linkButton"
1819
width="fit-content"
1920
padding=".25em"
2021
fontFamily="Roboto"

‎src/organisms/Alerts/Alert.tsx

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import { Box, HStack } from '@chakra-ui/react'
2+
3+
import { BtnLink, BtnPrimary } from '@/molecules'
4+
import { vars } from '@/theme'
5+
import { IAlertProps } from './types.d'
6+
import { alertStates } from './utils/alertStates'
7+
import { Close } from '@/atoms/Icons'
8+
9+
/**
10+
* Componente de alerta embebida que puede tener 4 estados diferentes.
11+
* Opcionalmente puede llevar un botón. El botón puede mostrar sólo un texto
12+
* o un texto junto a un ícono.
13+
* @example Implementación de alerta con botón y margen
14+
* <Alert
15+
* state='info'
16+
* buttonName='Texto botón'
17+
* buttonIcon={<Multimedia />}
18+
* onClick={() => alert('hola')}
19+
* m='0 20px'>
20+
* Mensaje
21+
* </Alert>
22+
*/
23+
24+
export function Alert({
25+
children,
26+
canDismiss = false,
27+
buttonText,
28+
buttonIcon,
29+
buttonLink = false,
30+
onClick,
31+
state,
32+
m,
33+
}: IAlertProps): JSX.Element {
34+
return (
35+
<Box
36+
backgroundColor={alertStates[state].bg}
37+
borderRadius="8px"
38+
padding={canDismiss ? '16px 28px 16px 16px' : '16px'}
39+
width="max-content"
40+
maxWidth="796px"
41+
margin={m}
42+
position="relative"
43+
>
44+
<HStack
45+
sx={{
46+
'.linkButton': {
47+
fontSize: '16px',
48+
},
49+
}}
50+
>
51+
<Box
52+
className="iconContainer"
53+
marginRight="10px"
54+
sx={{
55+
svg: {
56+
width: 'auto',
57+
},
58+
}}
59+
>
60+
{alertStates[state].icon}
61+
</Box>
62+
<Box
63+
fontFamily="Roboto"
64+
fontSize="16px"
65+
fontWeight="400"
66+
lineHeight="28px"
67+
color={vars('colors-neutral-darkCharcoal')}
68+
>
69+
{children}
70+
{buttonText && onClick && buttonLink && <BtnLink onClick={onClick}>{buttonText}</BtnLink>}
71+
</Box>
72+
{buttonText && onClick && !buttonLink && (
73+
<BtnPrimary leftIcon={buttonIcon} onClick={onClick}>
74+
{buttonText}
75+
</BtnPrimary>
76+
)}
77+
{canDismiss && (
78+
<Box
79+
cursor="pointer"
80+
marginLeft="12px"
81+
sx={{
82+
svg: {
83+
position: 'absolute',
84+
top: '16px',
85+
right: '12px',
86+
},
87+
}}
88+
onClick={onClick}
89+
>
90+
<Close />
91+
</Box>
92+
)}
93+
</HStack>
94+
</Box>
95+
)
96+
}

0 commit comments

Comments
 (0)