@homefile/components-v2 2.53.0 → 2.53.2
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.
|
@@ -8,5 +8,5 @@ export const CustomToast = ({ description, onClose, status = 'success', title, }
|
|
|
8
8
|
success: '#5E42B2',
|
|
9
9
|
error: '#CF3593',
|
|
10
10
|
};
|
|
11
|
-
return (_jsxs(Box, { paddingTop: 0, paddingBottom: 0, bg: bgColors[status], borderRadius: "lg", boxShadow: "lg", position: "relative", children: [_jsxs(Flex, { gap: "base", p: "base", align: "center", position: "relative", left: "-26px", children: [_jsx(StatusIllustration, { status: status }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "
|
|
11
|
+
return (_jsxs(Box, { paddingTop: 0, paddingBottom: 0, bg: bgColors[status], borderRadius: "lg", boxShadow: "lg", position: "relative", children: [_jsxs(Flex, { gap: "base", p: "base", align: "center", position: "relative", left: "-26px", children: [_jsx(StatusIllustration, { status: status }), _jsxs(Box, { children: [_jsx(Text, { fontFamily: "primary", fontSize: "20px", fontWeight: "medium", color: "neutral.white", lineHeight: "1.1", children: title }), _jsx(Text, { fontFamily: "secondary", fontWeight: "regular", color: "neutral.white", children: description })] })] }), _jsx(Box, { as: "button", "aria-label": t('ariaLabels.close'), onClick: onClose, position: "absolute", top: "8px", right: "8px", children: _jsx(Close, { stroke: colors.neutral.white, size: 20 }) })] }));
|
|
12
12
|
};
|
|
@@ -8,15 +8,15 @@ export const StatusIllustration = ({ status = 'success', }) => {
|
|
|
8
8
|
src: Check,
|
|
9
9
|
alt: t('ariaLabels.success'),
|
|
10
10
|
bg: '#28B5A8',
|
|
11
|
-
height: '
|
|
11
|
+
height: '17px',
|
|
12
12
|
},
|
|
13
13
|
error: {
|
|
14
14
|
src: Exclamation,
|
|
15
15
|
alt: t('ariaLabels.error'),
|
|
16
16
|
bg: '#991365',
|
|
17
|
-
height: '
|
|
17
|
+
height: '22px',
|
|
18
18
|
},
|
|
19
19
|
};
|
|
20
20
|
const { alt, bg, height, src } = props[status];
|
|
21
|
-
return (_jsx(Center, { borderRadius: "full", bg: bg, boxShadow: "xl", w: "
|
|
21
|
+
return (_jsx(Center, { borderRadius: "full", bg: bg, boxShadow: "xl", w: "36px", h: "36px", children: _jsx(Image, { src: src, alt: alt, h: height, w: "auto" }) }));
|
|
22
22
|
};
|
package/dist/components/propertyTiles/charts/lineCharts/trendingLineChart/TrendingLineChart.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Box, Stack } from '@chakra-ui/react';
|
|
3
|
-
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
|
|
3
|
+
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, } from 'recharts';
|
|
4
4
|
import { contentStyle, cursorStyle, labelStyle, itemStyle, yAxisStyle, TrendingLineChartHeader, } from '../../../../../components';
|
|
5
5
|
import { colors } from '../../../../../theme/colors';
|
|
6
6
|
export const TrendingLineChart = ({ data = [] }) => {
|
|
7
|
-
return (_jsxs(Stack, { spacing: "base", bg: "neutral.white", p: "base", children: [_jsx(TrendingLineChartHeader, {}),
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
return (_jsxs(Stack, { spacing: "base", bg: "neutral.white", p: "base", children: [_jsx(TrendingLineChartHeader, {}), _jsx(ResponsiveContainer, { width: "100%", height: 200, children: _jsxs(LineChart, { data: data, margin: {
|
|
8
|
+
left: -25,
|
|
9
|
+
right: 8,
|
|
10
|
+
bottom: -10,
|
|
11
|
+
}, children: [_jsx(CartesianGrid, {}), _jsx(XAxis, { dataKey: "year", style: yAxisStyle }), _jsx(YAxis, { style: yAxisStyle }), _jsx(Tooltip, { contentStyle: contentStyle, cursor: cursorStyle, labelStyle: labelStyle, itemStyle: itemStyle }), _jsx(Line, { type: "monotone", dataKey: "value", stroke: colors.green[1], strokeWidth: 3, dot: _jsx(Box, {}) }), _jsx(Line, { type: "monotone", dataKey: "invested", stroke: colors.yellow[1], strokeWidth: 3, dot: _jsx(Box, {}) }), _jsx(Line, { type: "monotone", strokeDasharray: "5 5", dataKey: "balance", stroke: colors.blue[8], strokeWidth: 3, dot: _jsx(Box, {}) })] }) })] }));
|
|
11
12
|
};
|