@thecb/components 3.4.2 → 3.5.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.
- package/dist/index.cjs.js +790 -392
- package/package.json +1 -1
- package/src/components/atoms/dropdown/Dropdown.js +2 -3
- package/src/components/atoms/icons/TimeoutImage.js +138 -0
- package/src/components/atoms/icons/index.js +2 -0
- package/src/components/molecules/index.js +1 -0
- package/src/components/molecules/obligation/modules/AutopayModalModule.js +1 -1
- package/src/components/molecules/timeout/Timeout.js +46 -0
- package/src/components/molecules/timeout/index.js +3 -0
- package/.tool-versions +0 -1
package/package.json
CHANGED
|
@@ -206,9 +206,8 @@ const Dropdown = ({
|
|
|
206
206
|
<Box
|
|
207
207
|
as="button"
|
|
208
208
|
background={isOpen ? themeValues.hoverColor : WHITE}
|
|
209
|
-
minHeight="52px"
|
|
210
209
|
width="100%"
|
|
211
|
-
padding="
|
|
210
|
+
padding="12px"
|
|
212
211
|
hoverStyles={`background-color: ${themeValues.hoverColor};`}
|
|
213
212
|
focusStyles={`background-color: ${themeValues.hoverColor};`}
|
|
214
213
|
borderSize="1px"
|
|
@@ -220,7 +219,7 @@ const Dropdown = ({
|
|
|
220
219
|
: GREY_CHATEAU
|
|
221
220
|
}
|
|
222
221
|
borderRadius="2px"
|
|
223
|
-
extraStyles={`tabindex: 0;`}
|
|
222
|
+
extraStyles={`tabindex: 0; height: 48px;`}
|
|
224
223
|
dataQa={placeholder}
|
|
225
224
|
>
|
|
226
225
|
<Stack direction="row" bottomItem={2}>
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
const TimeoutImage = () => {
|
|
4
|
+
return (
|
|
5
|
+
<svg
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
width="100%"
|
|
8
|
+
height="100%"
|
|
9
|
+
viewBox="0 0 458 308"
|
|
10
|
+
>
|
|
11
|
+
<g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
|
|
12
|
+
<g transform="translate(-492 -168)">
|
|
13
|
+
<g transform="translate(492 168)">
|
|
14
|
+
<path
|
|
15
|
+
fill="#EAF4EB"
|
|
16
|
+
d="M286.327 294.916c0 7.133-26.041 12.916-58.164 12.916-32.123 0-58.163-5.783-58.163-12.916S196.04 282 228.163 282s58.164 5.783 58.164 12.916"
|
|
17
|
+
></path>
|
|
18
|
+
<g
|
|
19
|
+
stroke="#45B770"
|
|
20
|
+
strokeLinecap="round"
|
|
21
|
+
strokeLinejoin="round"
|
|
22
|
+
strokeWidth="8.362"
|
|
23
|
+
transform="translate(204 268)"
|
|
24
|
+
>
|
|
25
|
+
<path d="M15.817 -2.13162821e-14L15.817 24.795 3.55271368e-15 24.795"></path>
|
|
26
|
+
<path d="M31.3102 -2.30926389e-14L31.3102 25.574 47.1272 25.574"></path>
|
|
27
|
+
</g>
|
|
28
|
+
<path
|
|
29
|
+
fill="#FEFEFE"
|
|
30
|
+
d="M107.968 73h239.721a6.969 6.969 0 016.969 6.968v178.398a6.969 6.969 0 01-6.969 6.968H107.968a6.968 6.968 0 01-6.968-6.968V79.968A6.968 6.968 0 01107.968 73"
|
|
31
|
+
></path>
|
|
32
|
+
<path fill="#E4E6EB" d="M101 99L355 99 355 73 101 73z"></path>
|
|
33
|
+
<g
|
|
34
|
+
stroke="#3B414D"
|
|
35
|
+
strokeLinecap="round"
|
|
36
|
+
strokeWidth="5.575"
|
|
37
|
+
transform="translate(197.811 141.913)"
|
|
38
|
+
>
|
|
39
|
+
<path
|
|
40
|
+
strokeLinejoin="round"
|
|
41
|
+
d="M0 5.575C1.168 2.317 4.16 0 7.666 0c3.505 0 6.497 2.317 7.665 5.575"
|
|
42
|
+
></path>
|
|
43
|
+
<path
|
|
44
|
+
strokeLinejoin="round"
|
|
45
|
+
d="M46 5.575C47.168 2.317 50.16 0 53.666 0c3.505 0 6.497 2.317 7.665 5.575"
|
|
46
|
+
></path>
|
|
47
|
+
<path
|
|
48
|
+
d="M50.38 44.087h0a6.886 6.886 0 01-6.886 6.886h-26.42a6.886 6.886 0 01-6.885-6.886"
|
|
49
|
+
transform="matrix(1 0 0 -1 0 95.06)"
|
|
50
|
+
></path>
|
|
51
|
+
</g>
|
|
52
|
+
<path
|
|
53
|
+
fill="#3B414D"
|
|
54
|
+
d="M124 83a3 3 0 110 6 3 3 0 010-6zm-10 0a3 3 0 110 6 3 3 0 010-6zm20 0a3 3 0 110 6 3 3 0 010-6z"
|
|
55
|
+
></path>
|
|
56
|
+
<path
|
|
57
|
+
stroke="#45B770"
|
|
58
|
+
strokeLinecap="round"
|
|
59
|
+
strokeLinejoin="round"
|
|
60
|
+
strokeWidth="8"
|
|
61
|
+
d="M99.441 205.181L77.181 224.512"
|
|
62
|
+
></path>
|
|
63
|
+
<path
|
|
64
|
+
stroke="#45B770"
|
|
65
|
+
strokeLinecap="round"
|
|
66
|
+
strokeLinejoin="round"
|
|
67
|
+
strokeWidth="8"
|
|
68
|
+
d="M412.8955 190.764648L381.126953 224.790039 356 205.267859"
|
|
69
|
+
></path>
|
|
70
|
+
<path
|
|
71
|
+
stroke="#45B770"
|
|
72
|
+
strokeLinecap="round"
|
|
73
|
+
strokeWidth="8"
|
|
74
|
+
d="M396.5 189.5L429.5 189.5"
|
|
75
|
+
></path>
|
|
76
|
+
<path
|
|
77
|
+
stroke="#45B770"
|
|
78
|
+
strokeLinecap="round"
|
|
79
|
+
strokeLinejoin="round"
|
|
80
|
+
strokeWidth="8"
|
|
81
|
+
d="M137.079 231.103a7.605 7.605 0 000 15.211h6.644"
|
|
82
|
+
></path>
|
|
83
|
+
<g transform="translate(377 63)">
|
|
84
|
+
<g>
|
|
85
|
+
<path
|
|
86
|
+
fill="#FFF"
|
|
87
|
+
d="M66.669 116.462H5.122a5.122 5.122 0 110-10.243h61.547a5.122 5.122 0 110 10.243"
|
|
88
|
+
></path>
|
|
89
|
+
<path
|
|
90
|
+
fill="#E4F4FD"
|
|
91
|
+
d="M15.126 71.521l20.77-13.29 20.769 13.29a19.123 19.123 0 018.815 16.106v18.591H6.311v-18.59c0-6.52 3.323-12.592 8.815-16.107z"
|
|
92
|
+
></path>
|
|
93
|
+
<path
|
|
94
|
+
fill="#E4F4FD"
|
|
95
|
+
d="M56.665 44.94l-20.77 13.292L15.126 44.94a19.12 19.12 0 01-8.815-16.106V10.244H65.48v18.59a19.12 19.12 0 01-8.815 16.107z"
|
|
96
|
+
></path>
|
|
97
|
+
<path
|
|
98
|
+
fill="#FFF"
|
|
99
|
+
d="M66.669 10.244H5.122A5.122 5.122 0 115.122 0h61.547a5.122 5.122 0 110 10.244z"
|
|
100
|
+
></path>
|
|
101
|
+
</g>
|
|
102
|
+
<g stroke="#3B414D" strokeLinecap="round" strokeWidth="6">
|
|
103
|
+
<path d="M66.669 116.462H5.122a5.122 5.122 0 110-10.243h61.547a5.122 5.122 0 110 10.243z"></path>
|
|
104
|
+
<path d="M15.126 71.521l20.77-13.29 20.769 13.29a19.123 19.123 0 018.815 16.106v18.591H6.311v-18.59c0-6.52 3.323-12.592 8.815-16.107z"></path>
|
|
105
|
+
<path d="M56.665 44.94l-20.77 13.292L15.126 44.94a19.12 19.12 0 01-8.815-16.106V10.244H65.48v18.59a19.12 19.12 0 01-8.815 16.107z"></path>
|
|
106
|
+
<path d="M66.669 10.244H5.122A5.122 5.122 0 115.122 0h61.547a5.122 5.122 0 110 10.244z"></path>
|
|
107
|
+
</g>
|
|
108
|
+
</g>
|
|
109
|
+
<path
|
|
110
|
+
stroke="#3B414D"
|
|
111
|
+
strokeLinecap="round"
|
|
112
|
+
strokeWidth="8"
|
|
113
|
+
d="M27.663 247.376l-15.18.348M401 248l-44.96-.276m-256.445-.348l-52.372.348M454 248h-34"
|
|
114
|
+
></path>
|
|
115
|
+
<path
|
|
116
|
+
stroke="#3B414D"
|
|
117
|
+
strokeWidth="6"
|
|
118
|
+
d="M107.969 73H347.69a6.969 6.969 0 016.968 6.969v178.397a6.968 6.968 0 01-6.968 6.968H107.969a6.969 6.969 0 01-6.969-6.968V79.969A6.969 6.969 0 01107.969 73zM104 99h248"
|
|
119
|
+
></path>
|
|
120
|
+
<path
|
|
121
|
+
stroke="#45B770"
|
|
122
|
+
strokeLinecap="round"
|
|
123
|
+
strokeLinejoin="round"
|
|
124
|
+
strokeWidth="8"
|
|
125
|
+
d="M77.181 224.512L127.905 236.375"
|
|
126
|
+
></path>
|
|
127
|
+
<path
|
|
128
|
+
fill="#B8E4F4"
|
|
129
|
+
d="M95.74 141.218c5.753 0 10.652 3.602 12.599 8.67a5.733 5.733 0 016.092 1.987 8.512 8.512 0 013.505-.757 8.557 8.557 0 110 17.114H81.002a8.557 8.557 0 111.69-16.945c1.523-5.792 6.78-10.069 13.049-10.069zM365.823 82c9.17 0 16.7 7.01 17.532 15.963a10.567 10.567 0 016.175-1.99c5.868 0 10.625 4.757 10.625 10.625 0 5.869-4.757 10.625-10.625 10.625h-48.094c-6.868 0-12.435-5.566-12.435-12.434 0-6.868 5.567-12.435 12.435-12.435 2.791 0 5.36.931 7.435 2.484C350.952 87.432 357.75 82 365.822 82zM23.296 75.456c5.752 0 10.651 3.602 12.598 8.669a5.733 5.733 0 011.559-.22c1.84 0 3.476.866 4.532 2.208a8.52 8.52 0 013.506-.757 8.557 8.557 0 110 17.114H8.557a8.557 8.557 0 111.69-16.945c1.523-5.792 6.78-10.07 13.049-10.07zM170.219 8.845c10.946 0 19.935 8.367 20.927 19.054a12.618 12.618 0 017.372-2.375c7.004 0 12.683 5.679 12.683 12.684 0 7.004-5.68 12.683-12.683 12.683h-57.41c-8.197 0-14.843-6.646-14.843-14.844 0-8.197 6.646-14.843 14.843-14.843 3.333 0 6.398 1.112 8.876 2.966 2.485-8.841 10.599-15.325 20.235-15.325zM297.892 0c5.752 0 10.651 3.602 12.598 8.669a5.728 5.728 0 011.56-.219c1.84 0 3.475.865 4.531 2.207a8.516 8.516 0 013.506-.757 8.557 8.557 0 110 17.114h-36.935a8.557 8.557 0 01-8.556-8.557 8.557 8.557 0 0110.248-8.388C286.366 4.277 291.622 0 297.892 0z"
|
|
130
|
+
></path>
|
|
131
|
+
</g>
|
|
132
|
+
</g>
|
|
133
|
+
</g>
|
|
134
|
+
</svg>
|
|
135
|
+
);
|
|
136
|
+
};
|
|
137
|
+
|
|
138
|
+
export default TimeoutImage;
|
|
@@ -18,6 +18,7 @@ import BankIcon from "./BankIcon";
|
|
|
18
18
|
import GenericCard from "./GenericCard";
|
|
19
19
|
import PaymentIcon from "./PaymentIcon";
|
|
20
20
|
import IconAdd from "./IconAdd";
|
|
21
|
+
import TimeoutImage from "./TimeoutImage";
|
|
21
22
|
import AutopayOnIcon from "./AutopayOnIcon";
|
|
22
23
|
|
|
23
24
|
export {
|
|
@@ -41,5 +42,6 @@ export {
|
|
|
41
42
|
GenericCard,
|
|
42
43
|
PaymentIcon,
|
|
43
44
|
IconAdd,
|
|
45
|
+
TimeoutImage,
|
|
44
46
|
AutopayOnIcon
|
|
45
47
|
};
|
|
@@ -26,4 +26,5 @@ export { default as ResetPasswordSuccess } from "./reset-password-success";
|
|
|
26
26
|
export { default as TabSidebar } from "./tab-sidebar";
|
|
27
27
|
export { default as TermsAndConditions } from "./terms-and-conditions";
|
|
28
28
|
export { default as TermsAndConditionsModal } from "./terms-and-conditions-modal";
|
|
29
|
+
export { default as Timeout } from "./timeout";
|
|
29
30
|
export { default as WorkflowTile } from "./workflow-tile";
|
|
@@ -34,7 +34,7 @@ const AutopayModal = ({
|
|
|
34
34
|
|
|
35
35
|
const hoverStyles = `
|
|
36
36
|
&:hover {
|
|
37
|
-
.autopayIcon { fill: ${themeValues.hoverColor}; text-decoration: underline; }
|
|
37
|
+
.autopayIcon { fill: ${themeValues.hoverColor}; text-decoration: underline; cursor: pointer; }
|
|
38
38
|
}`;
|
|
39
39
|
|
|
40
40
|
const activeStyles = `
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import React, { useContext } from "react";
|
|
2
|
+
import { ThemeContext } from "styled-components";
|
|
3
|
+
import { Box, Stack, Center, Cover } from "../../atoms/layouts";
|
|
4
|
+
import { TimeoutImage } from "../../atoms/icons";
|
|
5
|
+
import ButtonWithAction from "../../atoms/button-with-action";
|
|
6
|
+
import Heading from "../../atoms/heading";
|
|
7
|
+
import { FONT_WEIGHT_BOLD } from "../../../constants/style_constants";
|
|
8
|
+
import Paragraph from "../../atoms/paragraph";
|
|
9
|
+
import withWindowSize from "../../withWindowSize";
|
|
10
|
+
|
|
11
|
+
const Timeout = ({ onLogout }) => {
|
|
12
|
+
const { isMobile } = useContext(ThemeContext);
|
|
13
|
+
return (
|
|
14
|
+
<Cover>
|
|
15
|
+
<Center intrinsic>
|
|
16
|
+
<Box padding="0" maxWidth={isMobile ? "100%" : "500px"}>
|
|
17
|
+
<Stack childGap="32px" justify="center">
|
|
18
|
+
<Box padding={isMobile ? "1rem" : "0"}>
|
|
19
|
+
<TimeoutImage />
|
|
20
|
+
</Box>
|
|
21
|
+
<Box padding="0">
|
|
22
|
+
<Heading textAlign="center" weight={FONT_WEIGHT_BOLD}>
|
|
23
|
+
Request Timed Out
|
|
24
|
+
</Heading>
|
|
25
|
+
<Paragraph variant="pL" extraStyles={`text-align: center;`}>
|
|
26
|
+
That was taking longer than we expected and your request timed
|
|
27
|
+
out. Please log out, log back in, and then try again.
|
|
28
|
+
</Paragraph>
|
|
29
|
+
</Box>
|
|
30
|
+
<Center intrinsic>
|
|
31
|
+
<Box padding="0">
|
|
32
|
+
<ButtonWithAction
|
|
33
|
+
variant="primary"
|
|
34
|
+
text="Log out"
|
|
35
|
+
action={onLogout}
|
|
36
|
+
/>
|
|
37
|
+
</Box>
|
|
38
|
+
</Center>
|
|
39
|
+
</Stack>
|
|
40
|
+
</Box>
|
|
41
|
+
</Center>
|
|
42
|
+
</Cover>
|
|
43
|
+
);
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
export default withWindowSize(Timeout);
|
package/.tool-versions
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
nodejs 10.13.0
|