@consumidor-positivo/aurora 0.0.119 → 0.0.120
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
export type AlertProps = {
|
|
3
|
-
status?: 'success' | 'error' | 'warning' | 'info';
|
|
3
|
+
status?: 'success' | 'error' | 'warning' | 'info' | 'timer';
|
|
4
4
|
type?: 1 | 2;
|
|
5
5
|
orientation?: 'horizontal' | 'vertical';
|
|
6
6
|
title?: {
|
|
@@ -14,5 +14,7 @@ export type AlertProps = {
|
|
|
14
14
|
};
|
|
15
15
|
closeButton?: boolean;
|
|
16
16
|
children?: React.ReactNode;
|
|
17
|
+
countdown?: number;
|
|
18
|
+
onCountdownEnd?: () => void;
|
|
17
19
|
};
|
|
18
|
-
export declare const Alert: ({ status, type, orientation, title, text, actionButton, closeButton, children, }: AlertProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
20
|
+
export declare const Alert: ({ status, type, orientation, title, text, actionButton, closeButton, children, countdown, onCountdownEnd, }: AlertProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from "react";
|
|
2
|
+
import { useState, useEffect } from "react";
|
|
3
3
|
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
4
4
|
import "../Icon/index.es.js";
|
|
5
5
|
import { IconAlertOctagon } from "../icons/IconAlertOctagon/index.es.js";
|
|
6
6
|
import { IconAlertTriangle } from "../icons/IconAlertTriangle/index.es.js";
|
|
7
7
|
import { IconCheck } from "../icons/IconCheck/index.es.js";
|
|
8
|
+
import { IconClock } from "../icons/IconClock/index.es.js";
|
|
8
9
|
import { IconInfo } from "../icons/IconInfo/index.es.js";
|
|
9
10
|
import { IconX } from "../icons/IconX/index.es.js";
|
|
10
11
|
import { h as COLOR_NEUTRAL_70, C as COLOR_SUCCESS_50, b as COLOR_ERROR_50, W as COLOR_WARNING_50, a1 as COLOR_INFO_50 } from "../../tokens-BwvPtuyb.js";
|
|
11
12
|
import { Conditional } from "../Conditional/index.es.js";
|
|
13
|
+
import { Text } from "../Text/index.es.js";
|
|
12
14
|
import './styles.css';const Alert = ({
|
|
13
15
|
status = "info",
|
|
14
16
|
type = 1,
|
|
@@ -17,9 +19,27 @@ import './styles.css';const Alert = ({
|
|
|
17
19
|
text,
|
|
18
20
|
actionButton,
|
|
19
21
|
closeButton = false,
|
|
20
|
-
children
|
|
22
|
+
children,
|
|
23
|
+
countdown = 59,
|
|
24
|
+
onCountdownEnd
|
|
21
25
|
}) => {
|
|
22
26
|
const [isClosed, setIsClosed] = useState(false);
|
|
27
|
+
const [timeLeft, setTimeLeft] = useState(countdown);
|
|
28
|
+
const [isCountdownFinished, setIsCountdownFinished] = useState(false);
|
|
29
|
+
useEffect(() => {
|
|
30
|
+
if (status !== "timer" || timeLeft <= 0) return;
|
|
31
|
+
const timer = setInterval(() => {
|
|
32
|
+
setTimeLeft((prev) => {
|
|
33
|
+
if (prev <= 1) {
|
|
34
|
+
clearInterval(timer);
|
|
35
|
+
setIsCountdownFinished(true);
|
|
36
|
+
if (onCountdownEnd) onCountdownEnd();
|
|
37
|
+
}
|
|
38
|
+
return prev - 1;
|
|
39
|
+
});
|
|
40
|
+
}, 1e3);
|
|
41
|
+
return () => clearInterval(timer);
|
|
42
|
+
}, [status, timeLeft, onCountdownEnd]);
|
|
23
43
|
const statusMap = {
|
|
24
44
|
success: {
|
|
25
45
|
option: "success",
|
|
@@ -33,7 +53,17 @@ import './styles.css';const Alert = ({
|
|
|
33
53
|
option: "warning",
|
|
34
54
|
icon: /* @__PURE__ */ jsx(IconAlertTriangle, { rawColor: COLOR_WARNING_50 })
|
|
35
55
|
},
|
|
36
|
-
info: { option: "info", icon: /* @__PURE__ */ jsx(IconInfo, { rawColor: COLOR_INFO_50 }) }
|
|
56
|
+
info: { option: "info", icon: /* @__PURE__ */ jsx(IconInfo, { rawColor: COLOR_INFO_50 }) },
|
|
57
|
+
timer: {
|
|
58
|
+
option: "timer",
|
|
59
|
+
icon: /* @__PURE__ */ jsxs("div", { className: "au-alert__timer", children: [
|
|
60
|
+
/* @__PURE__ */ jsx(IconClock, { rawColor: COLOR_WARNING_50 }),
|
|
61
|
+
!isCountdownFinished && /* @__PURE__ */ jsxs(Text, { className: "au-alert__countdown", variant: "body-small", weight: "bold", children: [
|
|
62
|
+
timeLeft,
|
|
63
|
+
"s"
|
|
64
|
+
] })
|
|
65
|
+
] })
|
|
66
|
+
}
|
|
37
67
|
};
|
|
38
68
|
const alertClasses = classNames("au-alert", {
|
|
39
69
|
[`au-alert--${statusMap[status].option}--type-${type}`]: statusMap[status].option
|
|
@@ -51,7 +81,7 @@ import './styles.css';const Alert = ({
|
|
|
51
81
|
/* @__PURE__ */ jsx(
|
|
52
82
|
Conditional,
|
|
53
83
|
{
|
|
54
|
-
condition: !!actionButton,
|
|
84
|
+
condition: !!actionButton && (status !== "timer" || isCountdownFinished),
|
|
55
85
|
renderIf: /* @__PURE__ */ jsx(
|
|
56
86
|
"button",
|
|
57
87
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../lib/components/Alert/index.tsx"],"sourcesContent":["import { useState } from 'react'\nimport classNames from 'classnames'\nimport {\n IconAlertOctagon,\n IconAlertTriangle,\n IconCheck,\n IconInfo,\n IconX,\n} from '@components/icons'\nimport {\n COLOR_ERROR_50,\n COLOR_INFO_50,\n COLOR_NEUTRAL_70,\n COLOR_SUCCESS_50,\n COLOR_WARNING_50,\n} from '@core/tokens'\nimport { Conditional } from '@components/misc'\nimport './styles.scss'\n\nexport type AlertProps = {\n status?: 'success' | 'error' | 'warning' | 'info'\n type?: 1 | 2\n orientation?: 'horizontal' | 'vertical'\n title?: { content?: string; weight?: 'bold' | 'normal' }\n text?: string\n actionButton?: { content?: string; onClick?: () => void }\n closeButton?: boolean\n children?: React.ReactNode\n}\n\nexport const Alert = ({\n status = 'info',\n type = 1,\n orientation = 'horizontal',\n title,\n text,\n actionButton,\n closeButton = false,\n children,\n}: AlertProps) => {\n const [isClosed, setIsClosed] = useState(false)\n\n const statusMap = {\n success: {\n option: 'success',\n icon: <IconCheck rawColor={COLOR_SUCCESS_50} />,\n },\n error: {\n option: 'error',\n icon: <IconAlertOctagon rawColor={COLOR_ERROR_50} />,\n },\n warning: {\n option: 'warning',\n icon: <IconAlertTriangle rawColor={COLOR_WARNING_50} />,\n },\n info: { option: 'info', icon: <IconInfo rawColor={COLOR_INFO_50} /> },\n }\n\n const alertClasses = classNames('au-alert', {\n [`au-alert--${statusMap[status].option}--type-${type}`]:\n statusMap[status].option,\n })\n\n if (isClosed) return null\n\n return (\n <div className={alertClasses}>\n <div className=\"au-alert__content\">\n {statusMap[status].icon}\n <div className={`au-alert__container--${orientation}`}>\n <div>\n <h4 className={`au-alert__title au-alert__title--${title?.weight}`}>\n {title?.content}\n </h4>\n <p className={`au-alert__support-text`}>{text}</p>\n </div>\n {children}\n <Conditional\n condition={!!actionButton}\n renderIf={\n <button\n className=\"au-alert__action-btn\"\n onClick={actionButton?.onClick}>\n {actionButton?.content}\n </button>\n }\n />\n </div>\n </div>\n\n <Conditional\n condition={closeButton}\n renderIf={\n <button className=\"au-alert__close-btn\">\n <IconX\n rawColor={COLOR_NEUTRAL_70}\n onClick={() => setIsClosed(true)}\n />\n </button>\n }\n />\n </div>\n )\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../lib/components/Alert/index.tsx"],"sourcesContent":["import { useState, useEffect } from 'react'\nimport classNames from 'classnames'\nimport {\n IconAlertOctagon,\n IconAlertTriangle,\n IconCheck,\n IconInfo,\n IconX,\n IconClock,\n} from '@components/icons'\nimport {\n COLOR_ERROR_50,\n COLOR_INFO_50,\n COLOR_NEUTRAL_70,\n COLOR_SUCCESS_50,\n COLOR_WARNING_50,\n} from '@core/tokens'\nimport { Conditional } from '@components/misc'\nimport { Text } from '@components/Text'\nimport './styles.scss'\n\nexport type AlertProps = {\n status?: 'success' | 'error' | 'warning' | 'info' | 'timer'\n type?: 1 | 2\n orientation?: 'horizontal' | 'vertical'\n title?: { content?: string; weight?: 'bold' | 'normal' }\n text?: string\n actionButton?: { content?: string; onClick?: () => void }\n closeButton?: boolean\n children?: React.ReactNode\n countdown?: number\n onCountdownEnd?: () => void\n}\n\nexport const Alert = ({\n status = 'info',\n type = 1,\n orientation = 'horizontal',\n title,\n text,\n actionButton,\n closeButton = false,\n children,\n countdown = 59,\n onCountdownEnd,\n}: AlertProps) => {\n const [isClosed, setIsClosed] = useState(false)\n const [timeLeft, setTimeLeft] = useState(countdown)\n const [isCountdownFinished, setIsCountdownFinished] = useState(false)\n\n useEffect(() => {\n if (status !== 'timer' || timeLeft <= 0) return\n\n const timer = setInterval(() => {\n setTimeLeft((prev) => {\n if (prev <= 1) {\n clearInterval(timer)\n setIsCountdownFinished(true)\n if (onCountdownEnd) onCountdownEnd()\n }\n return prev - 1\n })\n }, 1000)\n\n return () => clearInterval(timer)\n }, [status, timeLeft, onCountdownEnd])\n\n const statusMap = {\n success: {\n option: 'success',\n icon: <IconCheck rawColor={COLOR_SUCCESS_50} />,\n },\n error: {\n option: 'error',\n icon: <IconAlertOctagon rawColor={COLOR_ERROR_50} />,\n },\n warning: {\n option: 'warning',\n icon: <IconAlertTriangle rawColor={COLOR_WARNING_50} />,\n },\n info: { option: 'info', icon: <IconInfo rawColor={COLOR_INFO_50} /> },\n timer: {\n option: 'timer',\n icon: (\n <div className=\"au-alert__timer\">\n <IconClock rawColor={COLOR_WARNING_50} />\n {!isCountdownFinished && (\n <Text className=\"au-alert__countdown\" variant=\"body-small\" weight=\"bold\">{timeLeft}s</Text>\n )}\n </div>\n ),\n },\n }\n\n const alertClasses = classNames('au-alert', {\n [`au-alert--${statusMap[status].option}--type-${type}`]:\n statusMap[status].option,\n })\n\n if (isClosed) return null\n\n return (\n <div className={alertClasses}>\n <div className=\"au-alert__content\">\n {statusMap[status].icon}\n <div className={`au-alert__container--${orientation}`}>\n <div>\n <h4 className={`au-alert__title au-alert__title--${title?.weight}`}>\n {title?.content}\n </h4>\n <p className={`au-alert__support-text`}>{text}</p>\n </div>\n {children}\n <Conditional\n condition={!!actionButton && (status !== 'timer' || isCountdownFinished)}\n renderIf={\n <button\n className=\"au-alert__action-btn\"\n onClick={actionButton?.onClick}>\n {actionButton?.content}\n </button>\n }\n />\n </div>\n </div>\n\n <Conditional\n condition={closeButton}\n renderIf={\n <button className=\"au-alert__close-btn\">\n <IconX\n rawColor={COLOR_NEUTRAL_70}\n onClick={() => setIsClosed(true)}\n />\n </button>\n }\n />\n </div>\n )\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.au-alert{font-family:"Source Sans 3",sans-serif;border-radius:16px;display:flex;justify-content:space-between;gap:16px;padding:16px}.au-alert__content{display:flex;gap:16px;flex:1}.au-alert__container--horizontal .au-alert__action-btn{margin-top:8px}.au-alert__container--vertical{display:flex;gap:16px;flex-direction:row;justify-content:space-between;width:100%}.au-alert__title{color:#16181d;font-size:16px;font-weight:400;line-height:24px}.au-alert__title--bold{font-weight:600}.au-alert__support-text{color:#454a54;font-size:14px;line-height:21px}.au-alert__action-btn{background-color:transparent;border:none;color:#0048db;cursor:pointer;font-size:16px;font-weight:600;line-height:24px}.au-alert__close-btn{cursor:pointer;background:transparent;border:none;display:flex}.au-alert--info--type-1{background-color:#f3f0fc;border:1px solid #510cb2}.au-alert--info--type-2{background-color:#eee6ff;border:none}.au-alert--success--type-1{background-color:#f0fcf5;border:1px solid #10593b}.au-alert--success--type-2{background-color:#e5fff0;border:none}.au-alert--warning--type-1{background-color:#fcf4f0;border:1px solid #a64a08}.au-alert--warning--type-2{background-color:#fff0e6;border:none}.au-alert--error--type-1{background-color:#f5eff0;border:1px solid #991717}.au-alert--error--type-2{background-color:#ffe5e5;border:none}
|
|
1
|
+
.au-alert{font-family:"Source Sans 3",sans-serif;border-radius:16px;display:flex;justify-content:space-between;gap:16px;padding:16px}.au-alert__content{display:flex;gap:16px;flex:1}.au-alert__container--horizontal .au-alert__action-btn{margin-top:8px}.au-alert__container--vertical{display:flex;gap:16px;flex-direction:row;justify-content:space-between;width:100%}.au-alert__title{color:#16181d;font-size:16px;font-weight:400;line-height:24px}.au-alert__title--bold{font-weight:600}.au-alert__support-text{color:#454a54;font-size:14px;line-height:21px}.au-alert__action-btn{background-color:transparent;border:none;color:#0048db;cursor:pointer;font-size:16px;font-weight:600;line-height:24px}.au-alert__close-btn{cursor:pointer;background:transparent;border:none;display:flex}.au-alert__timer{text-align:center}.au-alert__countdown{color:#a64a08}.au-alert--info--type-1{background-color:#f3f0fc;border:1px solid #510cb2}.au-alert--info--type-2{background-color:#eee6ff;border:none}.au-alert--success--type-1{background-color:#f0fcf5;border:1px solid #10593b}.au-alert--success--type-2{background-color:#e5fff0;border:none}.au-alert--warning--type-1,.au-alert--timer--type-1{background-color:#fcf4f0;border:1px solid #a64a08}.au-alert--warning--type-2,.au-alert--timer--type-2{background-color:#fff0e6;border:none}.au-alert--timer--type-1 .au-alert__content,.au-alert--timer--type-2 .au-alert__content{align-items:center}.au-alert--error--type-1{background-color:#f5eff0;border:1px solid #991717}.au-alert--error--type-2{background-color:#ffe5e5;border:none}
|