@stack-spot/portal-components 2.11.0 → 2.11.1
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.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [2.11.1](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.11.0...portal-components@v2.11.1) (2025-01-03)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* banner style adjustments" ([c2263b4](https://github.com/stack-spot/portal-commons/commit/c2263b4c3befacdedb592afba688d8f31d48c524))
|
|
9
|
+
* Code Cleanup & adjustments ([2d0b4a8](https://github.com/stack-spot/portal-commons/commit/2d0b4a80c2eb9ddad7b91fabb4e5e39707f26239))
|
|
10
|
+
* lyout update libs banner ([#631](https://github.com/stack-spot/portal-commons/issues/631)) ([6d4ee46](https://github.com/stack-spot/portal-commons/commit/6d4ee46878395607d8cbf80d58c38a22681ece74))
|
|
11
|
+
|
|
3
12
|
## [2.11.0](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.10.4...portal-components@v2.11.0) (2024-12-27)
|
|
4
13
|
|
|
5
14
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerWarning.d.ts","sourceRoot":"","sources":["../../src/components/BannerWarning.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BannerWarning.d.ts","sourceRoot":"","sources":["../../src/components/BannerWarning.tsx"],"names":[],"mappings":"AAOA;;;;;GAKG;AACH,eAAO,MAAM,aAAa,iBAAkB;IAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;CAAE,mDA2ExE,CAAA"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
/* eslint-disable comma-dangle */
|
|
3
2
|
import { Button, Flex, IconBox, Text } from '@citric/core';
|
|
4
3
|
import { ExclamationTriangle, TimesCircleFill } from '@citric/icons';
|
|
5
4
|
import { Alert } from '@citric/ui';
|
|
6
5
|
import { useState } from 'react';
|
|
6
|
+
import { getCookie, setCookie } from '../utils/cookie.js';
|
|
7
7
|
/**
|
|
8
8
|
* A styled and dismissible alert box for showing important warnings for the user.
|
|
9
9
|
*
|
|
@@ -12,18 +12,10 @@ import { useState } from 'react';
|
|
|
12
12
|
*/
|
|
13
13
|
export const BannerWarning = ({ children }) => {
|
|
14
14
|
const bannerKey = 'bannerClosed';
|
|
15
|
-
const getCookie = (key) => document.cookie
|
|
16
|
-
.split('; ')
|
|
17
|
-
.find((row) => row.startsWith(`${key}=`))
|
|
18
|
-
?.split('=')[1];
|
|
19
|
-
const setCookie = (key, value, domain = '.stackspot.com') => {
|
|
20
|
-
document.cookie = `${key}=${value};path=/${location.host.endsWith(domain) ? `;domain=${domain}` : ''}`;
|
|
21
|
-
};
|
|
22
15
|
const [isVisible, setIsVisible] = useState(() => {
|
|
23
16
|
if (typeof window !== 'undefined') {
|
|
24
|
-
const isBannerValid = getCookie(bannerKey) !== 'expired';
|
|
25
17
|
const isBannerClosed = getCookie(bannerKey) === 'true';
|
|
26
|
-
return
|
|
18
|
+
return !isBannerClosed;
|
|
27
19
|
}
|
|
28
20
|
return false;
|
|
29
21
|
});
|
|
@@ -34,26 +26,22 @@ export const BannerWarning = ({ children }) => {
|
|
|
34
26
|
if (!isVisible) {
|
|
35
27
|
return null;
|
|
36
28
|
}
|
|
37
|
-
return (_jsx(Flex, {
|
|
38
|
-
height: '48px',
|
|
29
|
+
return (_jsx(Flex, { sx: { zIndex: '1', w: '12', mb: 7 }, children: _jsxs(Alert, { colorScheme: "warning", sx: {
|
|
39
30
|
position: 'relative',
|
|
40
31
|
px: 3,
|
|
41
|
-
py: 1
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
32
|
+
py: 1,
|
|
33
|
+
alignItems: 'center',
|
|
34
|
+
display: 'flex',
|
|
35
|
+
justifyContent: 'space-between',
|
|
36
|
+
height: 'auto',
|
|
37
|
+
}, children: [_jsxs(Flex, { sx: {
|
|
38
|
+
alignItems: 'center',
|
|
39
|
+
flexWrap: 'nowrap',
|
|
40
|
+
}, children: [_jsx(IconBox, { size: "sm", colorIcon: "light.500", children: _jsx(ExclamationTriangle, {}) }), _jsx(Text, { sx: {
|
|
41
|
+
ml: 5,
|
|
48
42
|
}, appearance: "body2", colorScheme: "warning.contrastText", children: children })] }), _jsx(Button, { appearance: 'text', onClick: handleClose, sx: {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
boxShadow: 'none'
|
|
53
|
-
},
|
|
54
|
-
ml: 2
|
|
55
|
-
}, children: _jsx(IconBox, { size: "lg", colorIcon: "light.500", sx: {
|
|
56
|
-
display: ['flex', 'flex']
|
|
57
|
-
}, children: _jsx(TimesCircleFill, {}) }) })] }) }));
|
|
43
|
+
p: 0,
|
|
44
|
+
ml: 2,
|
|
45
|
+
}, children: _jsx(IconBox, { size: "lg", colorIcon: "light.500", children: _jsx(TimesCircleFill, {}) }) })] }) }));
|
|
58
46
|
};
|
|
59
47
|
//# sourceMappingURL=BannerWarning.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerWarning.js","sourceRoot":"","sources":["../../src/components/BannerWarning.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"BannerWarning.js","sourceRoot":"","sources":["../../src/components/BannerWarning.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEtD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAiC,EAAE,EAAE;IAC3E,MAAM,SAAS,GAAG,cAAc,CAAA;IAEhC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC9C,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YAClC,MAAM,cAAc,GAAG,SAAS,CAAC,SAAS,CAAC,KAAK,MAAM,CAAA;YACtD,OAAO,CAAC,cAAc,CAAA;QACxB,CAAC;QACD,OAAO,KAAK,CAAA;IACd,CAAC,CAAC,CAAA;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;QAC5B,YAAY,CAAC,KAAK,CAAC,CAAA;IACrB,CAAC,CAAA;IAED,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,EAAE,YACvC,MAAC,KAAK,IACJ,WAAW,EAAC,SAAS,EACrB,EAAE,EAAE;gBACF,QAAQ,EAAE,UAAU;gBACpB,EAAE,EAAE,CAAC;gBACL,EAAE,EAAE,CAAC;gBACL,UAAU,EAAE,QAAQ;gBACpB,OAAO,EAAE,MAAM;gBACf,cAAc,EAAE,eAAe;gBAC/B,MAAM,EAAE,MAAM;aACf,aAED,MAAC,IAAI,IACH,EAAE,EAAE;wBACF,UAAU,EAAE,QAAQ;wBACpB,QAAQ,EAAE,QAAQ;qBACnB,aAED,KAAC,OAAO,IACN,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,WAAW,YAErB,KAAC,mBAAmB,KAAG,GACf,EACV,KAAC,IAAI,IACH,EAAE,EAAE;gCACF,EAAE,EAAC,CAAC;6BACL,EACD,UAAU,EAAC,OAAO,EAClB,WAAW,EAAC,sBAAsB,YAEjC,QAAQ,GACJ,IACF,EAEP,KAAC,MAAM,IACL,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,WAAW,EACpB,EAAE,EAAE;wBACF,CAAC,EAAE,CAAC;wBACJ,EAAE,EAAE,CAAC;qBACN,YAED,KAAC,OAAO,IACN,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,WAAW,YAErB,KAAC,eAAe,KAAG,GACX,GACH,IACH,GACH,CACR,CAAA;AACH,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
2
|
import { Button, Flex, IconBox, Text } from '@citric/core'
|
|
3
3
|
import { ExclamationTriangle, TimesCircleFill } from '@citric/icons'
|
|
4
4
|
import { Alert } from '@citric/ui'
|
|
5
5
|
import { useState } from 'react'
|
|
6
|
+
import { getCookie, setCookie } from '../utils/cookie'
|
|
6
7
|
|
|
7
8
|
/**
|
|
8
9
|
* A styled and dismissible alert box for showing important warnings for the user.
|
|
@@ -13,23 +14,10 @@ import { useState } from 'react'
|
|
|
13
14
|
export const BannerWarning = ({ children }: { children: React.ReactNode }) => {
|
|
14
15
|
const bannerKey = 'bannerClosed'
|
|
15
16
|
|
|
16
|
-
const getCookie = (key: string): string | undefined =>
|
|
17
|
-
document.cookie
|
|
18
|
-
.split('; ')
|
|
19
|
-
.find((row) => row.startsWith(`${key}=`))
|
|
20
|
-
?.split('=')[1]
|
|
21
|
-
|
|
22
|
-
const setCookie = (key: string, value: string, domain = '.stackspot.com') => {
|
|
23
|
-
document.cookie = `${key}=${value};path=/${
|
|
24
|
-
location.host.endsWith(domain) ? `;domain=${domain}` : ''
|
|
25
|
-
}`
|
|
26
|
-
}
|
|
27
|
-
|
|
28
17
|
const [isVisible, setIsVisible] = useState(() => {
|
|
29
18
|
if (typeof window !== 'undefined') {
|
|
30
|
-
const isBannerValid = getCookie(bannerKey) !== 'expired'
|
|
31
19
|
const isBannerClosed = getCookie(bannerKey) === 'true'
|
|
32
|
-
return
|
|
20
|
+
return !isBannerClosed
|
|
33
21
|
}
|
|
34
22
|
return false
|
|
35
23
|
})
|
|
@@ -44,32 +32,34 @@ export const BannerWarning = ({ children }: { children: React.ReactNode }) => {
|
|
|
44
32
|
}
|
|
45
33
|
|
|
46
34
|
return (
|
|
47
|
-
<Flex
|
|
35
|
+
<Flex sx={{ zIndex: '1', w: '12', mb: 7 }}>
|
|
48
36
|
<Alert
|
|
49
37
|
colorScheme="warning"
|
|
50
38
|
sx={{
|
|
51
|
-
height: '48px',
|
|
52
39
|
position: 'relative',
|
|
53
40
|
px: 3,
|
|
54
|
-
py: 1
|
|
41
|
+
py: 1,
|
|
42
|
+
alignItems: 'center',
|
|
43
|
+
display: 'flex',
|
|
44
|
+
justifyContent: 'space-between',
|
|
45
|
+
height: 'auto',
|
|
55
46
|
}}
|
|
56
47
|
>
|
|
57
|
-
<Flex
|
|
48
|
+
<Flex
|
|
49
|
+
sx={{
|
|
50
|
+
alignItems: 'center',
|
|
51
|
+
flexWrap: 'nowrap',
|
|
52
|
+
}}
|
|
53
|
+
>
|
|
58
54
|
<IconBox
|
|
59
55
|
size="sm"
|
|
60
56
|
colorIcon="light.500"
|
|
61
|
-
sx={{
|
|
62
|
-
display: ['flex', 'flex'],
|
|
63
|
-
mr: 2,
|
|
64
|
-
mb: 2
|
|
65
|
-
}}
|
|
66
57
|
>
|
|
67
58
|
<ExclamationTriangle />
|
|
68
59
|
</IconBox>
|
|
69
|
-
|
|
70
60
|
<Text
|
|
71
61
|
sx={{
|
|
72
|
-
|
|
62
|
+
ml:5,
|
|
73
63
|
}}
|
|
74
64
|
appearance="body2"
|
|
75
65
|
colorScheme="warning.contrastText"
|
|
@@ -77,24 +67,18 @@ export const BannerWarning = ({ children }: { children: React.ReactNode }) => {
|
|
|
77
67
|
{children}
|
|
78
68
|
</Text>
|
|
79
69
|
</Flex>
|
|
70
|
+
|
|
80
71
|
<Button
|
|
81
72
|
appearance={'text'}
|
|
82
73
|
onClick={handleClose}
|
|
83
74
|
sx={{
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
':hover': {
|
|
87
|
-
boxShadow: 'none'
|
|
88
|
-
},
|
|
89
|
-
ml: 2
|
|
75
|
+
p: 0,
|
|
76
|
+
ml: 2,
|
|
90
77
|
}}
|
|
91
78
|
>
|
|
92
79
|
<IconBox
|
|
93
80
|
size="lg"
|
|
94
81
|
colorIcon="light.500"
|
|
95
|
-
sx={{
|
|
96
|
-
display: ['flex', 'flex']
|
|
97
|
-
}}
|
|
98
82
|
>
|
|
99
83
|
<TimesCircleFill />
|
|
100
84
|
</IconBox>
|