@thecb/components 3.5.10 → 3.5.12-beta.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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { AlertIcons, IconQuit } from "../../../deprecated/icons";
|
|
3
|
-
import { Box, Cluster, Stack, Cover, Sidebar } from "../layouts";
|
|
3
|
+
import { Box, Center, Cluster, Stack, Cover, Sidebar } from "../layouts";
|
|
4
4
|
import Text from "../text";
|
|
5
5
|
import { fallbackValues } from "./Alert.theme";
|
|
6
6
|
import { themeComponent } from "../../../util/themeUtils";
|
|
@@ -8,37 +8,34 @@ import { themeComponent } from "../../../util/themeUtils";
|
|
|
8
8
|
const Alert = ({
|
|
9
9
|
heading,
|
|
10
10
|
text,
|
|
11
|
+
textOverride,
|
|
11
12
|
variant,
|
|
12
13
|
children,
|
|
13
14
|
height,
|
|
14
15
|
onLinkClick,
|
|
16
|
+
padding = "0.5rem",
|
|
15
17
|
showQuitLink = true,
|
|
18
|
+
maxContentWidth,
|
|
16
19
|
themeValues
|
|
17
20
|
}) => {
|
|
18
21
|
const Icon = AlertIcons[variant];
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
</Cover>
|
|
37
|
-
</Box>
|
|
38
|
-
<Box padding="0">
|
|
39
|
-
<Sidebar onRight width="24px" childGap="0rem">
|
|
40
|
-
<Box padding="1rem">
|
|
41
|
-
<Cluster justify="flex-start" align="center">
|
|
22
|
+
|
|
23
|
+
const content = (
|
|
24
|
+
<Sidebar width="24px" childGap="0rem">
|
|
25
|
+
<Box padding="0 0 0 1rem" minHeight="100%">
|
|
26
|
+
<Cover minHeight="100%" singleChild>
|
|
27
|
+
<Box padding="0" width="1.5rem" minHeight="1.5rem">
|
|
28
|
+
<Icon />
|
|
29
|
+
</Box>
|
|
30
|
+
</Cover>
|
|
31
|
+
</Box>
|
|
32
|
+
<Box padding="0">
|
|
33
|
+
<Sidebar onRight width="24px" childGap="0rem">
|
|
34
|
+
<Box padding={`${padding} 1rem`}>
|
|
35
|
+
<Cluster justify="flex-start" align="center">
|
|
36
|
+
{textOverride ? (
|
|
37
|
+
textOverride
|
|
38
|
+
) : (
|
|
42
39
|
<Stack fullHeight childGap="0.25rem">
|
|
43
40
|
<Text variant="p" color={themeValues.text} weight="600">
|
|
44
41
|
{heading}
|
|
@@ -48,18 +45,37 @@ const Alert = ({
|
|
|
48
45
|
</Text>
|
|
49
46
|
{children}
|
|
50
47
|
</Stack>
|
|
51
|
-
</Cluster>
|
|
52
|
-
</Box>
|
|
53
|
-
<Cluster justify="flex-end" align="flex-start">
|
|
54
|
-
{showQuitLink && (
|
|
55
|
-
<Box padding="0" minHeight="100%" onClick={onLinkClick}>
|
|
56
|
-
<IconQuit />
|
|
57
|
-
</Box>
|
|
58
48
|
)}
|
|
59
49
|
</Cluster>
|
|
60
|
-
</
|
|
61
|
-
|
|
62
|
-
|
|
50
|
+
</Box>
|
|
51
|
+
<Cluster justify="flex-end" align="flex-start">
|
|
52
|
+
{showQuitLink && (
|
|
53
|
+
<Box padding="0" minHeight="100%" onClick={onLinkClick}>
|
|
54
|
+
<IconQuit />
|
|
55
|
+
</Box>
|
|
56
|
+
)}
|
|
57
|
+
</Cluster>
|
|
58
|
+
</Sidebar>
|
|
59
|
+
</Box>
|
|
60
|
+
</Sidebar>
|
|
61
|
+
);
|
|
62
|
+
|
|
63
|
+
return (
|
|
64
|
+
<Box
|
|
65
|
+
padding={padding}
|
|
66
|
+
width="100%"
|
|
67
|
+
minHeight={height && parseInt(height) < 100 ? height : "100px"}
|
|
68
|
+
height={height ? height : "auto"}
|
|
69
|
+
background={themeValues.background}
|
|
70
|
+
borderRadius="4px"
|
|
71
|
+
borderColor={themeValues.border}
|
|
72
|
+
borderSize="1px"
|
|
73
|
+
>
|
|
74
|
+
{maxContentWidth ? (
|
|
75
|
+
<Center maxWidth={maxContentWidth}>{content}</Center>
|
|
76
|
+
) : (
|
|
77
|
+
content
|
|
78
|
+
)}
|
|
63
79
|
</Box>
|
|
64
80
|
);
|
|
65
81
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { Fragment } from "react";
|
|
2
2
|
import Stack from "../layouts/Stack";
|
|
3
3
|
import Box from "../layouts/Box";
|
|
4
4
|
import Text from "../text";
|
|
@@ -48,7 +48,7 @@ const DisplayCard = ({
|
|
|
48
48
|
dataQa={buttonText}
|
|
49
49
|
extraStyles={`min-width: 0;`}
|
|
50
50
|
/>
|
|
51
|
-
) : (
|
|
51
|
+
) : buttonAction ? (
|
|
52
52
|
<ButtonWithAction
|
|
53
53
|
text={buttonText}
|
|
54
54
|
action={buttonAction}
|
|
@@ -56,6 +56,8 @@ const DisplayCard = ({
|
|
|
56
56
|
dataQa={buttonText}
|
|
57
57
|
extraStyles={`min-width: 0;`}
|
|
58
58
|
/>
|
|
59
|
+
) : (
|
|
60
|
+
<Fragment />
|
|
59
61
|
)}
|
|
60
62
|
</Cluster>
|
|
61
63
|
</Box>
|
|
@@ -160,9 +160,14 @@ const RadioSection = ({
|
|
|
160
160
|
/>
|
|
161
161
|
</Box>
|
|
162
162
|
)}
|
|
163
|
-
|
|
164
|
-
{section.
|
|
165
|
-
|
|
163
|
+
{section.titleIcon && (
|
|
164
|
+
<Cluster align="center">{section.titleIcon}</Cluster>
|
|
165
|
+
)}
|
|
166
|
+
<Box padding={section.titleIcon ? "0 0 0 8px" : "0"}>
|
|
167
|
+
<Text variant="p" color={CHARADE_GREY} aria-level="3">
|
|
168
|
+
{section.title}
|
|
169
|
+
</Text>
|
|
170
|
+
</Box>
|
|
166
171
|
</Cluster>
|
|
167
172
|
{section.rightIcons && (
|
|
168
173
|
<Cluster childGap="0.5rem">
|
package/.tool-versions
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
nodejs 10.15.3
|