@thecb/components 3.5.12-beta.0 → 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/dist/index.cjs.js
CHANGED
|
@@ -14303,18 +14303,10 @@ var Alert = function Alert(_ref) {
|
|
|
14303
14303
|
padding = _ref$padding === void 0 ? "0.5rem" : _ref$padding,
|
|
14304
14304
|
_ref$showQuitLink = _ref.showQuitLink,
|
|
14305
14305
|
showQuitLink = _ref$showQuitLink === void 0 ? true : _ref$showQuitLink,
|
|
14306
|
+
maxContentWidth = _ref.maxContentWidth,
|
|
14306
14307
|
themeValues = _ref.themeValues;
|
|
14307
14308
|
var Icon = AlertIcons[variant];
|
|
14308
|
-
|
|
14309
|
-
padding: padding,
|
|
14310
|
-
width: "100%",
|
|
14311
|
-
minHeight: height && parseInt(height) < 100 ? height : "100px",
|
|
14312
|
-
height: height ? height : "auto",
|
|
14313
|
-
background: themeValues.background,
|
|
14314
|
-
borderRadius: "4px",
|
|
14315
|
-
borderColor: themeValues.border,
|
|
14316
|
-
borderSize: "1px"
|
|
14317
|
-
}, /*#__PURE__*/React__default.createElement(Sidebar, {
|
|
14309
|
+
var content = /*#__PURE__*/React__default.createElement(Sidebar, {
|
|
14318
14310
|
width: "24px",
|
|
14319
14311
|
childGap: "0rem"
|
|
14320
14312
|
}, /*#__PURE__*/React__default.createElement(Box, {
|
|
@@ -14355,7 +14347,19 @@ var Alert = function Alert(_ref) {
|
|
|
14355
14347
|
padding: "0",
|
|
14356
14348
|
minHeight: "100%",
|
|
14357
14349
|
onClick: onLinkClick
|
|
14358
|
-
}, /*#__PURE__*/React__default.createElement(IconQuit, null))))))
|
|
14350
|
+
}, /*#__PURE__*/React__default.createElement(IconQuit, null))))));
|
|
14351
|
+
return /*#__PURE__*/React__default.createElement(Box, {
|
|
14352
|
+
padding: padding,
|
|
14353
|
+
width: "100%",
|
|
14354
|
+
minHeight: height && parseInt(height) < 100 ? height : "100px",
|
|
14355
|
+
height: height ? height : "auto",
|
|
14356
|
+
background: themeValues.background,
|
|
14357
|
+
borderRadius: "4px",
|
|
14358
|
+
borderColor: themeValues.border,
|
|
14359
|
+
borderSize: "1px"
|
|
14360
|
+
}, maxContentWidth ? /*#__PURE__*/React__default.createElement(Center, {
|
|
14361
|
+
maxWidth: maxContentWidth
|
|
14362
|
+
}, content) : content);
|
|
14359
14363
|
};
|
|
14360
14364
|
|
|
14361
14365
|
var Alert$1 = themeComponent(Alert, "Alert", fallbackValues$4, "info");
|
|
@@ -18135,13 +18139,13 @@ var DisplayCard = function DisplayCard(_ref) {
|
|
|
18135
18139
|
variant: "smallGhost",
|
|
18136
18140
|
dataQa: buttonText,
|
|
18137
18141
|
extraStyles: "min-width: 0;"
|
|
18138
|
-
}) : /*#__PURE__*/React__default.createElement(ButtonWithAction, {
|
|
18142
|
+
}) : buttonAction ? /*#__PURE__*/React__default.createElement(ButtonWithAction, {
|
|
18139
18143
|
text: buttonText,
|
|
18140
18144
|
action: buttonAction,
|
|
18141
18145
|
variant: "smallGhost",
|
|
18142
18146
|
dataQa: buttonText,
|
|
18143
18147
|
extraStyles: "min-width: 0;"
|
|
18144
|
-
}))))));
|
|
18148
|
+
}) : /*#__PURE__*/React__default.createElement(React.Fragment, null))))));
|
|
18145
18149
|
};
|
|
18146
18150
|
|
|
18147
18151
|
var src = createCommonjsModule(function (module, exports) {
|
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";
|
|
@@ -15,9 +15,51 @@ const Alert = ({
|
|
|
15
15
|
onLinkClick,
|
|
16
16
|
padding = "0.5rem",
|
|
17
17
|
showQuitLink = true,
|
|
18
|
+
maxContentWidth,
|
|
18
19
|
themeValues
|
|
19
20
|
}) => {
|
|
20
21
|
const Icon = AlertIcons[variant];
|
|
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
|
+
) : (
|
|
39
|
+
<Stack fullHeight childGap="0.25rem">
|
|
40
|
+
<Text variant="p" color={themeValues.text} weight="600">
|
|
41
|
+
{heading}
|
|
42
|
+
</Text>
|
|
43
|
+
<Text variant="pS" color={themeValues.text}>
|
|
44
|
+
{text}
|
|
45
|
+
</Text>
|
|
46
|
+
{children}
|
|
47
|
+
</Stack>
|
|
48
|
+
)}
|
|
49
|
+
</Cluster>
|
|
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
|
+
|
|
21
63
|
return (
|
|
22
64
|
<Box
|
|
23
65
|
padding={padding}
|
|
@@ -29,43 +71,11 @@ const Alert = ({
|
|
|
29
71
|
borderColor={themeValues.border}
|
|
30
72
|
borderSize="1px"
|
|
31
73
|
>
|
|
32
|
-
|
|
33
|
-
<
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
</Box>
|
|
38
|
-
</Cover>
|
|
39
|
-
</Box>
|
|
40
|
-
<Box padding="0">
|
|
41
|
-
<Sidebar onRight width="24px" childGap="0rem">
|
|
42
|
-
<Box padding={`${padding} 1rem`}>
|
|
43
|
-
<Cluster justify="flex-start" align="center">
|
|
44
|
-
{textOverride ? (
|
|
45
|
-
textOverride
|
|
46
|
-
) : (
|
|
47
|
-
<Stack fullHeight childGap="0.25rem">
|
|
48
|
-
<Text variant="p" color={themeValues.text} weight="600">
|
|
49
|
-
{heading}
|
|
50
|
-
</Text>
|
|
51
|
-
<Text variant="pS" color={themeValues.text}>
|
|
52
|
-
{text}
|
|
53
|
-
</Text>
|
|
54
|
-
{children}
|
|
55
|
-
</Stack>
|
|
56
|
-
)}
|
|
57
|
-
</Cluster>
|
|
58
|
-
</Box>
|
|
59
|
-
<Cluster justify="flex-end" align="flex-start">
|
|
60
|
-
{showQuitLink && (
|
|
61
|
-
<Box padding="0" minHeight="100%" onClick={onLinkClick}>
|
|
62
|
-
<IconQuit />
|
|
63
|
-
</Box>
|
|
64
|
-
)}
|
|
65
|
-
</Cluster>
|
|
66
|
-
</Sidebar>
|
|
67
|
-
</Box>
|
|
68
|
-
</Sidebar>
|
|
74
|
+
{maxContentWidth ? (
|
|
75
|
+
<Center maxWidth={maxContentWidth}>{content}</Center>
|
|
76
|
+
) : (
|
|
77
|
+
content
|
|
78
|
+
)}
|
|
69
79
|
</Box>
|
|
70
80
|
);
|
|
71
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>
|